diff --git a/.github/ISSUE_TEMPLATE/user-story-template.md b/.github/ISSUE_TEMPLATE/user-story-template.md
index 25c84b1810..d8836493b1 100644
--- a/.github/ISSUE_TEMPLATE/user-story-template.md
+++ b/.github/ISSUE_TEMPLATE/user-story-template.md
@@ -20,7 +20,7 @@ As DevOps I want Health liveness Probe on the microservice so that the health of
 **Acceptance Criteria:**
 
 - [ ] [LIST ITEMS]  
-      i.e.
+       i.e.
 
 - [ ] Negative use-cases for Unit Tests in the "common streaming library"
 - [ ] Integration tests in the "common streaming library"
diff --git a/.prettierignore b/.prettierignore
index 1aa0e755ce..e4eedf0017 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,7 +1,6 @@
 /dist
 /node_modules
 **/.git
-*.html
 *.js
 *.json
 *.ts
diff --git a/src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html b/src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html
index 4407009bb7..70a52366e6 100644
--- a/src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html
+++ b/src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html
@@ -1,244 +1,282 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="createStandingInstructionsForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.name.hasError('required')">
-              {{"labels.inputs.name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.inputs.required" | translate}}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.inputs.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Applicant" | translate}}</mat-label>
-            <input matInput formControlName="applicant">
+            <mat-label>{{ 'labels.inputs.Applicant' | translate }}</mat-label>
+            <input matInput formControlName="applicant" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="transferType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let transferType of transferTypeData" [value]="transferType.id">
                 {{ transferType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.transferType.hasError('required')">
-              {{"labels.inputs.Transfer Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.inputs.required" | translate}}</strong>
+              {{ 'labels.inputs.Transfer Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.inputs.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{  "labels.inputs.Priority" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
               <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
                 {{ priorityType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.priority.hasError('required')">
-              {{"labels.inputs.Priority" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Priority' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Status" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
                 {{ statusType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.status.hasError('required')">
-              {{"labels.inputs.Status" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.From Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let fromAccountType of fromAccountTypeData" [value]="fromAccountType.id">
                 {{ fromAccountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountType.hasError('required')">
-              {{"labels.inputs.From Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.From Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let fromAccount of fromAccountData" [value]="fromAccount.id">
                 {{ fromAccount.productName }} - {{ fromAccount.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.fromAccountId.hasError('required')">
-              {{"labels.inputs.From Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Destination" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
             <mat-select required formControlName="destination">
               <mat-option *ngFor="let destinationType of destinationTypeData" [value]="destinationType.id">
                 {{ destinationType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.destination.hasError('required')">
-              {{"labels.inputs.Destination" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Destination' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
             <mat-select [disabled]="ToOfficeId" required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
                 {{ toOfficeType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toOfficeId.hasError('required')">
-              {{"labels.inputs.To Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.To Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Beneficiary" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
             <mat-select [disabled]="ToClientId" required formControlName="toClientId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toClientType of toClientTypeData" [value]="toClientType.id">
                 {{ toClientType.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toClientId.hasError('required')">
-              {{"labels.inputs.Beneficiary" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Beneficiary' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
                 {{ toAccountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountType.hasError('required')">
-              {{"labels.inputs.To Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.To Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
                 {{ toAccount.productName }} - {{ toAccount.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.toAccountId.hasError('required')">
-              {{"labels.inputs.To Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.To Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Standing Instruction Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
               <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
                 {{ instructionsType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.instructionType.hasError('required')">
-              {{"labels.inputs.Standing Instruction Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Standing Instruction Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-            <input type="number" matInput required formControlName="amount">
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="amount" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity from" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
-              formControlName="validFrom">
+            <mat-label>{{ 'labels.inputs.Validity from' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validFromDatePicker"
+              required
+              formControlName="validFrom"
+            />
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.validFrom.hasError('required')">
-              {{"labels.inputs.Valid From Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%"  (click)="validTillDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity To" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
-              formControlName="validTill">
+          <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Validity To' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validTillDatePicker"
+              required
+              formControlName="validTill"
+            />
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.validTill.hasError('required')">
-              {{"labels.inputs.Valid Till Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid Till Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Recurrence Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
               <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
                 {{ recurrenceType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceType.hasError('required')">
-              {{"labels.inputs.Recurrence Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Interval" | translate}}</mat-label>
-            <input type="number" matInput required formControlName="recurrenceInterval">
+            <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="recurrenceInterval" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')">
-              {{"labels.inputs.Recurrence Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Recurrence Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceFrequency">
-              <mat-option *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
-                [value]="recurrenceFrequencyType.id">
+              <mat-option
+                *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                [value]="recurrenceFrequencyType.id"
+              >
                 {{ recurrenceFrequencyType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceFrequency.hasError('required')">
-              {{"labels.inputs.Recurrence Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%"  (click)="recurrenceOnMonthDayDatePicker.open()">
-            <mat-label>{{"labels.inputs.On Month Day" | translate}}</mat-label>
-            <input required matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
-              formControlName="recurrenceOnMonthDay">
+          <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.On Month Day' | translate }}</mat-label>
+            <input
+              required
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="recurrenceOnMonthDayDatePicker"
+              formControlName="recurrenceOnMonthDay"
+            />
             <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceOnMonthDay.hasError('required')">
-              {{"labels.inputs.On Month Day" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.On Month Day' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!createStandingInstructionsForm.valid" *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
-          (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!createStandingInstructionsForm.valid"
+          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
+          (click)="submit()"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html b/src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html
index f5c10b4b38..d6ec2be69c 100644
--- a/src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html
+++ b/src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html
@@ -1,171 +1,193 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editStandingInstructionsForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-            <input matInput formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput formControlName="name" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Applicant" | translate}}</mat-label>
-            <input matInput formControlName="applicant">
+            <mat-label>{{ 'labels.inputs.Applicant' | translate }}</mat-label>
+            <input matInput formControlName="applicant" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Type" | translate}}</mat-label>
-            <input matInput formControlName="type">
+            <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
+            <input matInput formControlName="type" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.From Account Type" | translate}}</mat-label>
-            <input matInput formControlName="fromAccountType">
+            <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
+            <input matInput formControlName="fromAccountType" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Priority" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
               <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
                 {{ priorityType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.priority.hasError('required')">
-              {{"labels.inputs.Priority" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Priority' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Status" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
                 {{ statusType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.status.hasError('required')">
-              {{"labels.inputs.Status" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.From Account" | translate}}</mat-label>
-            <input matInput formControlName="fromAccount">
+            <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
+            <input matInput formControlName="fromAccount" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Destination" | translate}}</mat-label>
-            <input matInput formControlName="destination">
+            <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
+            <input matInput formControlName="destination" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Office" | translate}}</mat-label>
-            <input matInput formControlName="toOffice">
+            <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
+            <input matInput formControlName="toOffice" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Beneficiary" | translate}}</mat-label>
-            <input matInput formControlName="toClientId">
+            <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
+            <input matInput formControlName="toClientId" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Account Type" | translate}}</mat-label>
-            <input matInput formControlName="toAccountType">
+            <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
+            <input matInput formControlName="toAccountType" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.To Account" | translate}}</mat-label>
-            <input matInput formControlName="toAccount">
+            <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
+            <input matInput formControlName="toAccount" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Standing Instruction Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
-              <mat-option *ngFor="let instructionsType of instructionTypeData"
-                [value]="instructionsType.id">
+              <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
                 {{ instructionsType.value }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-            <input matInput formControlName="amount">
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+            <input matInput formControlName="amount" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity from" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
-              formControlName="validFrom">
+            <mat-label>{{ 'labels.inputs.Validity from' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validFromDatePicker"
+              required
+              formControlName="validFrom"
+            />
             <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validFromDatePicker></mat-datepicker>
             <mat-error *ngIf="editStandingInstructionsForm.controls.validFrom.hasError('required')">
-              {{"labels.inputs.Valid From Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
-            <mat-label>{{"labels.inputs.Validity To" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
-              formControlName="validTill">
+            <mat-label>{{ 'labels.inputs.Validity To' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="validTillDatePicker"
+              required
+              formControlName="validTill"
+            />
             <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #validTillDatePicker></mat-datepicker>
             <mat-error *ngIf="editStandingInstructionsForm.controls.validTill.hasError('required')">
-              {{"labels.inputs.Valid Till Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Valid Till Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Recurrence Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
               <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
                 {{ recurrenceType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editStandingInstructionsForm.controls.recurrenceType.hasError('required')">
-              {{"labels.inputs.Recurrence Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Recurrence Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Interval" | translate}}</mat-label>
-            <input matInput formControlName="recurrenceInterval">
+            <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
+            <input matInput formControlName="recurrenceInterval" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Recurrence Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select formControlName="recurrenceFrequency">
-              <mat-option *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
-                [value]="recurrenceFrequencyType.id">
+              <mat-option
+                *ngFor="let recurrenceFrequencyType of recurrenceFrequencyTypeData"
+                [value]="recurrenceFrequencyType.id"
+              >
                 {{ recurrenceFrequencyType.value }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
-            <mat-label>{{"labels.inputs.On Month Day" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
-              formControlName="recurrenceOnMonthDay">
+            <mat-label>{{ 'labels.inputs.On Month Day' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="recurrenceOnMonthDayDatePicker"
+              formControlName="recurrenceOnMonthDay"
+            />
             <mat-datepicker-toggle matSuffix [for]="recurrenceOnMonthDayDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #recurrenceOnMonthDayDatePicker></mat-datepicker>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../view']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!editStandingInstructionsForm.valid"
-        (click)="submit()" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../view']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!editStandingInstructionsForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html b/src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html
index a5413f211f..8438c817ef 100644
--- a/src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html
+++ b/src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html
@@ -1,10 +1,8 @@
 <mat-card class="container">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <div fxFlexFill *ngIf="isFromClient">
       <span fxFlex="40%">
-        <h3 class="mat-h3">{{"labels.heading.Client Type" | translate}}</h3>
+        <h3 class="mat-h3">{{ 'labels.heading.Client Type' | translate }}</h3>
       </span>
       <span fxFlex="60%">
         <h3 class="mat-h3">{{ clientName }}</h3>
@@ -13,17 +11,17 @@ <h3 class="mat-h3">{{ clientName }}</h3>
 
     <div fxFlexFill *ngIf="!isFromClient">
       <mat-form-field fxFlex="30%">
-        <input matInput placeholder="ClientName" [formControl]="clientNameControl">
+        <input matInput placeholder="ClientName" [formControl]="clientNameControl" />
       </mat-form-field>
       <mat-form-field fxFlex="30%">
-        <input matInput placeholder="From Client Id" [formControl]="fromClientId">
+        <input matInput placeholder="From Client Id" [formControl]="fromClientId" />
       </mat-form-field>
     </div>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{"labels.inputs.Type" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select [formControl]="transferType">
         <mat-option *ngFor="let transferTypeData of transferTypeDatas" [value]="transferTypeData.id">
           {{ transferTypeData.value }}
@@ -32,80 +30,102 @@ <h3 class="mat-h3">{{ clientName }}</h3>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <input matInput placeholder="From Account Id" [formControl]="fromAccountId">
+      <input matInput placeholder="From Account Id" [formControl]="fromAccountId" />
     </mat-form-field>
 
-    <button mat-raised-button color="primary" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'" (click)="filterStandingInstructions()" class="filter-button">
-      &nbsp;&nbsp;{{  "labels.buttons.Filter" | translate}}
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+      (click)="filterStandingInstructions()"
+      class="filter-button"
+    >
+      &nbsp;&nbsp;{{ 'labels.buttons.Filter' | translate }}
     </button>
   </div>
 
-
   <table mat-table #instructionsTable [dataSource]="dataSource">
-
     <ng-container matColumnDef="client">
-      <th mat-header-cell *matHeaderCellDef> {{  "labels.inputs.Client" | translate}} </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+      <td mat-cell *matCellDef="let instruction">
+        {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="fromAccount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate}} </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}}
-        ({{instruction.fromAccountType.value}})</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
+      <td mat-cell *matCellDef="let instruction">
+        {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="beneficiary">
-      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Beneficiary" | translate}} </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
+      <td mat-cell *matCellDef="let instruction">{{ instruction.toClient.displayName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="toAccount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate}} </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}}
-        ({{instruction.toAccountType.value}})</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
+      <td mat-cell *matCellDef="let instruction">
+        {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
     </ng-container>
 
     <ng-container matColumnDef="validity">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate}} </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+      <td mat-cell *matCellDef="let instruction">
+        {{ instruction.validFrom | dateFormat }} to {{ instruction.validTill | dateFormat }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> {{  "labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let instruction">
-        <span *ngIf="instruction.status.value!=='Deleted'">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate}}"
+        <span *ngIf="instruction.status.value !== 'Deleted'">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
             *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
-            [routerLink]="['../', instruction.id, 'edit']">
+            [routerLink]="['../', instruction.id, 'edit']"
+          >
             <i class="fa fa-edit"></i>
           </button>
         </span>
-        <span *ngIf="instruction.status.value!=='Deleted'">
-          <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate}}"
-            *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+        <span *ngIf="instruction.status.value !== 'Deleted'">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="warn"
+            matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+            *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+            (click)="deleteStandingInstruction(instruction.id)"
+          >
             <i class="fa fa-times"></i>
           </button>
         </span>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate}}"
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
           *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
-          [routerLink]="['../', instruction.id, 'view']">
+          [routerLink]="['../', instruction.id, 'view']"
+        >
           <i class="fa fa-eye"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </mat-card>
diff --git a/src/app/account-transfers/list-transactions/list-transactions.component.html b/src/app/account-transfers/list-transactions/list-transactions.component.html
index 0d3fc1a1af..9b7b5d8653 100644
--- a/src/app/account-transfers/list-transactions/list-transactions.component.html
+++ b/src/app/account-transfers/list-transactions/list-transactions.component.html
@@ -1,13 +1,9 @@
 <div class="container m-b-20">
-
   <mat-card class="mat-elevation-z8">
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-          {{"labels.inputs.From Account" | translate}}
+          {{ 'labels.inputs.From Account' | translate }}
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -15,7 +11,7 @@
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-          {{"labels.inputs.To Account" | translate}}
+          {{ 'labels.inputs.To Account' | translate }}
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -23,51 +19,42 @@
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-          {{"labels.inputs.Destination" | translate}}
+          {{ 'labels.inputs.Destination' | translate }}
         </div>
 
         <div fxFlex="25%" fxFlex.lt-md="50%">
           {{ listTransactionData.toClient.displayName }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <div class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource">
-
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date | translate}} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferDate | dateFormat }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Transaction Date | translate}}</th>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.transferDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferAmount }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.transferAmount }}</td>
     </ng-container>
 
     <ng-container matColumnDef="notes">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Notes | translate}} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferDescription }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Notes | translate}}</th>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.transferDescription }}</td>
     </ng-container>
 
     <ng-container matColumnDef="reversed">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Reversed" | translate}} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.reversed | yesNo}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Reversed' | translate }}</th>
+      <td mat-cell *matCellDef="let transaction">{{ transaction.reversed | yesNo }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
-    </tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </div>
diff --git a/src/app/account-transfers/make-account-transfers/make-account-transfers.component.html b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.html
index 60cffe6fc6..f5cc2bc6fc 100644
--- a/src/app/account-transfers/make-account-transfers/make-account-transfers.component.html
+++ b/src/app/account-transfers/make-account-transfers/make-account-transfers.component.html
@@ -1,79 +1,84 @@
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferring From Details" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferring From Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Applicant" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.fromClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Office" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.fromOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account" | translate}}</span>
-          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccount.productName}}&nbsp;-&nbsp;#{{
-            accountTransferTemplateData.fromAccount.accountNo }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}</span>
+          <span fxFlex="60%"
+            >{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
+              accountTransferTemplateData.fromAccount.accountNo
+            }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account Type" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.fromAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Currency" | translate}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
           <span fxFlex="60%">{{ accountTransferTemplateData.currency.name }}</span>
         </div>
-
       </div>
 
-      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred To" | translate}}</h3>
+      <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred To' | translate }}</h3>
 
       <mat-divider [inset]="true"></mat-divider>
 
       <form [formGroup]="makeAccountTransferForm">
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="98%" (click)="transferDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
-              formControlName="transferDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transferDatePicker"
+              required
+              formControlName="transferDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
                 {{ toOfficeType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Client" | translate}}</mat-label>
-            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete">
+            <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
+            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete" />
             <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
-              {{"labels.inputs.Client" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -84,59 +89,70 @@ <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred To" | translate}}</h
           </mat-autocomplete>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
                 {{ toAccountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
-              {{"labels.inputs.Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
                 {{ toAccount.productName }} - {{ toAccount.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.hasError('required')">
-              {{"labels.inputs.Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-            <input type="number" matInput required formControlName="transferAmount">
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="transferAmount" />
             <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
-            <textarea matInput formControlName="transferDescription" cdkTextareaAutosize
-              cdkAutosizeMinRows="2"></textarea>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+            <textarea
+              matInput
+              formControlName="transferDescription"
+              cdkTextareaAutosize
+              cdkAutosizeMinRows="2"
+            ></textarea>
             <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
-              {{"labels.inputs.Transfer Description" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
-
           </mat-form-field>
-
         </div>
-
       </form>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../..']">{{"labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid"
-        *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../..']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="!makeAccountTransferForm.valid"
+        *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
+        (click)="submit()"
+      >
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
index 201165e3c5..4cb4f190e8 100644
--- a/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
+++ b/src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
@@ -1,97 +1,103 @@
 <div class="container">
   <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
     <span *ngIf="!viewAccountTransferData.reversed">
-      <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'" >
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate}}
+      <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'">
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
       </button>
     </span>
   </div>
 
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
         <div fxFlex="100%" [ngClass]="transactionColor()"></div>
 
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transaction Details" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transaction Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Transaction Amount" | translate}}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.currency.displaySymbol }} {{ viewAccountTransferData.transferAmount | formatNumber }} ({{ viewAccountTransferData.currency.code }})</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ viewAccountTransferData.currency.displaySymbol }}
+            {{ viewAccountTransferData.transferAmount | formatNumber }} ({{
+              viewAccountTransferData.currency.code
+            }})</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Transaction Date" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Destination" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Destination' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.transferDescription }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred From" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred From' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Office" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Client" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Client' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account No" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account No' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Transferred To" | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred To' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Office" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.toOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Client" | translate}}:</span>
-          <span fxFlex="60%"><a [href]="transferToClient(viewAccountTransferData.toClient)">
-            {{ viewAccountTransferData.toClient.displayName }}</a>
+          <span fxFlex="40%">{{ 'labels.inputs.Client' | translate }}:</span>
+          <span fxFlex="60%"
+            ><a [href]="transferToClient(viewAccountTransferData.toClient)">
+              {{ viewAccountTransferData.toClient.displayName }}</a
+            >
           </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ viewAccountTransferData.toAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Account No" | translate}}:</span>
-          <span fxFlex="60%"><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
-            {{ viewAccountTransferData.toAccount.accountNo }}</a>
+          <span fxFlex="40%">{{ 'labels.inputs.Account No' | translate }}:</span>
+          <span fxFlex="60%"
+            ><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
+              {{ viewAccountTransferData.toAccount.accountNo }}</a
+            >
           </span>
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>
diff --git a/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html b/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html
index 5d49fd95c9..2f1a60c0f0 100644
--- a/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html
+++ b/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html
@@ -1,122 +1,128 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../', 'edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-   {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="primary" [routerLink]="['../', 'list-account-transactions']" *mifosxHasPermission="'READ_ACCOUNTTRANSFER'">
-    {{"labels.buttons.View Transactions History" | translate}}
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['../', 'list-account-transactions']"
+    *mifosxHasPermission="'READ_ACCOUNTTRANSFER'"
+  >
+    {{ 'labels.buttons.View Transactions History' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <h2 class="mat-h2" fxFlexFill>{{ standingInstructionsData.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Applicant" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.fromClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.transferType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Priority" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Priority' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.priority.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{  "labels.inputs.Status" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Status' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.status.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.fromAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.From Account" | translate}}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.fromAccount.productName }} - {{ standingInstructionsData.fromAccount.accountNo }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ standingInstructionsData.fromAccount.productName }} -
+            {{ standingInstructionsData.fromAccount.accountNo }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Destination" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Destination' | translate }}:</span>
           <span fxFlex="60%">
-            <span *ngIf="allowclientedit"> {{"labels.inputs.Within Bank" | translate}} </span>
-            <span *ngIf="!allowclientedit"> {{"labels.inputs.Own Account" | translate}} </span>
+            <span *ngIf="allowclientedit"> {{ 'labels.inputs.Within Bank' | translate }} </span>
+            <span *ngIf="!allowclientedit"> {{ 'labels.inputs.Own Account' | translate }} </span>
           </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.To Office" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.To Office' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.toOffice.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Beneficiary" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Beneficiary' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.toClient.displayName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.To Account Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.To Account Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.toAccountType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.To Account" | translate}}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.toAccount.productName }} - {{standingInstructionsData.toAccount.accountNo}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.To Account' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ standingInstructionsData.toAccount.productName }} -
+            {{ standingInstructionsData.toAccount.accountNo }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Standing Instruction Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Standing Instruction Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.instructionType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Amount" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Amount' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.amount }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Validity" | translate}}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.validFrom | dateFormat }} - {{ standingInstructionsData.validTill | dateFormat }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Validity' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ standingInstructionsData.validFrom | dateFormat }} -
+            {{ standingInstructionsData.validTill | dateFormat }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Recurrence Type" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Recurrence Type' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Interval" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interval' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceInterval }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.Recurrence Frequency" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Recurrence Frequency' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceFrequency.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{"labels.inputs.On Month Day" | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.On Month Day' | translate }}:</span>
           <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay | dateFormat }}</span>
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.html b/src/app/accounting/accounting-rules/accounting-rules.component.html
index 44f78ae3aa..fa0e6567f3 100644
--- a/src/app/accounting/accounting-rules/accounting-rules.component.html
+++ b/src/app/accounting/accounting-rules/accounting-rules.component.html
@@ -1,60 +1,63 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Add Rule" | translate}}
+    {{ 'labels.buttons.Add Rule' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debitTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Tags" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitTags }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit Tags' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.debitTags }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debitAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Account" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit Account' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">
+          {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="creditTags">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Tags" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditTags }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit Tags' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">{{ accountingRule.creditTags }}</td>
       </ng-container>
 
       <ng-container matColumnDef="creditAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Account" | translate}} </th>
-        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit Account' | translate }}</th>
+        <td mat-cell *matCellDef="let accountingRule">
+          {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="['view', row.id]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/accounting/accounting-rules/create-rule/create-rule.component.html b/src/app/accounting/accounting-rules/create-rule/create-rule.component.html
index c832aef8b2..201feeb697 100644
--- a/src/app/accounting/accounting-rules/create-rule/create-rule.component.html
+++ b/src/app/accounting/accounting-rules/create-rule/create-rule.component.html
@@ -1,43 +1,42 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Accounting Rule Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              {{"labels.inputs.Accounting Rule Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -45,9 +44,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Debit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +62,23 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                {{"labels.inputs.Multiple Debit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Credit" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -79,9 +86,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Credit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,27 +104,31 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                {{"labels.inputs.Multiple Credit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountingRuleForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountingRuleForm.valid"
+          *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html b/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html
index f70eba68a1..c8a0dadfb9 100644
--- a/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html
+++ b/src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html
@@ -1,43 +1,42 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Accounting Rule Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
-              {{"labels.inputs.Accounting Rule Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accounting Rule Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingRuleForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Debit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Debit"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -45,9 +44,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Debit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
                   {{ debitTag.name }}
@@ -57,21 +62,23 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
-                {{"labels.inputs.Multiple Debit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
-            <mat-label fxFlex="50%">{{"labels.inputs.Affected GL Entry (Credit) Rule Type" | translate}} *</mat-label>
+            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
             <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
-              <mat-radio-button value="fixedAccount">{{"labels.inputs.Fixed Account" | translate}}</mat-radio-button>
-              <mat-radio-button value="listOfAccounts">{{"labels.inputs.List of Accounts"|translate}}</mat-radio-button>
+              <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
+              <mat-radio-button value="listOfAccounts">{{
+                'labels.inputs.List of Accounts' | translate
+              }}</mat-radio-button>
             </mat-radio-group>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
-            <mat-label>{{"labels.inputs.Account to Credit" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
                 {{ glAccount.name }}
@@ -79,9 +86,15 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'">
+          <div
+            fxFlex="48%"
+            fxLayout="row"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
+          >
             <mat-form-field fxFlex="50%">
-              <mat-label>{{"labels.inputs.Credit Tags" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
                   {{ creditTag.name }}
@@ -91,28 +104,31 @@
 
             <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
-                {{"labels.inputs.Multiple Credit Entries Allowed" | translate}}
+                {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="accountingRuleForm.pristine || !accountingRuleForm.valid" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="accountingRuleForm.pristine || !accountingRuleForm.valid"
+          *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
-
diff --git a/src/app/accounting/accounting-rules/view-rule/view-rule.component.html b/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
index 560fc72317..5930a45ebd 100644
--- a/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
+++ b/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
@@ -1,26 +1,26 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit"|translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="warn" (click)="deleteAccountingRule()" *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteAccountingRule()"
+    *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <div fxFlex="48%">
-
     <mat-card>
-
       <mat-card-content>
-
         <div fxLayout="row wrap" class="content">
-
           <div fxFlex="50%" class="header">
-            {{"labels.inputs.Office" | translate}}
+            {{ 'labels.inputs.Office' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -28,7 +28,7 @@
           </div>
 
           <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
-            {{"labels.inputs.Description" | translate}}
+            {{ 'labels.inputs.Description' | translate }}
           </div>
 
           <div fxFlex="50%" *ngIf="accountingRule.description">
@@ -36,7 +36,7 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            {{"labels.inputs.Multiple Debit Entries Allowed" | translate}}
+            {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -44,32 +44,24 @@
           </div>
 
           <div fxFlex="50%" class="header">
-            {{"labels.inputs.Multiple Credit Entries Allowed" | translate}}
+            {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
           </div>
 
           <div fxFlex="50%">
             {{ accountingRule.allowMultipleCreditEntries }}
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
 
   <div fxFlex>
-
     <mat-card>
-
       <mat-card-content>
-
         <div fxLayout="row" class="content">
-
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
             <div class="header">
-              {{"labels.inputs.Debit Tags" | translate}}
+              {{ 'labels.inputs.Debit Tags' | translate }}
             </div>
             <div *ngFor="let debitTag of accountingRule.debitTags">
               {{ debitTag.tag.name }}
@@ -78,7 +70,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
             <div class="header">
-              {{"labels.inputs.Debit Account Name" | translate}}
+              {{ 'labels.inputs.Debit Account Name' | translate }}
             </div>
             <div *ngFor="let debitAccount of accountingRule.debitAccounts">
               {{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
@@ -87,7 +79,7 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
             <div class="header">
-              {{"labels.inputs.Credit Tags" | translate}}
+              {{ 'labels.inputs.Credit Tags' | translate }}
             </div>
             <div *ngFor="let creditTag of accountingRule.creditTags">
               {{ creditTag.tag.name }}
@@ -96,19 +88,14 @@
 
           <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
             <div class="header">
-              {{"labels.inputs.Credit Account Name" | translate}}
+              {{ 'labels.inputs.Credit Account Name' | translate }}
             </div>
             <div *ngFor="let creditAccount of accountingRule.creditAccounts">
               {{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}
             </div>
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
-
 </div>
diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html
index e52d0f2353..587898b02f 100644
--- a/src/app/accounting/accounting.component.html
+++ b/src/app/accounting/accounting.component.html
@@ -1,21 +1,20 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
             <mat-icon matListIcon [routerLink]="['journal-entries/frequent-postings']">
               <fa-icon icon="sync" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['journal-entries/frequent-postings']">{{"labels.heading.Frequent Postings" | translate}}</h4>
+            <h4 matLine [routerLink]="['journal-entries/frequent-postings']">
+              {{ 'labels.heading.Frequent Postings' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">{{"labels.text.These are predefined postings" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">
+              {{ 'labels.text.These are predefined postings' | translate }}
+            </p>
           </mat-list-item>
 
           <div #createJournalEntries>
@@ -23,10 +22,14 @@ <h4 matLine [routerLink]="['journal-entries/frequent-postings']">{{"labels.headi
               <mat-icon matListIcon [routerLink]="['journal-entries/create']">
                 <fa-icon icon="plus" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['journal-entries/create']">{{"labels.heading.Create Journal Entries" | translate}}</h4>
+              <h4 matLine [routerLink]="['journal-entries/create']">
+                {{ 'labels.heading.Create Journal Entries' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">{{"labels.text.Manual journal entry transactions recorded in a journal" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">
+                {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -34,10 +37,14 @@ <h4 matLine [routerLink]="['journal-entries/create']">{{"labels.heading.Create J
             <mat-icon matListIcon [routerLink]="['journal-entries']">
               <fa-icon icon="search" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['journal-entries']">{{"labels.heading.Search Journal Entries" | translate}}</h4>
+            <h4 matLine [routerLink]="['journal-entries']">
+              {{ 'labels.heading.Search Journal Entries' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">{{"labels.text.Advanced search option for journal entries" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">
+              {{ 'labels.text.Advanced search option for journal entries' | translate }}
+            </p>
           </mat-list-item>
 
           <div #accountsLinked>
@@ -45,54 +52,62 @@ <h4 matLine [routerLink]="['journal-entries']">{{"labels.heading.Search Journal
               <mat-icon matListIcon [routerLink]="['financial-activity-mappings']">
                 <fa-icon icon="link" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['financial-activity-mappings']">{{"labels.heading.Accounts Linked to Financial Activities" | translate}}</h4>
+              <h4 matLine [routerLink]="['financial-activity-mappings']">
+                {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['financial-activity-mappings']">{{"labels.text.List of Financial Activities and GL Account Mappings" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['financial-activity-mappings']">
+                {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #migrateOpeningBalances>
-            <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" >
+            <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
               <mat-icon matListIcon [routerLink]="['migrate-opening-balances']">
                 <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['migrate-opening-balances']">{{"labels.heading.Migrate Opening Balances (Office-wise)" | translate}}</h4>
+              <h4 matLine [routerLink]="['migrate-opening-balances']">
+                {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['migrate-opening-balances']">{{"labels.text.Set or update office-level opening balances for GL accounts" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['migrate-opening-balances']">
+                {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
+              </p>
             </mat-list-item>
           </div>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <div #chartofAccounts>
             <mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'">
               <mat-icon matListIcon [routerLink]="['chart-of-accounts']">
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['chart-of-accounts']">{{"labels.heading.Chart of Accounts" | translate}}</h4>
+              <h4 matLine [routerLink]="['chart-of-accounts']">{{ 'labels.heading.Chart of Accounts' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">{{"labels.text.List of accounts used by the organization" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">
+                {{ 'labels.text.List of accounts used by the organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #closingEntries>
-            <mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" >
+            <mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'">
               <mat-icon matListIcon [routerLink]="['closing-entries']">
                 <fa-icon icon="archive" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['closing-entries']">{{"labels.heading.Closing Entries" | translate}}</h4>
+              <h4 matLine [routerLink]="['closing-entries']">{{ 'labels.heading.Closing Entries' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']">{{"labels.text.Journal entries made at the end of accounting period" | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']">
+                {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -100,88 +115,121 @@ <h4 matLine [routerLink]="['closing-entries']">{{"labels.heading.Closing Entries
             <mat-icon matListIcon [routerLink]="['accounting-rules']">
               <fa-icon icon="list" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['accounting-rules']">{{"labels.heading.Accounting Rules" | translate}}</h4>
+            <h4 matLine [routerLink]="['accounting-rules']">{{ 'labels.heading.Accounting Rules' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']">{{"labels.text.List of all accounting rules" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']">
+              {{ 'labels.text.List of all accounting rules' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
             <mat-icon matListIcon [routerLink]="['periodic-accruals']">
               <fa-icon icon="calendar" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['periodic-accruals']">{{"labels.heading.Accruals" | translate}}</h4>
+            <h4 matLine [routerLink]="['periodic-accruals']">{{ 'labels.heading.Accruals' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']">{{"labels.text.Accrues income, expenses and liabilities" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']">
+              {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
             <mat-icon matListIcon [routerLink]="['provisioning-entries']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['provisioning-entries']">{{"labels.heading.Provisioning Entries" | translate}}</h4>
+            <h4 matLine [routerLink]="['provisioning-entries']">
+              {{ 'labels.heading.Provisioning Entries' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']">{{"labels.text.Create provisioning entries" | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']">
+              {{ 'labels.text.Create provisioning entries' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateChartofAccounts let-popover="popover">
-  <h2>{{"labels.heading.Chart of Accounts" | translate}}</h2>
-  <p class="mw300">{{"labels.text.The Chart of Accounts - General Ledger Setup" | translate}}</p>
+  <h2>{{ 'labels.heading.Chart of Accounts' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.The Chart of Accounts - General Ledger Setup' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepChartofAccounts()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepChartofAccounts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepChartofAccounts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsLinked let-popover="popover">
-  <h2>{{"labels.heading.Accounts Linked to Financial Activities" | translate}}</h2>
-  <p class="mw400">{{"labels.text.Accounts linked to Financial Activities" | translate}}</p>
+  <h2>{{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Accounts linked to Financial Activities' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepAccountsLinked()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepAccountsLinked()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepAccountsLinked()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateMigrateOpeningBalances let-popover="popover">
-  <h2>{{"labels.heading.Migrate Opening Balances (Office-wise)" | translate}}</h2>
-  <p class="mw400">{{"labels.text.GLAccount Balances Application" | translate}}</p>
+  <h2>{{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.GLAccount Balances Application' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepMigrateOpeningBalances()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepMigrateOpeningBalances()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepMigrateOpeningBalances()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateClosingEntries let-popover="popover">
-  <h2>{{"labels.heading.Closing Entries" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Accounting to journal entries" | translate}}</p>
+  <h2>{{ 'labels.heading.Closing Entries' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Accounting to journal entries' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepClosingEntries()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepClosingEntries()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepClosingEntries()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateCreateJournalEntries let-popover="popover">
-  <h2>{{"labels.heading.Create Journal Entries" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Journal Entries Transactions" | translate}}</p>
+  <h2>{{ 'labels.heading.Create Journal Entries' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Journal Entries Transactions' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepCreateJournalEntries()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepCreateJournalEntries()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepCreateJournalEntries()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
index 99e3cc26d6..1257a231cd 100644
--- a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
@@ -10,9 +10,14 @@
     </mat-button-toggle-group>
   </div>
   <div #buttonAddAccount>
-    <button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
+    <button
+      mat-raised-button
+      color="primary"
+      [routerLink]="['gl-accounts/create']"
+      *mifosxHasPermission="'CREATE_GLACCOUNT'"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Add Account" | translate}}
+      {{ 'labels.buttons.Add Account' | translate }}
     </button>
   </div>
 </div>
@@ -20,83 +25,100 @@
 <!-- List View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'listView'">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #accountsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="tableDataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccount">{{ glAccount.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.GL Code" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.glCode }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.GL Code' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccount">{{ glAccount.glCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccount"> {{ 'labels.inputs.accounting.' + glAccount.type.value | translate }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccount">
+          {{ 'labels.inputs.accounting.' + glAccount.type.value | translate }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="disabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Disabled" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Disabled' | translate }}</th>
         <td mat-cell *matCellDef="let glAccount">
           <div [className]="glAccount.disabled === true ? 'disabled' : 'enabled'">
-            <fa-icon matTooltip="{{ glAccount.disabled === true ? 'Disabled' : 'Enabled' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ glAccount.disabled === true ? 'Disabled' : 'Enabled' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="manualEntriesAllowed">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Manual Entries Allowed" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Manual Entries Allowed' | translate }}
+        </th>
         <td mat-cell *matCellDef="let glAccount">
-          <fa-icon *ngIf="glAccount.manualEntriesAllowed" class="manual-entries-allowed" matTooltip="{{ 'tooltips.Allowed' | translate}}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-          <fa-icon *ngIf="!glAccount.manualEntriesAllowed" class="manual-entries-not-allowed" matTooltip="{{ 'tooltips.' | translate}}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <fa-icon
+            *ngIf="glAccount.manualEntriesAllowed"
+            class="manual-entries-allowed"
+            matTooltip="{{ 'tooltips.Allowed' | translate }}"
+            matTooltipPosition="right"
+            icon="check-circle"
+            size="lg"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!glAccount.manualEntriesAllowed"
+            class="manual-entries-not-allowed"
+            matTooltip="{{ 'tooltips.' | translate }}"
+            matTooltipPosition="right"
+            icon="times-circle"
+            size="lg"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="usedAs">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Used as" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.usage.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Used as' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccount">{{ glAccount.usage.value }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['gl-accounts/view', row.id]" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="['gl-accounts/view', row.id]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
-
 <!-- Tree View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
-
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
     <button mat-raised-button (click)="toggleExpandCollapse()">
-      {{ (isTreeExpanded ? "labels.buttons.Collapse All" : "labels.buttons.Expand All") | translate }}
+      {{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
     </button>
   </div>
 
   <div fxLayout="row" fxLayoutGap="4%" fxLayout.lt-md="column">
-
     <div class="mat-elevation-z8" fxFlex>
-
       <mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="gl-account-tree">
-
         <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
           <li class="mat-tree-node">
             <button mat-icon-button disabled></button>
@@ -111,7 +133,10 @@
           <li>
             <div class="mat-tree-node">
               <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-                <fa-icon class="mat-icon-rtl-mirror" icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"></fa-icon>
+                <fa-icon
+                  class="mat-icon-rtl-mirror"
+                  icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"
+                ></fa-icon>
               </button>
               <span (click)="viewGLAccountNode(node)">
                 <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
@@ -123,21 +148,15 @@
             </ul>
           </li>
         </mat-nested-tree-node>
-
       </mat-tree>
-
     </div>
 
     <div fxFlex="48%" *ngIf="glAccount">
-
       <mat-card>
-
         <mat-card-content>
-
           <div fxLayout="row wrap" class="content">
-
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Account Name" | translate}}
+              {{ 'labels.inputs.Account Name' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -145,7 +164,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.GL Code" | translate}}
+              {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -153,7 +172,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Account Type" | translate}}
+              {{ 'labels.inputs.Account Type' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -161,7 +180,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Account Usage" | translate}}
+              {{ 'labels.inputs.Account Usage' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -169,7 +188,7 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Manual Entries Allowed" | translate}}
+              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </div>
 
             <div fxFlex="50%">
@@ -177,59 +196,103 @@
             </div>
 
             <div fxFlex="50%" class="header">
-              {{"labels.inputs.Description" | translate}}
+              {{ 'labels.inputs.Description' | translate }}
             </div>
 
             <div fxFlex="50%">
               {{ glAccount.description }}
             </div>
-
           </div>
-
         </mat-card-content>
-
       </mat-card>
-
     </div>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonTreeView let-popover="popover">
-  <h2>{{"labels.heading.Tree View" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Alternative way-Tree view" | translate}}</p>
+  <h2>{{ 'labels.heading.Tree View' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Alternative way-Tree view' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonAddAccount, buttonAddAccount, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonAddAccount let-popover="popover">
-  <h2>{{"labels.heading.Add Account" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Create New GL Account"|translate}}</p>
+  <h2>{{ 'labels.heading.Add Account' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Create New GL Account' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonTreeView, buttonTreeView, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{"labels.heading.Search bar to filter GL accounts." | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter GL accounts.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonAddAccount, buttonAddAccount, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateAccountsTable, accountsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAccountsTable let-popover="popover">
-  <h4 class="mw300">{{"labels.heading.List of chart of all the accounts being used by your organization." | translate}}</h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of chart of all the accounts being used by your organization.' | translate }}
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
index a935008b1b..7832a775c0 100644
--- a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
@@ -1,58 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ 'labels.inputs.accounting.' + accountType.value | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{"labels.inputs.Account Type" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{"labels.inputs.Account Name" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Usage" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{"labels.inputs.Account Usage" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.GL Code" | translate}}</mat-label>
-            <input matInput required formControlName="glCode">
+            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
+            <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{"labels.inputs.GL Code" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-gl-account-selector fxFlex="48%"
+          <mifosx-gl-account-selector
+            fxFlex="48%"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -61,7 +57,7 @@
           </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>{{"labels.inputs.Tag" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -71,46 +67,56 @@
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
             <mat-checkbox labelPosition="before" formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              {{"labels.inputs.Manual Entries Allowed" | translate}}
+              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">{{"labels.buttons.Cancel" |
-          translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!glAccountForm.valid"
-          *mifosxHasPermission="'CREATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="[cancelRoute]">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!glAccountForm.valid"
+          *mifosxHasPermission="'CREATE_GLACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateAccountFormRef let-popover="popover">
-  <h2>{{"labels.heading.Create GL account" | translate}}</h2>
-  <p class="mw400">{{"labels.text.Filling Details" | translate}} <a
+  <h2>{{ 'labels.heading.Create GL account' | translate }}</h2>
+  <p class="mw400">
+    {{ 'labels.text.Filling Details' | translate }}
+    <a
       href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup"
-      target="_blank">{{"labels.inputs.Chart of Accounts" | translate}}</a></p>
+      target="_blank"
+      >{{ 'labels.inputs.Chart of Accounts' | translate }}</a
+    >
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |
-      translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{"labels.buttons.Create GL Account" |
-      translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" |
-      translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" |
-      translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create GL Account' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html b/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
index 532963f219..373579a138 100644
--- a/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html
@@ -1,54 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="glAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">
-              {{"labels.inputs.Account Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
-              {{"labels.inputs.Account Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Usage" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
                 {{ accountUsage.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.usage.hasError('required')">
-              {{"labels.inputs.Account Usage" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Usage' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.GL Code" | translate}}</mat-label>
-            <input matInput required formControlName="glCode">
+            <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
+            <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
-              {{"labels.inputs.GL Code" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.GL Code' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-gl-account-selector fxFlex="48%"
+          <mifosx-gl-account-selector
+            fxFlex="48%"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -57,7 +57,7 @@
           </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="28%">
-            <mat-label>{{"labels.inputs.Tag" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
                 {{ tag.name }}
@@ -66,27 +66,36 @@
           </mat-form-field>
 
           <div fxFlex="18%" class="manual-entries-allowed-wrapper">
-            <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manual-entries-allowed">
-              {{"labels.inputs.Manual Entries Allowed" | translate}}
+            <mat-checkbox
+              labelPosition="before"
+              required
+              formControlName="manualEntriesAllowed"
+              class="manual-entries-allowed"
+            >
+              {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="glAccountForm.pristine" *mifosxHasPermission="'UPDATE_GLACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="glAccountForm.pristine"
+          *mifosxHasPermission="'UPDATE_GLACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
index 6a939b378e..6d0a66676e 100644
--- a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
@@ -1,44 +1,46 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
-    <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
+    <button
+      mat-raised-button
+      color="primary"
+      *ngIf="glAccount.usage.value === 'HEADER'"
+      [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']"
+      [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Subledger Account" | translate}}
+      {{ 'labels.buttons.Subledger Account' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="primary" [routerLink]="['edit']">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Edit" | translate}}
+      {{ 'labels.buttons.Edit' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Disable" | translate}}
+      {{ 'labels.buttons.Disable' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Enable" | translate}}
+      {{ 'labels.buttons.Enable' | translate }}
     </button>
   </span>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Type" | translate}}
+          {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +48,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.GL Code" | translate}}
+          {{ 'labels.inputs.GL Code' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -54,7 +56,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.parent">
-          {{"labels.inputs.Parent Account Name" | translate}}
+          {{ 'labels.inputs.Parent Account Name' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.parent">
@@ -64,7 +66,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
-           {{"labels.inputs.Tag" | translate}}
+          {{ 'labels.inputs.Tag' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.tagId.id">
@@ -72,7 +74,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Usage" | translate}}
+          {{ 'labels.inputs.Account Usage' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -80,7 +82,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Manual Entries Allowed" | translate}}
+          {{ 'labels.inputs.Manual Entries Allowed' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -88,20 +90,19 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.description">
-          {{"labels.inputs.Description" | translate}}
+          {{ 'labels.inputs.Description' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="glAccount.description">
           {{ glAccount.description }}
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/closing-entries/closing-entries.component.html b/src/app/accounting/closing-entries/closing-entries.component.html
index c7403225ee..6c208923c6 100644
--- a/src/app/accounting/closing-entries/closing-entries.component.html
+++ b/src/app/accounting/closing-entries/closing-entries.component.html
@@ -2,15 +2,15 @@
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Create Closure" | translate}}
+      {{ 'labels.buttons.Create Closure' | translate }}
     </button>
   </div>
 </div>
 
 <div #filter class="container" fxLayout="row">
   <mat-form-field fxFlex>
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 </div>
 
@@ -22,66 +22,104 @@
 </mat-autocomplete>
 
 <div class="container">
-
   <div #closuresTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="closingDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Closure Date" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.closingDate }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Closure Date' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.closingDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="comments">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Comments" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccountClosure"> {{ glAccountClosure.comments }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Comments' | translate }}</th>
+        <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.comments }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
         <td mat-cell *matCellDef="let glAccountClosure">{{ glAccountClosure.createdByUsername }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="['view', row.id]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateClosure let-popover="popover">
-  <h2>{{"labels.heading.Create Closure" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Create new closure" | translate}}</p>
+  <h2>{{ 'labels.heading.Create Closure' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Create new closure' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{"labels.heading.Search bar to filter closures by office."|translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter closures by office.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateClosuresTable, closuresTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateClosuresTable let-popover="popover">
-  <h4>{{"labels.heading.List of closures. To know more click" | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{"labels.inputs.Closing Entries" | translate}}</a></h4>
+  <h4>
+    {{ 'labels.heading.List of closures. To know more click' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">{{
+      'labels.inputs.Closing Entries' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/closing-entries/create-closure/create-closure.component.html b/src/app/accounting/closing-entries/create-closure/create-closure.component.html
index cf6cd14ef5..4af395e62c 100644
--- a/src/app/accounting/closing-entries/create-closure/create-closure.component.html
+++ b/src/app/accounting/closing-entries/create-closure/create-closure.component.html
@@ -1,51 +1,59 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closing Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
+            <mat-label>{{ 'labels.inputs.Closing Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closingDatePicker"
+              required
+              formControlName="closingDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
             <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
-              {{"labels.inputs.Closing Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closing Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid" *mifosxHasPermission="'CREATE_GLCLOSURE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountingClosureForm.valid"
+          *mifosxHasPermission="'CREATE_GLCLOSURE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html b/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html
index 39df300fc9..ea7807bdf6 100644
--- a/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html
+++ b/src/app/accounting/closing-entries/edit-closure/edit-closure.component.html
@@ -1,15 +1,10 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -18,28 +13,27 @@
           </mat-form-field>
 
           <mat-form-field (click)="closingDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closing Date" | translate}}</mat-label>
-            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
+            <mat-label>{{ 'labels.inputs.Closing Date' | translate }}</mat-label>
+            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate" />
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/closing-entries/view-closure/view-closure.component.html b/src/app/accounting/closing-entries/view-closure/view-closure.component.html
index 614a9c7bcf..a77f7c2888 100644
--- a/src/app/accounting/closing-entries/view-closure/view-closure.component.html
+++ b/src/app/accounting/closing-entries/view-closure/view-closure.component.html
@@ -1,24 +1,20 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container" *ngIf="glAccountClosure">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-         {{"labels.inputs.Office" | translate}}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closure Date" | translate}}
+          {{ 'labels.inputs.Closure Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closed By" | translate}}
+          {{ 'labels.inputs.Closed By' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Updated By" | translate}}
+          {{ 'labels.inputs.Updated By' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Updated On"|translate}}
+          {{ 'labels.inputs.Updated On' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Closure Creation Date"|translate}}
+          {{ 'labels.inputs.Closure Creation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -66,17 +62,13 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Comments" | translate}}
+          {{ 'labels.inputs.Comments' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ glAccountClosure.comments }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/create-journal-entry/create-journal-entry.component.html b/src/app/accounting/create-journal-entry/create-journal-entry.component.html
index 83a4361af2..3a44f733bf 100644
--- a/src/app/accounting/create-journal-entry/create-journal-entry.component.html
+++ b/src/app/accounting/create-journal-entry/create-journal-entry.component.html
@@ -1,43 +1,44 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="journalEntryForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="journalEntryForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="debits"
-            *ngFor="let debit of debits.controls; let i = index;">
-
+          <div
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="debits"
+            *ngFor="let debit of debits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
-              <mifosx-gl-account-selector fxFlex="48%"
+              <mifosx-gl-account-selector
+                fxFlex="48%"
                 [inputFormControl]="debits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -46,10 +47,11 @@
               </mifosx-gl-account-selector>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Debit Amount" | translate}}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Debit Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -57,21 +59,29 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(debits)">
+                <button
+                  *ngIf="i === 0"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(debits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="credits"
-            *ngFor="let credit of credits.controls; let i = index;">
-
+          <div
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="credits"
+            *ngFor="let credit of credits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
-              <mifosx-gl-account-selector fxFlex="48%"
+              <mifosx-gl-account-selector
+                fxFlex="48%"
                 [inputFormControl]="credits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -80,10 +90,11 @@
               </mifosx-gl-account-selector>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Credit Amount"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -91,32 +102,44 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(credits)">
+                <button
+                  *ngIf="i === 0"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(credits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
-            <input matInput formControlName="referenceNumber">
+            <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
+            <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date"|translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="journalEntryForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Payment Type"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -125,56 +148,71 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
-            <input matInput formControlName="accountNumber">
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+            <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
-            <input matInput formControlName="checkNumber">
+            <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
+            <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
-            <input matInput formControlName="routingCode">
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input matInput formControlName="routingCode" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
-            <input matInput formControlName="receiptNumber">
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
-            <input matInput formControlName="bankNumber">
+            <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
+            <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!journalEntryForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!journalEntryForm.valid"
+          *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCreateJournalFormRef let-popover="popover">
-  <h2>{{"labels.heading.Add Journal Entry Form" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Red asterisk field" | translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">{{"labels.inputs.Add Journal Entries" | translate}}</a></p>
+  <h2>{{ 'labels.heading.Add Journal Entry Form' | translate }}</h2>
+  <p class="mw300">
+    {{ 'labels.text.Red asterisk field' | translate }}
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">{{
+      'labels.inputs.Add Journal Entries' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html
index 977aac4887..5034c8dcec 100644
--- a/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html
@@ -1,22 +1,19 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Financial Activity" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
-                ({{financialActivity.id}}) {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                ({{ financialActivity.id }})
+                {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="financialActivityMappingForm.controls.financialActivityId.hasError('required')">
-              {{"labels.inputs.Financial Activity" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Financial Activity' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -27,18 +24,22 @@
             [inputLabel]="'Account'"
           >
           </mifosx-gl-account-selector>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!financialActivityMappingForm.valid" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!financialActivityMappingForm.valid"
+          *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html
index f8a541cbaa..97bd5270cb 100644
--- a/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Financial Activity" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
               <mat-option *ngFor="let financialActivity of financialActivityData" [value]="financialActivity.id">
-                ({{financialActivity.id}}) {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
+                ({{ financialActivity.id }})
+                {{ 'labels.accounting.financialActivity.' + financialActivity.name | translate }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -25,16 +21,21 @@
           >
           </mifosx-gl-account-selector>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="financialActivityMappingForm.pristine" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="financialActivityMappingForm.pristine"
+          *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
index e508e84508..6b255ce41e 100644
--- a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
+++ b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
@@ -1,63 +1,95 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <div #buttonDefineMapping>
-    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
+    <button
+      mat-raised-button
+      color="primary"
+      [routerLink]="['create']"
+      *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Define New Mapping" | translate}}
+      {{ 'labels.buttons.Define New Mapping' | translate }}
     </button>
   </div>
 </div>
 
 <div #activitiesTable class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="financialActivity">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Financial Activity" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Financial Activity' | translate }}</th>
       <td mat-cell *matCellDef="let financialActivityAccount">
-          ({{financialActivityAccount.financialActivityData.id}}) 
-          {{ 'labels.accounting.financialActivity.' + financialActivityAccount.financialActivityData.name | translate }}
-        </td>
+        ({{ financialActivityAccount.financialActivityData.id }})
+        {{ 'labels.accounting.financialActivity.' + financialActivityAccount.financialActivityData.name | translate }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Type" | translate}} </th>
-      <td mat-cell *matCellDef="let financialActivityAccount"> {{ 'labels.inputs.accounting.' + financialActivityAccount.financialActivityData.mappedGLAccountType | translate }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Type' | translate }}</th>
+      <td mat-cell *matCellDef="let financialActivityAccount">
+        {{
+          'labels.inputs.accounting.' + financialActivityAccount.financialActivityData.mappedGLAccountType | translate
+        }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" | translate}} </th>
-      <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.glCode }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
+      <td mat-cell *matCellDef="let financialActivityAccount">{{ financialActivityAccount.glAccountData.glCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" | translate}} </th>
-      <td mat-cell *matCellDef="let financialActivityAccount"> {{ financialActivityAccount.glAccountData.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
+      <td mat-cell *matCellDef="let financialActivityAccount">{{ financialActivityAccount.glAccountData.name }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['view', row.id]" class="select-row"></tr>
   </table>
 
   <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
-
 </div>
 
 <ng-template #templateButtonDefineMapping let-popover="popover">
-  <h2>{{"labels.heading.Define New Mapping"|translate}}</h2>
-  <p class="mw300">{{"labels.text.To define new mapping." | translate}}</p>
+  <h2>{{ 'labels.heading.Define New Mapping' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.To define new mapping.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateActivitiesTable, activitiesTable, 'top', true)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateActivitiesTable, activitiesTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateActivitiesTable let-popover="popover">
-  <h4 class="mw300">{{"labels.heading.Account Linked Financial" | translate}} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">{{"labels.heading.Accounts linked to Financial Activities" | translate}}</a> </h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.Account Linked Financial' | translate }}
+    <a
+      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities"
+      target="_blank"
+      >{{ 'labels.heading.Accounts linked to Financial Activities' | translate }}</a
+    >
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDefineMapping, buttonDefineMapping , 'bottom', true)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonDefineMapping, buttonDefineMapping, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
index c951de1726..2b6d07c42a 100644
--- a/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
@@ -1,51 +1,63 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['edit']"
+    *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'"
+  >
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="warn" (click)="deleteFinancialActivityAccount()" *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteFinancialActivityAccount()"
+    *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Financial Activity" | translate}}
+          {{ 'labels.inputs.Financial Activity' | translate }}
         </div>
 
         <div fxFlex="50%">
-          ({{financialActivityAccount?.financialActivityData.id}}) {{ 'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate }}
+          ({{ financialActivityAccount?.financialActivityData.id }})
+          {{
+            'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate
+          }}
         </div>
 
         <div fxFlex="50%" class="header">
-          {{"labels.inputs.Account Type" | translate}}
+          {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ 'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType | translate }}
+          {{
+            'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType
+              | translate
+          }}
         </div>
 
-        <mifosx-gl-account-display fxFlex="100%"
+        <mifosx-gl-account-display
+          fxFlex="100%"
           [glAccount]="financialActivityAccount?.glAccountData"
           [accountTitle]="'Account Name'"
         >
         </mifosx-gl-account-display>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/frequent-postings/frequent-postings.component.html b/src/app/accounting/frequent-postings/frequent-postings.component.html
index b04f921778..735aa061db 100644
--- a/src/app/accounting/frequent-postings/frequent-postings.component.html
+++ b/src/app/accounting/frequent-postings/frequent-postings.component.html
@@ -1,73 +1,76 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="frequentPostingsForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Accounting Rule" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Accounting Rule' | translate }}</mat-label>
             <mat-select required formControlName="accountingRule">
               <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
                 {{ accountingRule.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.accountingRule.hasError('required')">
-              {{"labels.inputs.Accounting Rule" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accounting Rule' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="frequentPostingsForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <span fxFlex="48%" fxHide.lt-md></span>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="debits"
-            *ngFor="let debit of debits.controls; let i = index;">
-
+          <div
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="debits"
+            *ngFor="let debit of debits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
               <mat-form-field fxFlex="48%">
-                <mat-label>{{"labels.inputs.Affected GL Entry (Debit)" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Affected GL Entry (Debit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
                     {{ affectedGLEntryDebit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="debits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Debit)" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Affected GL Entry (Debit)' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Debit Amount" | translate}}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Debit Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Debit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -75,37 +78,49 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0 && allowMultipleDebitEntries" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(debits)">
+                <button
+                  *ngIf="i === 0 && allowMultipleDebitEntries"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(debits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="credits"
-            *ngFor="let credit of credits.controls; let i = index;">
-
+          <div
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            formArrayName="credits"
+            *ngFor="let credit of credits.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
               <mat-form-field fxFlex="48%">
-                <mat-label>{{"labels.inputs.Affected GL Entry (Credit)" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Affected GL Entry (Credit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
-                  <mat-option *ngFor="let affectedGLEntryCredit of creditAccountData" [value]="affectedGLEntryCredit.id">
+                  <mat-option
+                    *ngFor="let affectedGLEntryCredit of creditAccountData"
+                    [value]="affectedGLEntryCredit.id"
+                  >
                     {{ affectedGLEntryCredit.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="credits.at(i).controls.glAccountId.hasError('required')">
-                  {{"labels.inputs.Affected GL Entry (Credit)" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Affected GL Entry (Credit)' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="43%">
-                <mat-label>{{"labels.inputs.Credit Amount"|translate}}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
+                <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
-                  {{"labels.inputs.Credit Amount"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Credit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -113,32 +128,44 @@
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
-                <button *ngIf="i === 0 && allowMultipleCreditEntries" type="button" mat-icon-button color="primary" (click)="addAffectedGLEntry(credits)">
+                <button
+                  *ngIf="i === 0 && allowMultipleCreditEntries"
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="addAffectedGLEntry(credits)"
+                >
                   <fa-icon icon="plus-circle" size="lg"></fa-icon>
                 </button>
               </span>
-
             </div>
-
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Reference Number"|translate}}</mat-label>
-            <input matInput formControlName="referenceNumber">
+            <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
+            <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date"|translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="frequentPostingsForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date"|translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Payment Type"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -147,46 +174,50 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
-            <input matInput formControlName="accountNumber">
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+            <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Cheque Number"|translate}}</mat-label>
-            <input matInput formControlName="checkNumber">
+            <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
+            <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Routing Code"|translate}}</mat-label>
-            <input matInput formControlName="routingCode">
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input matInput formControlName="routingCode" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Receipt Number"|translate}}</mat-label>
-            <input matInput formControlName="receiptNumber">
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Bank Number"|translate}}</mat-label>
-            <input matInput formControlName="bankNumber">
+            <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
+            <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>{{"labels.inputs.Comments"|translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!frequentPostingsForm.valid" *mifosxHasPermission="'CREATE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!frequentPostingsForm.valid"
+          *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
index 502887a517..17d69081a6 100644
--- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
+++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
@@ -1,98 +1,111 @@
 <!-- TODO: Responsiveness/design enhancement and reduction in form loading time -->
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
           <div class="m-r-30" fxFlex="83%">
             <mat-form-field fxFlex="96%">
-              <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="openingBalancesForm.controls.officeId.hasError('required')">
-                {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}}
-                <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
           </div>
 
           <div fxFlex="15%">
-            <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">{{"labels.buttons.Retrieve" |
-              translate}}</button>
+            <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">
+              {{ 'labels.buttons.Retrieve' | translate }}
+            </button>
           </div>
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="openingBalancesData">
-
-          <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Opening Balances Contra Account'"
-            [glAccount]="openingBalancesData.contraAccount" [withTitle]="'50%'">
+          <mifosx-gl-account-display
+            fxFlex="100%"
+            [accountTitle]="'Opening Balances Contra Account'"
+            [glAccount]="openingBalancesData.contraAccount"
+            [withTitle]="'50%'"
+          >
           </mifosx-gl-account-display>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
                 {{ currency.displayLabel }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="openingBalancesForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
-            <mat-label>{{"labels.inputs.Opening Balances Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingBalancesDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="openingBalancesDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingBalancesDatePicker></mat-datepicker>
             <mat-error *ngIf="openingBalancesForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Opening Balances Date" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Opening Balances Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="content" fxFlex="100%">
-
             <div class="header" fxFlex="8%">
-              {{"labels.inputs.Type" | translate}}
+              {{ 'labels.inputs.Type' | translate }}
             </div>
 
             <div class="header" fxFlex="18%">
-              {{"labels.inputs.GL Code" | translate}}
+              {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
             <div class="header" fxFlex="18%">
-              {{"labels.inputs.Account" | translate}}
+              {{ 'labels.inputs.Account' | translate }}
             </div>
 
             <div class="header r-amount" fxFlex="23%">
-              {{"labels.inputs.Total Debit" | translate}}: {{ debitsSum | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+              {{ 'labels.inputs.Total Debit' | translate }}:
+              {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
 
             <div class="header r-amount" fxFlex="23%">
-              {{"labels.inputs.Total Credit" | translate}}: {{ creditsSum | currency:currencyCode:'symbol-narrow':'1.2-2' }}
+              {{ 'labels.inputs.Total Credit' | translate }}:
+              {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
-
           </div>
 
-          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" class="content" formArrayName="glAccountEntries"
-            *ngFor="let credit of glAccountEntries.controls; let i = index;">
-
+          <div
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+            class="content"
+            formArrayName="glAccountEntries"
+            *ngFor="let credit of glAccountEntries.controls; let i = index"
+          >
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
               <div fxFlex="8%">
-                {{ (openingBalancesData.glAccounts[i].glAccountType.value !==
-                openingBalancesData.glAccounts[i-1]?.glAccountType.value) ?
-                glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value) : '' }}
+                {{
+                  openingBalancesData.glAccounts[i].glAccountType.value !==
+                  openingBalancesData.glAccounts[i - 1]?.glAccountType.value
+                    ? glAccountTypeLabel(openingBalancesData.glAccounts[i].glAccountType.value)
+                    : ''
+                }}
               </div>
 
               <div fxFlex="13%">
@@ -105,51 +118,64 @@
 
               <div fxFlex="20%">
                 <mat-form-field>
-                  <mat-label>{{"labels.inputs.Debit" | translate}}</mat-label>
-                  <input matInput type="number" formControlName="debit">
+                  <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
+                  <input matInput type="number" formControlName="debit" />
                 </mat-form-field>
               </div>
 
               <div fxFlex="20%">
                 <mat-form-field>
-                  <mat-label>{{"labels.inputs.Credit" | translate}}</mat-label>
-                  <input matInput type="number" formControlName="credit">
+                  <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
+                  <input matInput type="number" formControlName="credit" />
                 </mat-form-field>
               </div>
-
             </div>
-
           </div>
-
         </div>
-
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px"
-        *ngIf="openingBalancesData">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!openingBalancesForm.valid"
-          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'">{{"labels.buttons.Submit" | translate}}</button>
+      <mat-card-actions
+        fxLayout="row"
+        fxLayout.xs="column"
+        fxLayoutAlign="center"
+        fxLayoutGap="5px"
+        *ngIf="openingBalancesData"
+      >
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!openingBalancesForm.valid"
+          *mifosxHasPermission="'DEFINEOPENINGBALANCE_JOURNALENTRY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateSearchFormRef let-popover="popover">
-  <h2>{{"labels.heading.Migrate opening balances (Office-wise)" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Migrate Opening Balances" | translate}} <a
+  <h2>{{ 'labels.heading.Migrate opening balances (Office-wise)' | translate }}</h2>
+  <p class="mw300">
+    {{ 'labels.text.Migrate Opening Balances' | translate }}
+    <a
       href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise"
-      target="_blank">{{"labels.inputs.Migrate opening balances (Office-wise)" | translate}}</a></p>
+      target="_blank"
+      >{{ 'labels.inputs.Migrate opening balances (Office-wise)' | translate }}</a
+    >
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" |
-      translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();popover.close();previousStep();">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();popover.close();nextStep();">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/accounting/periodic-accruals/periodic-accruals.component.html b/src/app/accounting/periodic-accruals/periodic-accruals.component.html
index 690a796cce..48a62fadc4 100644
--- a/src/app/accounting/periodic-accruals/periodic-accruals.component.html
+++ b/src/app/accounting/periodic-accruals/periodic-accruals.component.html
@@ -1,37 +1,42 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="periodicAccrualsForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row">
-
           <mat-form-field fxFlex (click)="tillDatePicker.open()">
-            <mat-label>{{"labels.inputs.Accrue Till Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
+            <mat-label>{{ 'labels.inputs.Accrue Till Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="tillDatePicker"
+              required
+              formControlName="tillDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
             <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
-              {{"labels.inputs.Accrue Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Accrue Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!periodicAccrualsForm.valid"
+          *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'"
+        >
           <fa-icon icon="play" class="m-r-10"></fa-icon>
-          {{"labels.buttons.Run Periodic Accruals" | translate}}
+          {{ 'labels.buttons.Run Periodic Accruals' | translate }}
         </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html b/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html
index 415d639c4d..d660151e12 100644
--- a/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html
+++ b/src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html
@@ -1,40 +1,47 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="provisioningEntryForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex (click)="datePicker.open()">
-            <mat-label>{{"labels.inputs.Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" required formControlName="date">
+            <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="datePicker"
+              required
+              formControlName="date"
+            />
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
             <mat-datepicker #datePicker></mat-datepicker>
             <mat-error *ngIf="provisioningEntryForm.controls.date.hasError('required')">
-              {{"labels.inputs.Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex>
             <mat-checkbox labelPosition="before" formControlName="createjournalentries">
-              {{"labels.inputs.Create Journal Entries" | translate}}
+              {{ 'labels.inputs.Create Journal Entries' | translate }}
             </mat-checkbox>
           </div>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!provisioningEntryForm.valid" *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!provisioningEntryForm.valid"
+          *mifosxHasPermission="'CREATE_PROVISIONING_ENTRIES'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/accounting/provisioning-entries/provisioning-entries.component.html b/src/app/accounting/provisioning-entries/provisioning-entries.component.html
index 303f5d7bdb..f72237a26b 100644
--- a/src/app/accounting/provisioning-entries/provisioning-entries.component.html
+++ b/src/app/accounting/provisioning-entries/provisioning-entries.component.html
@@ -1,74 +1,85 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'VIEW_ALL_PROVISIONING_ENTRIES'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['create']"
+    *mifosxHasPermission="'VIEW_ALL_PROVISIONING_ENTRIES'"
+  >
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Create Provisioning Entry" | translate}}
+    {{ 'labels.buttons.Create Provisioning Entry' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="createdUser">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created By" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdUser }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.createdUser }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created On" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.createdDate }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created On' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.createdDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="journalEntry">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Journal Entry Created" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Journal Entry Created' | translate }}
+        </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <mat-checkbox [disabled]="true" [checked]="provisioningEntry.journalEntry"></mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewReport">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Report" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.View Report' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" | translate}}
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View' | translate }}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="recreateProvisioning">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recreate Provisioning" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Recreate Provisioning' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningEntry">
-          <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Recreate" | translate}}
+          <button
+            mat-button
+            (click)="recreateProvisioning($event, provisioningEntry.id)"
+            [disabled]="provisioningEntry.journalEntry"
+            color="primary"
+          >
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recreate' | translate }}
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="viewJournalEntry">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.View Journal Entry" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.View Journal Entry' | translate }}</th>
         <td mat-cell *matCellDef="let provisioningEntry">
-          <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{"labels.buttons.View" | translate}}
+          <button
+            mat-button
+            (click)="viewJournalEntry($event, provisioningEntry.id)"
+            [disabled]="!provisioningEntry.journalEntry"
+            color="primary"
+          >
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View' | translate }}
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html b/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
index 5acb3fadd5..b051c545de 100644
--- a/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
+++ b/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
@@ -1,20 +1,22 @@
 <div class="container" *ngIf="provisioningEntry">
-
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-    <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry" *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="createProvisioningJournalEntries()"
+      [disabled]="provisioningEntry.journalEntry"
+      *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Create Journal Entries" | translate}}
+      {{ 'labels.buttons.Create Journal Entries' | translate }}
     </button>
   </div>
 
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
-
         <div fxFlex="16%" class="header">
-          {{"labels.inputs.Created By" | translate}}
+          {{ 'labels.inputs.Created By' | translate }}
         </div>
 
         <div fxFlex="16%">
@@ -22,7 +24,7 @@
         </div>
 
         <div fxFlex="16%" class="header">
-          {{"labels.inputs.Created On" | translate}}
+          {{ 'labels.inputs.Created On' | translate }}
         </div>
 
         <div fxFlex="16%">
@@ -30,39 +32,33 @@
         </div>
 
         <div fxFlex="18%" class="header">
-          {{"labels.inputs.Amount to be Reserved" | translate}}
+          {{ 'labels.inputs.Amount to be Reserved' | translate }}
         </div>
 
         <div fxFlex="18%">
           {{ provisioningEntry.reservedAmount }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <!-- Search -->
 <div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Loan Product" | translate}}</mat-label>
-    <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete">
+    <mat-label>{{ 'labels.inputs.Loan Product' | translate }}</mat-label>
+    <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Provisioning Category" | translate}}</mat-label>
-    <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete">
+    <mat-label>{{ 'labels.inputs.Provisioning Category' | translate }}</mat-label>
+    <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete" />
   </mat-form-field>
-
 </div>
 
 <!-- Autocomplete data -->
@@ -79,7 +75,10 @@
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #provisioningCategoryAutocomplete="matAutocomplete">
-  <mat-option *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async" [value]="provisioningCategory.categoryName">
+  <mat-option
+    *ngFor="let provisioningCategory of filteredProvisioningCategoryData | async"
+    [value]="provisioningCategory.categoryName"
+  >
     {{ provisioningCategory.categoryName }}
   </mat-option>
 </mat-autocomplete>
@@ -87,49 +86,47 @@
 <!--Table -->
 
 <div class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name" | translate}} </th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.officeName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.officeName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="productName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" | translate}}</th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.productName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.productName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="currencyCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency Code" | translate}} </th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.currencyCode }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency Code' | translate }}</th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.currencyCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="categoryName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category Name" | translate}} </th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.categoryName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Category Name' | translate }}</th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.categoryName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="amountreserved">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Provisioning Amount" | translate}} </th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.amountreserved }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Provisioning Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.amountreserved }}</td>
     </ng-container>
 
     <ng-container matColumnDef="liabilityAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Liability Account (CR)" | translate}} </th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.liabilityAccountName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        {{ 'labels.inputs.Liability Account (CR)' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.liabilityAccountName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="expenseAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Expense Account (DR)" | translate}} </th>
-      <td mat-cell *matCellDef="let provisioningEntry"> {{ provisioningEntry.expenseAccountName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Expense Account (DR)' | translate }}</th>
+      <td mat-cell *matCellDef="let provisioningEntry">{{ provisioningEntry.expenseAccountName }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </div>
diff --git a/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html b/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
index f69d0e0f80..c857e0794c 100644
--- a/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
+++ b/src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html
@@ -1,73 +1,83 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Entry ID" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.id }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionDate }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.transactionDate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="transactionId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.transactionId }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction ID' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.transactionId }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.glAccountType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdByUserName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.createdByUserName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.createdByUserName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountCode }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.glAccountCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"> {{ provisioningJournalEntry.glAccountName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">{{ provisioningJournalEntry.glAccountName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">
+          <span *ngIf="provisioningJournalEntry.entryType.value === 'DEBIT'">
+            {{
+              (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
+                ' ' +
+                provisioningJournalEntry.amount
+            }}
+          </span>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" | translate}} </th>
-        <td mat-cell *matCellDef="let provisioningJournalEntry"><span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'"> {{ (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) + ' ' + provisioningJournalEntry.amount }} </span></td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit' | translate }}</th>
+        <td mat-cell *matCellDef="let provisioningJournalEntry">
+          <span *ngIf="provisioningJournalEntry.entryType.value === 'CREDIT'">
+            {{
+              (provisioningJournalEntry.currency.displaySymbol || provisioningJournalEntry.currency.code) +
+                ' ' +
+                provisioningJournalEntry.amount
+            }}
+          </span>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/accounting/revert-transaction/revert-transaction.component.html b/src/app/accounting/revert-transaction/revert-transaction.component.html
index 4e81062d4b..7971094ef0 100644
--- a/src/app/accounting/revert-transaction/revert-transaction.component.html
+++ b/src/app/accounting/revert-transaction/revert-transaction.component.html
@@ -1,31 +1,31 @@
 <div *ngIf="!data.reverted; else reverted">
-
-  <h1 mat-dialog-title>{{"labels.heading.Revert Transaction" | translate}}</h1>
+  <h1 mat-dialog-title>{{ 'labels.heading.Revert Transaction' | translate }}</h1>
   <div mat-dialog-content>
-    <p>{{"labels.text.Revert this transaction?" | translate}}</p>
+    <p>{{ 'labels.text.Revert this transaction?' | translate }}</p>
     <mat-form-field fxFlexFill>
-      <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
       <textarea matInput [formControl]="comments"></textarea>
     </mat-form-field>
   </div>
   <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close>{{"labels.buttons.No" | translate}}</button>
-    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">{{"labels.buttons.Yes" | translate}}</button>
+    <button mat-button mat-dialog-close>{{ 'labels.buttons.No' | translate }}</button>
+    <button mat-button [mat-dialog-close]="{ revert: true, comments: comments.value }">
+      {{ 'labels.buttons.Yes' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>
 
 <ng-template #reverted>
-
-    <h1 mat-dialog-title>{{"labels.heading.Transaction Reverted" | translate}}</h1>
-    <div mat-dialog-content>
-      <h4>{{"labels.heading.Success!" | translate}}</h4>
-      <p>{{"labels.text.Journal entry reverse transaction" | translate}}</p>
-      <p>{{"labels.text.Transaction ID" | translate}}: {{ data.transactionId }}</p>
-    </div>
-    <mat-dialog-actions align="end">
-      <button mat-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
-      <button mat-button [mat-dialog-close]="{ redirect: true }">{{"labels.buttons.Redirect to New Transaction" | translate}}</button>
-    </mat-dialog-actions>
-
+  <h1 mat-dialog-title>{{ 'labels.heading.Transaction Reverted' | translate }}</h1>
+  <div mat-dialog-content>
+    <h4>{{ 'labels.heading.Success!' | translate }}</h4>
+    <p>{{ 'labels.text.Journal entry reverse transaction' | translate }}</p>
+    <p>{{ 'labels.text.Transaction ID' | translate }}: {{ data.transactionId }}</p>
+  </div>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+    <button mat-button [mat-dialog-close]="{ redirect: true }">
+      {{ 'labels.buttons.Redirect to New Transaction' | translate }}
+    </button>
+  </mat-dialog-actions>
 </ng-template>
diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.html b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
index 4ad0ca83fa..5ea59ce28b 100644
--- a/src/app/accounting/search-journal-entry/search-journal-entry.component.html
+++ b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
@@ -1,11 +1,11 @@
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Office Name" | translate}}</mat-label>
-    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
-  <mifosx-gl-account-selector fxFlex="31%"
+  <mifosx-gl-account-selector
+    fxFlex="31%"
     [inputFormControl]="glAccount"
     [glAccountList]="glAccountData"
     [required]="true"
@@ -14,7 +14,7 @@
   </mifosx-gl-account-selector>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
     <mat-select [formControl]="entryTypeFilter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
       <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
         {{ filter.option }}
@@ -23,41 +23,61 @@
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
-    <mat-label>{{"labels.inputs.Transaction Date From" | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" [formControl]="transactionDateFrom">
+    <mat-label>{{ 'labels.inputs.Transaction Date From' | translate }}</mat-label>
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="transactionDateFromPicker"
+      [formControl]="transactionDateFrom"
+    />
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
-    <mat-label>{{"labels.inputs.Transaction Date To" | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" [formControl]="transactionDateTo">
+    <mat-label>{{ 'labels.inputs.Transaction Date To' | translate }}</mat-label>
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="transactionDateToPicker"
+      [formControl]="transactionDateTo"
+    />
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%">
-    <mat-label>{{"labels.inputs.Transaction ID" | translate}}</mat-label>
-    <input matInput [formControl]="transactionId">
+    <mat-label>{{ 'labels.inputs.Transaction ID' | translate }}</mat-label>
+    <input matInput [formControl]="transactionId" />
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateFromPicker.open()">
-    <mat-label>{{"labels.inputs.Submitted on Date From" | translate}}</mat-label>
-    <input matInput [max]="submittedOnDateTo.value" [matDatepicker]="submittedOnDateFromPicker" [formControl]="submittedOnDateFrom">
+    <mat-label>{{ 'labels.inputs.Submitted on Date From' | translate }}</mat-label>
+    <input
+      matInput
+      [max]="submittedOnDateTo.value"
+      [matDatepicker]="submittedOnDateFromPicker"
+      [formControl]="submittedOnDateFrom"
+    />
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="31%" (click)="submittedOnDateToPicker.open()">
-    <mat-label>{{"labels.inputs.Submitted on Date To" | translate}} </mat-label>
-    <input matInput [min]="submittedOnDateFrom.value"  [matDatepicker]="submittedOnDateToPicker" [formControl]="submittedOnDateTo">
+    <mat-label>{{ 'labels.inputs.Submitted on Date To' | translate }} </mat-label>
+    <input
+      matInput
+      [min]="submittedOnDateFrom.value"
+      [matDatepicker]="submittedOnDateToPicker"
+      [formControl]="submittedOnDateTo"
+    />
     <mat-datepicker-toggle matSuffix [for]="submittedOnDateToPicker"></mat-datepicker-toggle>
     <mat-datepicker #submittedOnDateToPicker></mat-datepicker>
   </mat-form-field>
-
 </div>
 
-
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete" [displayWith]="displayOfficeName">
   <mat-option *ngFor="let office of filteredOfficeData | async" [value]="{ id: office.id, name: office.name }">
@@ -66,74 +86,84 @@
 </mat-autocomplete>
 
 <div class="mat-elevation-z8 container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>  {{"labels.inputs.Entry ID" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.id }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office" | translate}}  </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.officeName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.officeName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="transactionId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction ID" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionId }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction ID' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.transactionId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.transactionDate | dateFormat }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.transactionDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountType.value }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountType.value }}</td>
     </ng-container>
 
     <ng-container matColumnDef="createdByUserName">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Created By" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.createdByUserName }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Created By' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.createdByUserName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="submittedOnDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted on date" | translate}}  </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.submittedOnDate | datetimeFormat }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Submitted on date' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.submittedOnDate | datetimeFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Code" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountCode }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Name" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"> {{ journalEntry.glAccountName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="currency">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Currency" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency' | translate }}</th>
       <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.currency.code }}</td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">
+        <span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit" | translate}} </th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit' | translate }}</th>
+      <td mat-cell *matCellDef="let journalEntry">
+        <span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span>
+      </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['transactions/view', row.transactionId]" class="select-row"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [routerLink]="['transactions/view', row.transactionId]"
+      class="select-row"
+    ></tr>
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="50" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    [length]="dataSource?.records$ | async"
+    [pageSize]="50"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>
diff --git a/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html b/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
index c15cb37da7..782cc15049 100644
--- a/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
+++ b/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateCenterForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #activationDatePicker></mat-datepicker>
-            <mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activationDatePicker"
+            required
+            formControlName="activationDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #activationDatePicker></mat-datepicker>
+          <mat-error *ngIf="activateCenterForm.controls.activationDate.hasError('required')">
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html
index d05277aae1..54b57a1492 100644
--- a/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html
+++ b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html
@@ -1,74 +1,79 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerMeetingForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{"labels.inputs.Meeting Start Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="centerMeetingForm.controls.startDate.hasError('required')">
-              {{"labels.inputs.Start Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
-            {{"labels.inputs.Repeats?" | translate}}
+            {{ 'labels.inputs.Repeats?' | translate }}
           </mat-checkbox>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('frequency')">
-            <mat-label>{{"labels.inputs.Repetition Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('interval')">
-            <mat-label>{{"labels.inputs.Repetition Interval" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" | translate}}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
-          </mat-error>
-        </mat-form-field>
-
+            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+            <mat-select formControlName="repeatsOnDay" required>
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+                {{ day.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="centerMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+              {{ 'labels.inputs.day must be selected' | translate }}
+            </mat-error>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">
+          {{"labels.buttons.Submit | translate}}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/center-actions.component.html b/src/app/centers/centers-view/center-actions/center-actions.component.html
index 6ddf41695a..87578b19ef 100644
--- a/src/app/centers/centers-view/center-actions/center-actions.component.html
+++ b/src/app/centers/centers-view/center-actions/center-actions.component.html
@@ -1,7 +1,7 @@
 <mifosx-activate-center *ngIf="actions['Activate']"></mifosx-activate-center>
-<mifosx-center-assign-staff *ngIf="actions['Assign Staff']" ></mifosx-center-assign-staff>
+<mifosx-center-assign-staff *ngIf="actions['Assign Staff']"></mifosx-center-assign-staff>
 <mifosx-close-center *ngIf="actions['Close']"></mifosx-close-center>
-<mifosx-center-attendance *ngIf="actions['Attendance']" ></mifosx-center-attendance>
+<mifosx-center-attendance *ngIf="actions['Attendance']"></mifosx-center-attendance>
 <mifosx-attach-center-meeting *ngIf="actions['Attach Meeting']"></mifosx-attach-center-meeting>
 <mifosx-edit-center-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-center-meeting>
 <mifosx-edit-center-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-center-meeting-schedule>
diff --git a/src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html b/src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html
index 4150ef5549..48ad98a8e0 100644
--- a/src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html
+++ b/src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html
@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerAssignStaffForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerAssignStaffForm.controls.staffId.hasError('required')">
-              {{"labels.inputs.Staff" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerAssignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html b/src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html
index a45b94ed52..6f30582fce 100644
--- a/src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html
+++ b/src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html
@@ -1,49 +1,49 @@
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="3%">
-
     <mat-form-field fxFlex>
-      <mat-label>{{"labels.inputs.Meeting Date" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Meeting Date' | translate }}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
           {{ date | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>{{"labels.inputs.Next Meeting on" | translate}}: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint>
+      <mat-hint
+        >{{ 'labels.inputs.Next Meeting on' | translate }}:
+        {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint
+      >
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let member"> {{ member.clientId | find:membersData:'id':'displayName' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let member">{{ member.clientId | find: membersData : 'id' : 'displayName' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="attendance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attendance' | translate }}</th>
         <td mat-cell *matCellDef="let member" [ngSwitch]="member.attendanceType">
-          <span *ngSwitchCase="1">{{"labels.inputs.Present" | translate}}</span>
-          <span *ngSwitchCase="2">{{"labels.inputs.Absent" | translate}}</span>
-          <span *ngSwitchCase="3">{{"labels.inputs.Approved" | translate}}</span>
-          <span *ngSwitchCase="4">{{"labels.inputs.Leave" | translate}}</span>
-          <span *ngSwitchCase="5">{{"labels.inputs.Late" | translate}}</span>
-          <button mat-icon-button color="primary"
-            (click)="editAttendance(member)">
+          <span *ngSwitchCase="1">{{ 'labels.inputs.Present' | translate }}</span>
+          <span *ngSwitchCase="2">{{ 'labels.inputs.Absent' | translate }}</span>
+          <span *ngSwitchCase="3">{{ 'labels.inputs.Approved' | translate }}</span>
+          <span *ngSwitchCase="4">{{ 'labels.inputs.Leave' | translate }}</span>
+          <span *ngSwitchCase="5">{{ 'labels.inputs.Late' | translate }}</span>
+          <button mat-icon-button color="primary" (click)="editAttendance(member)">
             <fa-icon icon="pen"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Confirm" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'CREATE_MEETING'">
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/close-center/close-center.component.html b/src/app/centers/centers-view/center-actions/close-center/close-center.component.html
index 672728cef3..8e411f42b5 100644
--- a/src/app/centers/centers-view/center-actions/close-center/close-center.component.html
+++ b/src/app/centers/centers-view/center-actions/close-center/close-center.component.html
@@ -1,46 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeCenterForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closureDatePicker"
+              required
+              formControlName="closureDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeCenterForm.controls.closureDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Closure Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeCenterForm.controls.closureReasonId.hasError('required')">
-              {{"labels.inputs.Closure Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeCenterForm.valid" *mifosxHasPermission="'CLOSE_CENTER'">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="warn"
+          [disabled]="!closeCenterForm.valid"
+          *mifosxHasPermission="'CLOSE_CENTER'"
+        >
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html b/src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html
index e03299faa7..e9fa9ecd9c 100644
--- a/src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html
+++ b/src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html
@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerEditMeetingScheduleForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
-        <mat-form-field>
-          <mat-label>{{"labels.inputs.Existing Meeting Date" | translate}}</mat-label>
-          <mat-select formControlName="presentMeetingDate">
-            <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date | dateFormat }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-            {{"labels.inputs.Existing Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>{{"labels.inputs.Revised Meeting Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
-          <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #newMeetingDatePicker></mat-datepicker>
-          <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            {{"labels.inputs.Revised Meeting Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-          </mat-error>
-        </mat-form-field>
-
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
+            <mat-select formControlName="presentMeetingDate">
+              <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
+                {{ date | dateFormat }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field (click)="newMeetingDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Revised Meeting Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="newMeetingDatePicker"
+              required
+              formControlName="newMeetingDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #newMeetingDatePicker></mat-datepicker>
+            <mat-error *ngIf="centerEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
+              {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingScheduleForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html b/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
index c8c3bc98d6..e4efc1ef45 100644
--- a/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
+++ b/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
@@ -1,80 +1,85 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit Schedule" | translate}}
+    {{ 'labels.buttons.Edit Schedule' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerEditMeetingForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Interval" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="centerEditMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" | translate}}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" | translate}} <strong>{{"labels.inputs.one" | translate}}</strong> {{"labels.inputs.day must be selected" | translate}}
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
-          <mat-label>{{"labels.inputs.Above Changes are Effective from" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
-          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #startDatePicker></mat-datepicker>
-          <mat-error *ngIf="centerEditMeetingForm.controls.startDate.hasError('required')">
-            {{"labels.inputs.Changes Affection Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-          </mat-error>
-          <mat-hint>
-            {{"labels.text.Repeats' and 'Repeats every" | translate}}
-          </mat-hint>
-        </mat-form-field>
+            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+            <mat-select formControlName="repeatsOnDay" required>
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+                {{ day.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="centerEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+              {{ 'labels.inputs.day must be selected' | translate }}
+            </mat-error>
+          </mat-form-field>
 
+          <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Above Changes are Effective from' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #startDatePicker></mat-datepicker>
+            <mat-error *ngIf="centerEditMeetingForm.controls.startDate.hasError('required')">
+              {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-hint>
+              {{ "labels.text.Repeats' and 'Repeats every" | translate }}
+            </mat-hint>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!centerEditMeetingForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
index 16a372cb11..f48b00bb4b 100644
--- a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
+++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
@@ -1,10 +1,8 @@
 <div class="container" fxLayout="row" fxLayoutGap="3%">
-
   <mat-card fxFlex class="group-card" fxLayout="column" fxLayoutGap="2%">
-
     <mat-form-field fxFlex="30%">
-      <mat-label>{{"labels.inputs.Add Groups" | translate}}</mat-label>
-      <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete">
+      <mat-label>{{ 'labels.inputs.Add Groups' | translate }}</mat-label>
+      <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete" />
     </mat-form-field>
 
     <mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
@@ -15,41 +13,37 @@
 
     <div class="mat-table">
       <div class="mat-header-row">
-        <div class="mat-header-cell">{{"labels.inputs.Group Details" | translate}}</div>
+        <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
         <button mat-icon-button (click)="addGroup()">
           <fa-icon icon="plus"></fa-icon>
         </button>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.name" | translate}}</div>
-        <div class="mat-cell">{{groupChoice.value.name}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+        <div class="mat-cell">{{ groupChoice.value.name }}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.Id" | translate}}</div>
-        <div class="mat-cell">{{groupChoice.value.id}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+        <div class="mat-cell">{{ groupChoice.value.id }}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.Office" | translate}}</div>
-        <div class="mat-cell">{{groupChoice.value.officeName}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+        <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
       </div>
     </div>
-
   </mat-card>
 
   <mat-card fxFlex="40%">
+    <h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
 
-    <h3 matSubheader>{{"labels.heading.Group Members" | translate}}</h3>
-
-    <mat-nav-list  *ngIf="groupMembers?.length">
-      <div mat-list-item *ngFor="let group of groupMembers index as i">
-        <span matLine class="p-t-10">{{group.name}}</span>
+    <mat-nav-list *ngIf="groupMembers?.length">
+      <div mat-list-item *ngFor="let group of groupMembers; index as i">
+        <span matLine class="p-t-10">{{ group.name }}</span>
         <div fxFlex></div>
         <button mat-icon-button color="warn" (click)="removeGroup(i, group)">
           <fa-icon icon="trash"></fa-icon>
         </button>
       </div>
     </mat-nav-list>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html b/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html
index 0e81c7ffb9..92ed26b21d 100644
--- a/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html
+++ b/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html
@@ -1,11 +1,9 @@
 <mat-card class="container">
-
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{ 'labels.buttons.Back' | translate }}
     </button>
   </div>
 
-  <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
-
+  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="600px;"></iframe>
 </mat-card>
diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html
index f623f41f1b..8f7e85ac8c 100644
--- a/src/app/centers/centers-view/centers-view.component.html
+++ b/src/app/centers/centers-view/centers-view.component.html
@@ -3,17 +3,20 @@
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png">
+          <img mat-card-md-image class="profile-image" src="assets/images/center_placeholder.png" />
         </div>
       </div>
       <div class="mat-typography center-card-title">
         <mat-card-title>
           <h3 fxFlex="95%">
-            <i class="fa fa-stop" matTooltip="{{ centerViewData.status.value }}"
-              [ngClass]="centerViewData.status.code |statusLookup"></i>
-            <b>{{"labels.heading.Center Name" | translate}} :</b> {{centerViewData.name}}
+            <i
+              class="fa fa-stop"
+              matTooltip="{{ centerViewData.status.value }}"
+              [ngClass]="centerViewData.status.code | statusLookup"
+            ></i>
+            <b>{{ 'labels.heading.Center Name' | translate }} :</b> {{ centerViewData.name }}
           </h3>
-          <div fxFlex="5%" *ngIf="!(centerViewData.status.value==='Closed')">
+          <div fxFlex="5%" *ngIf="!(centerViewData.status.value === 'Closed')">
             <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -25,36 +28,40 @@ <h3 fxFlex="95%">
           <div fxLayout="row" fxLayout.lt-md="column">
             <div fxFlex="50%">
               <p>
-                {{"labels.inputs.Account" | translate}} #:{{centerViewData.accountNo}} <br />
-                {{"labels.inputs.Office" | translate}}: {{centerViewData.officeName}} <br />
+                {{ 'labels.inputs.Account' | translate }} #:{{ centerViewData.accountNo }} <br />
+                {{ 'labels.inputs.Office' | translate }}: {{ centerViewData.officeName }} <br />
                 <span *ngIf="centerViewData.externalId">
-                  {{"labels.inputs.External Id" | translate}}:
-                  <mifosx-external-identifier externalId="{{centerViewData.externalId}}"></mifosx-external-identifier><br />
+                  {{ 'labels.inputs.External Id' | translate }}:
+                  <mifosx-external-identifier externalId="{{ centerViewData.externalId }}"></mifosx-external-identifier
+                  ><br />
                 </span>
                 <span *ngIf="centerViewData.staffName">
-                  {{"labels.inputs.Staff" | translate}}: {{centerViewData.staffName}} <br />
+                  {{ 'labels.inputs.Staff' | translate }}: {{ centerViewData.staffName }} <br />
                 </span>
-                {{"labels.inputs.Activation Date" | translate}} :
-                {{(centerViewData.activationDate)?(centerViewData.activationDate | dateFormat) :'Not Activated'}}<br />
+                {{ 'labels.inputs.Activation Date' | translate }} :
+                {{ centerViewData.activationDate ? (centerViewData.activationDate | dateFormat) : 'Not Activated'
+                }}<br />
               </p>
             </div>
             <div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
               <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
                 <p>
-                  {{"labels.inputs.Next Meeting on" | translate}}: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                  {{ 'labels.inputs.Next Meeting on' | translate }}:
+                  {{ centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
                   <span *ngIf="editMeeting">
-                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')"
-                      *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
+                    <i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i
+                    ><br />
                   </span>
-                  {{"labels.inputs.Meeting Frequency" | translate}}: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+                  {{ 'labels.inputs.Meeting Frequency' | translate }}:
+                  {{ centerViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
                 </p>
               </div>
               <ng-template #unassigned>
                 <div>
                   <p>
-                    {{"labels.inputs.Next Meeting on" | translate}}: {{"labels.text.Unassigned" | translate}}
+                    {{ 'labels.inputs.Next Meeting on' | translate }}: {{ 'labels.text.Unassigned' | translate }}
                     <i class="fa fa-calendar"></i><br />
-                    {{"labels.inputs.Meeting Frequency" | translate}}: {{"labels.text.N/A" | translate}}
+                    {{ 'labels.inputs.Meeting Frequency' | translate }}: {{ 'labels.text.N/A' | translate }}
                   </p>
                 </div>
               </ng-template>
@@ -64,66 +71,105 @@ <h3 fxFlex="95%">
       </div>
 
       <mat-menu #centerMenu="matMenu">
-
-        <span *ngIf="!(centerViewData.status.value==='Active')">
-          <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i
-              class="fa fa-check-sign"></i> {{"labels.buttons.Activate" | translate}} </button>
+        <span *ngIf="!(centerViewData.status.value === 'Active')">
+          <button mat-menu-item *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')">
+            <i class="fa fa-check-sign"></i> {{ 'labels.buttons.Activate' | translate }}
+          </button>
         </span>
-        <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i
-            class="fa fa-edit"></i> {{"labels.buttons.Edit" | translate}} </button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> {{"labels.buttons.Add Group" | translate}} </button>
-        <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i
-            class="fa fa-edit"></i> {{"labels.buttons.Manage Groups" | translate}} </button>
+        <button mat-menu-item *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')">
+          <i class="fa fa-edit"></i> {{ 'labels.buttons.Edit' | translate }}
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_GROUP'">
+          <i class="fa fa-plus"></i> {{ 'labels.buttons.Add Group' | translate }}
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')">
+          <i class="fa fa-edit"></i> {{ 'labels.buttons.Manage Groups' | translate }}
+        </button>
         <span *ngIf="centerViewData.active">
-          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-            [routerLink]="['savings-accounts', 'create']">
-            <i class="fa fa-file"></i> {{"labels.buttons.Centers Saving Application" | translate}}
+          <button
+            mat-menu-item
+            *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+            [routerLink]="['savings-accounts', 'create']"
+          >
+            <i class="fa fa-file"></i> {{ 'labels.buttons.Centers Saving Application' | translate }}
           </button>
         </span>
-        <button mat-menu-item [matMenuTriggerFor]="More"> {{"labels.buttons.More" | translate}} </button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
         <mat-menu #More="matMenu">
           <span *ngIf="centerViewData.collectionMeetingCalendar">
-            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
-              (click)="doAction('Attendance')"> {{"labels.buttons.Attendance" | translate}} </button>
+            <button
+              mat-menu-item
+              *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+              (click)="doAction('Attendance')"
+            >
+              {{ 'labels.buttons.Attendance' | translate }}
+            </button>
           </span>
-          <span *ngIf="!(centerViewData.staffId)">
+          <span *ngIf="!centerViewData.staffId">
             <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
-              {{"labels.buttons.Assign Staff" | translate}} </button>
+              {{ 'labels.buttons.Assign Staff' | translate }}
+            </button>
           </span>
           <span *ngIf="centerViewData.staffId">
             <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
-              {{"labels.buttons.Unassign Staff" | translate}} </button>
+              {{ 'labels.buttons.Unassign Staff' | translate }}
+            </button>
           </span>
-          <span *ngIf="centerViewData.status.value==='Active'">
-            <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')"> {{"labels.buttons.Delete" | translate}}</button>
+          <span *ngIf="centerViewData.status.value === 'Active'">
+            <button mat-menu-item *mifosxHasPermission="'DELETE_CENTER'" (click)="doAction('Delete')">
+              {{ 'labels.buttons.Delete' | translate }}
+            </button>
           </span>
-          <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')"> {{"labels.buttons.Close" | translate}} </button>
-          <span *ngIf="centerViewData.status.value==='Active' && !(centerViewData.collectionMeetingCalendar)">
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_CENTER'" (click)="doAction('Close')">
+            {{ 'labels.buttons.Close' | translate }}
+          </button>
+          <span *ngIf="centerViewData.status.value === 'Active' && !centerViewData.collectionMeetingCalendar">
             <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
-              {{"labels.buttons.Attach Meeting" | translate}} </button>
+              {{ 'labels.buttons.Attach Meeting' | translate }}
+            </button>
           </span>
-          <button mat-menu-item *mifosxHasPermission="'READ_Staff Assignment History'"
-            (click)="doAction('Staff Assignment History')"> {{"labels.buttons.Staff Assignment History" | translate}} </button>
+          <button
+            mat-menu-item
+            *mifosxHasPermission="'READ_Staff Assignment History'"
+            (click)="doAction('Staff Assignment History')"
+          >
+            {{ 'labels.buttons.Staff Assignment History' | translate }}
+          </button>
         </mat-menu>
       </mat-menu>
     </mat-card-title-group>
-
   </mat-card-header>
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{"labels.inputs.General" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_GROUPNOTE'" [routerLink]="['./notes']" routerLinkActive
-        #notes="routerLinkActive" [active]="notes.isActive">
-        {{"labels.inputs.Notes" | translate}}
+      <a
+        mat-tab-link
+        *mifosxHasPermission="'READ_GROUPNOTE'"
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <span *ngFor="let centerDatatable of centerDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
-          [routerLink]="['./datatables',centerDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{centerDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + centerDatatable.registeredTableName"
+          [routerLink]="['./datatables', centerDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ centerDatatable.registeredTableName }}
         </a>
       </span>
     </nav>
diff --git a/src/app/centers/centers-view/general-tab/general-tab.component.html b/src/app/centers/centers-view/general-tab/general-tab.component.html
index db671ba816..69688acd15 100644
--- a/src/app/centers/centers-view/general-tab/general-tab.component.html
+++ b/src/app/centers/centers-view/general-tab/general-tab.component.html
@@ -1,130 +1,173 @@
 <div class="tab-container mat-typography">
-  <div *ngIf="centerViewData.status.value==='Closed'">
-    <h3 class="closedCenter">{{"labels.heading.Center Closed" | translate}}</h3>
+  <div *ngIf="centerViewData.status.value === 'Closed'">
+    <h3 class="closedCenter">{{ 'labels.heading.Center Closed' | translate }}</h3>
   </div>
-  <h3>{{"labels.heading.Summary Details" | translate}}</h3>
+  <h3>{{ 'labels.heading.Summary Details' | translate }}</h3>
   <div fxLayout="row" fxLayoutGap="32px" class="summary-details-container">
     <p>
-      {{"labels.inputs.Active Clients" | translate}}: {{centerSummaryData.activeClients}}<br />
-      {{"labels.inputs.Active Group Loans" | translate}}: {{centerSummaryData.activeGroupLoans}}<br />
-      {{"labels.inputs.Active Client Loans" | translate}}: {{centerSummaryData.activeClientLoans}}<br />
-      {{"labels.inputs.Active Overdue Group Loans" | translate}}: {{centerSummaryData.overdueGroupLoans}}<br />
+      {{ 'labels.inputs.Active Clients' | translate }}: {{ centerSummaryData.activeClients }}<br />
+      {{ 'labels.inputs.Active Group Loans' | translate }}: {{ centerSummaryData.activeGroupLoans }}<br />
+      {{ 'labels.inputs.Active Client Loans' | translate }}: {{ centerSummaryData.activeClientLoans }}<br />
+      {{ 'labels.inputs.Active Overdue Group Loans' | translate }}: {{ centerSummaryData.overdueGroupLoans }}<br />
     </p>
     <p>
-      {{"labels.inputs.Active Group Borrowers" | translate}}: {{centerSummaryData.activeGroupBorrowers}}<br />
-      {{"labels.inputs.Active Client Borrowers" | translate}}: {{centerSummaryData.activeClientBorrowers}}<br />
-      {{"labels.inputs.Active Overdue Client Loans" | translate}}: {{centerSummaryData.overdueClientLoans}}<br />
+      {{ 'labels.inputs.Active Group Borrowers' | translate }}: {{ centerSummaryData.activeGroupBorrowers }}<br />
+      {{ 'labels.inputs.Active Client Borrowers' | translate }}: {{ centerSummaryData.activeClientBorrowers }}<br />
+      {{ 'labels.inputs.Active Overdue Client Loans' | translate }}: {{ centerSummaryData.overdueClientLoans }}<br />
     </p>
   </div>
 
   <!-- Groups -->
   <ng-container *ngIf="groupResourceData.length > 0">
-
-    <h3>{{"labels.heading.Groups"|translate}}</h3>
+    <h3>{{ 'labels.heading.Groups' | translate }}</h3>
 
     <table mat-table [dataSource]="groupResourceData" matSort>
-
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account Number" | translate}} </th>
-        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
-            [ngClass]="element.status.code|statusLookup"></i>
-          {{element.accountNo}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          <i
+            class="fa fa-stop"
+            matTooltip="{{ element.status.value }}"
+            [ngClass]="element.status.code | statusLookup"
+          ></i>
+          {{ element.accountNo }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Group Name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Name" | translate}} </th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Group Name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Office Name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
-        <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Submitted On">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Submitted On" | translate}} </th>
-        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Submitted On' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.timeline.submittedOnDate | dateFormat }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: groupsColumns;" [routerLink]="['/groups', row.id, 'general']"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: groupsColumns" [routerLink]="['/groups', row.id, 'general']"></tr>
     </table>
-
   </ng-container>
 
   <!-- savings overview table -->
   <ng-container *ngIf="!(savingsAccountData === undefined)">
-
     <ng-container *ngIf="savingsAccountData.length > 0">
-
-      <h3>{{"labels.heading.Savings Account Overview" | translate}}</h3>
+      <h3>{{ 'labels.heading.Savings Account Overview' | translate }}</h3>
 
       <table mat-table [dataSource]="savingsAccountData" matSort>
-
         <ng-container matColumnDef="Account No">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-          <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
-              [ngClass]="element.status.code|statusLookup"></i>
-            {{element.accountNo}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            <i
+              class="fa fa-stop"
+              matTooltip="{{ element.status.value }}"
+              [ngClass]="element.status.code | statusLookup"
+            ></i>
+            {{ element.accountNo }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="Products">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Products" | translate}} </th>
-          <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Products' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="Balance">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate}}</th>
-          <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
         </ng-container>
 
         <ng-container matColumnDef="Actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let element">
             <ng-container *ngIf="element.status.active">
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 100"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
-                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 100"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+              >
+                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 300"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
-                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 300"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+              >
+                <i class="fa fa-arrow-right" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 100"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
-                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 100"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+              >
+                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" *ngIf="element.depositType.id === 300"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
-                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                *ngIf="element.depositType.id === 300"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+              >
+                <i class="fa fa-arrow-left" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
               </button>
             </ng-container>
             <ng-container *ngIf="element.status.submittedAndPendingApproval">
-              <button class="account-action-button" mat-raised-button color="primary"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
-                <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
+              >
+                <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
               </button>
             </ng-container>
             <ng-container *ngIf="!element.status.submittedAndPendingApproval && !element.status.active">
-              <button class="account-action-button" mat-raised-button color="primary"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
-                <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approve' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+              >
+                <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approve' | translate }}"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary"
-                (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
-                <i class="fa fa-power-off" matTooltip="{{ 'tooltips.Activate' | translate}}"></i>
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Activate']"
+              >
+                <i class="fa fa-power-off" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
               </button>
             </ng-container>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: savingsAccountColumns"
+          [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
+        ></tr>
       </table>
-
     </ng-container>
-
   </ng-container>
-
 </div>
diff --git a/src/app/centers/centers-view/notes-tab/notes-tab.component.html b/src/app/centers/centers-view/notes-tab/notes-tab.component.html
index a492016449..358227616d 100644
--- a/src/app/centers/centers-view/notes-tab/notes-tab.component.html
+++ b/src/app/centers/centers-view/notes-tab/notes-tab.component.html
@@ -1,29 +1,46 @@
 <div class="tab-container mat-typography">
-  <h3>{{"labels.heading.Notes" | translate}}</h3>
+  <h3>{{ 'labels.heading.Notes' | translate }}</h3>
   <div>
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="submit()">
+    <form
+      #formRef="ngForm"
+      [formGroup]="noteForm"
+      fxLayout="row"
+      fxLayoutAlign="start baseline"
+      fxLayoutGap="20px"
+      (ngSubmit)="submit()"
+    >
       <mat-form-field fxFlex="calc(90%-20px)">
-        <textarea formControlName="note" matInput placeholder="{{'labels.text.Write a note' | translate}} ...."></textarea>
+        <textarea
+          formControlName="note"
+          matInput
+          placeholder="{{ 'labels.text.Write a note' | translate }} ...."
+        ></textarea>
       </mat-form-field>
-      <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid" *mifosxHasPermission="'CREATE_GROUPNOTE'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{"labels.buttons.Add" | translate}}
+      <button
+        mat-raised-button
+        fxFlex
+        color="primary"
+        [disabled]="!noteForm.valid"
+        *mifosxHasPermission="'CREATE_GROUPNOTE'"
+      >
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Add' | translate }}
       </button>
     </form>
   </div>
   <mat-list>
-    <mat-list-item *ngFor="let centerNote of centerNotes; let i=index;">
+    <mat-list-item *ngFor="let centerNote of centerNotes; let i = index">
       <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{centerNote.note}} </h3>
+      <h3 matLine>{{ centerNote.note }}</h3>
       <p matLine>
-        <span>{{"labels.inputs.Created By" | translate}}: {{centerNote.createdByUsername}}</span><br />
-        <span>{{"labels.inputs.Date" | translate}}: {{centerNote.createdOn | dateFormat}}</span>
+        <span>{{ 'labels.inputs.Created By' | translate }}: {{ centerNote.createdByUsername }}</span
+        ><br />
+        <span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
-        <button mat-button color="primary" (click)="editNote(centerNote.id,centerNote.note,i)">
+        <button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>
-        <button mat-button color="warn" (click)="deleteNote(centerNote.id,i)">
+        <button mat-button color="warn" (click)="deleteNote(centerNote.id, i)">
           <fa-icon icon="trash"></fa-icon>
         </button>
       </div>
diff --git a/src/app/centers/centers.component.html b/src/app/centers/centers.component.html
index 878f363234..59e30cd67a 100644
--- a/src/app/centers/centers.component.html
+++ b/src/app/centers/centers.component.html
@@ -2,60 +2,73 @@
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box">
       <mat-form-field>
-        <input matInput placeholder="Search by Name" [formControl]="name">
+        <input matInput placeholder="Search by Name" [formControl]="name" />
       </mat-form-field>
       <mat-form-field>
-        <input matInput placeholder="Search by ExternalID" [formControl]="externalId">
+        <input matInput placeholder="Search by ExternalID" [formControl]="externalId" />
       </mat-form-field>
       <mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()">
-        {{"labels.inputs.Show Closed Centers" | translate}}
+        {{ 'labels.inputs.Show Closed Centers' | translate }}
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Centers']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Center" | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        [routerLink]="['../', 'organization', 'bulk-import', 'Centers']"
+        *mifosxHasPermission="'CREATE_CENTER'"
+      >
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Center' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Center" | translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Center' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
-      <td mat-cell *matCellDef="let center"> {{ center.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let center">{{ center.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="accountNo">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account" | translate}} # </th>
-      <td mat-cell *matCellDef="let center"> {{ center.accountNo }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account' | translate }} #</th>
+      <td mat-cell *matCellDef="let center">{{ center.accountNo }}</td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
-      <td mat-cell *matCellDef="let center"> {{ center.externalId }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
+      <td mat-cell *matCellDef="let center">{{ center.externalId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
       <td mat-cell *matCellDef="let row">
-        <div [ngClass]="row.status.code|statusLookup">
+        <div [ngClass]="row.status.code | statusLookup">
           <fa-icon icon="stop"></fa-icon>
         </div>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name" | translate}} </th>
-      <td mat-cell *matCellDef="let center"> {{ center.officeName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
+      <td mat-cell *matCellDef="let center">{{ center.officeName }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id, 'general']" class="select-row"></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [routerLink]="[row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    [length]="dataSource?.records$ | async"
+    [pageSize]="10"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    showFirstLastButtons
+  ></mat-paginator>
 </mat-card>
diff --git a/src/app/centers/create-center/create-center.component.html b/src/app/centers/create-center/create-center.component.html
index 368686b095..e472d4dca7 100644
--- a/src/app/centers/create-center/create-center.component.html
+++ b/src/app/centers/create-center/create-center.component.html
@@ -1,38 +1,36 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="centerForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="centerForm.controls.name.hasError('required')">
-              {{"labels.inputs.Center Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="centerForm.controls.name.hasError('pattern')">
-              {{"labels.inputs.Center Name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.inputs.begin with a special character or number" | translate}}
+              {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="centerForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -41,89 +39,108 @@
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="active">
-            {{"labels.inputs.Active" | translate}}
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field *ngIf="this.centerForm.controls.active.value" (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="activationDatePicker"
+              required
+              formControlName="activationDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="centerForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field (click)="submittedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="submittedOnDatePicker"
+              required
+              formControlName="submittedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="centerForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submission Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Select and Add groups" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Select and Add groups' | translate }}</mat-label>
             <mat-select [formControl]="groupChoice">
               <mat-option *ngFor="let group of groupsData" [value]="group">
                 {{ group.name }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row">
-
           <div class="mat-table" *ngIf="groupChoice.value">
             <div class="mat-header-row">
-              <div class="mat-header-cell">{{"labels.inputs.Group Details" | translate}}</div>
+              <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
               <button mat-icon-button (click)="addGroup()">
                 <fa-icon icon="plus"></fa-icon>
               </button>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">{{"labels.inputs.name" | translate}}</div>
-              <div class="mat-cell">{{groupChoice.value.name}}</div>
+              <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+              <div class="mat-cell">{{ groupChoice.value.name }}</div>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">{{"labels.inputs.Id" | translate}}</div>
-              <div class="mat-cell">{{groupChoice.value.id}}</div>
+              <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+              <div class="mat-cell">{{ groupChoice.value.id }}</div>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">{{"labels.inputs.Office" | translate}}</div>
-              <div class="mat-cell">{{groupChoice.value.officeName}}</div>
+              <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+              <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
             </div>
           </div>
 
           <mat-nav-list *ngIf="groupMembers.length">
-            <h3 matSubheader>{{"labels.heading.Selected Groups" | translate}}</h3>
-            <div mat-list-item *ngFor="let group of groupMembers index as i">
+            <h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
+            <div mat-list-item *ngFor="let group of groupMembers; index as i">
               <button mat-icon-button (click)="removeGroup(i)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <span matLine>{{group.name}}</span>
+              <span matLine>{{ group.name }}</span>
             </div>
           </mat-nav-list>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!centerForm.valid" (click)="submit()" *mifosxHasPermission="'CREATE_CENTER'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!centerForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'CREATE_CENTER'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/centers/edit-center/edit-center.component.html b/src/app/centers/edit-center/edit-center.component.html
index 629790642e..b5f8a11fa3 100644
--- a/src/app/centers/edit-center/edit-center.component.html
+++ b/src/app/centers/edit-center/edit-center.component.html
@@ -1,26 +1,23 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editCenterForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
-              {{"labels.inputs.Center Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
-              {{"labels.inputs.Center Name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.inputs.begin with a special character or number" | translate}}
+              {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffs" [value]="staff.id">
                 {{ staff.displayName }}
@@ -29,34 +26,40 @@
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
-          <ng-container *ngIf="centerData.status.value==='Pending'" (click)="activatedOnDatePicker.open()">
+          <ng-container *ngIf="centerData.status.value === 'Pending'" (click)="activatedOnDatePicker.open()">
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
-                formControlName="activationDate">
+              <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="activatedOnDatePicker"
+                required
+                formControlName="activationDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #activatedOnDatePicker></mat-datepicker>
               <mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
-                {{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
           </ng-container>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!editCenterForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/client-stepper/client-address-step/client-address-step.component.html b/src/app/clients/client-stepper/client-address-step/client-address-step.component.html
index 6755036866..e0e4104cfc 100644
--- a/src/app/clients/client-stepper/client-address-step/client-address-step.component.html
+++ b/src/app/clients/client-stepper/client-address-step/client-address-step.component.html
@@ -1,19 +1,15 @@
 <div class="mat-typography">
-
-  <h3>{{"labels.heading.Address" | translate}}</h3>
+  <h3>{{ 'labels.heading.Address' | translate }}</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
   <mat-accordion *ngIf="clientAddressData.length > 0">
-
     <mat-expansion-panel *ngFor="let address of clientAddressData; index as i" class="address">
-
       <mat-expansion-panel-header>
-
         <mat-panel-title>
           {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
         </mat-panel-title>
@@ -21,49 +17,63 @@ <h3>{{"labels.heading.Address" | translate}}</h3>
         <mat-panel-description>
           {{ address.relationship }}
         </mat-panel-description>
-
       </mat-expansion-panel-header>
 
       <mat-divider></mat-divider>
 
       <div class="address-actions" fxLayout="row" fxLayoutAlign="flex-end center">
-        <button mat-button color="primary" (click)="editAddress(address,i)">
+        <button mat-button color="primary" (click)="editAddress(address, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>
-        <button mat-button color="warn" (click)="deleteAddress(address,i)">
+        <button mat-button color="warn" (click)="deleteAddress(address, i)">
           <fa-icon icon="trash"></fa-icon>
         </button>
         <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
       </div>
 
       <p>
-        <span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
-        <span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
-        <span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
-          {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
-          {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
-        <span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
+        <span *ngIf="isFieldEnabled('street')"
+          >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('addressLine1')"
+          >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('addressLine2')"
+          >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('addressLine3')"
+          >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('townVillage')"
+          >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+        <span *ngIf="isFieldEnabled('stateProvinceId')"
+          >{{ 'labels.inputs.State / Province' | translate }} :
+          {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('countryId')"
+          >{{ 'labels.inputs.Country' | translate }} : {{ getSelectedValue('countryIdOptions', address.countryId)?.name
+          }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('postalCode')"
+          >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('isActive')"
+          >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
+        /></span>
       </p>
-
     </mat-expansion-panel>
-
   </mat-accordion>
 
   <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>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </div>
diff --git a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
index 4cb94353db..1a683bdcbc 100644
--- a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
+++ b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
@@ -1,51 +1,68 @@
 <form [formGroup]="datatableForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
       <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+        <mat-label>{{ getInputName(datatableInput) }}</mat-label>
 
-        <mat-label>{{getInputName(datatableInput)}}</mat-label>
-
-        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+        <mat-select
+          *ngIf="isDropdown(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        >
           <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
             {{ code.value }}
           </mat-option>
         </mat-select>
 
-        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
-        formControlName="{{datatableInput.controlName}}">
+        <input
+          matInput
+          type="number"
+          *ngIf="isNumeric(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        />
 
-        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
-        formControlName="{{datatableInput.controlName}}">
+        <input
+          matInput
+          *ngIf="isString(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        />
 
-        <textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
-        formControlName="{{datatableInput.controlName}}"></textarea>
+        <textarea
+          matInput
+          *ngIf="isText(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        ></textarea>
 
         <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
-          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <input
+            matInput
+            [matDatepicker]="datePicker"
+            formControlName="{{ datatableInput.controlName }}"
+            class="date-picker"
+          />
           <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
           <mat-datepicker #datePicker></mat-datepicker>
         </span>
       </mat-form-field>
 
-      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
-        labelPosition="before" class="margin-v">
-        {{getInputName(datatableInput)}}
+      <mat-checkbox
+        *ngIf="isBoolean(datatableInput.columnDisplayType)"
+        formControlName="{{ datatableInput.controlName }}"
+        labelPosition="before"
+        class="margin-v"
+      >
+        {{ getInputName(datatableInput) }}
       </mat-checkbox>
     </div>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
index 98659017f5..0c3a00b391 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html
@@ -1,104 +1,113 @@
-<h1 mat-dialog-title>{{ data.context }} {{"labels.heading.Family Member" | translate}}</h1>
+<h1 mat-dialog-title>{{ data.context }} {{ 'labels.heading.Family Member' | translate }}</h1>
 
 <form [formGroup]="familyMemberForm">
-
   <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
       <input formControlName="firstName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
-        {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
       <input formControlName="middleName" matInput />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
       <input formControlName="lastName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
-        {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Qualification" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
       <input formControlName="qualification" matInput />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
-      <input type="number" formControlName="age" matInput [min]="0"/>
+      <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
+      <input type="number" formControlName="age" matInput [min]="0" />
       <mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
-        {{"labels.inputs.Age" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required and cannot be negative" | translate}}</strong>
+        {{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%">{{"labels.inputs.Is Dependent" | translate}}?</mat-checkbox>
+    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%"
+      >{{ 'labels.inputs.Is Dependent' | translate }}?</mat-checkbox
+    >
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
       <mat-select formControlName="relationshipId" required>
         <mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
-          {{ relation.name | translateKey:'catalogs' }}
+          {{ relation.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.controls.relationshipId.hasError('required')">
-        {{"labels.inputs.Relationship" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
       <mat-select formControlName="genderId" required>
         <mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
-          {{ gender.name | translateKey:'catalogs' }}
+          {{ gender.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="familyMemberForm.controls.genderId.hasError('required')">
-        {{"labels.inputs.Gender" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Profession" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
       <mat-select formControlName="professionId">
         <mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
-          {{ profession.name | translateKey:'catalogs' }}
+          {{ profession.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Marital Status" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
       <mat-select formControlName="maritalStatusId">
-        <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions"
-          [value]="maritalStatus.id">
-          {{ maritalStatus.name | translateKey:'catalogs' }}
+        <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions" [value]="maritalStatus.id">
+          {{ maritalStatus.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-
     <mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
-      <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
-      <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required>
+      <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
+      <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dueDatePicker></mat-datepicker>
       <mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
-        {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <mat-dialog-actions align="center">
-    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-    <button mat-raised-button color="primary" [disabled]="!familyMemberForm.valid" [mat-dialog-close]="{ member: familyMember }">{{"labels.buttons.Confirm" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+    <button
+      mat-raised-button
+      color="primary"
+      [disabled]="!familyMemberForm.valid"
+      [mat-dialog-close]="{ member: familyMember }"
+    >
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </form>
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
index 790b3737f6..01b602a691 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
@@ -1,67 +1,65 @@
 <div class="mat-typography">
+  <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
 
-    <h3>{{"labels.heading.Family Members" | translate}}</h3>
+  <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
+    <button mat-raised-button color="primary" (click)="addFamilyMember()">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+    </button>
+  </div>
 
-    <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
-      <button mat-raised-button color="primary" (click)="addFamilyMember()">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
-      </button>
-    </div>
+  <mat-accordion>
+    <mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
+        </mat-panel-title>
 
-    <mat-accordion>
+        <mat-panel-description>
+          {{ member.relationship }}
+        </mat-panel-description>
+      </mat-expansion-panel-header>
 
-      <mat-expansion-panel *ngFor="let member of clientFamilyMembers;index as i" class="family-member">
+      <mat-divider></mat-divider>
 
-        <mat-expansion-panel-header>
+      <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
+        <button mat-button color="primary">
+          <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
+        </button>
+        <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName, i)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </div>
 
-          <mat-panel-title>
-            {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
-          </mat-panel-title>
-
-          <mat-panel-description>
-            {{member.relationship}}
-          </mat-panel-description>
-
-        </mat-expansion-panel-header>
-
-        <mat-divider></mat-divider>
-
-        <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
-          <button mat-button color="primary">
-            <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
-          </button>
-          <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName,i)">
-            <fa-icon icon="trash"></fa-icon>
-          </button>
-        </div>
-
-        <p>
-          {{"labels.inputs.First Name" | translate}} : {{ member.firstName }}<br />
-          {{"labels.inputs.Middle Name" | translate}} : {{ member.middleName }}<br />
-          {{"labels.inputs.Last Name" | translate}} : {{ member.lastName }}<br />
-          {{"labels.inputs.Qualification" | translate}} : {{ member.qualification }}<br />
-          {{"labels.inputs.Relationship" | translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Age" | translate}} : {{ member.age }}<br />
-          {{"labels.inputs.Is Dependent" | translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          {{"labels.inputs.Marital Status" | translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Gender" | translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Profession" | translate}} : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Date Of Birth" | translate}} : {{member.dateOfBirth | dateFormat}}<br />
-        </p>
-
-      </mat-expansion-panel>
-
-    </mat-accordion>
-
-    <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>
-        {{"labels.buttons.Previous" | translate}}
-      </button>
-      <button mat-raised-button matStepperNext>
-        {{"labels.buttons.Next" | translate}}
-        <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-      </button>
-    </div>
+      <p>
+        {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
+        {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
+        {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
+        {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
+        {{ 'labels.inputs.Relationship' | translate }} :
+        {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
+        }}<br />
+        {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
+        {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+        {{ 'labels.inputs.Marital Status' | translate }} :
+        {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
+        }}<br />
+        {{ 'labels.inputs.Gender' | translate }} :
+        {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
+        {{ 'labels.inputs.Profession' | translate }} :
+        {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
+        {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
+      </p>
+    </mat-expansion-panel>
+  </mat-accordion>
 
+  <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>
+      {{ 'labels.buttons.Previous' | translate }}
+    </button>
+    <button mat-raised-button matStepperNext>
+      {{ 'labels.buttons.Next' | translate }}
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+    </button>
+  </div>
 </div>
diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
index 1d3ed8af0c..ee662d297a 100644
--- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
+++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
@@ -1,88 +1,104 @@
 <form [formGroup]="createClientForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
       <mat-select required formControlName="officeId">
         <mat-option *ngFor="let office of officeOptions" [value]="office.id">
           {{ office.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.officeId.hasError('required')">
-        {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Office' | 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.Legal Form" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
       <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
-          {{ legalForm.value | translateKey:'inputs'}}
+          {{ legalForm.value | translateKey: 'inputs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-      <input matInput formControlName="externalId">
+      <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+      <input matInput formControlName="externalId" />
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('fullname')" fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}</mat-label>
-      <input matInput required formControlName="fullname">
+      <mat-label>{{
+        'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate
+      }}</mat-label>
+      <input matInput required formControlName="fullname" />
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
-        {{"labels.inputs.Client name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('pattern')">
-        {{"labels.inputs.Client name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('firstname')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
-      <input matInput required formControlName="firstname">
+      <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+      <input matInput required formControlName="firstname" />
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
-        {{"labels.inputs.Client first name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
-        {{"labels.inputs.Client first name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('middlename')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
-      <input matInput formControlName="middlename">
+      <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
+      <input matInput formControlName="middlename" />
       <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
-        {{"labels.inputs.Client middle name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('lastname')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
-      <input matInput required formControlName="lastname">
+      <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+      <input matInput required formControlName="lastname" />
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
-        {{"labels.inputs.Client last name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
-        {{"labels.inputs.Client last name" | translate}} <strong>{{"labels.inputs.cannot" | translate}}</strong> {{"labels.commons.begin with a special character or number" | translate}}
+        {{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+        {{ 'labels.commons.begin with a special character or number' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-divider></mat-divider>
 
     <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-      <mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }}</mat-label>
-      <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
+      <mat-label>{{
+        'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date'])
+          | translate
+      }}</mat-label>
+      <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth" />
       <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
     </mat-form-field>
 
-    <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
-      *ngIf="createClientForm.contains('clientNonPersonDetails')">
-
+    <div
+      fxFlex="100%"
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+      formGroupName="clientNonPersonDetails"
+      *ngIf="createClientForm.contains('clientNonPersonDetails')"
+    >
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Constitution" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
         <mat-select formControlName="constitutionId" required>
           <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
             {{ constitution.name }}
@@ -91,7 +107,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Main Business Line" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
         <mat-select formControlName="mainBusinessLineId">
           <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
             {{ business.name }}
@@ -100,26 +116,31 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
-        <mat-label>{{"labels.inputs.Incorporation Validity Till Date" | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
+        <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="incorpValidityTillDateDatePicker"
+          formControlName="incorpValidityTillDate"
+        />
         <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Incorporation Number" | translate}}</mat-label>
-        <input matInput formControlName="incorpNumber">
+        <mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
+        <input matInput formControlName="incorpNumber" />
       </mat-form-field>
 
       <mat-form-field fxFlex="98%">
-        <mat-label>{{"labels.inputs.Remarks" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
         <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
-
     </div>
 
     <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
       <mat-select formControlName="genderId">
         <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
           {{ gender.name }}
@@ -128,7 +149,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
       <mat-select formControlName="staffId">
         <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
           {{ staff.displayName }}
@@ -136,27 +157,33 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
-      {{"labels.inputs.Is staff" | translate}}?
+    <mat-checkbox
+      *ngIf="createClientForm.value.legalFormId === 1"
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="isStaff"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Is staff' | translate }}?
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Mobile No" | translate}}</mat-label>
-      <input matInput type="number" formControlName="mobileNo">
+      <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
+      <input matInput type="number" formControlName="mobileNo" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Email Address" | translate}}</mat-label>
-      <input matInput formControlName="emailAddress">
+      <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
+      <input matInput formControlName="emailAddress" />
       <mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
-        {{"error.Email not valid" | translate}}
+        {{ 'error.Email not valid' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Client Type" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
       <mat-select formControlName="clientTypeId">
         <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
           {{ clientType.name }}
@@ -165,17 +192,27 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Client Classification" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
       <mat-select formControlName="clientClassificationId">
-        <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
+        <mat-option
+          *ngFor="let clientClassification of clientClassificationTypeOptions"
+          [value]="clientClassification.id"
+        >
           {{ clientClassification.name }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-      <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
+      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedOnDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
     </mat-form-field>
@@ -183,47 +220,57 @@
     <br />
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="active" class="margin-v">
-      {{"labels.inputs.Active" | translate}}?
+      {{ 'labels.inputs.Active' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%" (click)="activatedOnDatePicker.open()">
-      <mat-label>{{"labels.inputs.Activation Date" | translate}}</mat-label>
-      <input matInput [min]="createClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
-        formControlName="activationDate">
+    <mat-form-field
+      *ngIf="createClientForm.contains('activationDate')"
+      fxFlex="48%"
+      (click)="activatedOnDatePicker.open()"
+    >
+      <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="createClientForm.value.submittedOnDate"
+        [max]="maxDate"
+        [matDatepicker]="activatedOnDatePicker"
+        required
+        formControlName="activationDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #activatedOnDatePicker></mat-datepicker>
       <mat-error *ngIf="createClientForm.controls.activationDate.hasError('required')">
-        {{"labels.inputs.Activation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="addSavings" class="margin-v">
-      {{"labels.inputs.Open Savings Account" | translate}}?
+      {{ 'labels.inputs.Open Savings Account' | translate }}?
     </mat-checkbox>
 
     <mat-form-field *ngIf="createClientForm.contains('savingsProductId')" fxFlex="48%">
-      <mat-label>{{"labels.inputs.Savings Product" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
       <mat-select required formControlName="savingsProductId">
         <mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="createClientForm.controls.savingsProductId.hasError('required')">
-        {{"labels.inputs.Savings Product" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
index 02b3085967..b634508ae5 100644
--- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
+++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
@@ -1,28 +1,30 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.General" | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.General' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.name" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.name' | translate }}</span>
     <span fxFlex="60%" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
-    <span fxFlex="60%" *ngIf="client.legalFormId === 1">{{ client.firstname }} {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span>
+    <span fxFlex="60%" *ngIf="client.legalFormId === 1"
+      >{{ client.firstname }}
+      {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Office" | translate}}</span>
-    <span fxFlex="60%">{{ client.officeId | find:clientTemplate.officeOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
+    <span fxFlex="60%">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Legal Form" | translate}}</span>
-    <span fxFlex="60%">{{ client.legalFormId | find:clientTemplate.clientLegalFormOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Legal Form' | translate }}</span>
+    <span fxFlex="60%">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.staffId">
-    <span fxFlex="40%">{{"labels.inputs.Staff" | translate}}</span>
-    <span fxFlex="60%">{{ client.staffId | find:clientTemplate.staffOptions:'id':'displayName' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Staff' | translate }}</span>
+    <span fxFlex="60%">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.dateOfBirth">
@@ -31,195 +33,211 @@ <h3 class="mat-h3" fxFlexFill>{{"labels.heading.General" | translate}}</h3>
   </div>
 
   <div fxFlexFill *ngIf="client.externalId">
-    <span fxFlex="40%">{{"labels.inputs.External Id" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
     <span fxFlex="60%">
-      <mifosx-external-identifier externalId="{{client.externalId}}"></mifosx-external-identifier>
+      <mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
     </span>
   </div>
 
   <div fxFlexFill *ngIf="client.mobileNo">
-    <span fxFlex="40%">{{"labels.inputs.Mobile No" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Mobile No' | translate }}</span>
     <span fxFlex="60%">{{ client.mobileNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.emailAddress">
-    <span fxFlex="40%">{{"labels.inputs.Email Address" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Email Address' | translate }}</span>
     <span fxFlex="60%">{{ client.emailAddress }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.clientTypeId">
-    <span fxFlex="40%">{{"labels.inputs.Client Type" | translate}}</span>
-    <span fxFlex="60%">{{ client.clientTypeId | find:clientTemplate.clientTypeOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Client Type' | translate }}</span>
+    <span fxFlex="60%">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.clientClassificationId">
-    <span fxFlex="40%">{{"labels.inputs.Client Classification" | translate}}</span>
-    <span fxFlex="60%">{{ client.clientClassificationId | find:clientTemplate.clientClassificationOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Client Classification' | translate }}</span>
+    <span fxFlex="60%">{{
+      client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.savingsProductId">
-    <span fxFlex="40%">{{"labels.inputs.Savings Product" | translate}}</span>
-    <span fxFlex="60%">{{ client.savingsProductId | find:clientTemplate.savingProductOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Savings Product' | translate }}</span>
+    <span fxFlex="60%">{{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.submittedOnDate">
-    <span fxFlex="40%">{{"labels.inputs.Submitted On Date" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
     <span fxFlex="60%">{{ client.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Active" | translate}}?</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Active' | translate }}?</span>
     <span fxFlex="60%">{{ client.active | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.activationDate">
-    <span fxFlex="40%">{{"labels.inputs.Activation Date" | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Activation Date' | translate }}</span>
     <span fxFlex="60%">{{ client.activationDate | dateFormat }}</span>
   </div>
 
   <ng-container *ngIf="client.legalFormId === 1">
-
     <div fxFlexFill *ngIf="client.genderId">
-      <span fxFlex="40%">{{"labels.inputs.Gender" | translate}}</span>
-      <span fxFlex="60%">{{ client.genderId | find:clientTemplate.genderOptions:'id':'name' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Gender' | translate }}</span>
+      <span fxFlex="60%">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Is staff" | translate}}?</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Is staff' | translate }}?</span>
       <span fxFlex="60%">{{ client.isStaff | yesNo }}</span>
     </div>
-
   </ng-container>
 
   <ng-container *ngIf="client.legalFormId === 2">
-
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
-      <span fxFlex="40%">{{"labels.inputs.Incorporation Validity Till Date" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Incorportation Number" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
     </div>
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
-      <span fxFlex="40%">{{"labels.inputs.Main Business Line" | translate}}</span>
-      <span fxFlex="60%">{{ client.clientNonPersonDetails.mainBusinessLineId | find:clientTemplate.clientNonPersonMainBusinessLineOptions:'id':'name' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Main Business Line' | translate }}</span>
+      <span fxFlex="60%">{{
+        client.clientNonPersonDetails.mainBusinessLineId
+          | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
+      }}</span>
     </div>
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.constitutionId">
-      <span fxFlex="40%">{{"labels.inputs.Constitution" | translate}}</span>
-      <span fxFlex="60%">{{ client.clientNonPersonDetails.constitutionId | find:clientTemplate.clientNonPersonConstitutionOptions:'id':'name'}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Constitution' | translate }}</span>
+      <span fxFlex="60%">{{
+        client.clientNonPersonDetails.constitutionId
+          | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
+      }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Remarks" | translate}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Remarks' | translate }}</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
     </div>
-
   </ng-container>
 
   <div fxFlexFill *ngIf="client.familyMembers.length" fxLayout="row wrap" fxLayout.lt-md="column" class="m-b-20">
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Family Members" | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Family Members' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <mat-accordion fxFlexFill class="m-t-5">
-
       <mat-expansion-panel *ngFor="let member of client.familyMembers" class="family-member">
-
         <mat-expansion-panel-header>
-
           <mat-panel-title>
             {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
           </mat-panel-title>
 
           <mat-panel-description>
-            {{member.relationship}}
+            {{ member.relationship }}
           </mat-panel-description>
-
         </mat-expansion-panel-header>
 
         <mat-divider></mat-divider>
 
         <p>
-          {{"labels.inputs.First Name" | translate}} : {{ member.firstName }}<br />
-          {{"labels.inputs.Middle Name" | translate}} : {{ member.middleName }}<br />
-          {{"labels.inputs.Last Name" | translate}} : {{ member.lastName }}<br />
-          {{"labels.inputs.Qualification" | translate}} : {{ member.qualification }}<br />
-          {{"labels.inputs.Relationship" | translate}} : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Age" | translate}} : {{ member.age }}<br />
-          {{"labels.inputs.Is Dependent" | translate}} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          {{"labels.inputs.Marital Status" | translate}} : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Gender" | translate}} : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Profession" | translate}} : {{ member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          {{"labels.inputs.Date Of Birth" | translate}} : {{ member.dateOfBirth | dateFormat }}<br />
+          {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
+          {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
+          {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
+          {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
+          {{ 'labels.inputs.Relationship' | translate }} :
+          {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
+          }}<br />
+          {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
+          {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+          {{ 'labels.inputs.Marital Status' | translate }} :
+          {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
+          }}<br />
+          {{ 'labels.inputs.Gender' | translate }} :
+          {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
+          {{ 'labels.inputs.Profession' | translate }} :
+          {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
+          {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
         </p>
-
       </mat-expansion-panel>
-
     </mat-accordion>
-
   </div>
 
-  <div fxFlexFill *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Address" | translate}}</h3>
+  <div
+    fxFlexFill
+    *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length"
+    fxLayout="row wrap"
+    fxLayout.lt-md="column"
+  >
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Address' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <mat-accordion fxFlexFill class="m-t-5">
-
       <mat-expansion-panel *ngFor="let address of client.address" class="address">
-
         <mat-expansion-panel-header>
-
           <mat-panel-title>
             {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
           </mat-panel-title>
 
           <mat-panel-description>
-            {{address.relationship}}
+            {{ address.relationship }}
           </mat-panel-description>
-
         </mat-expansion-panel-header>
 
         <mat-divider></mat-divider>
 
         <p>
-          <span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
-          <span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
-          <span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
-          <span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
-          <span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
-          <span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
-          <span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
-            {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
-          <span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
-            {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
-          <span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
-          <span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
+          <span *ngIf="isFieldEnabled('street')"
+            >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('addressLine1')"
+            >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('addressLine2')"
+            >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('addressLine3')"
+            >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('townVillage')"
+            >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+          <span *ngIf="isFieldEnabled('stateProvinceId')"
+            >{{ 'labels.inputs.State / Province' | translate }} :
+            {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('countryId')"
+            >{{ 'labels.inputs.Country' | translate }} :
+            {{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('postalCode')"
+            >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
+          /></span>
+          <span *ngIf="isFieldEnabled('isActive')"
+            >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
+          /></span>
         </p>
-
       </mat-expansion-panel>
-
     </mat-accordion>
-
   </div>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{"labels.buttons.Cancel" | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{"labels.buttons.Submit" | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/clients/clients-view/address-tab/address-tab.component.html b/src/app/clients/clients-view/address-tab/address-tab.component.html
index 08796d3629..72a60de906 100644
--- a/src/app/clients/clients-view/address-tab/address-tab.component.html
+++ b/src/app/clients/clients-view/address-tab/address-tab.component.html
@@ -1,52 +1,64 @@
 <div class="tab-container mat-typography">
-
-  <h3>{{"labels.heading.Address" | translate}}</h3>
+  <h3>{{ 'labels.heading.Address' | translate }}</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
   <mat-accordion>
-
-    <mat-expansion-panel *ngFor="let address of clientAddressData;index as i" class="address">
-
+    <mat-expansion-panel *ngFor="let address of clientAddressData; index as i" class="address">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{address.addressType}}
+          {{ address.addressType }}
         </mat-panel-title>
         <mat-panel-description>
-          {{address.relationship}}
+          {{ address.relationship }}
         </mat-panel-description>
       </mat-expansion-panel-header>
 
       <mat-divider [inset]="true"></mat-divider>
 
       <div class="address-actions" fxLayout="row" fxLayoutAlign="flex-end center">
-        <button mat-button color="primary" (click)="editAddress(address,i)">
+        <button mat-button color="primary" (click)="editAddress(address, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>
         <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
       </div>
 
       <p>
-        <span *ngIf="isFieldEnabled('street')">{{"labels.inputs.Street" | translate}} : {{address.street}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine1')">{{"labels.inputs.Address Line" | translate}} 1 : {{address.addressLine1}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine2')">{{"labels.inputs.Address Line" | translate}} 2 : {{address.addressLine2}}<br /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')">{{"labels.inputs.Address Line" | translate}} 3 : {{address.addressLine3}}<br /></span>
-        <span *ngIf="isFieldEnabled('townVillage')">{{"labels.inputs.Town / Village" | translate}} : {{address.townVillage}}<br /></span>
-        <span *ngIf="isFieldEnabled('city')">{{"labels.inputs.City" | translate}} : {{address.city}}<br /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')">{{"labels.inputs.State / Province" | translate}} :
-          {{getSelectedValue('stateProvinceIdOptions',address.stateProvinceId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('countryId')">{{"labels.inputs.Country" | translate}} :
-          {{getSelectedValue('countryIdOptions',address.countryId)?.name}}<br /></span>
-        <span *ngIf="isFieldEnabled('postalCode')">{{"labels.inputs.Postal Code" | translate}} : {{address.postalCode}}<br /></span>
-        <span *ngIf="isFieldEnabled('isActive')">{{"labels.inputs.Active Status" | translate}} : {{address.isActive}}<br /></span>
+        <span *ngIf="isFieldEnabled('street')"
+          >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('addressLine1')"
+          >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('addressLine2')"
+          >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('addressLine3')"
+          >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('townVillage')"
+          >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+        <span *ngIf="isFieldEnabled('stateProvinceId')"
+          >{{ 'labels.inputs.State / Province' | translate }} :
+          {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('countryId')"
+          >{{ 'labels.inputs.Country' | translate }} : {{ getSelectedValue('countryIdOptions', address.countryId)?.name
+          }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('postalCode')"
+          >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
+        /></span>
+        <span *ngIf="isFieldEnabled('isActive')"
+          >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
+        /></span>
       </p>
-
     </mat-expansion-panel>
-
   </mat-accordion>
-
 </div>
diff --git a/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
index b21d60c981..2de7bc11f8 100644
--- a/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
+++ b/src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html
@@ -1,49 +1,48 @@
 <mat-card class="charges-card">
-
   <div class="tab-container mat-typography">
-
-    <h2>{{"labels.heading.Charges Overview" | translate}}</h2>
+    <h2>{{ 'labels.heading.Charges Overview' | translate }}</h2>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
-            [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
-          {{chargeOverviewData.name}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">
+          <i
+            class="fa fa-stop"
+            [ngClass]="!(chargeOverviewData.isWaived || chargeOverviewData.isPaid) | statusLookup"
+          ></i>
+          {{ chargeOverviewData.name }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due as of" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due as of' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountPaid }}</td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountWaived }}</td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let chargeOverviewData">{{ chargeOverviewData.amountOutstanding }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
-
   </div>
 </mat-card>
diff --git a/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
index 70052437e1..d6feedcfb7 100644
--- a/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
+++ b/src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html
@@ -1,38 +1,42 @@
 <div class="container mat-typography">
-
   <mat-card>
-
     <form [formGroup]="transactionForm" (ngSubmit)="submit()">
-
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label> {{"labels.inputs.Amount" | translate}} </mat-label>
-          <input matInput required autofocus formControlName="amount">
+          <mat-label> {{ 'labels.inputs.Amount' | translate }} </mat-label>
+          <input matInput required autofocus formControlName="amount" />
           <mat-error *ngIf="transactionForm.controls.amount.hasError('required')">
-            {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field (click)="transactionDatePicker.open()">
-          <mat-label> {{"labels.inputs.Transaction date" | translate}} </mat-label>
-          <input matInput [min]="minDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-label> {{ 'labels.inputs.Transaction date' | translate }} </mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [matDatepicker]="transactionDatePicker"
+            required
+            formControlName="transactionDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="transactionForm.controls.transactionDate.hasError('required')">
-            {{"labels.inputs.Transaction date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../..','general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../..', 'general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!transactionForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </div>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/charges/view-charge/view-charge.component.html b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
index 3b5d7dc986..511dac8c5a 100644
--- a/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
+++ b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
@@ -1,115 +1,115 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
     <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Pay" | translate}}
+    {{ 'labels.buttons.Pay' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="waiveCharge()" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
     <i class="fa fa-flag"></i>
-    {{"labels.buttons.Waive Charge" | translate}}
+    {{ 'labels.buttons.Waive Charge' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="deleteCharge()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
-    <mat-card-title> <i class="fa fa-stop" [ngClass]="(!(chargeData.isWaived || chargeData.isPaid))|statusLookup"></i>
+    <mat-card-title>
+      <i class="fa fa-stop" [ngClass]="!(chargeData.isWaived || chargeData.isPaid) | statusLookup"></i>
       {{ chargeData.name }}
     </mat-card-title>
 
     <mat-divider></mat-divider>
 
     <mat-card-content>
-
       <div class="share-account-tables p-t-20" fxLayout="row wrap" fxFlex="50%">
-
         <table>
-
           <tbody>
-
             <tr>
-              <td> {{"labels.inputs.Currency" | translate}} </td>
-              <td> {{ chargeData.currency.name }} </td>
+              <td>{{ 'labels.inputs.Currency' | translate }}</td>
+              <td>{{ chargeData.currency.name }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Charge Time Type" | translate}} </td>
-              <td> {{ chargeData.chargeTimeType.value }} </td>
+              <td>{{ 'labels.inputs.Charge Time Type' | translate }}</td>
+              <td>{{ chargeData.chargeTimeType.value }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Charge Calculation Type" | translate}} </td>
-              <td> {{ chargeData.chargeCalculationType.value }} </td>
+              <td>{{ 'labels.inputs.Charge Calculation Type' | translate }}</td>
+              <td>{{ chargeData.chargeCalculationType.value }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Due as of" | translate}} </td>
-              <td> {{ chargeData.dueDate | dateFormat }} </td>
+              <td>{{ 'labels.inputs.Due as of' | translate }}</td>
+              <td>{{ chargeData.dueDate | dateFormat }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Due" | translate}} </td>
-              <td> {{ chargeData.amount }} </td>
+              <td>{{ 'labels.inputs.Due' | translate }}</td>
+              <td>{{ chargeData.amount }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Paid" | translate}} </td>
-              <td> {{ chargeData.amountPaid }} </td>
+              <td>{{ 'labels.inputs.Paid' | translate }}</td>
+              <td>{{ chargeData.amountPaid }}</td>
             </tr>
 
             <tr>
-              <td> {{"labels.inputs.Waived" | translate}} </td>
-              <td> {{ chargeData.amountWaived }} </td>
+              <td>{{ 'labels.inputs.Waived' | translate }}</td>
+              <td>{{ chargeData.amountWaived }}</td>
             </tr>
             <tr>
-              <td> {{"labels.inputs.Outstanding" | translate}} </td>
-              <td> {{ chargeData.amountOutstanding }} </td>
+              <td>{{ 'labels.inputs.Outstanding' | translate }}</td>
+              <td>{{ chargeData.amountOutstanding }}</td>
             </tr>
-
           </tbody>
-
         </table>
-
       </div>
-
     </mat-card-content>
 
-    <div fxLayout="row wrap" class="content" style="padding-top:10px">
-      <h1><b> {{"labels.heading.Transactions" | translate}} </b></h1>
+    <div fxLayout="row wrap" class="content" style="padding-top: 10px">
+      <h1>
+        <b> {{ 'labels.heading.Transactions' | translate }} </b>
+      </h1>
 
       <table mat-table [dataSource]="chargeData.clientTransactionDatas" *ngIf="chargeData.clientTransactionDatas">
-
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.id}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">{{ element.id }}</td>
         </ng-container>
 
         <ng-container matColumnDef="officeName">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.officeName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.officeName }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.type.value}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.type.value }}
+          </td>
         </ng-container>
         <ng-container matColumnDef="transactionDate">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date | dateFormat}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.date | dateFormat }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | formatNumber }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
+            {{ element.amount | formatNumber }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+          <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
               <fa-icon icon="trash" class="m-r-10"></fa-icon>
             </button>
@@ -117,16 +117,14 @@ <h1><b> {{"labels.heading.Transactions" | translate}} </b></h1>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="viewChargeTableColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns;"></tr>
+        <tr mat-row *matRowDef="let row; columns: viewChargeTableColumns"></tr>
       </table>
-
     </div>
 
-
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../','general']">{{"labels.buttons.Back" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../', 'general']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html b/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html
index 8817b3fd62..24d4f41114 100644
--- a/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html
+++ b/src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html
@@ -1,32 +1,28 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="acceptClientTransferForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
index 211412e65c..e2d3be615a 100644
--- a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
+++ b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #activationDatePicker></mat-datepicker>
-            <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activationDatePicker"
+            required
+            formControlName="activationDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #activationDatePicker></mat-datepicker>
+          <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html b/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html
index d12b35dcce..7a79c112bd 100644
--- a/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html
+++ b/src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html
@@ -1,46 +1,45 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="clientChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let clientCharge of clientChargeOptions" [value]="clientCharge.id">
                 {{ clientCharge.name + ' (' + clientCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientChargeForm.controls.chargeId.hasError('required')">
-              {{"labels.inputs.Charge" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
-                {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge Calculation" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
               <mat-select formControlName="chargeCalculationType">
-                <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id">
+                <mat-option
+                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
+                  [value]="chargeCalculation.id"
+                >
                   {{ chargeCalculation.value }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge time type" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,45 +48,57 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{"labels.inputs.Due for collection on" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-                formControlName="dueDate">
+              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="dueDatePicker"
+                required
+                formControlName="dueDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.dueDate.hasError('required')">
-                {{"labels.inputs.Due for collection on" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>{{"labels.inputs.Due On" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
-                formControlName="feeOnMonthDay">
+              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="feeOnMonthDayPicker"
+                required
+                formControlName="feeOnMonthDay"
+              />
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{"labels.inputs.Due Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeInterval')">
-              <mat-label>{{"labels.inputs.Repeats Every" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
-
           </div>
-
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html b/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html
index ff344dee06..ce635f39cc 100644
--- a/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html
+++ b/src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html
@@ -1,82 +1,77 @@
 <div class="container">
-
-    <mat-card>
-
-        <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
-
-            <mat-card-content>
-
-                <div fxLayout="column">
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.Collateral" | translate}}</mat-label>
-                        <mat-select required formControlName="collateralId">
-                            <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
-                                {{ clientCollateral.name }}
-                            </mat-option>
-                        </mat-select>
-                        <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
-                            {{"labels.inputs.Collateral" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <div *ngIf="collateralDetails" fxLayout="column">
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-                            <input matInput required formControlName="name">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
-                            <input matInput required formControlName="quality">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
-                            <input matInput required formControlName="unitType">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
-                            <input matInput required formControlName="basePrice">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Percentage To Base" | translate}}</mat-label>
-                            <input matInput required formControlName="pctToBase">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Quantity" | translate}}</mat-label>
-                            <input matInput required formControlName="quantity">
-                            <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                {{"labels.inputs.Quantity" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-                            </mat-error>
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Total" | translate}}</mat-label>
-                            <input matInput required formControlName="totalValue">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Total Collateral Value" | translate}}</mat-label>
-                            <input matInput required formControlName="totalCollateralValue">
-                        </mat-form-field>
-
-                    </div>
-
-                </div>
-
-            </mat-card-content>
-
-            <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{"labels.buttons.Submit" | translate}}</button>
-            </mat-card-actions>
-
-        </form>
-
-    </mat-card>
-
+  <mat-card>
+    <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Collateral' | translate }}</mat-label>
+            <mat-select required formControlName="collateralId">
+              <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
+                {{ clientCollateral.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
+              {{ 'labels.inputs.Collateral' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <div *ngIf="collateralDetails" fxLayout="column">
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+              <input matInput required formControlName="name" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Type/Quality' | translate }}</mat-label>
+              <input matInput required formControlName="quality" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Unit Type' | translate }}</mat-label>
+              <input matInput required formControlName="unitType" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
+              <input matInput required formControlName="basePrice" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Percentage To Base' | translate }}</mat-label>
+              <input matInput required formControlName="pctToBase" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
+              <input matInput required formControlName="quantity" />
+              <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
+                {{ 'labels.inputs.Quantity' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Total' | translate }}</mat-label>
+              <input matInput required formControlName="totalValue" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
+              <input matInput required formControlName="totalCollateralValue" />
+            </mat-form-field>
+          </div>
+        </div>
+      </mat-card-content>
+
+      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </mat-card-actions>
+    </form>
+  </mat-card>
 </div>
diff --git a/src/app/clients/clients-view/client-actions/client-actions.component.html b/src/app/clients/clients-view/client-actions/client-actions.component.html
index 8e4dc5c9d2..6e04f34c11 100644
--- a/src/app/clients/clients-view/client-actions/client-actions.component.html
+++ b/src/app/clients/clients-view/client-actions/client-actions.component.html
@@ -15,4 +15,4 @@
 <mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
 <mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>
 <mifosx-create-self-service-user *ngIf="actions['Create Self Service User']"></mifosx-create-self-service-user>
-<mifosx-add-client-collateral *ngIf="actions['Create Collateral']"></mifosx-add-client-collateral>
\ No newline at end of file
+<mifosx-add-client-collateral *ngIf="actions['Create Collateral']"></mifosx-add-client-collateral>
diff --git a/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html b/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html
index 995e8c7cb1..2524d962b6 100644
--- a/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html
+++ b/src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html
@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="clientAssignStaffForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientAssignStaffForm.controls.staffId.hasError('required')">
-              {{"labels.inputs.Staff" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
index c57eebfb82..51c7b3ad10 100644
--- a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
+++ b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
@@ -1,56 +1,46 @@
 <div class="container m-b-20">
-
   <mat-card>
-
     <form [formGroup]="clientScreenReportForm" (ngSubmit)="generate()">
-
       <mat-card-content>
-
         <div>
-
           <mat-form-field fxFlex>
-            <mat-label>{{"labels.inputs.Client Screen Reports" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Screen Reports' | translate }}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
                 {{ template.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientScreenReportForm.controls.templateId.hasError('required')">
-              {{"labels.inputs.Screen Report" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Screen Report' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
         <button mat-raised-button color="primary" [disabled]="!clientScreenReportForm.valid">
-          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{"labels.buttons.Generate Report" | translate}}</button>
+          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <div #output class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="3%">
-
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
-        {{"labels.buttons.Print" | translate}}
+        {{ 'labels.buttons.Print' | translate }}
       </button>
     </div>
 
     <div #screenReport fxLayoutAlign="center">
-      <p>{{"labels.text.Please select a screen report." | translate}}</p>
+      <p>{{ 'labels.text.Please select a screen report.' | translate }}</p>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/close-client/close-client.component.html b/src/app/clients/clients-view/client-actions/close-client/close-client.component.html
index 9952074b96..043e54b243 100644
--- a/src/app/clients/clients-view/client-actions/close-client/close-client.component.html
+++ b/src/app/clients/clients-view/client-actions/close-client/close-client.component.html
@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closureDatePicker"
+              required
+              formControlName="closureDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeClientForm.controls.closureDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Closure Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeClientForm.controls.closureReasonId.hasError('required')">
-              {{"labels.inputs.Closure Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html b/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html
index 57152f0845..f9f0544622 100644
--- a/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html
+++ b/src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html
@@ -1,123 +1,122 @@
 <div class="container">
-
-    <mat-card>
-
-        <form [formGroup]="createSelfServiceForm" (ngSubmit)="submit()">
-
-            <mat-card-content>
-
-                <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.User Name" | translate}} </mat-label>
-                        <input matInput required formControlName="username">
-                        <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
-                            {{"labels.inputs.User Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.First Name" | translate}} </mat-label>
-                        <input matInput required formControlName="firstname">
-                        <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
-                            {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.Last Name" | translate}} </mat-label>
-                        <input matInput required formControlName="lastname">
-                        <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
-                            {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.Email" | translate}} </mat-label>
-                        <input matInput required formControlName="email">
-                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
-                            {{"labels.inputs.Email" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
-                            {{"labels.inputs.Email should be a" | translate}} <strong>{{"labels.inputs.valid" |
-                                translate}}</strong> {{"labels.inputs.email" | translate}}.
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
-                        {{"labels.inputs.Auto Generate Password" | translate}}
-                    </mat-checkbox>
-
-                    <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
-
-                        <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
-                            {{"labels.inputs.Override Password Expire Policy" | translate}} ?
-                        </mat-checkbox>
-
-                        <i class="fa fa-question-circle fa fa-align-left"
-                            title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"></i>
-
-                    </div>
-
-                    <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-                        <input matInput formControlName="password" type="password">
-                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
-                            {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('minlength')">
-                            {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.12 characters long' | translate }}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('maxlength')">
-                            {{'labels.commons.Password should not be more than' | translate }}
-                            <strong>{{'labels.commons.50 characters long' | translate }}</strong>
-                        </mat-error>
-                        <mat-error
-                            *ngIf="createSelfServiceForm.controls.password.hasError('pattern') && !(createSelfServiceForm.controls.password.hasError('minlength') || createSelfServiceForm.controls.password.hasError('maxlength'))">
-                            {{'labels.commons.Password should include a' | translate }}
-                            <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }}
-                            <strong>{{'labels.commons.least one uppercase' | translate }}</strong>
-                            ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> {{"labels.inputs.Repeat Password" | translate}} </mat-label>
-                        <input matInput required formControlName="repeatPassword" type="password">
-                        <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
-                            {{"labels.inputs.Repeat password" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
-                            {{"labels.inputs.Passwords should be" | translate}} <strong>{{"labels.inputs.matched" |
-                                translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="48%">
-                        <mat-label> {{"labels.inputs.Status" | translate}} </mat-label>
-                        <input matInput formControlName="status">
-                    </mat-form-field>
-
-                </div>
-
-                <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-                    <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" |
-                        translate}}</button>
-                    <button mat-raised-button color="primary"
-                        [disabled]="!createSelfServiceForm.valid">{{"labels.buttons.Activate Self Service User" |
-                        translate}}</button>
-                    <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
-                </mat-card-actions>
-
-            </mat-card-content>
-
-        </form>
-
-    </mat-card>
-
+  <mat-card>
+    <form [formGroup]="createSelfServiceForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.User Name' | translate }} </mat-label>
+            <input matInput required formControlName="username" />
+            <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
+              {{ 'labels.inputs.User Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.First Name' | translate }} </mat-label>
+            <input matInput required formControlName="firstname" />
+            <mat-error *ngIf="createSelfServiceForm.controls.firstname.hasError('required')">
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.Last Name' | translate }} </mat-label>
+            <input matInput required formControlName="lastname" />
+            <mat-error *ngIf="createSelfServiceForm.controls.lastname.hasError('required')">
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.Email' | translate }} </mat-label>
+            <input matInput required formControlName="email" />
+            <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
+              {{ 'labels.inputs.Email should be a' | translate }}
+              <strong>{{ 'labels.inputs.valid' | translate }}</strong> {{ 'labels.inputs.email' | translate }}.
+            </mat-error>
+          </mat-form-field>
+
+          <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
+            {{ 'labels.inputs.Auto Generate Password' | translate }}
+          </mat-checkbox>
+
+          <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
+              {{ 'labels.inputs.Override Password Expire Policy' | translate }} ?
+            </mat-checkbox>
+
+            <i
+              class="fa fa-question-circle fa fa-align-left"
+              title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"
+            ></i>
+          </div>
+
+          <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+            <input matInput formControlName="password" type="password" />
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
+              {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('minlength')">
+              {{ 'labels.commons.Password should be at least' | translate }}
+              <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('maxlength')">
+              {{ 'labels.commons.Password should not be more than' | translate }}
+              <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
+            </mat-error>
+            <mat-error
+              *ngIf="
+                createSelfServiceForm.controls.password.hasError('pattern') &&
+                !(
+                  createSelfServiceForm.controls.password.hasError('minlength') ||
+                  createSelfServiceForm.controls.password.hasError('maxlength')
+                )
+              "
+            >
+              {{ 'labels.commons.Password should include a' | translate }}
+              <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
+              <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong>
+              ,<strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
+            <mat-label> {{ 'labels.inputs.Repeat Password' | translate }} </mat-label>
+            <input matInput required formControlName="repeatPassword" type="password" />
+            <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
+              {{ 'labels.inputs.Repeat password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
+              {{ 'labels.inputs.Passwords should be' | translate }}
+              <strong>{{ 'labels.inputs.matched' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label> {{ 'labels.inputs.Status' | translate }} </mat-label>
+            <input matInput formControlName="status" />
+          </mat-form-field>
+        </div>
+
+        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+          <button type="button" mat-raised-button [routerLink]="['../../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">
+            {{ 'labels.buttons.Activate Self Service User' | translate }}
+          </button>
+          <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
+        </mat-card-actions>
+      </mat-card-content>
+    </form>
+  </mat-card>
 </div>
diff --git a/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html b/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html
index 629a295611..491b35b01e 100644
--- a/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html
+++ b/src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="reactivateClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Re Activation On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reactivationDatePicker" required formControlName="reactivationDate">
-            <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #reactivationDatePicker></mat-datepicker>
-            <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
-              {{"labels.inputs.Reactivation Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Re Activation On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="reactivationDatePicker"
+            required
+            formControlName="reactivationDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #reactivationDatePicker></mat-datepicker>
+          <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
+            {{ 'labels.inputs.Reactivation Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html b/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html
index 4df50c527c..3ca4abbc5f 100644
--- a/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html
+++ b/src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html
@@ -1,32 +1,28 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectClientTransferForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html b/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html
index 408a3e10d5..9e922b9144 100644
--- a/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html
+++ b/src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html
@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Rejection Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectionDatePicker" required formControlName="rejectionDate">
+            <mat-label>{{ 'labels.inputs.Rejection Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectionDatePicker"
+              required
+              formControlName="rejectionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectionDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectClientForm.controls.rejectionDate.hasError('required')">
-              {{"labels.inputs.Rejection Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejection Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Rejection Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Rejection Reason' | translate }}</mat-label>
             <mat-select formControlName="rejectionReasonId">
               <mat-option *ngFor="let reason of rejectionData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rejectClientForm.controls.rejectionReasonId.hasError('required')">
-              {{"labels.inputs.Rejection Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejection Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html b/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html
index fa1ebe3f84..5cbf95cf18 100644
--- a/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html
+++ b/src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html
@@ -1,60 +1,53 @@
 <div class="container mat-typography">
-
   <div class="mat-elevation-z2 surveyCont">
-
     <div class="surveySelect" fxLayout="row">
-
-      <mat-label class="nameLabel">{{"labels.inputs.Survey Name" | translate}}</mat-label>
+      <mat-label class="nameLabel">{{ 'labels.inputs.Survey Name' | translate }}</mat-label>
       <mat-select (selectionChange)="onSurveyChange($event)">
         <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
-          {{surveyData.name}}
+          {{ surveyData.name }}
         </mat-option>
       </mat-select>
-
     </div>
 
-    <hr>
+    <hr />
 
     <div>
-
       <ng-container *ngFor="let component of componentGroups">
-
-        <h2 *ngIf="component[0].componentKey"> component[0].componentKey </h2>
+        <h2 *ngIf="component[0].componentKey">component[0].componentKey</h2>
 
         <div fxLayout="column" class="displayQuestions">
-
           <ng-container *ngFor="let question of component">
-
             <div fxLayout="row" class="question">
-
-              <mat-label fxFlex="40" class="questionText">{{question.text}}</mat-label>
+              <mat-label fxFlex="40" class="questionText">{{ question.text }}</mat-label>
 
               <mat-radio-group fxFlex="60" [(ngModel)]="question.answer">
-
-                <mat-radio-button fxLayout="column" class="radio-button" *ngFor="let options of question.responseDatas"
-                  style="margin-bottom: 5px; align-items: normal; white-space: normal;" [value]="options">
+                <mat-radio-button
+                  fxLayout="column"
+                  class="radio-button"
+                  *ngFor="let options of question.responseDatas"
+                  style="margin-bottom: 5px; align-items: normal; white-space: normal"
+                  [value]="options"
+                >
                   <span class="wrap-mat-radio-label">
-                    {{options.text}}
+                    {{ options.text }}
                   </span>
                 </mat-radio-button>
-
               </mat-radio-group>
-
             </div>
 
-            <div *ngIf="question.answer">{{"labels.text.Your answer is" | translate}}: {{question.answer.text}}</div>
-
+            <div *ngIf="question.answer">
+              {{ 'labels.text.Your answer is' | translate }}: {{ question.answer.text }}
+            </div>
           </ng-container>
-
         </div>
-
       </ng-container>
-
     </div>
 
-    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>{{"labels.buttons.Submit" | translate}}</button>
-
+    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">
+      {{ 'labels.buttons.Cancel' | translate }}
+    </button>
+    <button mat-raised-button class="button-submit" color="primary" (click)="submit()">
+      {{ 'labels.buttons.Submit' | translate }}
+    </button>
   </div>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html b/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html
index a91860a1d2..ab8d8d411e 100644
--- a/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html
+++ b/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html
@@ -1,51 +1,54 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="transferClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="destinationOfficeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientForm.controls.destinationOfficeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="transferDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+            <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transferDatePicker"
+              required
+              formControlName="transferDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="transferClientForm.controls.transferDate.hasError('required')">
-              {{"labels.inputs.Transfer Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transfer Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html b/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
index 78a25d6cf7..7bf854daab 100644
--- a/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
+++ b/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="undoClientRejectionForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Reopened On Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reopenedDatePicker" required formControlName="reopenedDate">
-            <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #reopenedDatePicker></mat-datepicker>
-            <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
-              {{"labels.inputs.Reopened On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Reopened On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="reopenedDatePicker"
+            required
+            formControlName="reopenedDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #reopenedDatePicker></mat-datepicker>
+          <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
+            {{ 'labels.inputs.Reopened On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html b/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html
index ee689bab4a..abf22453e9 100644
--- a/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html
+++ b/src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html
@@ -1,32 +1,28 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="undoClientTransferForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transfer Date" | translate}}</mat-label>
-          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
+          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
+          <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html b/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html
index 9f43c8f8d3..6140327f37 100644
--- a/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html
+++ b/src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html
@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="clientSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Default Savings Account" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
             <mat-select formControlName="savingsAccountId">
               <mat-option *ngFor="let account of savingsAccounts" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientSavingsAccountForm.controls.savingsAccountId.hasError('required')">
-              {{"labels.inputs.Account" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html b/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
index ca7f45f6ef..34c3d89c6c 100644
--- a/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
+++ b/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
@@ -1,51 +1,46 @@
 <div class="container m-b-20" fxLayoutAlign="end">
   <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Take Survey" | translate}}
+    {{ 'labels.buttons.Take Survey' | translate }}
   </button>
 </div>
 
-
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="surveyName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> {{"labels.inputs.Survey" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName">{{ 'labels.inputs.Survey' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.surveyName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> {{"labels.inputs.Created By" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy">
+          {{ 'labels.inputs.Created By' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let survey">{{ survey.createdBy }}</td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.DateTime" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.date  | datetimeFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.DateTime' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.date | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="score">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Score" | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.score | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Score' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.score | formatNumber }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html b/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html
index 32218f0b95..f4ccd3d769 100644
--- a/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html
+++ b/src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html
@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="withdrawClientForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="withdrawalDatePicker.open()">
-            <mat-label>{{"labels.inputs.Withdrawal Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawalDatePicker" required formControlName="withdrawalDate">
+            <mat-label>{{ 'labels.inputs.Withdrawal Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="withdrawalDatePicker"
+              required
+              formControlName="withdrawalDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawalDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalDate.hasError('required')">
-              {{"labels.inputs.Withdrawal Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Withdrawal Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Withdrawal Reason" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Withdrawal Reason' | translate }}</mat-label>
             <mat-select formControlName="withdrawalReasonId">
               <mat-option *ngFor="let reason of withdrawalData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalReasonId.hasError('required')">
-              {{"labels.inputs.Withdrawal Reason" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Withdrawal Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">{{"labels.buttons.Confirm" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index ab4eb0b4a6..406f786366 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -1,39 +1,57 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
-            [src]="(clientImage)?clientImage:'assets/images/user_placeholder.png'">
+          <img
+            mat-card-md-image
+            class="profile-image"
+            [src]="clientImage ? clientImage : 'assets/images/user_placeholder.png'"
+          />
         </div>
         <div fxLayoutAlign="center center" class="m-b-5">
-          <button class="client-image-button" mat-raised-button (click)="doAction('Upload Image')"
-            matTooltip="{{ 'tooltips.Upload Image' | translate}}" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          <button
+            class="client-image-button"
+            mat-raised-button
+            (click)="doAction('Upload Image')"
+            matTooltip="{{ 'tooltips.Upload Image' | translate }}"
+            *mifosxHasPermission="'CREATE_CLIENTIMAGE'"
+          >
             <i class="fa fa-upload"></i>
           </button>
-          <button class="client-image-button" mat-raised-button (click)="doAction('Capture Image')"
-            matTooltip="{{ 'tooltips.Capture Image' | translate}}" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          <button
+            class="client-image-button"
+            mat-raised-button
+            (click)="doAction('Capture Image')"
+            matTooltip="{{ 'tooltips.Capture Image' | translate }}"
+            *mifosxHasPermission="'CREATE_CLIENTIMAGE'"
+          >
             <i class="fa fa-camera"></i>
           </button>
-          <button class="client-image-button" mat-raised-button (click)="doAction('Delete Image')"
-            matTooltip="{{ 'tooltips.Delete Image' | translate}}" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+          <button
+            class="client-image-button"
+            mat-raised-button
+            (click)="doAction('Delete Image')"
+            matTooltip="{{ 'tooltips.Delete Image' | translate }}"
+            *mifosxHasPermission="'DELETE_CLIENTIMAGE'"
+          >
             <i class="fa fa-trash"></i>
           </button>
-          <br>
+          <br />
         </div>
-        <p (click)="doAction('View Signature')" class="signature">{{"labels.inputs.View Signature" | translate}}</p>
+        <p (click)="doAction('View Signature')" class="signature">{{ 'labels.inputs.View Signature' | translate }}</p>
       </div>
 
       <div class="mat-typography account-card-title">
-
         <mat-card-title fxLayout="row wrap" class="content">
           <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup"
-              matTooltip="{{'labels.status.' + clientViewData.status.value | translate}}"></i>
-            <b>{{"labels.inputs.Client Name" | translate}} :</b><mifosx-entity-name entityName="{{clientViewData.displayName}}"></mifosx-entity-name>
+            <i
+              class="fa fa-stop"
+              [ngClass]="clientViewData.status.code | statusLookup"
+              matTooltip="{{ 'labels.status.' + clientViewData.status.value | translate }}"
+            ></i>
+            <b>{{ 'labels.inputs.Client Name' | translate }} :</b
+            ><mifosx-entity-name entityName="{{ clientViewData.displayName }}"></mifosx-entity-name>
           </h3>
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="clientMenu" aria-label="Client actions" yPosition="below">
@@ -50,56 +68,90 @@ <h3 fxFlex="95%">
               <table class="account-overview">
                 <tbody>
                   <tr>
-                    <td><b>{{"labels.inputs.Office" | translate}}</b></td>
-                    <td><mifosx-entity-name entityName="{{clientViewData.officeName}}"></mifosx-entity-name></td>
+                    <td>
+                      <b>{{ 'labels.inputs.Office' | translate }}</b>
+                    </td>
+                    <td><mifosx-entity-name entityName="{{ clientViewData.officeName }}"></mifosx-entity-name></td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Client" | translate}}</b></td>
-                    <td><mifosx-account-number accountNo="{{clientViewData.accountNo}}"></mifosx-account-number></td>
+                    <td>
+                      <b>{{ 'labels.inputs.Client' | translate }}</b>
+                    </td>
+                    <td><mifosx-account-number accountNo="{{ clientViewData.accountNo }}"></mifosx-account-number></td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.External Id" | translate}}</b></td>
-                    <td><mifosx-external-identifier externalId="{{clientViewData.externalId}}" completed="true"></mifosx-external-identifier></td>
+                    <td>
+                      <b>{{ 'labels.inputs.External Id' | translate }}</b>
+                    </td>
+                    <td>
+                      <mifosx-external-identifier
+                        externalId="{{ clientViewData.externalId }}"
+                        completed="true"
+                      ></mifosx-external-identifier>
+                    </td>
                   </tr>
                   <tr *ngIf="clientViewData.activationDate">
-                    <td><b>{{"labels.inputs.Activation Date" | translate}}</b></td>
-                    <td>{{clientViewData.activationDate | dateFormat}}</td>
+                    <td>
+                      <b>{{ 'labels.inputs.Activation Date' | translate }}</b>
+                    </td>
+                    <td>{{ clientViewData.activationDate | dateFormat }}</td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Staff" | translate}}</b></td>
-                    <td *ngIf="clientViewData.staffName">{{clientViewData.staffName}}</td>
-                    <td *ngIf="!clientViewData.staffName">{{'labels.inputs.Unassigned' | translate}}</td>
+                    <td>
+                      <b>{{ 'labels.inputs.Staff' | translate }}</b>
+                    </td>
+                    <td *ngIf="clientViewData.staffName">{{ clientViewData.staffName }}</td>
+                    <td *ngIf="!clientViewData.staffName">{{ 'labels.inputs.Unassigned' | translate }}</td>
                   </tr>
                 </tbody>
-              </table> 
+              </table>
             </div>
             <div fxFlex="50%">
               <table class="account-overview">
                 <tbody>
                   <tr *ngIf="clientViewData.groups.length > 0">
-                    <td><b>{{"labels.inputs.Member Of" | translate}}</b></td>
-                    <td><span *ngFor="let group of clientViewData.groups">
-                      <span class="m-r-3">{{group.name}}</span>
-                    </span></td>
+                    <td>
+                      <b>{{ 'labels.inputs.Member Of' | translate }}</b>
+                    </td>
+                    <td>
+                      <span *ngFor="let group of clientViewData.groups">
+                        <span class="m-r-3">{{ group.name }}</span>
+                      </span>
+                    </td>
                   </tr>
                   <tr *ngIf="clientViewData.clientType">
-                    <td><b>{{"labels.inputs.Client Type" | translate}}</b></td>
-                    <td>{{clientViewData.clientType.name}}</td>
+                    <td>
+                      <b>{{ 'labels.inputs.Client Type' | translate }}</b>
+                    </td>
+                    <td>{{ clientViewData.clientType.name }}</td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Mobile Number" | translate}}</b></td>
-                    <td><mifosx-external-identifier externalId="{{clientViewData.mobileNo}}" completed="true"></mifosx-external-identifier></td>
+                    <td>
+                      <b>{{ 'labels.inputs.Mobile Number' | translate }}</b>
+                    </td>
+                    <td>
+                      <mifosx-external-identifier
+                        externalId="{{ clientViewData.mobileNo }}"
+                        completed="true"
+                      ></mifosx-external-identifier>
+                    </td>
                   </tr>
                   <tr>
-                    <td><b>{{"labels.inputs.Email" | translate}}</b></td>
-                    <td><mifosx-external-identifier externalId="{{clientViewData.emailAddress}}" completed="true"></mifosx-external-identifier></td>
+                    <td>
+                      <b>{{ 'labels.inputs.Email' | translate }}</b>
+                    </td>
+                    <td>
+                      <mifosx-external-identifier
+                        externalId="{{ clientViewData.emailAddress }}"
+                        completed="true"
+                      ></mifosx-external-identifier>
+                    </td>
                   </tr>
                 </tbody>
-              </table> 
+              </table>
             </div>
           </div>
         </mat-card-subtitle>
-
       </div>
 
       <mat-menu #clientMenu="matMenu">
@@ -107,28 +159,28 @@ <h3 fxFlex="95%">
           <mat-icon matListIcon>
             <fa-icon icon="edit" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Edit" | translate}}</span>
+          <span>{{ 'labels.buttons.Edit' | translate }}</span>
         </button>
 
         <button *ngIf="isActive()" mat-menu-item [matMenuTriggerFor]="accountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Applications" | translate}}</span>
+          <span>{{ 'labels.buttons.Applications' | translate }}</span>
         </button>
 
         <button mat-menu-item [matMenuTriggerFor]="Actions">
           <mat-icon matListIcon>
             <fa-icon icon="tasks" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Actions" | translate}}</span>
+          <span>{{ 'labels.buttons.Actions' | translate }}</span>
         </button>
 
         <button mat-menu-item (click)="doAction('Assign Staff')" *ngIf="!clientViewData.staffId">
           <mat-icon matListIcon>
             <fa-icon icon="user-tie" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Assign Staff" | translate}}</span>
+          <span>{{ 'labels.buttons.Assign Staff' | translate }}</span>
         </button>
 
         <span *ngIf="clientViewData.staffId">
@@ -136,110 +188,213 @@ <h3 fxFlex="95%">
             <mat-icon matListIcon>
               <fa-icon icon="user-tie" size="sm"></fa-icon>
             </mat-icon>
-            <span>{{"labels.buttons.Unassign Staff" | translate}}</span>
+            <span>{{ 'labels.buttons.Unassign Staff' | translate }}</span>
           </button>
         </span>
 
-        <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate}}</button>
-
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
       </mat-menu>
 
       <mat-menu #accountApplications="matMenu">
-        <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'"
-          [routerLink]="['loans-accounts', 'create']">{{"labels.buttons.New Loan Account" | translate}}</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-          [routerLink]="['savings-accounts', 'create']">{{"labels.buttons.New Savings Account" | translate}}</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'"
-          [routerLink]="['shares-accounts', 'create']">{{"labels.buttons.New Share Account" | translate}}</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
-          [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']">{{"labels.buttons.New Recurring Deposit Account" | translate}}</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
-          [routerLink]="['fixed-deposits-accounts', 'create']">{{"labels.buttons.New Fixed Deposits Account" | translate}}</button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
+          {{ 'labels.buttons.New Loan Account' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+          [routerLink]="['savings-accounts', 'create']"
+        >
+          {{ 'labels.buttons.New Savings Account' | translate }}
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">
+          {{ 'labels.buttons.New Share Account' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
+          [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']"
+        >
+          {{ 'labels.buttons.New Recurring Deposit Account' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
+          [routerLink]="['fixed-deposits-accounts', 'create']"
+        >
+          {{ 'labels.buttons.New Fixed Deposits Account' | translate }}
+        </button>
       </mat-menu>
 
       <mat-menu #Actions="matMenu">
-        <button mat-menu-item (click)="doAction('Close')">{{"labels.buttons.Close" | translate}}</button>
-        <button mat-menu-item (click)="doAction('Transfer Client')">{{"labels.buttons.Transfer Client" | translate}}</button>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            (click)="doAction('Activate')">{{"labels.buttons.Activate" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            (click)="doAction('Withdraw')">{{"labels.buttons.Withdraw" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            (click)="doAction('Reject')">{{"labels.buttons.Reject" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
-            *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">{{"labels.buttons.Delete" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Closed'"><button mat-menu-item
-            (click)="doAction('Reactivate')">{{"labels.buttons.Reactivate" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Rejected'"><button mat-menu-item
-            (click)="doAction('Undo Rejection')">{{"labels.buttons.Undo Rejection" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
-            (click)="doAction('Undo Transfer')">{{"labels.buttons.Undo Transfer" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
-            (click)="doAction('Accept Transfer')">{{"labels.buttons.Accept Transfer" | translate}}</button></span>
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
-            (click)="doAction('Reject Transfer')">{{"labels.buttons.Reject transfer" | translate}}</button></span>
+        <button mat-menu-item (click)="doAction('Close')">{{ 'labels.buttons.Close' | translate }}</button>
+        <button mat-menu-item (click)="doAction('Transfer Client')">
+          {{ 'labels.buttons.Transfer Client' | translate }}
+        </button>
+        <span *ngIf="clientViewData.status.value === 'Pending'"
+          ><button mat-menu-item (click)="doAction('Activate')">
+            {{ 'labels.buttons.Activate' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Pending'"
+          ><button mat-menu-item (click)="doAction('Withdraw')">
+            {{ 'labels.buttons.Withdraw' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Pending'"
+          ><button mat-menu-item (click)="doAction('Reject')">{{ 'labels.buttons.Reject' | translate }}</button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Pending'"
+          ><button mat-menu-item *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">
+            {{ 'labels.buttons.Delete' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Closed'"
+          ><button mat-menu-item (click)="doAction('Reactivate')">
+            {{ 'labels.buttons.Reactivate' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Rejected'"
+          ><button mat-menu-item (click)="doAction('Undo Rejection')">
+            {{ 'labels.buttons.Undo Rejection' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"
+          ><button mat-menu-item (click)="doAction('Undo Transfer')">
+            {{ 'labels.buttons.Undo Transfer' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"
+          ><button mat-menu-item (click)="doAction('Accept Transfer')">
+            {{ 'labels.buttons.Accept Transfer' | translate }}
+          </button></span
+        >
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"
+          ><button mat-menu-item (click)="doAction('Reject Transfer')">
+            {{ 'labels.buttons.Reject transfer' | translate }}
+          </button></span
+        >
       </mat-menu>
 
       <mat-menu #More="matMenu">
-        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> {{"labels.buttons.Add Charge" | translate}}
-        </button>
-        <button mat-menu-item (click)="doAction('Create Collateral')">{{"labels.buttons.Create Collateral" | translate}}</button>
-        <button mat-menu-item (click)="doAction('Survey')">{{"labels.buttons.Survey" | translate}}</button>
-        <button mat-menu-item (click)="doAction('Update Default Savings')"
-          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> {{"labels.buttons.Update Default Savings" | translate}} </button>
-        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> {{"labels.buttons.Upload Signature" | translate}} </button>
-        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'"> {{"labels.buttons.Delete Signature" | translate}} </button>
-        <button mat-menu-item (click)="doAction('Client Screen Reports')"> {{"labels.buttons.Client Screen Reports" | translate}} </button>
-        <button mat-menu-item (click)="doAction('Create Standing Instructions')"
-          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"> {{"labels.buttons.Create Standing Instructions" | translate}}</button>
-        <span *ngIf="clientViewData.status.value!=='Transfer on hold'">
-          <button mat-menu-item (click)="doAction('View Standing Instructions')"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"> {{"labels.buttons.View Standing Instructions" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'">
+          {{ 'labels.buttons.Add Charge' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Create Collateral')">
+          {{ 'labels.buttons.Create Collateral' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Survey')">{{ 'labels.buttons.Survey' | translate }}</button>
+        <button
+          mat-menu-item
+          (click)="doAction('Update Default Savings')"
+          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"
+        >
+          {{ 'labels.buttons.Update Default Savings' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          {{ 'labels.buttons.Upload Signature' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+          {{ 'labels.buttons.Delete Signature' | translate }}
+        </button>
+        <button mat-menu-item (click)="doAction('Client Screen Reports')">
+          {{ 'labels.buttons.Client Screen Reports' | translate }}
+        </button>
+        <button
+          mat-menu-item
+          (click)="doAction('Create Standing Instructions')"
+          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
+        >
+          {{ 'labels.buttons.Create Standing Instructions' | translate }}
+        </button>
+        <span *ngIf="clientViewData.status.value !== 'Transfer on hold'">
+          <button
+            mat-menu-item
+            (click)="doAction('View Standing Instructions')"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+          >
+            {{ 'labels.buttons.View Standing Instructions' | translate }}
+          </button>
         </span>
-        <button mat-menu-item (click)="doAction('Create Self Service User')"> {{"labels.buttons.Create Self Service User" | translate}}</button>
+        <button mat-menu-item (click)="doAction('Create Self Service User')">
+          {{ 'labels.buttons.Create Self Service User' | translate }}
+        </button>
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{"labels.inputs.General" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./address']" routerLinkActive #address="routerLinkActive"
-        [active]="address.isActive">
-        {{"labels.inputs.Address" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./address']"
+        routerLinkActive
+        #address="routerLinkActive"
+        [active]="address.isActive"
+      >
+        {{ 'labels.inputs.Address' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./family-members']" routerLinkActive #familyMembers="routerLinkActive"
-        [active]="familyMembers.isActive">
-        {{"labels.inputs.Family Members" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./family-members']"
+        routerLinkActive
+        #familyMembers="routerLinkActive"
+        [active]="familyMembers.isActive"
+      >
+        {{ 'labels.inputs.Family Members' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./identities']" routerLinkActive #identities="routerLinkActive"
-        [active]="identities.isActive" *mifosxHasPermission="'READ_CLIENTIDENTIFIER'">
-        {{"labels.inputs.Identities" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./identities']"
+        routerLinkActive
+        #identities="routerLinkActive"
+        [active]="identities.isActive"
+        *mifosxHasPermission="'READ_CLIENTIDENTIFIER'"
+      >
+        {{ 'labels.inputs.Identities' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #documents="routerLinkActive"
-        [active]="documents.isActive" *mifosxHasPermission="'READ_DOCUMENT'">
-        {{"labels.inputs.Documents" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./documents']"
+        routerLinkActive
+        #documents="routerLinkActive"
+        [active]="documents.isActive"
+        *mifosxHasPermission="'READ_DOCUMENT'"
+      >
+        {{ 'labels.inputs.Documents' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive"
-        *mifosxHasPermission="'READ_CLIENTNOTE'">
-        {{"labels.inputs.Notes" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+        *mifosxHasPermission="'READ_CLIENTNOTE'"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <ng-container *ngFor="let clientDatatable of clientDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',clientDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive"
-          *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName">
-          {{clientDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          [routerLink]="['./datatables', clientDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName"
+        >
+          {{ clientDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
index 1bfbe2c8c5..6c7b94d32f 100644
--- a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
@@ -1,27 +1,27 @@
 <div fxLayout="column" fxLayoutGap="2%">
-
-  <h1 mat-dialog-title align="center">{{"labels.heading.Capture Client Image" | translate}}</h1>
+  <h1 mat-dialog-title align="center">{{ 'labels.heading.Capture Client Image' | translate }}</h1>
 
   <video #video width="540" height="480" autoplay></video>
 
   <!-- Using a class will break renderer changes -->
-  <canvas #canvas [ngStyle]="{'display': 'none'}"></canvas>
+  <canvas #canvas [ngStyle]="{ display: 'none' }"></canvas>
 
   <!-- Using a class will break renderer changes -->
-  <p #fallback [ngStyle]="{'display': 'none'}" align="center"></p>
+  <p #fallback [ngStyle]="{ display: 'none' }" align="center"></p>
 
   <div fxFlex="20%" align="center">
     <button #captureButton *ngIf="!isCaptured" mat-stroked-button color="primary" (click)="capture()">
-      {{"labels.buttons.Capture" | translate}}
+      {{ 'labels.buttons.Capture' | translate }}
     </button>
     <button *ngIf="isCaptured" mat-stroked-button color="primary" (click)="recapture()">
-      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{"labels.buttons.Recapture" | translate}}
+      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recapture' | translate }}
     </button>
   </div>
 
   <mat-dialog-actions align="end">
-    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-    <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">{{"labels.buttons.Upload" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+    <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">
+      {{ 'labels.buttons.Upload' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html
index ced45541e4..816aba1b4e 100644
--- a/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html
@@ -1,15 +1,19 @@
-<h1 mat-dialog-title>{{"labels.heading.Delete Client Signature" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Delete Client Signature' | translate }}</h1>
 
 <div *ngIf="signatureId" mat-dialog-content>
-  <p>{{"labels.text.Delete clients signature" | translate}} ?</p>
+  <p>{{ 'labels.text.Delete clients signature' | translate }} ?</p>
 </div>
 
 <div *ngIf="!signatureId" mat-dialog-content>
-  <p>{{"labels.text.Client Signature is not provided." | translate}}</p>
+  <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">{{"labels.buttons.Confirm" | translate}}</button>
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">{{"labels.buttons.Upload" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
+  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">
+    {{ 'labels.buttons.Upload' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html
index 1c31e6fb72..f8cfed30b2 100644
--- a/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.html
@@ -1,13 +1,19 @@
-<h1 mat-dialog-title>{{"labels.heading.Edit Note" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Edit Note' | translate }}</h1>
 <div>
   <form #formRef="ngForm" [formGroup]="noteForm">
     <mat-form-field>
       <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
     </mat-form-field>
     <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" [disabled]="noteForm.pristine"
-        [mat-dialog-close]="{ editForm: noteForm }">{{"labels.buttons.Confirm" | translate}}</button>
+      <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="noteForm.pristine"
+        [mat-dialog-close]="{ editForm: noteForm }"
+      >
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-dialog-actions>
   </form>
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
index 4f1c30fdd9..dc6bb42962 100644
--- a/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Unassign Staff" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Unassign Staff' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Unassign Staff client" | translate}} ?</p>
+  <p>{{ 'labels.text.Unassign Staff client' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
index ca69e04d98..a6493d3edf 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
@@ -1,27 +1,34 @@
-<h1 mat-dialog-title>{{"labels.heading.Upload" | translate}} {{ entityType }} {{"labels.heading.Documents" | translate}}</h1>
+<h1 mat-dialog-title>
+  {{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
+</h1>
 <div>
   <form [formGroup]="uploadDocumentForm" fxLayout="column">
-
     <mat-form-field fxFlex>
-      <mat-label>{{"labels.inputs.File Name" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.File Name' | translate }}</mat-label>
       <input formControlName="fileName" required matInput />
       <mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
-        {{"labels.inputs.File Name" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.File Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex *ngIf="!documentIdentifier">
-      <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
       <input formControlName="description" matInput />
     </mat-form-field>
 
     <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
 
     <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" [disabled]="!uploadDocumentForm.valid"
-        [mat-dialog-close]="uploadDocumentForm.value">{{"labels.buttons.Confirm" | translate}}</button>
+      <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="!uploadDocumentForm.valid"
+        [mat-dialog-close]="uploadDocumentForm.value"
+      >
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-dialog-actions>
-
   </form>
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html
index 0aa37ad5c7..b853e17b19 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.html
@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>{{"labels.heading.Upload Client Image" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Upload Client Image' | translate }}</h1>
 
 <div>
-
   <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
   <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">{{"labels.buttons.Confirm" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+    <button mat-raised-button color="primary" [disabled]="!image" [mat-dialog-close]="image">
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html
index 7546e56ccd..93e3f9d8fe 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html
@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>{{"labels.heading.Upload Client Signature" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Upload Client Signature' | translate }}</h1>
 
 <div>
-
   <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
   <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate}}</button>
-      <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">{{"labels.buttons.Confirm" | translate}}</button>
+    <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+    <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
   </mat-dialog-actions>
-
 </div>
diff --git a/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html
index d0b595311f..add202276a 100644
--- a/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html
@@ -1,15 +1,19 @@
-<h1 mat-dialog-title>{{"labels.heading.View Client Signature" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.View Client Signature' | translate }}</h1>
 
 <div *ngIf="signatureId" mat-dialog-content>
-  <img [src]="signatureImage" alt="Signature">
+  <img [src]="signatureImage" alt="Signature" />
 </div>
 
 <div *ngIf="!signatureId" mat-dialog-content>
-  <p>{{"labels.text.Client Signature is not provided." | translate}}</p>
+  <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">{{"labels.buttons.Delete" | translate}}</button>
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">{{"labels.buttons.Upload" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">
+    {{ 'labels.buttons.Delete' | translate }}
+  </button>
+  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">
+    {{ 'labels.buttons.Upload' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/clients/clients-view/documents-tab/documents-tab.component.html b/src/app/clients/clients-view/documents-tab/documents-tab.component.html
index 8c0dd9b622..1be9a0313e 100644
--- a/src/app/clients/clients-view/documents-tab/documents-tab.component.html
+++ b/src/app/clients/clients-view/documents-tab/documents-tab.component.html
@@ -1,4 +1,6 @@
-<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
+<mifosx-entity-documents-tab
+  [entityType]="entityType"
+  [entityId]="entityId"
   [entityDocuments]="entityDocuments"
   [callbackUpload]="uploadDocument"
   [callbackDownload]="downloadDocument"
diff --git a/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html b/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html
index 97484057f6..4be361e616 100644
--- a/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html
+++ b/src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html
@@ -1,108 +1,111 @@
 <div class="add-family-member-container">
-
   <form [formGroup]="addFamilyMemberForm" (ngSubmit)="submit()">
-
     <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
-
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
-          {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
         <input formControlName="middleName" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
-          {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Qualification" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
         <input formControlName="qualification" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
         <input type="number" formControlName="age" required matInput [min]="minAge" />
         <mat-error *ngIf="addFamilyMemberForm.controls.age.hasError('required')">
-          {{"labels.inputs.Age" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required and cannot be negative" | translate}}</strong>
+          {{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">{{"labels.inputs.Is Dependent" | translate}}?
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)"
+        >{{ 'labels.inputs.Is Dependent' | translate }}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
         <mat-select formControlName="relationshipId" required>
           <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
-            {{ relation.name | translateKey:'catalogs' }}
+            {{ relation.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{"labels.inputs.Relationship" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
         <mat-select formControlName="genderId" required>
           <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
-            {{ gender.name | translateKey:'catalogs' }}
+            {{ gender.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="addFamilyMemberForm.controls.genderId.hasError('required')">
-          {{"labels.inputs.Gender" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Profession" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
         <mat-select formControlName="professionId">
           <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
-            {{ profession.name | translateKey:'catalogs' }}
+            {{ profession.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Marital Status" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
         <mat-select formControlName="maritalStatusId">
-          <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            [value]="maritalStatus.id">
-            {{ maritalStatus.name | translateKey:'catalogs'}}
+          <mat-option
+            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
+            [value]="maritalStatus.id"
+          >
+            {{ maritalStatus.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
-
       <mat-form-field fxFlex (click)="dueDatePicker.open()">
-        <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
-        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
-          required>
+        <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
+        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="addFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </div>
-
   </form>
-
 </div>
diff --git a/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html b/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html
index 38cdcb7992..2339699cd7 100644
--- a/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html
+++ b/src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html
@@ -1,108 +1,118 @@
 <div class="add-family-member-container">
-
   <form [formGroup]="editFamilyMemberForm" (ngSubmit)="submit()">
-
     <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
-
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
         <input formControlName="firstName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
-          {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
         <input formControlName="middleName" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
         <input formControlName="lastName" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
-          {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Qualification" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
         <input formControlName="qualification" matInput />
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Age" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
         <input type="number" formControlName="age" required matInput />
         <mat-error *ngIf="editFamilyMemberForm.controls.age.hasError('required')">
-          {{"labels.inputs.Age" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required and cannot be negative" | translate}}</strong>
+          {{ 'labels.inputs.Age' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required and cannot be negative' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">Is Dependent?
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)"
+        >Is Dependent?
       </mat-checkbox>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
         <mat-select formControlName="relationshipId" required>
           <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
-            {{ relation.name | translateKey:'catalogs'}}
+            {{ relation.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{"labels.inputs.Relationship" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
         <mat-select formControlName="genderId" required>
           <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
-            {{ gender.name | translateKey:'catalogs'}}
+            {{ gender.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="editFamilyMemberForm.controls.genderId.hasError('required')">
-          {{"labels.inputs.Gender" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Profession" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
         <mat-select formControlName="professionId">
           <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
-            {{ profession.name | translateKey:'catalogs'}}
+            {{ profession.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="calc(50% - 25px)">
-        <mat-label>{{"labels.inputs.Marital Status" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
         <mat-select formControlName="maritalStatusId">
-          <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            [value]="maritalStatus.id">
-            {{ maritalStatus.name | translateKey:'catalogs'}}
+          <mat-option
+            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
+            [value]="maritalStatus.id"
+          >
+            {{ maritalStatus.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
-
       <mat-form-field fxFlex (click)="dueDatePicker.open()">
-        <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
-        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker"
-          required>
+        <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
+        <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
         <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #dueDatePicker></mat-datepicker>
         <mat-error *ngIf="editFamilyMemberForm.controls.dateOfBirth.hasError('required')">
-          {{"labels.inputs.Date Of Birth" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Date Of Birth' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
     <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate}}</button>
-      <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button
+        type="submit"
+        mat-raised-button
+        color="primary"
+        [disabled]="editFamilyMemberForm.pristine || !editFamilyMemberForm.valid"
+      >
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </div>
-
   </form>
-
 </div>
diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
index 89041aa9dd..8c4edfca9b 100644
--- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
+++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
@@ -1,25 +1,21 @@
 <div class="tab-container mat-typography">
-
   <router-outlet>
-
-    <h3>{{"labels.heading.Family Members" | translate}}</h3>
+    <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
 
     <div fxLayout="row" fxLayoutAlign="flex-end">
       <button mat-raised-button color="primary" [routerLink]="['./add']">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
       </button>
     </div>
 
     <mat-accordion>
-
-      <mat-expansion-panel *ngFor="let member of clientFamilyMembers;index as i" class="family-member">
-
+      <mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
         <mat-expansion-panel-header>
           <mat-panel-title>
-            {{displayName(member)}}
+            {{ displayName(member) }}
           </mat-panel-title>
           <mat-panel-description>
-            {{member.relationship}}
+            {{ member.relationship }}
           </mat-panel-description>
         </mat-expansion-panel-header>
 
@@ -27,31 +23,43 @@ <h3>{{"labels.heading.Family Members" | translate}}</h3>
 
         <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-button color="primary">
-            <fa-icon icon="edit" [routerLink]="[member.id,'edit']"></fa-icon>
+            <fa-icon icon="edit" [routerLink]="[member.id, 'edit']"></fa-icon>
           </button>
-          <button mat-button color="warn" (click)="deleteFamilyMember(member.clientId,member.id,member.firstName,i)">
+          <button mat-button color="warn" (click)="deleteFamilyMember(member.clientId, member.id, member.firstName, i)">
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
 
         <p>
-          <span *ngIf="member.firstName">{{"labels.inputs.First Name" | translate}} : {{member.firstName}}<br /></span>
-          <span *ngIf="member.middleName">{{"labels.inputs.Middle Name" | translate}} : {{member.middleName}}<br /></span>
-          <span *ngIf="member.lastName">{{"labels.inputs.Last Name" | translate}} : {{member.lastName}}<br /></span>
-          <span *ngIf="member.qualification">{{"labels.inputs.Qualification" | translate}} : {{member.qualification}}<br /></span>
-          <span *ngIf="member.mobileNumber">{{"labels.inputs.Mobile Number" | translate}} : {{member.mobileNumber}}<br /></span>
-          <span *ngIf="member.age">{{"labels.inputs.Age" | translate}} : {{member.age}}<br /></span>
-          <span *ngIf="member.isDependent">{{"labels.inputs.Is Dependent" | translate}} : {{member.isDependent | yesNo}}<br /></span>
-          <span *ngIf="member.maritalStatus">{{"labels.inputs.Marital Status" | translate}} : {{member.maritalStatus}}<br /></span>
-          <span *ngIf="member.gender">{{"labels.inputs.Gender" | translate}} : {{member.gender}}<br /></span>
-          <span *ngIf="member.profession">{{"labels.inputs.Profession" | translate}} : {{member.profession}}<br /></span>
-          <span *ngIf="member.dateOfBirth">{{"labels.inputs.Date Of Birth" | translate}} : {{member.dateOfBirth | dateFormat}}<br /></span>
+          <span *ngIf="member.firstName"
+            >{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br
+          /></span>
+          <span *ngIf="member.middleName"
+            >{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br
+          /></span>
+          <span *ngIf="member.lastName">{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br /></span>
+          <span *ngIf="member.qualification"
+            >{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br
+          /></span>
+          <span *ngIf="member.mobileNumber"
+            >{{ 'labels.inputs.Mobile Number' | translate }} : {{ member.mobileNumber }}<br
+          /></span>
+          <span *ngIf="member.age">{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br /></span>
+          <span *ngIf="member.isDependent"
+            >{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent | yesNo }}<br
+          /></span>
+          <span *ngIf="member.maritalStatus"
+            >{{ 'labels.inputs.Marital Status' | translate }} : {{ member.maritalStatus }}<br
+          /></span>
+          <span *ngIf="member.gender">{{ 'labels.inputs.Gender' | translate }} : {{ member.gender }}<br /></span>
+          <span *ngIf="member.profession"
+            >{{ 'labels.inputs.Profession' | translate }} : {{ member.profession }}<br
+          /></span>
+          <span *ngIf="member.dateOfBirth"
+            >{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br
+          /></span>
         </p>
-
       </mat-expansion-panel>
-
     </mat-accordion>
-
   </router-outlet>
-
 </div>
diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index a645c47c1b..e093ba34f3 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -1,21 +1,21 @@
 <div class="tab-container mat-typography">
-
-  <h3>{{"labels.heading.Performance History" | translate}}</h3>
+  <h3>{{ 'labels.heading.Performance History' | translate }}</h3>
   <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
     <table>
       <tbody>
         <tr>
           <td>
             <p>
-              {{"labels.inputs.No. Of Loan Cycles" | translate}} :{{clientSummary?.loanCycle}} <br />
-              {{"labels.inputs.No. of Active Loans" | translate}} :{{clientSummary?.activeLoans}} <br />
-              {{"labels.inputs.Last Loan Amount" | translate}} :{{clientSummary?.lastLoanAmount | formatNumber}} <br />
+              {{ 'labels.inputs.No. Of Loan Cycles' | translate }} :{{ clientSummary?.loanCycle }} <br />
+              {{ 'labels.inputs.No. of Active Loans' | translate }} :{{ clientSummary?.activeLoans }} <br />
+              {{ 'labels.inputs.Last Loan Amount' | translate }} :{{ clientSummary?.lastLoanAmount | formatNumber }}
+              <br />
             </p>
           </td>
           <td>
             <p>
-              {{"labels.inputs.No. of Active Savings" | translate}} :{{clientSummary?.activeSavings}} <br />
-              {{"labels.inputs.Total Savings" | translate}} :{{clientSummary?.totalSavings | formatNumber}} <br />
+              {{ 'labels.inputs.No. of Active Savings' | translate }} :{{ clientSummary?.activeSavings }} <br />
+              {{ 'labels.inputs.Total Savings' | translate }} :{{ clientSummary?.totalSavings | formatNumber }} <br />
             </p>
           </td>
         </tr>
@@ -27,481 +27,618 @@ <h3>{{"labels.heading.Performance History" | translate}}</h3>
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div className="heading-name">
-        <h3>{{"labels.heading.Upcoming Charges" | translate}}</h3>
+        <h3>{{ 'labels.heading.Upcoming Charges' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary" [routerLink]="['../', 'charges', 'overview']" *mifosxHasPermission="'READ_CLIENTCHARGE'">
-          {{"labels.buttons.Charges Overview" | translate}}</button>
+        <button
+          mat-raised-button
+          class="f-right"
+          color="primary"
+          [routerLink]="['../', 'charges', 'overview']"
+          *mifosxHasPermission="'READ_CLIENTCHARGE'"
+        >
+          {{ 'labels.buttons.Charges Overview' | translate }}
+        </button>
       </div>
     </div>
   </div>
 
   <table mat-table [dataSource]="upcomingCharges">
-
     <ng-container matColumnDef="Name">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
-          [ngClass]="(!(element.isWaived || element.isPaid)) | statusLookup"></i>
-        {{element.name}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="!(element.isWaived || element.isPaid) | statusLookup"></i> {{ element.name }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Due as of">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due as of" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.dueDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due as of' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.dueDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Due" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amount | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.amount | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.amountPaid | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Waived">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountWaived | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.amountWaived | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountOutstanding | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.amountOutstanding | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <button class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','charges', element.id, 'pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'charges', element.id, 'pay']"
+          *mifosxHasPermission="'PAY_CLIENTCHARGE'"
+        >
           <i class="fa fa-dollar"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event); waiveCharge(element.id,element.clientId)" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event); waiveCharge(element.id, element.clientId)"
+          *mifosxHasPermission="'WAIVE_CLIENTCHARGE'"
+        >
           <i class="fa fa-flag"></i>
         </button>
       </td>
-
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="upcomingChargesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns;" [routerLink]="['../','charges',row.id]"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns" [routerLink]="['../', 'charges', row.id]"></tr>
   </table>
 
   <!-- loans accounts overview table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>{{"labels.heading.Loan Accounts" | translate}}</h3>
+        <h3>{{ 'labels.heading.Loan Accounts' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleLoanAccountsOverview()">
+        <button mat-raised-button class="f-right" color="primary" (click)="toggleLoanAccountsOverview()">
           {{ viewAccountsLabel(showClosedLoanAccounts) | translate }}
         </button>
       </div>
     </div>
   </div>
 
-  <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'">
-
+  <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts | accountsFilter: 'loan'">
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
-          [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
-          <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i
+          class="fa fa-stop"
+          [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
+        ></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Original Loan">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.originalLoan }}</td>
     </ng-container>
     <ng-container matColumnDef="Loan Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.loanBalance | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Amount Paid" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.amountPaid | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'" matTooltip="{{ element.loanType.value }}" matTooltipPosition="above"></i>
+        <i
+          class="fa fa-large"
+          [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
+          matTooltip="{{ element.loanType.value }}"
+          matTooltipPosition="above"
+        ></i>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}}</th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Make Repayment' | translate}}" matTooltipPosition="above"
-        (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Make Repayment']">
+        <button
+          *ngIf="element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          matTooltip="{{ 'tooltips.Make Repayment' | translate }}"
+          matTooltipPosition="above"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'loans-accounts', element.id, 'actions', 'Make Repayment']"
+        >
           <i class="fa fa-dollar"></i>
         </button>
         <span *ngIf="element.status.pendingApproval">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Approve' | translate}}"
-            matTooltipPosition="above" *mifosxHasPermission="'APPROVE_LOAN'" (click)="routeEdit($event)"
-            [routerLink]="['../','loans-accounts', element.id, 'actions', 'Approve']">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Approve' | translate }}"
+            matTooltipPosition="above"
+            *mifosxHasPermission="'APPROVE_LOAN'"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'loans-accounts', element.id, 'actions', 'Approve']"
+          >
             <i class="fa fa-check"></i>
           </button>
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Disburse' | translate}}"
-            matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'"
-            (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Disburse']">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Disburse' | translate }}"
+            matTooltipPosition="above"
+            *mifosxHasPermission="'DISBURSE_LOAN'"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'loans-accounts', element.id, 'actions', 'Disburse']"
+          >
             <i class="fa fa-flag"></i>
           </button>
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid">
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Transfer Funds' | translate}}"
-          matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'"
-          (click)="routeEdit($event); routeTransferFund(element.id)">
-          <i class="fa fa-exchange"></i>
-        </button>
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Transfer Funds' | translate }}"
+            matTooltipPosition="above"
+            *mifosxHasPermission="'DISBURSE_LOAN'"
+            (click)="routeEdit($event); routeTransferFund(element.id)"
+          >
+            <i class="fa fa-exchange"></i>
+          </button>
         </span>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openLoansColumns;"
-      [routerLink]="['../', 'loans-accounts', row.id, 'general']" class="select-row"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: openLoansColumns"
+      [routerLink]="['../', 'loans-accounts', row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
   <!-- Closed Loan Accounts -->
-  <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'">
-
+  <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts | accountsFilter: 'loan' : 'closed'">
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
-          [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"></i>
-          <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i
+          class="fa fa-stop"
+          [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
+        ></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Original Loan">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.loanBalance | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Amount Paid" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.accountBalance | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <i class="fa fa-large" [ngClass]="(element.loanType.value === 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
+        <i
+          class="fa fa-large"
+          [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
+          matTooltip=" {{ element.loanType.value }}"
+          matTooltipPosition="above"
+        ></i>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate}} </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedLoansColumns;"
-    [routerLink]="['../', 'loans-accounts', row.id, 'general']" class="select-row"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: closedLoansColumns"
+      [routerLink]="['../', 'loans-accounts', row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
   <!-- Saving overview Table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>{{"labels.heading.Saving Accounts" | translate}}</h3>
+        <h3>{{ 'labels.heading.Saving Accounts' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleSavingAccountsOverview()">
+        <button mat-raised-button class="f-right" color="primary" (click)="toggleSavingAccountsOverview()">
           {{ viewAccountsLabel(showClosedSavingAccounts) | translate }}
         </button>
       </div>
     </div>
   </div>
 
-  <table *ngIf="!showClosedSavingAccounts" mat-table
-    [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isSavings'">
-
+  <table
+    *ngIf="!showClosedSavingAccounts"
+    mat-table
+    [dataSource]="savingAccounts | accountsFilter: 'saving' : 'open' : 'isSavings'"
+  >
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Savings Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Savings Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Last Active">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.accountBalance | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
+        <button
+          *ngIf="element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+        >
           <i class="fa fa-arrow-up"></i>
         </button>
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
+        <button
+          *ngIf="element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+        >
           <i class="fa fa-arrow-down"></i>
         </button>
-        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary" (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
+        <button
+          *ngIf="element.status.submittedAndPendingApproval"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
+        >
           <i class="fa fa-check"></i>
         </button>
-        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-          class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
+        <button
+          *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+        >
           <i class="fa fa-undo"></i>
         </button>
-        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-          class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
+        <button
+          *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Activate']"
+        >
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'savings-accounts', row.id, 'general']"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: openSavingsColumns"
+      [routerLink]="['../', 'savings-accounts', row.id, 'general']"
+    ></tr>
   </table>
 
   <!-- Closed Saving Accounts -->
-  <table *ngIf="showClosedSavingAccounts" mat-table
-    [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isSavings'">
-
+  <table
+    *ngIf="showClosedSavingAccounts"
+    mat-table
+    [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed' : 'isSavings'"
+  >
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate}} </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'general']"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: closedSavingsColumns"
+      [routerLink]="['../', 'savings-accounts', row.id, 'general']"
+    ></tr>
   </table>
 
   <!-- Fixed Deposit Table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>{{"labels.heading.Fixed Deposit Accounts" | translate}}</h3>
+        <h3>{{ 'labels.heading.Fixed Deposit Accounts' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleFixedAccountsOverview()">
+        <button mat-raised-button class="f-right" color="primary" (click)="toggleFixedAccountsOverview()">
           {{ viewAccountsLabel(showClosedFixedAccounts) | translate }}
         </button>
       </div>
     </div>
   </div>
 
-  <table *ngIf="!showClosedFixedAccounts" mat-table
-    [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isFixed'">
-
+  <table
+    *ngIf="!showClosedFixedAccounts"
+    mat-table
+    [dataSource]="savingAccounts | accountsFilter: 'saving' : 'open' : 'isFixed'"
+  >
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Fixed Deposit Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fixed Deposit Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Last Active">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.accountBalance | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary" (click)="routeEdit($event)" [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Approve']">
+        <button
+          *ngIf="element.status.submittedAndPendingApproval"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'fixed-deposits-accounts', element.id, 'actions', 'Approve']"
+        >
           <i class="fa fa-check"></i>
         </button>
-        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-          class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Undo Approval']">
+        <button
+          *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          [routerLink]="['../', 'fixed-deposits-accounts', element.id, 'actions', 'Undo Approval']"
+        >
           <i class="fa fa-undo"></i>
         </button>
-        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-          class="account-action-button" mat-raised-button color="primary"
-          [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Activate']">
+        <button
+          *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          [routerLink]="['../', 'fixed-deposits-accounts', element.id, 'actions', 'Activate']"
+        >
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'general']"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: openSavingsColumns"
+      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'general']"
+    ></tr>
   </table>
 
   <!-- Closed Fixed Deposit Accounts -->
 
-  <table *ngIf="showClosedFixedAccounts" mat-table
-    [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isFixed'">
-
+  <table
+    *ngIf="showClosedFixedAccounts"
+    mat-table
+    [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed' : 'isFixed'"
+  >
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Fixed Deposit Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fixed Deposit Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate}} </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"
-      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'general']"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: closedSavingsColumns"
+      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'general']"
+    ></tr>
   </table>
 
   <!-- Recurring Deposit Table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>{{"labels.heading.Recurring Deposit Accounts" | translate}}</h3>
+        <h3>{{ 'labels.heading.Recurring Deposit Accounts' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleRecurringAccountsOverview()">
+        <button mat-raised-button class="f-right" color="primary" (click)="toggleRecurringAccountsOverview()">
           {{ viewAccountsLabel(showClosedRecurringAccounts) | translate }}
         </button>
       </div>
     </div>
   </div>
 
-  <table *ngIf="!showClosedRecurringAccounts" mat-table
-    [dataSource]="savingAccounts|accountsFilter:'saving':'open':'isRecurring'">
-
+  <table
+    *ngIf="!showClosedRecurringAccounts"
+    mat-table
+    [dataSource]="savingAccounts | accountsFilter: 'saving' : 'open' : 'isRecurring'"
+  >
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recurring Deposit Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Recurring Deposit Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Last Active">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.accountBalance | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
         <ng-container *ngIf="element.status.submittedAndPendingApproval">
-          <button class="account-action-button" mat-raised-button *mifosxHasPermission="'APPROVE_SAVINGSACCOUNT'"
-          [routerLink]="['../','recurring-deposits-accounts', element.id, 'actions', 'Approve']" color="primary">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            *mifosxHasPermission="'APPROVE_SAVINGSACCOUNT'"
+            [routerLink]="['../', 'recurring-deposits-accounts', element.id, 'actions', 'Approve']"
+            color="primary"
+          >
             <i class="fa fa-check"></i>
           </button>
         </ng-container>
         <ng-container *ngIf="!element.status.submittedAndPendingApproval && !element.status.active">
           <button
-            class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
             *mifosxHasPermission="'APPROVALUNDO_SAVINGSACCOUNT'"
-            [routerLink]="['../','recurring-deposits-accounts', element.id, 'actions', 'Undo Approval']">
+            [routerLink]="['../', 'recurring-deposits-accounts', element.id, 'actions', 'Undo Approval']"
+          >
             <i class="fa fa-undo"></i>
           </button>
-          <button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)"
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
             *mifosxHasPermission="'ACTIVATE_SAVINGSACCOUNT'"
-            [routerLink]="['../','recurring-deposits-accounts', element.id, 'actions', 'Activate']">
+            [routerLink]="['../', 'recurring-deposits-accounts', element.id, 'actions', 'Activate']"
+          >
             <i class="fa fa-check-circle"></i>
           </button>
         </ng-container>
@@ -509,188 +646,226 @@ <h3>{{"labels.heading.Recurring Deposit Accounts" | translate}}</h3>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']" class="select-row"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: openSavingsColumns"
+      [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
   <!-- Closed Recurring Deposit Accounts -->
-  <table *ngIf="showClosedRecurringAccounts" mat-table
-    [dataSource]="savingAccounts|accountsFilter:'saving':'closed':'isRecurring'">
-
+  <table
+    *ngIf="showClosedRecurringAccounts"
+    mat-table
+    [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed' : 'isRecurring'"
+  >
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Saving Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Recurring Deposit Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Recurring Deposit Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate}} </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"
-    [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']" class="select-row"></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: closedSavingsColumns"
+      [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
   <!-- Shares overview Table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>{{"labels.inputs.Shares Accounts" | translate}}</h3>
+        <h3>{{ 'labels.inputs.Shares Accounts' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleShareAccountsOverview()">
+        <button mat-raised-button class="f-right" color="primary" (click)="toggleShareAccountsOverview()">
           {{ viewAccountsLabel(showClosedShareAccounts) | translate }}
         </button>
       </div>
     </div>
   </div>
 
-  <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share'">
-
+  <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts | accountsFilter: 'share'">
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Share Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> 
-        <mifosx-long-text textValue="{{element.productName}}" chars="35"></mifosx-long-text>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Share Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Approved Shares">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Approved Shares" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.totalApprovedShares}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Approved Shares' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.totalApprovedShares }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Pending For Approval Shares">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Pending For Approval Shares" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.totalPendingForApprovalShares}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Pending For Approval Shares' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.totalPendingForApprovalShares }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let element">
-        <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary" (click)="routeEdit($event)" [routerLink]="['../','shares-accounts', element.id, 'actions', 'Approve']">
+        <button
+          *ngIf="element.status.submittedAndPendingApproval"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'shares-accounts', element.id, 'actions', 'Approve']"
+        >
           <i class="fa fa-check"></i>
         </button>
-        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-          class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="['../','shares-accounts', element.id, 'actions', 'Undo Approval']">
+        <button
+          *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'shares-accounts', element.id, 'actions', 'Undo Approval']"
+        >
           <i class="fa fa-undo"></i>
         </button>
-        <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-          class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="['../','shares-accounts', element.id, 'actions', 'Activate']">
+        <button
+          *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="routeEdit($event)"
+          [routerLink]="['../', 'shares-accounts', element.id, 'actions', 'Activate']"
+        >
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSharesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: openSharesColumns;"
-      [routerLink]="['../', 'shares-accounts', row.id, 'general']"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: openSharesColumns"
+      [routerLink]="['../', 'shares-accounts', row.id, 'general']"
+    ></tr>
   </table>
 
   <!-- Closed Share Accounts -->
-  <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share':'closed'">
-
+  <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts | accountsFilter: 'share' : 'closed'">
     <ng-container matColumnDef="Account No">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup"></i>
-        <mifosx-account-number accountNo="{{element.accountNo}}"></mifosx-account-number>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+        <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="Share Account">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Share Product" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Share Product' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Approved Shares">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Approved Shares" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.totalApprovedShares}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Approved Shares' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.totalApprovedShares }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Pending For Approval Shares">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Pending For Approval Shares" | translate}} </th>
-      <td mat-cell *matCellDef="let element"> {{element.totalPendingForApprovalShares}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Pending For Approval Shares' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.totalPendingForApprovalShares }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Closed Date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate}} </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | dateFormat}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSharesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSharesColumns;" [routerLink]="['../', 'shares-accounts', row.id, 'general']"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: closedSharesColumns"
+      [routerLink]="['../', 'shares-accounts', row.id, 'general']"
+    ></tr>
   </table>
 
   <!-- Collateral Data Table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
-        <h3>{{"labels.heading.Collateral Data" | translate}}</h3>
+        <h3>{{ 'labels.heading.Collateral Data' | translate }}</h3>
       </div>
     </div>
     <div fxLayout="column" fxFlex="50%">
       <div fxLayout="row" fxLayoutAlign="flex-end">
         <button mat-raised-button class="f-right" color="primary" disabled>
-          {{"labels.buttons.View Collaterals" | translate}}
+          {{ 'labels.buttons.View Collaterals' | translate }}
         </button>
       </div>
     </div>
   </div>
 
   <table mat-table [dataSource]="collaterals">
-
     <ng-container matColumnDef="ID">
-      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.ID" | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
       <td mat-cell *matCellDef="let element">{{ element.collateralId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Name">
-      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.name" | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
       <td mat-cell *matCellDef="let element">{{ element.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Quantity">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{"labels.inputs.Quantity" | translate}}</th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Quantity' | translate }}</th>
       <td mat-cell class="r-amount" *matCellDef="let element">{{ element.quantity | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Value">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{"labels.inputs.Total Value" | translate}}</th>
-      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.basePrice*element.quantity | formatNumber}}</td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Total Value' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let element">
+        {{ element.basePrice * element.quantity | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="Total Collateral Value">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{"labels.inputs.Total Collateral Value" | translate}}</th>
-      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 | formatNumber}}</td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>
+        {{ 'labels.inputs.Total Collateral Value' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let element">
+        {{ (element.pctToBase * element.basePrice * element.quantity) / 100 | formatNumber }}
+      </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="collateralsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: collateralsColumns;"
-      [routerLink]="['../', 'client-collateral', row.collateralId]"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: collateralsColumns"
+      [routerLink]="['../', 'client-collateral', row.collateralId]"
+    ></tr>
   </table>
-
 </div>
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.html b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
index ddf82d470f..ac32dfede1 100644
--- a/src/app/clients/clients-view/identities-tab/identities-tab.component.html
+++ b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
@@ -1,65 +1,83 @@
 <div class="tab-container mat-typography">
+  <h3>{{ 'labels.heading.Identities' | translate }}</h3>
 
-    <h3>{{"labels.heading.Identities" | translate}}</h3>
+  <button
+    mat-raised-button
+    class="f-right"
+    color="primary"
+    (click)="addIdentifier()"
+    *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
+  >
+    <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Add' | translate }}
+  </button>
 
-    <button mat-raised-button class="f-right" color="primary" (click)="addIdentifier()" *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon> {{"labels.buttons.Add" | translate}}
-    </button>
+  <table mat-table #identifiersTable [dataSource]="clientIdentities">
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Id' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">{{ identity.id }}</td>
+    </ng-container>
 
-    <table mat-table #identifiersTable [dataSource]="clientIdentities">
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">{{ identity.documentType.name }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Id" | translate}} </th>
-          <td mat-cell *matCellDef="let identity">{{identity.id}}</td>
-        </ng-container>
+    <ng-container matColumnDef="documentKey">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Document Key' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">{{ identity.documentKey }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
-          <td mat-cell *matCellDef="let identity"> {{identity.documentType.name}}</td>
-        </ng-container>
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">{{ identity.description }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="documentKey">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Document Key" | translate}} </th>
-          <td mat-cell *matCellDef="let identity"> {{identity.documentKey}} </td>
-        </ng-container>
+    <ng-container matColumnDef="documents">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Identity Documents' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">
+        <div *ngFor="let document of identity.documents">
+          {{ document.name }}
+          <fa-icon
+            icon="cloud-download-alt"
+            (click)="download(document.parentEntityId, document.id)"
+            *mifosxHasPermission="'READ_DOCUMENT'"
+          ></fa-icon>
+        </div>
+      </td>
+    </ng-container>
 
-        <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate}} </th>
-          <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
-        </ng-container>
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+      <td mat-cell *matCellDef="let identity">
+        {{ identity.status === 'clientIdentifierStatusType.active' ? 'active' : 'inactive' }}
+      </td>
+    </ng-container>
 
-        <ng-container matColumnDef="documents">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Identity Documents" | translate}} </th>
-          <td mat-cell *matCellDef="let identity">
-            <div *ngFor="let document of identity.documents">
-              {{document.name}}
-              <fa-icon icon="cloud-download-alt" (click)="download(document.parentEntityId,document.id)" *mifosxHasPermission="'READ_DOCUMENT'"></fa-icon>
-            </div>
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
-          <td mat-cell *matCellDef="let identity">
-              {{(identity.status==='clientIdentifierStatusType.active')?'active':'inactive'}}
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
-          <td mat-cell *matCellDef="let identity; let i = index">
-            <button class="identity-action-button" mat-raised-button color="primary" (click)="uploadDocument(i,identity.id)" *mifosxHasPermission="'CREATE_DOCUMENT'">
-              <fa-icon icon="eye"></fa-icon>
-            </button>
-            <button class="identity-action-button" mat-raised-button color="warn" (click)="deleteIdentifier(identity.clientId,identity.id,i)" *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'">
-              <fa-icon icon="times"></fa-icon>
-            </button>
-          </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="identitiesColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: identitiesColumns;"></tr>
-
-    </table>
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+      <td mat-cell *matCellDef="let identity; let i = index">
+        <button
+          class="identity-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="uploadDocument(i, identity.id)"
+          *mifosxHasPermission="'CREATE_DOCUMENT'"
+        >
+          <fa-icon icon="eye"></fa-icon>
+        </button>
+        <button
+          class="identity-action-button"
+          mat-raised-button
+          color="warn"
+          (click)="deleteIdentifier(identity.clientId, identity.id, i)"
+          *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'"
+        >
+          <fa-icon icon="times"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
 
+    <tr mat-header-row *matHeaderRowDef="identitiesColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: identitiesColumns"></tr>
+  </table>
 </div>
diff --git a/src/app/clients/clients-view/notes-tab/notes-tab.component.html b/src/app/clients/clients-view/notes-tab/notes-tab.component.html
index 04cf7318f2..bbeca4fa04 100644
--- a/src/app/clients/clients-view/notes-tab/notes-tab.component.html
+++ b/src/app/clients/clients-view/notes-tab/notes-tab.component.html
@@ -1,4 +1,5 @@
-<mifosx-entity-notes-tab [entityId]="entityId"
+<mifosx-entity-notes-tab
+  [entityId]="entityId"
   [entityNotes]="entityNotes"
   [callbackAdd]="addNote"
   [callbackEdit]="editNote"
diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index b073fb43b9..40d972ce52 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -2,19 +2,30 @@
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box m-r-30">
       <mat-form-field class="search-box">
-        <input matInput placeholder="Search by client name, external Id, mobile" class="search-box" (keydown.enter)="search($event.target.value)">
+        <input
+          matInput
+          placeholder="Search by client name, external Id, mobile"
+          class="search-box"
+          (keydown.enter)="search($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div class="filter-box" *ngIf="existsClientsToFilter">
-      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10">{{"labels.inputs.Show Closed Accounts" | translate}}
+      <mat-checkbox #showClosedAccounts labelPosition="after" class="m-r-10"
+        >{{ 'labels.inputs.Show Closed Accounts' | translate }}
       </mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Clients']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Client" | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        [routerLink]="['../', 'organization', 'bulk-import', 'Clients']"
+        *mifosxHasPermission="'CREATE_CLIENT'"
+      >
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Client" | translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
       </button>
     </div>
   </div>
@@ -24,60 +35,63 @@
       <div class="loading"></div>
     </div>
     <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
-
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let row" [routerLink]="[row.id,'general']"> {{row.displayName}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let row" [routerLink]="[row.id, 'general']">{{ row.displayName }}</td>
       </ng-container>
 
       <!-- Account no Column -->
       <ng-container matColumnDef="accountNumber">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account No" | translate}}</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account No' | translate }}</th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-account-number display="left" accountNo="{{row.accountNumber}}"></mifosx-account-number>
+          <mifosx-account-number display="left" accountNo="{{ row.accountNumber }}"></mifosx-account-number>
         </td>
       </ng-container>
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.External Id' | translate }}</th>
         <td mat-cell *matCellDef="let row">
-          <mifosx-external-identifier display="left" externalId="{{row.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier display="left" externalId="{{ row.externalId }}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <!-- Status Column -->
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let row">
           <div [ngClass]="row.status.code | statusLookup">
             <fa-icon icon="stop"></fa-icon>
             <span class="m-l-10 status">
-              {{ row.status.value | translate}}
+              {{ row.status.value | translate }}
             </span>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office Name" | translate}} </th>
-        <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
+        <td mat-cell *matCellDef="let row">{{ row.officeName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row">
-      </tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
-    <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 50, 100]" [length]="totalRows" (page)="pageChanged($event)"
-      showFirstLastButtons></mat-paginator>
+    <mat-paginator
+      [pageSize]="pageSize"
+      [pageSizeOptions]="[5, 50, 100]"
+      [length]="totalRows"
+      (page)="pageChanged($event)"
+      showFirstLastButtons
+    ></mat-paginator>
   </div>
 
   <div class="alert" [hidden]="!notExistsClientsToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{"labels.text.No client was found" | translate}}
+      {{ 'labels.text.No client was found' | translate }}
     </div>
   </div>
 </mat-card>
diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html
index 763f153096..b1622d8aae 100644
--- a/src/app/clients/create-client/create-client.component.html
+++ b/src/app/clients/create-client/create-client.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #clientStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,52 +21,50 @@
     </ng-template>
 
     <mat-step [stepControl]="clientGeneralForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.GENERAL' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.GENERAL" | translate}}</ng-template>
-
-      <mifosx-client-general-step [clientTemplate]="clientTemplate" (legalFormChangeEvent)="legalFormChange($event)"></mifosx-client-general-step>
-
+      <mifosx-client-general-step
+        [clientTemplate]="clientTemplate"
+        (legalFormChangeEvent)="legalFormChange($event)"
+      ></mifosx-client-general-step>
     </mat-step>
 
     <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.FAMILY MEMBERS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.FAMILY MEMBERS" | translate}}</ng-template>
-
-      <mifosx-client-family-members-step #clientFamily [clientTemplate]="clientTemplate"></mifosx-client-family-members-step>
-
+      <mifosx-client-family-members-step
+        #clientFamily
+        [clientTemplate]="clientTemplate"
+      ></mifosx-client-family-members-step>
     </mat-step>
 
     <mat-step *ngIf="clientTemplate.isAddressEnabled">
+      <ng-template matStepLabel>{{ 'labels.inputs.ADDRESS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.ADDRESS" | translate}}</ng-template>
-
-      <mifosx-client-address-step #clientAddress [clientTemplate]="clientTemplate"
-        [clientAddressFieldConfig]="clientAddressFieldConfig">
+      <mifosx-client-address-step
+        #clientAddress
+        [clientTemplate]="clientTemplate"
+        [clientAddressFieldConfig]="clientAddressFieldConfig"
+      >
       </mifosx-client-address-step>
-
     </mat-step>
 
     <mat-step *ngFor="let datatable of datatables">
-
-      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
+      <ng-template matStepLabel>{{ datatable.registeredTableName }}</ng-template>
 
       <mifosx-client-datatable-step [datatableData]="datatable" #dtclient></mifosx-client-datatable-step>
-
     </mat-step>
 
     <mat-step *ngIf="areFormvalids()" completed>
-
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-client-preview-step
         [clientTemplate]="clientTemplate"
         [clientAddressFieldConfig]="clientAddressFieldConfig"
-        [client]="client" (submitEvent)="submit()"
+        [client]="client"
+        (submitEvent)="submit()"
       >
       </mifosx-client-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/clients/edit-client/edit-client.component.html b/src/app/clients/edit-client/edit-client.component.html
index b16a27cef7..1be6c4a63e 100644
--- a/src/app/clients/edit-client/edit-client.component.html
+++ b/src/app/clients/edit-client/edit-client.component.html
@@ -1,27 +1,23 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editClientForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeOptions" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editClientForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | 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.Legal Form" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
             <mat-select formControlName="legalFormId">
               <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
                 {{ legalForm.value }}
@@ -30,55 +26,62 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.Account No" | translate}}</mat-label>
-            <input matInput formControlName="accountNo">
+            <mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
+            <input matInput formControlName="accountNo" />
           </mat-form-field>
 
           <mat-form-field fxFlex="23%">
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('fullname')" fxFlex="48%">
-            <mat-label>{{ 'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate }}</mat-label>
-            <input matInput required formControlName="fullname">
+            <mat-label>{{
+              'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
+            }}</mat-label>
+            <input matInput required formControlName="fullname" />
             <mat-error *ngIf="editClientForm.controls.fullname.hasError('required')">
-              {{"labels.inputs.Client name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('firstname')" fxFlex="48%">
-            <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
-            <input matInput required formControlName="firstname">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
             <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
-              {{"labels.inputs.Client first name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('middlename')" fxFlex="48%">
-            <mat-label>{{"labels.inputs.Middle Name" | translate}}</mat-label>
-            <input matInput formControlName="middlename">
+            <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
+            <input matInput formControlName="middlename" />
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.contains('lastname')" fxFlex="48%">
-            <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
-            <input matInput required formControlName="lastname">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
             <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
-              {{"labels.inputs.Client last name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-divider></mat-divider>
 
           <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }}</mat-label>
-            <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
+            <mat-label>{{
+              'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
+            }}</mat-label>
+            <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth" />
             <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field *ngIf="legalFormId === 1" fxFlex="48%">
-            <mat-label>{{"labels.inputs.Gender" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
             <mat-select formControlName="genderId">
               <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
                 {{ gender.name }}
@@ -87,7 +90,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                 {{ staff.displayName }}
@@ -95,11 +98,16 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
-            *ngIf="editClientForm.contains('clientNonPersonDetails')">
-
+          <div
+            fxFlex="100%"
+            fxLayout="row wrap"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+            formGroupName="clientNonPersonDetails"
+            *ngIf="editClientForm.contains('clientNonPersonDetails')"
+          >
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Constitution" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
               <mat-select formControlName="constitutionId" required>
                 <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
                   {{ constitution.name }}
@@ -108,7 +116,7 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Main Business Line" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
               <mat-select formControlName="mainBusinessLineId">
                 <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
                   {{ business.name }}
@@ -117,42 +125,52 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
-              <mat-label>{{"labels.inputs.Incorporation Validity Till Date" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
+              <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="incorpValidityTillDateDatePicker"
+                formControlName="incorpValidityTillDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Incorporation No" | translate}}</mat-label>
-              <input matInput formControlName="incorpNumber">
+              <mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
+              <input matInput formControlName="incorpNumber" />
             </mat-form-field>
 
             <mat-form-field fxFlex="98%">
-              <mat-label>{{"labels.inputs.Remarks" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
               <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
           </div>
 
-          <mat-checkbox *ngIf="legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
-            {{"labels.inputs.Is staff" | translate}}?
+          <mat-checkbox
+            *ngIf="legalFormId === 1"
+            fxFlex="48%"
+            labelPosition="before"
+            formControlName="isStaff"
+            class="margin-v"
+          >
+            {{ 'labels.inputs.Is staff' | translate }}?
           </mat-checkbox>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Mobile No" | translate}}</mat-label>
-            <input matInput type="number" formControlName="mobileNo">
+            <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
+            <input matInput type="number" formControlName="mobileNo" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Email Address" | translate}}</mat-label>
-            <input matInput formControlName="emailAddress">
-            <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email">
-              Email not valid
-            </mat-error>
+            <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
+            <input matInput formControlName="emailAddress" />
+            <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Client Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
             <mat-select formControlName="clientTypeId">
               <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
                 {{ clientType.name }}
@@ -161,43 +179,58 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Client Classification" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
             <mat-select formControlName="clientClassificationId">
-              <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
+              <mat-option
+                *ngFor="let clientClassification of clientClassificationTypeOptions"
+                [value]="clientClassification.id"
+              >
                 {{ clientClassification.name }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="submittedOnDatePicker"
+              formControlName="submittedOnDate"
+              required
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="editClientForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submitted Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Submitted Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="activatedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On" | translate}}</mat-label>
-            <input matInput [min]="editClientForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker"
-              formControlName="activationDate">
+            <mat-label>{{ 'labels.inputs.Activated On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="editClientForm.value.submittedOnDate"
+              [max]="maxDate"
+              [matDatepicker]="activatedOnDatePicker"
+              formControlName="activationDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activatedOnDatePicker></mat-datepicker>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/collaterals/edit-collateral/edit-collateral.component.html b/src/app/collaterals/edit-collateral/edit-collateral.component.html
index 2b9acb8e46..369966a54e 100644
--- a/src/app/collaterals/edit-collateral/edit-collateral.component.html
+++ b/src/app/collaterals/edit-collateral/edit-collateral.component.html
@@ -1,51 +1,44 @@
 <div class="container">
-
-    <mat-card>
-
-        <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
-
-            <mat-card-content>
-
-                <div fxLayout="column">
-                    
-                    <div fxLayout="column">
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.name" |translate}}</mat-label>
-                            <input matInput required formControlName="name">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Quantity" |translate}}</mat-label>
-                            <input matInput required formControlName="quantity">
-                            <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                {{"labels.inputs.Quantity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-                            </mat-error>
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Total" |translate}}</mat-label>
-                            <input matInput required formControlName="total">
-                        </mat-form-field>
-
-                        <mat-form-field>
-                            <mat-label>{{"labels.inputs.Total Collateral Value" |translate}}</mat-label>
-                            <input matInput required formControlName="totalCollateral">
-                        </mat-form-field>
-
-                    </div>
-
-                </div>
-
-            </mat-card-content>
-
-            <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" |translate}}</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{"labels.buttons.Submit" |translate}}</button> 
-            </mat-card-actions>
-
-        </form>
-    
-    </mat-card>
-
-</div>
\ No newline at end of file
+  <mat-card>
+    <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div fxLayout="column">
+          <div fxLayout="column">
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+              <input matInput required formControlName="name" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
+              <input matInput required formControlName="quantity" />
+              <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
+                {{ 'labels.inputs.Quantity' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Total' | translate }}</mat-label>
+              <input matInput required formControlName="total" />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
+              <input matInput required formControlName="totalCollateral" />
+            </mat-form-field>
+          </div>
+        </div>
+      </mat-card-content>
+
+      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </mat-card-actions>
+    </form>
+  </mat-card>
+</div>
diff --git a/src/app/collaterals/view-collateral/view-collateral.component.html b/src/app/collaterals/view-collateral/view-collateral.component.html
index 9eaa727a36..af38da6007 100644
--- a/src/app/collaterals/view-collateral/view-collateral.component.html
+++ b/src/app/collaterals/view-collateral/view-collateral.component.html
@@ -1,71 +1,70 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CLIENT_COLLATERAL_PRODUCT'">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Edit" |translate}}
-    </button>
-    <button mat-raised-button color="warn" (click)="deleteCollateral()" *mifosxHasPermission="'DELETE_CLIENT_COLLATERAL_PRODUCT'">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Delete" |translate}}
-    </button>
-  </div>
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['edit']"
+    *mifosxHasPermission="'UPDATE_CLIENT_COLLATERAL_PRODUCT'"
+  >
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Edit' | translate }}
+  </button>
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteCollateral()"
+    *mifosxHasPermission="'DELETE_CLIENT_COLLATERAL_PRODUCT'"
+  >
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Delete' | translate }}
+  </button>
+</div>
 
 <mat-card class="client-collateral-card">
-
-    <mat-card-content class="content">\
-
-        <div class="tab-container mat-typography">
-
-            <h3>{{"labels.heading.Client Collateral Details" |translate}}</h3>
-
-            <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
-              <p>
-                {{"labels.inputs.name" |translate}}: {{ clientCollateralData.name }}<br/>
-                {{"labels.inputs.Quantity" |translate}}: {{ clientCollateralData.quantity }}<br/>
-                {{"labels.inputs.Total Value" |translate}}: {{ clientCollateralData.total }}<br/>
-                {{"labels.inputs.Total Collateral Value" |translate}}: {{ clientCollateralData.totalCollateral }}<br/>
-              </p>
-
-            </div>
-
-
-            <h3>{{"labels.heading.Transaction Details" |translate}}</h3>
-
-            <table mat-table [dataSource]="clientCollateralData.loanTransactionData"
-            class="mat-elevation-z1 m-b-30">
-
-            <ng-container matColumnDef="ID">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" |translate}} </th>
-                <td mat-cell *matCellDef="let element">
-                {{element.loanId}}
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="Last Repayment">
-                <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Last Repayment" |translate}}</th>
-                <td mat-cell *matCellDef="let element"> {{element.lastRepayment}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="Remaining Amount">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Remaining Amount" |translate}} </th>
-                <td mat-cell *matCellDef="let element"> {{element.remainingAmount | formatNumber}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="Last Repayment Date">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Repayment Date" |translate}} </th>
-                <td mat-cell *matCellDef="let element"> {{element.lastRepaymentDate | dateFormat}} </td>
-
-            </ng-container>
-
-            <!-- <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
+  <mat-card-content class="content"
+    >\
+
+    <div class="tab-container mat-typography">
+      <h3>{{ 'labels.heading.Client Collateral Details' | translate }}</h3>
+
+      <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
+        <p>
+          {{ 'labels.inputs.name' | translate }}: {{ clientCollateralData.name }}<br />
+          {{ 'labels.inputs.Quantity' | translate }}: {{ clientCollateralData.quantity }}<br />
+          {{ 'labels.inputs.Total Value' | translate }}: {{ clientCollateralData.total }}<br />
+          {{ 'labels.inputs.Total Collateral Value' | translate }}: {{ clientCollateralData.totalCollateral }}<br />
+        </p>
+      </div>
+
+      <h3>{{ 'labels.heading.Transaction Details' | translate }}</h3>
+
+      <table mat-table [dataSource]="clientCollateralData.loanTransactionData" class="mat-elevation-z1 m-b-30">
+        <ng-container matColumnDef="ID">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            {{ element.loanId }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="Last Repayment">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Repayment' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.lastRepayment }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="Remaining Amount">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Remaining Amount' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.remainingAmount | formatNumber }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="Last Repayment Date">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Repayment Date' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.lastRepaymentDate | dateFormat }}</td>
+        </ng-container>
+
+        <!-- <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'loans-accounts', 'create']" class="select-row"></tr> -->
-            <tr mat-header-row *matHeaderRowDef="collateralColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: collateralColumns;"></tr>
-
-            </table>
-
-        </div>
-
-
-    </mat-card-content>
-
+        <tr mat-header-row *matHeaderRowDef="collateralColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: collateralColumns"></tr>
+      </table>
+    </div>
+  </mat-card-content>
 </mat-card>
diff --git a/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html b/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html
index a68f50f648..5470759cf3 100644
--- a/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html
+++ b/src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html
@@ -1,176 +1,170 @@
 <mat-card class="container" *ngIf="!isCollapsed">
-
   <div class="alert" *ngIf="noData">
-
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{"labels.text.No repayments and disbursal" | translate}}
+      {{ 'labels.text.No repayments and disbursal' | translate }}
     </div>
-
   </div>
 
   <form [formGroup]="collectionSheetForm" (ngSubmit)="previewCollectionSheet()">
-
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
       <mat-form-field fxFlex="98%">
-        <mat-label>{{"labels.inputs.Branch Office" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Branch Office' | translate }}</mat-label>
         <mat-select formControlName="officeId" required>
           <mat-option *ngFor="let office of officesData" [value]="office.id">
             {{ office.name }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="collectionSheetForm.controls.officeId.hasError('required')">
-          {{"labels.inputs.Branch Office" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Branch Office' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="98%" (click)="transactionDatePicker.open()">
-        <mat-label>{{"labels.inputs.Repayment Date" | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-          formControlName="transactionDate">
+        <mat-label>{{ 'labels.inputs.Repayment Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="transactionDatePicker"
+          required
+          formControlName="transactionDate"
+        />
         <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #transactionDatePicker></mat-datepicker>
         <mat-error *ngIf="collectionSheetForm.controls.transactionDate.hasError('required')">
-          {{"labels.inputs.Repayment Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Repayment Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="98%">
-        <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
         <mat-select formControlName="staffId">
           <mat-option *ngFor="let loanOfficer of loanOfficerData" [value]="loanOfficer.id">
             {{ loanOfficer.displayName }}
           </mat-option>
         </mat-select>
       </mat-form-field>
-
     </div>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
       <button mat-raised-button color="primary" [disabled]="!collectionSheetForm.valid">
-        <fa-icon icon="search" class="m-r-10"></fa-icon> {{"labels.buttons.Collection Sheet" | translate}}
+        <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Collection Sheet' | translate }}
       </button>
     </mat-card-actions>
-
   </form>
-
 </mat-card>
 
 <div class="showcollectionsheet">
-
   <div class="container" *ngIf="isCollapsed">
-
     <mat-card>
-
       <div class="m-b-20">
         <button mat-raised-button color="primary" (click)="isCollapsed = false">
-          {{"labels.buttons.Parameters" | translate}}
+          {{ 'labels.buttons.Parameters' | translate }}
         </button>
       </div>
 
       <ng-container *ngIf="loansDataSource">
-
-        <h2 class="mat-h2">{{"labels.heading.Due Collections" | translate}}</h2>
+        <h2 class="mat-h2">{{ 'labels.heading.Due Collections' | translate }}</h2>
 
         <table class="mat-elevation-z1" mat-table [dataSource]="loansDataSource" matSort>
-
           <ng-container matColumnDef="loanAccount">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Loan Account" | translate}} # </th>
-            <td mat-cell *matCellDef="let loan"> {{ loan.accountId }}</td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Loan Account' | translate }} #</th>
+            <td mat-cell *matCellDef="let loan">{{ loan.accountId }}</td>
           </ng-container>
 
           <ng-container matColumnDef="productName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" | translate}} </th>
-            <td mat-cell *matCellDef="let loan"> {{ loan.productShortName }}({{ loan.productId }}) </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+            <td mat-cell *matCellDef="let loan">{{ loan.productShortName }}({{ loan.productId }})</td>
           </ng-container>
 
           <ng-container matColumnDef="clientName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Client Name" | translate}} </th>
-            <td mat-cell *matCellDef="let loan"> {{ loan.clientName }}({{ loan.clientId }}) </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Client Name' | translate }}</th>
+            <td mat-cell *matCellDef="let loan">{{ loan.clientName }}({{ loan.clientId }})</td>
           </ng-container>
 
           <ng-container matColumnDef="totalDue">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Total Due" | translate}} </th>
-            <td mat-cell *matCellDef="let loan"> {{ loan.totalDue }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Total Due' | translate }}</th>
+            <td mat-cell *matCellDef="let loan">{{ loan.totalDue }}</td>
           </ng-container>
 
           <ng-container matColumnDef="charges">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Charges" | translate}} </th>
-            <td mat-cell *matCellDef="let loan"> {{ loan.feeDue }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Charges' | translate }}</th>
+            <td mat-cell *matCellDef="let loan">{{ loan.feeDue }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions" | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let loan; let i = index">
-              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans/accounts', loan, i)">{{"labels.buttons.Add Payment" | translate}}</button>
+              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans/accounts', loan, i)">
+                {{ 'labels.buttons.Add Payment' | translate }}
+              </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="loansDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: loansDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: loansDisplayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </ng-container>
 
       <ng-container *ngIf="savingsDataSource">
-
-        <h2 class="mat-h2">{{"labels.inputs.Due Savings Collections" | translate}}</h2>
+        <h2 class="mat-h2">{{ 'labels.inputs.Due Savings Collections' | translate }}</h2>
 
         <table class="mat-elevation-z1" mat-table [dataSource]="savingsDataSource" matSort>
-
           <ng-container matColumnDef="depositAccount">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Deposit Account" | translate}} </th>
-            <td mat-cell *matCellDef="let saving"> {{ saving.depositAccountType }}</td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Deposit Account' | translate }}</th>
+            <td mat-cell *matCellDef="let saving">{{ saving.depositAccountType }}</td>
           </ng-container>
 
           <ng-container matColumnDef="savingsAccountNo">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Savings Account" | translate}} # </th>
-            <td mat-cell *matCellDef="let saving"> {{ saving.accountId }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ 'labels.inputs.Savings Account' | translate }} #
+            </th>
+            <td mat-cell *matCellDef="let saving">{{ saving.accountId }}</td>
           </ng-container>
 
           <ng-container matColumnDef="productName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Product Name" | translate}} </th>
-            <td mat-cell *matCellDef="let saving"> {{ saving.productName }}({{ saving.productId }}) </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+            <td mat-cell *matCellDef="let saving">{{ saving.productName }}({{ saving.productId }})</td>
           </ng-container>
 
           <ng-container matColumnDef="clientName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Client Name" | translate}} </th>
-            <td mat-cell *matCellDef="let saving"> {{ saving.clientName }}({{ saving.clientId }}) </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Client Name' | translate }}</th>
+            <td mat-cell *matCellDef="let saving">{{ saving.clientName }}({{ saving.clientId }})</td>
           </ng-container>
 
           <ng-container matColumnDef="totalDue">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Total Due" | translate}} </th>
-            <td mat-cell *matCellDef="let saving"> {{ saving.dueAmount }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Total Due' | translate }}</th>
+            <td mat-cell *matCellDef="let saving">{{ saving.dueAmount }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions" | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let saving; let j = index">
-              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('savings', saving, j)">{{"labels.buttons.Add Payment" | translate}}</button>
+              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('savings', saving, j)">
+                {{ 'labels.buttons.Add Payment' | translate }}
+              </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="savingsDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: savingsDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: savingsDisplayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </ng-container>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" (click)="submit()">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
-
     </mat-card>
-
   </div>
-
 </div>
diff --git a/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html
index 4eea6856f1..90540761d0 100644
--- a/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html
+++ b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html
@@ -1,17 +1,17 @@
-<h1 mat-dialog-title>{{"labels.heading.Welcome to Mifos" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Welcome to Mifos' | translate }}</h1>
 
 <mat-dialog-content>
+  <h3 class="mw600">{{ 'labels.heading.Configure Mifos Organization Needs' | translate }}</h3>
 
-<h3 class="mw600">{{"labels.heading.Configure Mifos Organization Needs" | translate}}</h3>
+  <h3>{{ 'labels.heading.Configuration Wizard Setup' | translate }}</h3>
 
-<h3>{{"labels.heading.Configuration Wizard Setup" | translate}}</h3>
-
-<h3>{{"labels.heading.Progress Bar" | translate}} : 100 %</h3>
-
-<mat-progress-bar mode="determinate" value="100"></mat-progress-bar>
+  <h3>{{ 'labels.heading.Progress Bar' | translate }} : 100 %</h3>
 
+  <mat-progress-bar mode="determinate" value="100"></mat-progress-bar>
 </mat-dialog-content>
 
 <mat-dialog-actions>
-    <button mat-raised-button color="warn" mat-dialog-close>{{"labels.buttons.Close Config. Wizard" | translate}}</button>
+  <button mat-raised-button color="warn" mat-dialog-close>
+    {{ 'labels.buttons.Close Config. Wizard' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/configuration-wizard/configuration-wizard.component.html b/src/app/configuration-wizard/configuration-wizard.component.html
index 59b91f0338..1fa0822437 100644
--- a/src/app/configuration-wizard/configuration-wizard.component.html
+++ b/src/app/configuration-wizard/configuration-wizard.component.html
@@ -1,39 +1,48 @@
-<h1 mat-dialog-title>{{"labels.heading.Welcome to Mifos" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Welcome to Mifos' | translate }}</h1>
 
 <mat-dialog-content>
-
-<h3 class="mw600">{{"labels.heading.Configure Mifos Organization Needs" | translate}}</h3>
-
-
-<mat-grid-list cols="3" rowHeight="50px">
-
-      <mat-grid-tile>
-		   <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 1 }">{{"labels.buttons.Home Screen Tour" | translate}}</button>
-	  </mat-grid-tile>
-	  <mat-grid-tile>
-		   <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 2 }">{{"labels.buttons.Setup Organization" | translate}}</button>
-	  </mat-grid-tile>
-	  <mat-grid-tile>
-		   <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 3 }">{{"labels.buttons.Setup System" | translate}}</button>
-	  </mat-grid-tile>
-	  <mat-grid-tile>
-		   <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 4 }">{{"labels.buttons.Setup Accounting" | translate}}</button>
-	  </mat-grid-tile>
-	  <mat-grid-tile>
-		   <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 5 }">{{"labels.buttons.Setup Products" | translate}}</button>
-	  </mat-grid-tile>
-	  <mat-grid-tile>
-		   <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 6 }">{{"labels.buttons.Setup Funds and Reports" | translate}}</button>
-	  </mat-grid-tile>
-
-</mat-grid-list>
-
-<h3>{{"labels.heading.Progress Bar" | translate}} : 0%</h3>
-
-<mat-progress-bar mode="determinate" value="0"></mat-progress-bar>
-
+  <h3 class="mw600">{{ 'labels.heading.Configure Mifos Organization Needs' | translate }}</h3>
+
+  <mat-grid-list cols="3" rowHeight="50px">
+    <mat-grid-tile>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 1 }">
+        {{ 'labels.buttons.Home Screen Tour' | translate }}
+      </button>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 2 }">
+        {{ 'labels.buttons.Setup Organization' | translate }}
+      </button>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 3 }">
+        {{ 'labels.buttons.Setup System' | translate }}
+      </button>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 4 }">
+        {{ 'labels.buttons.Setup Accounting' | translate }}
+      </button>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 5 }">
+        {{ 'labels.buttons.Setup Products' | translate }}
+      </button>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <button mat-raised-button color="primary" [mat-dialog-close]="{ show: 6 }">
+        {{ 'labels.buttons.Setup Funds and Reports' | translate }}
+      </button>
+    </mat-grid-tile>
+  </mat-grid-list>
+
+  <h3>{{ 'labels.heading.Progress Bar' | translate }} : 0%</h3>
+
+  <mat-progress-bar mode="determinate" value="0"></mat-progress-bar>
 </mat-dialog-content>
 
 <mat-dialog-actions>
-    <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">{{"labels.buttons.Close Config. Wizard" | translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
+    {{ 'labels.buttons.Close Config. Wizard' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html
index 41a07eacd3..b3fb1be50b 100644
--- a/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html
+++ b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html
@@ -1,13 +1,20 @@
-<h2 mat-dialog-title>{{"labels.heading.Configuration Wizard" | translate}}</h2>
+<h2 mat-dialog-title>{{ 'labels.heading.Configuration Wizard' | translate }}</h2>
 
 <mat-dialog-content>
-
-<h3 class="mw600"> {{"labels.heading.You have created" | translate}} {{stepName}} {{"labels.heading.successfully select option" | translate}}</h3>
-
+  <h3 class="mw600">
+    {{ 'labels.heading.You have created' | translate }} {{ stepName }}
+    {{ 'labels.heading.successfully select option' | translate }}
+  </h3>
 </mat-dialog-content>
 
 <mat-dialog-actions>
-    <button mat-raised-button color="warn"  [mat-dialog-close]="{ step: 1 }">{{"labels.buttons.Close Configuration Wizard" | translate}}</button>
-    <button mat-raised-button color="primary" [mat-dialog-close]="{ step: 2 }">{{"labels.buttons.Create more" | translate}} {{stepName}}</button>
-    <button mat-raised-button color="primary" [mat-dialog-close]="{ step: 3 }">{{"labels.buttons.Go to next step" | translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ step: 1 }">
+    {{ 'labels.buttons.Close Configuration Wizard' | translate }}
+  </button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ step: 2 }">
+    {{ 'labels.buttons.Create more' | translate }} {{ stepName }}
+  </button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ step: 3 }">
+    {{ 'labels.buttons.Go to next step' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html
index 0949c4072b..69d5fedbfa 100644
--- a/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html
+++ b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html
@@ -1,18 +1,18 @@
-<h1 mat-dialog-title>{{"labels.heading.Welcome to Mifos" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Welcome to Mifos' | translate }}</h1>
 
 <mat-dialog-content>
+  <h3 class="mw600">{{ 'labels.heading.Configure Mifos Organization Needs' | translate }}</h3>
 
-<h3 class="mw600">{{"labels.heading.Configure Mifos Organization Needs" | translate}}</h3>
+  <h3>{{ 'labels.heading.Successfully completed' | translate }} {{ previousStepName }}</h3>
 
-<h3>{{"labels.heading.Successfully completed" | translate}} {{ previousStepName }}</h3>
-
-<h3>{{"labels.heading.Progress Bar" | translate}} : {{stepPercentage}}%</h3>
-
-<mat-progress-bar mode="determinate" [value]="stepPercentage"></mat-progress-bar>
+  <h3>{{ 'labels.heading.Progress Bar' | translate }} : {{ stepPercentage }}%</h3>
 
+  <mat-progress-bar mode="determinate" [value]="stepPercentage"></mat-progress-bar>
 </mat-dialog-content>
 
 <mat-dialog-actions>
-    <button mat-raised-button color="warn" [mat-dialog-close]="{ nextStep: false }">{{"labels.buttons.Close Config. Wizard" | translate}}</button>
-    <button mat-raised-button color="primary" [mat-dialog-close]="{ nextStep: true }"> {{ nextStepName }} </button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ nextStep: false }">
+    {{ 'labels.buttons.Close Config. Wizard' | translate }}
+  </button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ nextStep: true }">{{ nextStepName }}</button>
 </mat-dialog-actions>
diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.html b/src/app/core/shell/breadcrumb/breadcrumb.component.html
index d9c7360079..b479efb8ab 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.html
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.html
@@ -1,7 +1,7 @@
 <nav class="breadcrumb-wrapper">
   <ul class="breadcrumb">
-    <span #breadcrumb class="breadcrumb-title">{{ getTranslate(breadcrumbs[breadcrumbs.length-1].label) }}</span>
-    <span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
+    <span #breadcrumb class="breadcrumb-title">{{ getTranslate(breadcrumbs[breadcrumbs.length - 1].label) }}</span>
+    <span *ngIf="breadcrumbs.length - 1 !== 0" class="separator">
       <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
         <span *ngIf="!last" class="breadcrumb-link">
           <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ getTranslate(breadcrumb.label) }}</a>
@@ -14,11 +14,17 @@
 </nav>
 
 <ng-template #templateBreadcrumb let-popover="popover">
-  <h2>{{'labels.popovers.Breadcrumbs' | translate}}</h2>
-  <p class="mw300">{{"labels.text.User's current location" | translate}}</p>
+  <h2>{{ 'labels.popovers.Breadcrumbs' | translate }}</h2>
+  <p class="mw300">{{ "labels.text.User's current location" | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html
index 45ec49982f..57330fb9c3 100644
--- a/src/app/core/shell/shell.component.html
+++ b/src/app/core/shell/shell.component.html
@@ -1,6 +1,5 @@
 <!-- Application Shell -->
 <mat-sidenav-container id="mifosx-shell-container" autosize>
-
   <!-- Sidenav -->
   <mat-sidenav
     #sidenav
@@ -11,15 +10,13 @@
     }"
     [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
     [mode]="(isHandset$ | async) ? 'over' : 'side'"
-    [opened]="(isHandset$ | async) === false">
-
+    [opened]="(isHandset$ | async) === false"
+  >
     <mifosx-sidenav [sidenavCollapsed]="sidenavCollapsed"></mifosx-sidenav>
-
   </mat-sidenav>
 
   <!-- Content -->
   <mat-sidenav-content class="sidenav">
-
     <!-- Toolbar -->
     <mifosx-toolbar [sidenav]="sidenav" (collapse)="toggleCollapse($event)"></mifosx-toolbar>
     <!-- Progress Bar -->
@@ -33,7 +30,5 @@
     <mifosx-content></mifosx-content>
     <!-- Footer -->
     <mifosx-footer></mifosx-footer>
-
   </mat-sidenav-content>
-
 </mat-sidenav-container>
diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html
index a2d611b585..7b580dfe09 100644
--- a/src/app/core/shell/sidenav/sidenav.component.html
+++ b/src/app/core/shell/sidenav/sidenav.component.html
@@ -1,45 +1,52 @@
-<div [ngClass]="{
-  'sidebar-full': !sidenavCollapsed,
-  'sidebar-compact': sidenavCollapsed
-  }">
-
+<div
+  [ngClass]="{
+    'sidebar-full': !sidenavCollapsed,
+    'sidebar-compact': sidenavCollapsed
+  }"
+>
   <div class="navigation-panel" fxLayout="column">
-
     <!-- TODO: Allow customization by organization -->
     <div class="app-brand" [routerLink]="['/home']">
-      <img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo">
-      <span #logo class="app-logo-text text-muted">{{ 'APP_NAME' | translate}}</span>
+      <img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo" />
+      <span #logo class="app-logo-text text-muted">{{ 'APP_NAME' | translate }}</span>
     </div>
 
     <div class="app-user">
       <div class="app-user-photo">
         <!-- TODO: Decision to be taken on providing this feature -->
-        <img src="assets/images/user_placeholder.png" alt="app-user-photo">
+        <img src="assets/images/user_placeholder.png" alt="app-user-photo" />
       </div>
-      <span class="app-user-name mb-05">
-        {{ tenantIdentifier }} / {{ username }}
-      </span>
+      <span class="app-user-name mb-05"> {{ tenantIdentifier }} / {{ username }} </span>
       <div #userPanel class="app-user-controls">
-        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Settings' | translate}}" [routerLink]="['/settings']">
+        <button
+          class="xs-button"
+          mat-icon-button
+          matTooltip="{{ 'tooltips.Settings' | translate }}"
+          [routerLink]="['/settings']"
+        >
           <fa-icon icon="cog"></fa-icon>
         </button>
-        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Sign Out' | translate}}" (click)="logout()">
+        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Sign Out' | translate }}" (click)="logout()">
           <fa-icon icon="sign-out-alt"></fa-icon>
         </button>
       </div>
     </div>
 
     <div class="app-sidenav">
-
       <div #frequentlyAccessed>
-      <div class="mt-1 mb-1 nav-item-sep">
-        <mat-divider></mat-divider>
-        <span class="text-muted icon-menu-title">{{'labels.menus.Frequently Accessed' | translate}}</span>
-      </div>
+        <div class="mt-1 mb-1 nav-item-sep">
+          <mat-divider></mat-divider>
+          <span class="text-muted icon-menu-title">{{ 'labels.menus.Frequently Accessed' | translate }}</span>
+        </div>
       </div>
       <div class="icon-menu">
         <div class="icon-menu-item" *ngFor="let activity of mappedActivities">
-          <button mat-raised-button [matTooltipPosition]="tooltipPosition" [matTooltip]="activity.toolTip" [routerLink]="[activity.path]">
+          <button
+            mat-raised-button
+            [matTooltipPosition]="tooltipPosition"
+            [matTooltip]="activity.toolTip"
+            [routerLink]="[activity.path]"
+          >
             <fa-icon [icon]="activity.icon" size="lg"></fa-icon>
           </button>
         </div>
@@ -47,154 +54,290 @@
 
       <div class="nav-item-sep">
         <mat-divider></mat-divider>
-        <span class="text-muted">{{'labels.menus.Main Items' | translate}}</span>
+        <span class="text-muted">{{ 'labels.menus.Main Items' | translate }}</span>
       </div>
 
       <mat-nav-list>
-        <mat-list-item [routerLink]="['/dashboard']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Dashboard' | translate}}">
-          <mat-icon matListIcon >
+        <mat-list-item
+          [routerLink]="['/dashboard']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Dashboard' | translate }}"
+        >
+          <mat-icon matListIcon>
             <fa-icon icon="tachometer-alt" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #dashboard>{{'labels.menus.Dashboard' | translate}}</a>
+          <a matLine #dashboard>{{ 'labels.menus.Dashboard' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/navigation']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Navigation' | translate}}">
+        <mat-list-item
+          [routerLink]="['/navigation']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Navigation' | translate }}"
+        >
           <mat-icon matListIcon>
             <fa-icon icon="location-arrow" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #navigation>{{'labels.menus.Navigation' | translate}}</a>
+          <a matLine #navigation>{{ 'labels.menus.Navigation' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Checker Inbox and Tasks' | translate}}">
+        <mat-list-item
+          [routerLink]="['/checker-inbox-and-tasks/checker-inbox']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Checker Inbox and Tasks' | translate }}"
+        >
           <mat-icon matListIcon>
-            <i class="fa fa-check" ></i>
+            <i class="fa fa-check"></i>
           </mat-icon>
-          <a matLine>{{'labels.menus.Checker Inbox and Tasks' | translate}}</a>
+          <a matLine>{{ 'labels.menus.Checker Inbox and Tasks' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/collections/individual-collection-sheet']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Individual Collection Sheet' | translate}}">
+        <mat-list-item
+          [routerLink]="['/collections/individual-collection-sheet']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Individual Collection Sheet' | translate }}"
+        >
           <mat-icon matListIcon>
-            <i class="fa fa-tasks "></i>
+            <i class="fa fa-tasks"></i>
           </mat-icon>
-          <a matLine>{{'labels.menus.Individual Collection Sheet' | translate}}</a>
+          <a matLine>{{ 'labels.menus.Individual Collection Sheet' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/notifications']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Notifications' | translate}}">
+        <mat-list-item
+          [routerLink]="['/notifications']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Notifications' | translate }}"
+        >
           <mat-icon matListIcon>
             <fa-icon icon="bell" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>{{'labels.menus.Notifications' | translate}}</a>
+          <a matLine>{{ 'labels.menus.Notifications' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/accounting/journal-entries/frequent-postings']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Frequent Postings' | translate}}">
+        <mat-list-item
+          [routerLink]="['/accounting/journal-entries/frequent-postings']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Frequent Postings' | translate }}"
+        >
           <mat-icon matListIcon>
             <fa-icon icon="sync" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #frequentPostings>{{'labels.menus.Frequent Postings' | translate}}</a>
+          <a matLine #frequentPostings>{{ 'labels.menus.Frequent Postings' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/accounting/journal-entries/create']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Create Journal Entry' | translate}}">
+        <mat-list-item
+          [routerLink]="['/accounting/journal-entries/create']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Create Journal Entry' | translate }}"
+        >
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #createJournalEntry>{{'labels.menus.Create Journal Entry' | translate}}</a>
+          <a matLine #createJournalEntry>{{ 'labels.menus.Create Journal Entry' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [routerLink]="['/accounting/chart-of-accounts']" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Chart Of Accounts' | translate}}">
+        <mat-list-item
+          [routerLink]="['/accounting/chart-of-accounts']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Chart Of Accounts' | translate }}"
+        >
           <mat-icon matListIcon>
             <fa-icon icon="sitemap" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #chartOfAccounts>{{'labels.menus.Chart of Accounts' | translate}}</a>
+          <a matLine #chartOfAccounts>{{ 'labels.menus.Chart of Accounts' | translate }}</a>
         </mat-list-item>
-        <mat-list-item (click)="showKeyboardShortcuts()" [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Keyboard Shortcuts' | translate}}">
+        <mat-list-item
+          (click)="showKeyboardShortcuts()"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.Keyboard Shortcuts' | translate }}"
+        >
           <mat-icon matListIcon>
             <fa-icon icon="keyboard" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>{{'labels.menus.Keyboard Shortcuts' | translate}}</a>
+          <a matLine>{{ 'labels.menus.Keyboard Shortcuts' | translate }}</a>
         </mat-list-item>
-        <mat-list-item [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Help' | translate}}">
+        <mat-list-item [matTooltipPosition]="tooltipPosition" matTooltip="{{ 'tooltips.Help' | translate }}">
           <mat-icon matListIcon (click)="help()">
             <fa-icon icon="question-circle" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>{{'labels.menus.Help' | translate}}</a>
+          <a matLine>{{ 'labels.menus.Help' | translate }}</a>
         </mat-list-item>
       </mat-nav-list>
-
     </div>
-
   </div>
-
 </div>
 
-
 <ng-template #templateLogo let-popover="popover">
-  <p class="mw300">{{"labels.text.Welcome page logo from anywhere" | translate}}</p>
+  <p class="mw300">{{ 'labels.text.Welcome page logo from anywhere' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateUserPanel, userPanel, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateUserPanel let-popover="popover">
-  <h2>{{'labels.menus.User Panel' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Section Buttons" | translate}}</p>
+  <h2>{{ 'labels.menus.User Panel' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Section Buttons' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLogo,logo,'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateLogo, logo, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFrequentlyAccessed, frequentlyAccessed, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFrequentlyAccessed let-popover="popover">
-  <h2>{{'labels.menus.Frequently Accessed' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Shortcut to the frequently accessed components" | translate}}</p>
+  <h2>{{ 'labels.menus.Frequently Accessed' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Shortcut to the frequently accessed components' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateUserPanel, userPanel, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateDashboard, dashboard, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateDashboard let-popover="popover">
-  <h2>{{'labels.menus.Dashboard' | translate}}</h2>
-  <p class="mw300">{{"labels.text.User Dashboard Component" | translate}}</p>
+  <h2>{{ 'labels.menus.Dashboard' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.User Dashboard Component' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFrequentlyAccessed, frequentlyAccessed, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateNavigation, navigation, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateNavigation let-popover="popover">
-  <h2>{{'labels.menus.Navigation' | translate}}</h2>
-  <p class="mw300">{{"labels.text.User Entity navigation screen" | translate}}</p>
+  <h2>{{ 'labels.menus.Navigation' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.User Entity navigation screen' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateDashboard, dashboard, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFrequentPostings, frequentPostings, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFrequentPostings let-popover="popover">
-  <h2>{{'labels.menus.Frequent Postings' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Shortcut accounting rules" | translate}}</p>
+  <h2>{{ 'labels.menus.Frequent Postings' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Shortcut accounting rules' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateNavigation, navigation, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateCreateJournalEntry, createJournalEntry, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateCreateJournalEntry let-popover="popover">
-  <h2>{{'labels.menus.Create Journal Entry' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Shortcut entry screen" | translate}}</p>
+  <h2>{{ 'labels.menus.Create Journal Entry' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Shortcut entry screen' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'top', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateChartOfAccounts,chartOfAccounts,'top', true);">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFrequentPostings, frequentPostings, 'top', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateChartOfAccounts, chartOfAccounts, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateChartOfAccounts let-popover="popover">
-  <h2>{{'labels.menus.Chart of Accounts' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Shortcut accounts screen" | translate}}</p>
+  <h2>{{ 'labels.menus.Chart of Accounts' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Shortcut accounts screen' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateCreateJournalEntry, createJournalEntry, 'top', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index 4b939a1339..ba33644e71 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -1,47 +1,65 @@
 <mat-toolbar fxLayout="row" color="primary" id="mifosx-toolbar">
-
-  <button mat-icon-button *ngIf="!sidenavCollapsed" (click)="toggleSidenav()" matTooltip="{{ 'tooltips.Toggle Hide/Open' | translate}}">
+  <button
+    mat-icon-button
+    *ngIf="!sidenavCollapsed"
+    (click)="toggleSidenav()"
+    matTooltip="{{ 'tooltips.Toggle Hide/Open' | translate }}"
+  >
     <fa-icon icon="bars" size="lg"></fa-icon>
   </button>
 
-  <button mat-icon-button *ngIf="sidenav.opened" (click)="toggleSidenavCollapse()" matTooltip="{{ 'tooltips.Toggle Collapse' | translate}}" fxHide.lt-md="true">
+  <button
+    mat-icon-button
+    *ngIf="sidenav.opened"
+    (click)="toggleSidenavCollapse()"
+    matTooltip="{{ 'tooltips.Toggle Collapse' | translate }}"
+    fxHide.lt-md="true"
+  >
     <fa-icon *ngIf="!sidenavCollapsed" icon="chevron-left"></fa-icon>
     <fa-icon *ngIf="sidenavCollapsed" icon="chevron-right"></fa-icon>
   </button>
 
   <nav mat-tab-nav-bar backgroundColor="primary" class="ml-1">
-
-    <a #institution mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
+    <a
+      #institution
+      mat-tab-link
+      class="tab-link"
+      [matMenuTriggerFor]="institutionMenu"
+      #institutionMenuTrigger="matMenuTrigger"
+    >
       <fa-icon class="mr-05" icon="university" size="lg"></fa-icon>
-      {{'labels.menus.Institution' | translate}}
+      {{ 'labels.menus.Institution' | translate }}
     </a>
 
     <span fxHide.lt-lg="true">
-
       <a #accounting mat-tab-link class="tab-link" [routerLink]="['/accounting']">
         <fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
-        {{'labels.menus.Accounting' | translate}}
+        {{ 'labels.menus.Accounting' | translate }}
       </a>
-      <a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
+      <a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
-        {{'labels.menus.Reports' | translate}}
+        {{ 'labels.menus.Reports' | translate }}
       </a>
       <a #admin mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
-        {{'labels.menus.Admin' | translate}}
+        {{ 'labels.menus.Admin' | translate }}
       </a>
-      <a #selfService mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
+      <a
+        #selfService
+        mat-tab-link
+        class="tab-link"
+        [matMenuTriggerFor]="selfServiceMenu"
+        #selfServiceMenuTrigger="matMenuTrigger"
+      >
         <fa-icon class="mr-05" icon="users" size="lg"></fa-icon>
-        {{'labels.menus.Self Service' | translate}}
+        {{ 'labels.menus.Self Service' | translate }}
       </a>
 
       <a #configWizard mat-tab-link class="tab-link" (click)="openDialog()">
         <fa-icon class="mr-05" icon="info" size="lg"></fa-icon>
-        {{'labels.menus.Configuration Wizard' | translate}}
+        {{ 'labels.menus.Configuration Wizard' | translate }}
       </a>
-
     </span>
-
   </nav>
 
   <span fxFlex="auto"></span>
@@ -68,51 +86,55 @@
 
   <div #appMenu>
     <button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
-      <img src="assets/images/user_placeholder.png">
+      <img src="assets/images/user_placeholder.png" />
     </button>
   </div>
 </mat-toolbar>
 
 <!-- Language selector menu for small screen view -->
 <mat-menu #languageMenu="matMenu">
-    <mifosx-language-selector class="ml-1 language"></mifosx-language-selector>
+  <mifosx-language-selector class="ml-1 language"></mifosx-language-selector>
 </mat-menu>
 
 <mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item routerLink="/clients">{{'labels.menus.Clients' | translate}}</button>
-  <button mat-menu-item routerLink="/groups">{{'labels.menus.Groups' | translate}}</button>
-  <button mat-menu-item routerLink="/centers">{{'labels.menus.Centers' | translate}}</button>
+  <button mat-menu-item routerLink="/clients">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item routerLink="/groups">{{ 'labels.menus.Groups' | translate }}</button>
+  <button mat-menu-item routerLink="/centers">{{ 'labels.menus.Centers' | translate }}</button>
   <span fxHide.lt>
-    <button mat-menu-item [routerLink]="['/accounting']">{{'labels.menus.Accounting' | translate}}</button>
-    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">{{'labels.menus.Reports' | translate}}</button>
-    <button mat-menu-item [matMenuTriggerFor]="adminMenu">{{'labels.menus.Admin' | translate}}</button>
-    <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">{{'labels.menus.Self Service' | translate}}</button>
+    <button mat-menu-item [routerLink]="['/accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">{{ 'labels.menus.Reports' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="adminMenu">{{ 'labels.menus.Admin' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">{{ 'labels.menus.Self Service' | translate }}</button>
   </span>
 </mat-menu>
 
 <!-- Toolbar Menus -->
 <mat-menu #reportsMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/reports']">{{'labels.menus.All' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Client']">{{'labels.menus.Clients' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Loan']">{{'labels.menus.Loans' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Savings']">{{'labels.menus.Savings' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Fund']">{{'labels.menus.Funds' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">{{'labels.menus.Accounting' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/xbrl']">{{'labels.menus.XBRL' | translate}}</button>
+  <button mat-menu-item [routerLink]="['/reports']">{{ 'labels.menus.All' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Client']">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Loan']">{{ 'labels.menus.Loans' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Savings']">{{ 'labels.menus.Savings' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Fund']">{{ 'labels.menus.Funds' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/xbrl']">{{ 'labels.menus.XBRL' | translate }}</button>
 </mat-menu>
 
 <mat-menu #adminMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item (click)="navigateMenu('/appusers')">{{'labels.menus.Users' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/organization']">{{'labels.menus.Organization' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/system']">{{'labels.menus.System' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/products']">{{'labels.menus.Products' | translate}}</button>
-  <button mat-menu-item routerLink="/templates">{{'labels.menus.Templates' | translate}}</button>
+  <button mat-menu-item (click)="navigateMenu('/appusers')">{{ 'labels.menus.Users' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/organization']">{{ 'labels.menus.Organization' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/system']">{{ 'labels.menus.System' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/products']">{{ 'labels.menus.Products' | translate }}</button>
+  <button mat-menu-item routerLink="/templates">{{ 'labels.menus.Templates' | translate }}</button>
 </mat-menu>
 
 <mat-menu #selfServiceMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/self-service/users']">{{'labels.menus.User Management' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/self-service/app-configuration']">{{'labels.menus.App Configuration' | translate}}</button>
-  <button mat-menu-item [routerLink]="['/self-service/task-management']">{{'labels.menus.Task Management' | translate}}</button>
+  <button mat-menu-item [routerLink]="['/self-service/users']">{{ 'labels.menus.User Management' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/self-service/app-configuration']">
+    {{ 'labels.menus.App Configuration' | translate }}
+  </button>
+  <button mat-menu-item [routerLink]="['/self-service/task-management']">
+    {{ 'labels.menus.Task Management' | translate }}
+  </button>
 </mat-menu>
 
 <!-- Application User Help Menu -->
@@ -121,134 +143,229 @@
     <mat-icon matListIcon>
       <fa-icon icon="question-circle" size="sm"></fa-icon>
     </mat-icon>
-    <span>{{'labels.menus.Help' | translate}}</span>
+    <span>{{ 'labels.menus.Help' | translate }}</span>
   </button>
   <button mat-menu-item [routerLink]="['/profile']">
     <mat-icon>
       <fa-icon icon="user" size="sm"></fa-icon>
     </mat-icon>
-    <span>{{'labels.menus.Profile' | translate}}</span>
+    <span>{{ 'labels.menus.Profile' | translate }}</span>
   </button>
   <button mat-menu-item [routerLink]="['/settings']">
     <mat-icon>
       <fa-icon icon="cog" size="sm"></fa-icon>
     </mat-icon>
-    <span>{{'labels.menus.Settings' | translate}}</span>
+    <span>{{ 'labels.menus.Settings' | translate }}</span>
   </button>
   <button mat-menu-item (click)="logout()" id="logout">
     <mat-icon>
       <fa-icon icon="sign-out-alt" size="sm"></fa-icon>
     </mat-icon>
-    <span>{{'labels.menus.Sign Out' | translate}}</span>
+    <span>{{ 'labels.menus.Sign Out' | translate }}</span>
   </button>
 </mat-menu>
 
-
 <ng-template #templateInstitution let-popover="popover">
-  <h2>{{'labels.menus.Institution' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Button for individual account" | translate}}</p>
+  <h2>{{ 'labels.menus.Institution' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Button for individual account' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAccounting, accounting)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAccounting let-popover="popover">
-  <h2>{{'labels.menus.Accounting' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Button for accounting department" | translate}}</p>
+  <h2>{{ 'labels.menus.Accounting' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Button for accounting department' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateInstitution, institution)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateInstitution, institution)">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateReports, reports)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateReports let-popover="popover">
-  <h2>{{'labels.menus.Reports' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Dropdown system reports" | translate}}</p>
+  <h2>{{ 'labels.menus.Reports' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Dropdown system reports' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAccounting, accounting)">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAdmin, admin)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAdmin let-popover="popover">
-  <h2>{{'labels.menus.Admin' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Setup organization including users" | translate}}</p>
+  <h2>{{ 'labels.menus.Admin' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Setup organization including users' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateReports, reports)">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateSelfService, selfService)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateSelfService let-popover="popover">
-  <h2>{{'labels.menus.Self Service' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Dropdown self service user administrative portal" | translate}}</p>
+  <h2>{{ 'labels.menus.Self Service' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Dropdown self service user administrative portal' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAdmin, admin)">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateConfigWizard, configWizard)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateConfigWizard let-popover="popover">
-  <h2>{{'labels.menus.Configuration Wizard' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Initial setup and application tour" | translate}}</p>
+  <h2>{{ 'labels.menus.Configuration Wizard' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Initial setup and application tour' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateSelfService, selfService)">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateGlobalSearch, globalSearch)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateGlobalSearch let-popover="popover">
-  <h2>{{'labels.menus.Global Search' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Navigate system selecting entity" | translate}}</p>
+  <h2>{{ 'labels.menus.Global Search' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Navigate system selecting entity' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateConfigWizard, configWizard)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateLanguageSelector, languageSelector)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateLanguageSelector let-popover="popover">
-  <h2>{{'labels.menus.Language Selector' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Organization available languages" | translate}}</p>
+  <h2>{{ 'labels.menus.Language Selector' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Organization available languages' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateGlobalSearch, globalSearch)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themePicker)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateThemePicker let-popover="popover">
-  <h2>{{'labels.menus.Theme Picker' | translate}}</h2>
-  <p class="mw300">{{"labels.text.Choose a theme as per organization will" | translate}}</p>
+  <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Choose a theme as per organization will' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateLanguageSelector, languageSelector)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateNotifications, notifications)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateNotifications let-popover="popover">
-  <h2>{{'labels.menus.Notifications' | translate}}</h2>
-  <p class="mw300">{{"labels.text.This shows all the notifications." | translate}}</p>
+  <h2>{{ 'labels.menus.Notifications' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This shows all the notifications.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAppMenu, appMenu)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themePicker)">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAppMenu, appMenu)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateAppMenu let-popover="popover">
-  <h2>{{'labels.menus.Application Menu' | translate}}</h2>
-  <p class="mw300">{{"labels.text.User settings and sign out button" | translate}}</p>
+  <h2>{{ 'labels.menus.Application Menu' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.User settings and sign out button' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateNotifications, notifications)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
index 5475deb8ab..e50e5a8c69 100644
--- a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
+++ b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositAccountStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,73 +21,66 @@
     </ng-template>
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-details-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
-        (fixedDepositsAccountProductTemplate)="setTemplate($event)">
+        (fixedDepositsAccountProductTemplate)="setTemplate($event)"
+      >
       </mifosx-fixed-deposit-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositAccountTermsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-terms-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+      >
       </mifosx-fixed-deposit-account-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositAccountSettingsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-settings-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+      >
       </mifosx-fixed-deposit-account-settings-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+      >
       </mifosx-fixed-deposit-account-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-charges-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
         [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
-        [fixedDepositAccountFormValid]="fixedDepositAccountFormValid">
+        [fixedDepositAccountFormValid]="fixedDepositAccountFormValid"
+      >
       </mifosx-fixed-deposit-account-charges-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="fixedDepositAccountFormValid" completed>
-
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-preview-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
         [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
-        [fixedDepositAccountData]="fixedDepositAccount" (submitEvent)="submit()">
+        [fixedDepositAccountData]="fixedDepositAccount"
+        (submitEvent)="submit()"
+      >
       </mifosx-fixed-deposit-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html b/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html
index 940a1c855f..e1d8960fd3 100644
--- a/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html
+++ b/src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositAccountStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,73 +21,66 @@
     </ng-template>
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-details-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
-        (fixedDepositsAccountProductTemplate)="setTemplate($event)">
+        (fixedDepositsAccountProductTemplate)="setTemplate($event)"
+      >
       </mifosx-fixed-deposit-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositAccountTermsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-terms-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+      >
       </mifosx-fixed-deposit-account-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositAccountSettingsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-settings-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+      >
       </mifosx-fixed-deposit-account-settings-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
-        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate">
+        [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+      >
       </mifosx-fixed-deposit-account-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-charges-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
         [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
-        [fixedDepositAccountFormValid]="fixedDepositAccountFormValidAndNotPristine">
+        [fixedDepositAccountFormValid]="fixedDepositAccountFormValidAndNotPristine"
+      >
       </mifosx-fixed-deposit-account-charges-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="fixedDepositAccountFormValidAndNotPristine" completed>
-
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-preview-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
         [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
-        [fixedDepositAccountData]="fixedDepositAccount" (submitEvent)="submit()">
+        [fixedDepositAccountData]="fixedDepositAccount"
+        (submitEvent)="submit()"
+      >
       </mifosx-fixed-deposit-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html
index 5046464647..7c3b2431b0 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html
@@ -1,10 +1,8 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData"
-        [value]="charge">
+      <mat-option *ngFor="let charge of chargeData" [value]="charge">
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -13,28 +11,33 @@
   <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>
-      {{"labels.buttons.Add" | translate }}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </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> {{"labels.inputs.Type" | translate }} </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> {{"labels.inputs.Amount" | translate }} </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,46 +47,67 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </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> {{"labels.inputs.Date" | translate }} </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'">
-          {{(charge.dueDate | dateFormat) || 'Unassigned*'}}
+        <span
+          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+        >
+          {{ (charge.dueDate | dateFormat) || 'Unassigned*' }}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned'}}
+          {{ charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned' }}
         </span>
-        <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                {{"labels.inputs.N/A" | translate }}
+        <span
+          *ngIf="
+            !(
+              charge.chargeTimeType.value === 'Monthly Fee' ||
+              charge.chargeTimeType.value === 'Annual Fee' ||
+              charge.chargeTimeType.value === 'Specified due date' ||
+              charge.chargeTimeType.value === 'Weekly Fee'
+            )
+          "
+        >
+          {{ '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)">
+        <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)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
-        <button mat-icon-button color="primary"
+        <button
+          mat-icon-button
+          color="primary"
           *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
-          (click)="editChargeFeeInterval(charge)">
+          (click)="editChargeFeeInterval(charge)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </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>
@@ -92,19 +116,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!fixedDepositAccountFormValid">
-    {{"labels.buttons.Next" | translate }}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html
index 6ffe77013e..b9424fc964 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html
@@ -1,32 +1,38 @@
 <form [formGroup]="fixedDepositAccountDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Product Name" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Product Name" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="isProductSelected">
-      <mat-label>{{"labels.inputs.Submitted On" | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
-        formControlName="submittedOnDate" required>
+      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedOnDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        {{"labels.inputs.Submission Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="isProductSelected">
-      <mat-label>{{"labels.inputs.Field Officer" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -35,21 +41,19 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="isProductSelected">
-      <mat-label>{{"labels.inputs.External id" | translate}}</mat-label>
-      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate}}">
+      <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
+      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}" />
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html
index 488f5e1aa1..47a3e6d7c1 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html
@@ -1,149 +1,161 @@
 <div fxLayout="column" fxLayoutGap="2%">
-
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
-    <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.name' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.accountChart.name }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-    <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
-    <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No'
+    }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
-
     <ng-container matColumnDef="period">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
       <td mat-cell *matCellDef="let chartSlab">
-        {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
+        {{ chartSlab.fromPeriod }}-{{ chartSlab.toPeriod }}&nbsp;{{ chartSlab.periodType.value }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="amountRange">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.amountRangeFrom }}-{{ chartSlab.amountRangeTo }}</td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-        <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+        <button
+          mat-button
+          color="primary"
+          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+        >
           <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
             <fa-icon icon="eye" class="m-r-10"></fa-icon>
-            {{"labels.buttons.View Incentives" | translate }}
+            {{ 'labels.buttons.View Incentives' | translate }}
           </span>
           <span *ngIf="expandChartSlabIndex === chartSlabIndex">
             <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-            {{"labels.buttons.Hide Incentives" | translate }}
+            {{ 'labels.buttons.Hide Incentives' | translate }}
           </span>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="incentives">
-      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-        <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+      <td
+        mat-cell
+        *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+        [attr.colspan]="chartSlabsDisplayedColumns.length"
+      >
+        <div
+          fxLayout="row wrap"
+          fxFlexFill
+          class="incentives"
+          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+        >
           <mat-card fxLayout="row wrap" fxFlexFill>
-
             <h4 class="m-b-10" fxFlex="13%">
-              {{"labels.heading.Incentives" | translate }}
+              {{ 'labels.heading.Incentives' | translate }}
             </h4>
 
-            <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
-
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="chartSlab.incentives"
+              *ngIf="chartSlab.incentives.length"
+            >
               <ng-container matColumnDef="entityType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.entityType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeName">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.attributeName.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="conditionType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.conditionType.value | titlecase }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeValue">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                   {{ incentive.attributeValueDesc }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incentiveType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.incentiveType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.amount }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
             </table>
-
           </mat-card>
         </div>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
   </table>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{"labels.buttons.Next" | translate }}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html
index eda8d9fbec..a500dd38e0 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html
@@ -1,358 +1,436 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Product" | translate }}</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.productId | find:fixedDepositsAccountTemplate.productOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.productId | find: fixedDepositsAccountTemplate.productOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Submitted On" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.externalId">
-    <span fxFlex="40%">{{"labels.inputs.External Id" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.externalId }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Field Officer" | translate }}</span>
-    <span fxFlex="60%">{{ (fixedDepositAccountData.fieldOfficerId | find:fixedDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName') || 'Unassigned' | translateKey:'inputs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
+    <span fxFlex="60%">{{
+      (fixedDepositAccountData.fieldOfficerId
+        | find: fixedDepositsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName') || 'Unassigned'
+        | translateKey: 'inputs'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Currency" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Currency' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Currency" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.code }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Currency Multiple" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency Multiple' | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Decimal Places" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Fixed Deposit Amount" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.depositAmount | currency:fixedDepositsAccountProductTemplate.currency.code:'symbol-narrow':'1.2-2' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Fixed Deposit Amount' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.depositAmount
+        | currency: fixedDepositsAccountProductTemplate.currency.code : 'symbol-narrow' : '1.2-2'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Deposit Period" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.depositPeriod }} {{(fixedDepositAccountData.depositPeriodFrequencyId | find:fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ fixedDepositAccountData.depositPeriod }}
+      {{
+        fixedDepositAccountData.depositPeriodFrequencyId
+          | find: fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions : 'id' : 'value'
+          | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest Compounding Period" | translate }}:</span>
-    <span fxFlex="60%">{{ (fixedDepositAccountData.interestCompoundingPeriodType | find:fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value') | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.interestCompoundingPeriodType
+        | find: fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest Posting Period" | translate }}:</span>
-    <span fxFlex="60%">{{ (fixedDepositAccountData.interestPostingPeriodType | find:fixedDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value') | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.interestPostingPeriodType
+        | find: fixedDepositsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest Calculated using" | translate }}:</span>
-    <span fxFlex="60%">{{ (fixedDepositAccountData.interestCalculationType | find:fixedDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value') | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.interestCalculationType
+        | find: fixedDepositsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Days in Year" | translate }}:</span>
-    <span fxFlex="60%">{{ (fixedDepositAccountData.interestCalculationDaysInYearType | find:fixedDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value') | translateKey:'catalogs'  }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.interestCalculationDaysInYearType
+        | find: fixedDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Settings" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.lockinPeriodFrequency">
-    <span fxFlex="40%">{{"labels.inputs.Lock-in Period" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.lockinPeriodFrequency }} {{(fixedDepositAccountData.lockinPeriodFrequencyType | find:fixedDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ fixedDepositAccountData.lockinPeriodFrequency }}
+      {{
+        fixedDepositAccountData.lockinPeriodFrequencyType
+          | find: fixedDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
+          | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.minDepositTerm">
-    <span fxFlex="40%">{{"labels.inputs.Minimum Deposit Term" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.minDepositTerm }} {{fixedDepositsAccountProductTemplate.minDepositTermType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ fixedDepositsAccountProductTemplate.minDepositTerm }}
+      {{ fixedDepositsAccountProductTemplate.minDepositTermType?.value | translateKey: 'catalogs' }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm">
-    <span fxFlex="40%">{{"labels.inputs.In Multiples Of" | translate }}:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm }} {{fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm }}
+      {{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType?.value | translateKey: 'catalogs' }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.maxDepositTerm">
-    <span fxFlex="40%">{{"labels.inputs.Maximum Deposit Term" | translate }}</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.maxDepositTerm }} {{fixedDepositsAccountProductTemplate.maxDepositTermType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
+    <span fxFlex="60%"
+      >{{ fixedDepositsAccountProductTemplate.maxDepositTerm }}
+      {{ fixedDepositsAccountProductTemplate.maxDepositTermType?.value | translateKey: 'catalogs' }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Transfer Interest to Savings Account" | translate }}?</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Transfer Interest to Savings Account' | translate }}?</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.transferInterestToSavings">
-    <span fxFlex="40%">{{"labels.inputs.Linked Savings Account" | translate }}</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.linkAccountId | find:fixedDepositsAccountProductTemplate.savingsAccounts:'id':'accountNo' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Linked Savings Account' | translate }}</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.linkAccountId
+        | find: fixedDepositsAccountProductTemplate.savingsAccounts : 'id' : 'accountNo'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.maturityInstructionId">
-    <span fxFlex="40%">{{"labels.inputs.Maturity Instructions" | translate }}</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.maturityInstructionId | find:fixedDepositsAccountProductTemplate.maturityInstructionOptions:'id':'value' | translateKey:'catalogs'  }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
+    <span fxFlex="60%">{{
+      fixedDepositAccountData.maturityInstructionId
+        | find: fixedDepositsAccountProductTemplate.maturityInstructionOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Apply Penal Interest (less)" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
-    <span fxFlex="40%">{{"labels.inputs.Penal Interest" | translate }} (%):</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalInterest + '% (' + (fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType?.id) + ')' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
+    <span fxFlex="60%">{{
+      fixedDepositsAccountProductTemplate.preClosurePenalInterest +
+        '% (' +
+        fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType?.id +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
-    <span fxFlex="40%">{{"labels.inputs.Withhold Tax is Applicable" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax | yesNo }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Interest Rate Chart" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div class="margin-b" fxFlexFill fxLayout="column">
-
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
-      <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.name' | translate }}:</span>
       <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
       <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
       <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
-      <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
       <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+      <span fxFlex="60%">{{
+        fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
+      }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
-
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs' }}</td>
+          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+            chartSlab.periodType.value | translateKey: 'catalogs'
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+          <button
+            mat-button
+            color="primary"
+            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+          >
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{"labels.buttons.View Incentives" | translate }}
+              {{ 'labels.buttons.View Incentives' | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Hide Incentives" | translate }}
+              {{ 'labels.buttons.Hide Incentives' | translate }}
             </span>
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="incentives">
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-          <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+        <td
+          mat-cell
+          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length"
+        >
+          <div
+            fxLayout="row wrap"
+            fxFlexFill
+            class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+          >
             <mat-card fxLayout="row wrap" fxFlexFill>
-
               <h4 class="m-b-10" fxFlex="13%">
-                {{"labels.heading.Incentives" | translate }}
+                {{ 'labels.heading.Incentives' | translate }}
               </h4>
 
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
-
+              <table
+                fxFlexFill
+                class="mat-elevation-z1"
+                mat-table
+                [dataSource]="chartSlab.incentives"
+                *ngIf="chartSlab.incentives.length"
+              >
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount | formatNumber }}
                   </td>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
               </table>
-
             </mat-card>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges" | translate }}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositAccountData.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </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> {{"labels.inputs.Type" | translate }} </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> {{"labels.inputs.Amount" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </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'">
-            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+          >
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned'}}
+            {{ charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned' }}
           </span>
           <span
-            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-              {{"labels.inputs.N/A" | translate }}
+            *ngIf="
+              !(
+                charge.chargeTimeType.value === 'Monthly Fee' ||
+                charge.chargeTimeType.value === 'Annual Fee' ||
+                charge.chargeTimeType.value === 'Specified due date' ||
+                charge.chargeTimeType.value === 'Weekly Fee'
+              )
+            "
+          >
+            {{ 'labels.inputs.N/A' | translate }}
           </span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../..']">
-    {{"labels.buttons.Cancel" | translate }}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{"labels.buttons.Submit" | translate }}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html
index affe7791cd..8af4c8cef1 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html
@@ -1,170 +1,176 @@
 <form [formGroup]="fixedDepositAccountSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Lock-in Period" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
-          [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
+          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Minimum Deposit Term" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Deposit Term' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="minDepositTerm" required>
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minDepositTerm" required />
       <mat-error>
-        {{"labels.inputs.Minimum Deposit Term Frequency" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Minimum Deposit Term Frequency Type" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.And thereafter, in Multiples of" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.And thereafter, in Multiples of' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOfDepositTerm">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="inMultiplesOfDepositTerm" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Maximum Deposit Term" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Maximum Deposit Term' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="maxDepositTerm">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maxDepositTerm" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{"labels.heading.Interest Transfer" | translate }}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.heading.Interest Transfer' | translate }}</h3>
 
     <mat-checkbox fxFlex="32%" labelPosition="before" formControlName="transferInterestToSavings" class="margin-b">
-      {{"labels.inputs.Transfer Interest to Linked Savings Account" | translate }}?
+      {{ 'labels.inputs.Transfer Interest to Linked Savings Account' | translate }}?
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.contains('linkAccountId')" class="margin-b">
-      <mat-label>{{"labels.inputs.Linked Savings Account" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Linked Savings Account' | translate }}</mat-label>
       <mat-select formControlName="linkAccountId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
           ({{ account.accountNo }}) {{ account.savingsProductName }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Linked Savings Account" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Linked Savings Account' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Maturity Instructions" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Maturity Instructions' | translate }}</mat-label>
       <mat-select formControlName="maturityInstructionId">
         <mat-option *ngFor="let maturityInstruction of maturityInstructionOptions" [value]="maturityInstruction.id">
-          {{ maturityInstruction.value | translateKey:'catalogs' }}
+          {{ maturityInstruction.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.contains('transferToSavingsId')" class="margin-b">
-      <mat-label>{{"labels.inputs.Transfer to savings account" | translate }}</mat-label>
+    <mat-form-field
+      fxFlex="48%"
+      *ngIf="fixedDepositAccountSettingsForm.contains('transferToSavingsId')"
+      class="margin-b"
+    >
+      <mat-label>{{ 'labels.inputs.Transfer to savings account' | translate }}</mat-label>
       <mat-select formControlName="transferToSavingsId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
           ({{ account.accountNo }}) {{ account.savingsProductName }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Transfer to savings account" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">{{"labels.heading.For Pre-mature closure" | translate }}</h4>
+    <h4 fxFlex="23%" class="mat-h4">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      {{"labels.inputs.Apply Penal Interest (less)" | translate }}
+      {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Penal Interest" | translate }} (%)</mat-label>
-      <input type="number" matInput formControlName="preClosurePenalInterest">
+      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Period" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
-        <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
-          [value]="preClosurePenalInterestOnType.id">
-          {{ preClosurePenalInterestOnType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
+          [value]="preClosurePenalInterestOnType.id"
+        >
+          {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <ng-container *ngIf="fixedDepositAccountSettingsForm.controls.withHoldTax">
-
       <mat-divider fxFlex="98%"></mat-divider>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-p">
-        {{"labels.inputs.Is Withhold Tax Applicable" | translate }}?
+        {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.controls.taxGroupId" class="p-b-25">
-        <mat-label>{{"labels.inputs.Tax Group" | translate }}</mat-label>
-        <input matInput formControlName="taxGroupId">
+        <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
+        <input matInput formControlName="taxGroupId" />
       </mat-form-field>
-
     </ng-container>
-
   </div>
 
   <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>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html
index 831f16ac7c..8331721f8e 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html
@@ -1,99 +1,114 @@
 <form [formGroup]="fixedDepositAccountTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mifosx-input-amount [currency]="currency" [isRequired]="true" *ngIf="currency" fxFlex="48%"
+    <mifosx-input-amount
+      [currency]="currency"
+      [isRequired]="true"
+      *ngIf="currency"
+      fxFlex="48%"
       [inputFormControl]="fixedDepositAccountTermsForm.controls.depositAmount"
-      [inputLabel]="'Deposit Amount'">
+      [inputLabel]="'Deposit Amount'"
+    >
     </mifosx-input-amount>
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Deposit Period" | translate }}</mat-label>
-      <input type="number" matInput formControlName="depositPeriod" required>
+      <mat-label>{{ 'labels.inputs.Deposit Period' | translate }}</mat-label>
+      <input type="number" matInput formControlName="depositPeriod" required />
       <mat-error>
-        {{"labels.inputs.Deposit Period" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Deposit Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Deposit Period Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Deposit Period Type' | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Deposit Period Type" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Deposit Period Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest Compounding Period" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
-          [value]="interestCompoundingPeriodType.id">
-          {{ interestCompoundingPeriodType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id"
+        >
+          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Interest Compounding Period" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest Posting Period" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
-          [value]="interestPostingPeriodType.id">
-          {{ interestPostingPeriodType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id"
+        >
+          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Interest Posting Period" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest Calculated using" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData"
-          [value]="interestCalculationType.id">
-          {{ interestCalculationType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id"
+        >
+          {{ interestCalculationType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Interest Calculated using" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Days in Year" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
-          [value]="interestCalculationDaysInYearType.id">
-          {{ interestCalculationDaysInYearType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id"
+        >
+          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Days in Year" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html
index 5e3097e729..2480868330 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html
@@ -1,94 +1,138 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{"labels.heading.All Charges" | translate }}</h3>
+      <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
     </div>
     <div class="action-button m-b-20" *ngIf="this.chargesData">
       <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{showInactiveCharges?'View Active Charges':'View Inactive Charges'}}</button>
+        {{ showInactiveCharges ? 'View Active Charges' : 'View Inactive Charges' }}
+      </button>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
-    <table mat-table #chargesTable [dataSource]="dataSource" >
-
+    <table mat-table #chargesTable [dataSource]="dataSource">
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Fee/Penalty" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? ('Penalty'| translateKey:'catalogs') : ('Fee'| translateKey:'catalogs') }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Penalty' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.penalty === true ? ('Penalty' | translateKey: 'catalogs') : ('Fee' | translateKey: 'catalogs') }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Payment Due At" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Due At' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due As Of" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due As Of' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repeats On" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : ('Unassigned' | translateKey:'inputs')}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{
+            charge.feeOnMonthDay
+              ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM')
+              : ('Unassigned' | translateKey: 'inputs')
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Calculation Type" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value | translateKey:'catalogs'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amount | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Paid" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountPaid | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Waived" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountWaived | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountOutstanding | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="fixedDepositsAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
-              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); editCharge(charge)"
+            >
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
-              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); deleteCharge(charge.id)"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </span>
           <span *ngIf="fixedDepositsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
-              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); payCharge(charge.id)"
+            >
               <i class="fa fa-dollar"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
-              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); waiveCharge(charge.id)"
+            >
               <i class="fa fa-flag"></i>
             </button>
             <ng-container *ngIf="isRecurringCharge(charge)">
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
-                *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); inactivateCharge(charge.id)">
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
+                *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); inactivateCharge(charge.id)"
+              >
                 <i class="fa fa-ban"></i>
               </button>
             </ng-container>
@@ -97,10 +141,7 @@ <h3>{{"labels.heading.All Charges" | translate }}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html
index 2f550c943f..1c57b59d27 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Calculate Interest" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Calculate Interest' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to calculate interest" | translate }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to calculate interest' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html
index 5112ae2788..60ef6bbd47 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Inactivate Charge" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Inactivate Charge' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to inactivate charge with id" | translate }}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to inactivate charge with id' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html
index d7ed1cf98b..0f5c9905e6 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Post Interest" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Post Interest' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to post interest" | translate }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to post interest' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html
index 02b8387ae0..7970e3346d 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html
@@ -1,8 +1,17 @@
-<h1 mat-dialog-title>{{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }} {{"labels.heading.Withhold Tax" | translate }}</h1>
+<h1 mat-dialog-title>
+  {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }}
+  {{ 'labels.heading.Withhold Tax' | translate }}
+</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to" | translate }} {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }} {{"labels.text.withhold tax for this account" | translate }} ?</p>
+  <p>
+    {{ 'labels.text.Are you sure you want to' | translate }}
+    {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }}
+    {{ 'labels.text.withhold tax for this account' | translate }} ?
+  </p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html
index 3ecd77cf31..aaf3b182bc 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Waive Charge" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Waive Charge' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to waive charge with id" | translate }}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to waive charge with id' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
index 98f15869e5..ead66e5fda 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
@@ -1,45 +1,65 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
+          <img
+            mat-card-md-image
+            class="profile-image"
             matTooltip="{{ 'tooltips.Fixed Deposits Account' | translate }}"
-            [src]="'assets/images/fd_account_placeholder.png'">
+            [src]="'assets/images/fd_account_placeholder.png'"
+          />
         </div>
       </div>
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-
           <div fxFlex="60%">
             <h3>
-              <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
-              {{"labels.inputs.Fixed Deposit Product" | translate }} : {{fixedDepositsAccountData.depositProductName}}
-              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number>
+              <i
+                class="fa fa-stop"
+                [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
+                [matTooltip]="fixedDepositsAccountData.status.value"
+              ></i>
+              {{ 'labels.inputs.Fixed Deposit Product' | translate }} :
+              {{ fixedDepositsAccountData.depositProductName }}
+              <mifosx-account-number accountNo="{{ fixedDepositsAccountData.accountNo }}"></mifosx-account-number>
             </h3>
             <span class="account-overview">
-              <span class="m-r-10">{{'labels.text.' + entityType | translate}} :</span> {{fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName}}
+              <span class="m-r-10">{{ 'labels.text.' + entityType | translate }} :</span>
+              {{ fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName }}
               <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
-                <mifosx-account-number accountNo="{{fixedDepositsAccountData.clientAccountNo}}"></mifosx-account-number>
+                <mifosx-account-number
+                  accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
+                ></mifosx-account-number>
               </span>
             </span>
           </div>
 
-          <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval" fxFlex="30%"  fxLayout="column">
-            <h3 fxFlex="100%"> {{"labels.heading.Account Overview" | translate}} </h3>
+          <div
+            *ngIf="
+              !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval
+            "
+            fxFlex="30%"
+            fxLayout="column"
+          >
+            <h3 fxFlex="100%">{{ 'labels.heading.Account Overview' | translate }}</h3>
             <table class="account-overview" fxFlex="100%">
               <tbody>
                 <tr>
-                  <td fxFlex="70%">{{"labels.inputs.Current Balance" | translate }}</td>
-                  <td fxFlex="30%" class="r-amount">{{fixedDepositsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td fxFlex="70%">{{ 'labels.inputs.Current Balance' | translate }}</td>
+                  <td fxFlex="30%" class="r-amount">
+                    {{
+                      fixedDepositsAccountData.summary.accountBalance
+                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
                 <tr>
-                  <td fxFlex="70%">{{"labels.inputs.Deposit Amount" | translate }}</td>
-                  <td fxFlex="30%" class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td fxFlex="70%">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                  <td fxFlex="30%" class="r-amount">
+                    {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -48,8 +68,12 @@ <h3 fxFlex="100%"> {{"labels.heading.Account Overview" | translate}} </h3>
           <span fxFlex="auto"></span>
 
           <div fxFlex="5%">
-            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Fixed Deposit account actions"
-              yPosition="below">
+            <button
+              mat-icon-button
+              [matMenuTriggerFor]="accountMenu"
+              aria-label="Fixed Deposit account actions"
+              yPosition="below"
+            >
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
               </mat-icon>
@@ -61,59 +85,86 @@ <h3 fxFlex="100%"> {{"labels.heading.Account Overview" | translate}} </h3>
       <mat-menu #accountMenu="matMenu">
         <ng-container *ngFor="let button of buttonConfig.singleButtons">
           <button mat-menu-item (click)="doAction(button.name)">
-            <i ngClass="{{button.icon}}"></i> {{button.name | translateKey:'menus'}}</button>
+            <i ngClass="{{ button.icon }}"></i> {{ button.name | translateKey: 'menus' }}
+          </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{'More' | translateKey:'menus'}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'More' | translateKey: 'menus' }}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item (click)="doAction(option.name)">{{option.name | translateKey:'menus'}}</button>
+              <button mat-menu-item (click)="doAction(option.name)">{{ option.name | translateKey: 'menus' }}</button>
             </span>
           </mat-menu>
         </ng-container>
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content class="content">
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-      [active]="general.isActive">
-      {{"labels.inputs.General" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-      [active]="IRC.isActive">
-      {{"labels.inputs.Interest Rate Chart" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./interest-rate-chart']"
+        routerLinkActive
+        #IRC="routerLinkActive"
+        [active]="IRC.isActive"
+      >
+        {{ 'labels.inputs.Interest Rate Chart' | translate }}
       </a>
       <span *ngIf="showTransactions">
-        <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-        [active]="transactions.isActive">
-        {{"labels.inputs.Transactions" | translate }}
+        <a
+          mat-tab-link
+          [routerLink]="['./transactions']"
+          routerLinkActive
+          #transactions="routerLinkActive"
+          [active]="transactions.isActive"
+        >
+          {{ 'labels.inputs.Transactions' | translate }}
         </a>
       </span>
-      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-      [active]="charges.isActive">
-      {{"labels.inputs.Charges" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./charges']"
+        routerLinkActive
+        #charges="routerLinkActive"
+        [active]="charges.isActive"
+      >
+        {{ 'labels.inputs.Charges' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
-        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
-        {{"labels.inputs.Standing Instructions" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./standing-instructions']"
+        routerLinkActive
+        #standingInstructions="routerLinkActive"
+        [active]="standingInstructions.isActive"
+        *ngIf="fixedDepositsAccountData.clientId"
+      >
+        {{ 'labels.inputs.Standing Instructions' | translate }}
       </a>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{savingsDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+          [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ savingsDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html
index 83e63a4c4c..f61ef37c15 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html
@@ -1,112 +1,153 @@
-
 <div class="fixed-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-
   <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
-
     <div>
-      <h4 class="table-headers">{{"labels.heading.Fixed Deposit Details" | translate }}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Fixed Deposit Details' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{"labels.inputs.External Id" | translate }}</td>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td>
               <span *ngIf="fixedDepositsAccountData.externalId">
-                <mifosx-external-identifier externalId="{{fixedDepositsAccountData.externalId}}" completed="true"></mifosx-external-identifier>
+                <mifosx-external-identifier
+                  externalId="{{ fixedDepositsAccountData.externalId }}"
+                  completed="true"
+                ></mifosx-external-identifier>
+              </span>
+              <span *ngIf="!fixedDepositsAccountData.externalId">
+                {{ 'labels.inputs.Not Available' | translate }}
               </span>
-              <span *ngIf="!fixedDepositsAccountData.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
             </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Activated On" | translate }}</td>
-            <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : ('labels.text.Not Activated' | translate)}}</td>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td>
+              {{
+                fixedDepositsAccountData.timeline.activatedOnDate
+                  ? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat)
+                  : ('labels.text.Not Activated' | translate)
+              }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-            <td>{{"labels.inputs.Closed On" | translate }}</td>
-            <td>{{fixedDepositsAccountData.timeline.closedOnDate | dateFormat}}</td>
+            <td>{{ 'labels.inputs.Closed On' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Field Officer" | translate }}</td>
-            <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : ('Unassigned' | translateKey:'inputs')}}</td>
+            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+            <td>
+              {{
+                fixedDepositsAccountData.fieldOfficerName
+                  ? fixedDepositsAccountData.fieldOfficerName
+                  : ('Unassigned' | translateKey: 'inputs')
+              }}
+            </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-            <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A'}}</td>
+            <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
+            <td>
+              {{ fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A' }}
+            </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Deposit Period" | translate }}</td>
-            <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
+            <td>
+              {{ fixedDepositsAccountData.depositPeriod }}&nbsp;{{
+                fixedDepositsAccountData.depositPeriodFrequency.value | translateKey: 'catalogs'
+              }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.withHoldTax">
-            <td>{{"labels.inputs.Tax Group" | translate }}</td>
-            <td>{{fixedDepositsAccountData.taxGroup.name}}</td>
+            <td>{{ 'labels.inputs.Tax Group' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.onAccountClosure">
-            <td>{{"labels.inputs.Maturity Instructions" | translate }}</td>
-            <td>{{fixedDepositsAccountData.onAccountClosure.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
           </tr>
         </tbody>
       </table>
     </div>
 
     <div>
-      <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Interest Details' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-            <td>{{fixedDepositsAccountData.nominalAnnualInterestRate}} %</td>
+            <td>{{ 'labels.inputs.Interest Rate' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.nominalAnnualInterestRate }} %</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Interest Calculated Using" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.No. of Days in Year" | translate }}</td>
-            <td>{{fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.No. of Days in Year' | translate }}</td>
+            <td>{{ fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
-            <td>{{"labels.inputs.Pre-cloure Penal" | translate }}</td>
-            <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey:'catalogs'}}</td>
+            <td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
+            <td>
+              {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
+              {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
-
   </div>
 
   <div fxFlex="49%">
-
-    <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
-      <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
+    <div
+      *ngIf="
+        !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval;
+        else otherDetails
+      "
+    >
+      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+            <td class="r-amount">
+              {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr>
-            <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+            <td class="r-amount">
+              {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-            <td>{{"labels.inputs.Total Deposits" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+            <td class="r-amount">
+              {{ fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-            <td>{{"labels.inputs.Total Withdrawals" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
+            <td class="r-amount">
+              {{
+                fixedDepositsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}
+            </td>
           </tr>
           <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{"labels.inputs.Total Interest Earned" | translate }}</td>
-            <td class="r-amount">{{fixedDepositsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+            <td class="r-amount">
+              {{
+                fixedDepositsAccountData.summary.totalInterestEarned
+                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
+              }}
+            </td>
           </tr>
         </tbody>
       </table>
@@ -114,22 +155,24 @@ <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}<
 
     <ng-template #otherDetails>
       <div>
-        <h4 class="table-headers">{{"labels.heading.Other Details" | translate }}</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Other Details' | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-              <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+              <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-              <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+              <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
+              <td class="r-amount">
+                {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
             </tr>
           </tbody>
         </table>
       </div>
     </ng-template>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
index 64f45fea88..9f279c9f5f 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
@@ -1,123 +1,135 @@
 <div class="tab-container mat-typography">
-
   <div fxLayoutAlign="start">
     <div class="m-b-20">
-      <h3>{{"labels.heading.All Interest Rates" | translate }}</h3>
+      <h3>{{ 'labels.heading.All Interest Rates' | translate }}</h3>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
-
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs'}}</td>
+          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+            chartSlab.periodType.value | translateKey: 'catalogs'
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+          <button
+            mat-button
+            color="primary"
+            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+          >
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{"labels.buttons.View Incentives" | translate }}
+              {{ 'labels.buttons.View Incentives' | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Hide Incentives" | translate }}
+              {{ 'labels.buttons.Hide Incentives' | translate }}
             </span>
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="incentives">
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-          <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+        <td
+          mat-cell
+          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length"
+        >
+          <div
+            fxLayout="row wrap"
+            fxFlexFill
+            class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+          >
             <mat-card fxLayout="row wrap" fxFlexFill>
-
               <h4 class="m-b-10" fxFlex="13%">
-                {{"labels.heading.Incentives" | translate }}
+                {{ 'labels.heading.Incentives' | translate }}
               </h4>
 
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives?.length">
-
+              <table
+                fxFlexFill
+                class="mat-elevation-z1"
+                mat-table
+                [dataSource]="chartSlab.incentives"
+                *ngIf="chartSlab.incentives?.length"
+              >
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount | formatNumber }}
                   </td>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
               </table>
-
             </mat-card>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html
index 085098d6c3..c2ffe6141b 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html
@@ -1,70 +1,88 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{"labels.heading.All Standing Instructions" | translate }}</h3>
+    <h3>{{ 'labels.heading.All Standing Instructions' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #instructionsTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}} ({{instruction.fromAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Beneficiary" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.toClient.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}} ({{instruction.toAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.validFrom | dateFormat }} to {{ instruction.validTill | dateFormat }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
-              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+            >
               <i class="fa fa-edit"></i>
             </button>
           </span>
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
-              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+              (click)="deleteStandingInstruction(instruction.id)"
+            >
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+          >
             <i class="fa fa-eye"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
index b92e2ae11c..cd29588288 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
@@ -1,69 +1,101 @@
 <div class="tab-container mat-typography">
-
   <div class="mat-elevation-z1 m-b-25">
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-20">
-        <h3>{{"labels.heading.All Transactions" | translate }}</h3>
+        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-          {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
+          {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+        >
         <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-          {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
+          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+        >
       </div>
     </div>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="row">
-        <th mat-header-cell *matHeaderCellDef> # </th>
-        <td mat-cell *matCellDef="let transaction; let idx = index;" (click)="showTransactions(transaction)">{{(idx + 1)}}</td>
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let transaction; let idx = index" (click)="showTransactions(transaction)">
+          {{ idx + 1 }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.id }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.date | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ transaction.transactionType.value | translateKey:'catalogs' }}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.transactionType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Debit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Debit' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Credit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Credit' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.runningBalance | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell class="center" *matCellDef="let transaction">
           <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
             <mat-icon>more_vert</mat-icon>
@@ -71,21 +103,22 @@ <h3>{{"labels.heading.All Transactions" | translate }}</h3>
           <mat-menu #transactionMenu="matMenu">
             <button mat-menu-item (click)="showTransactions(transaction)">
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+              <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
-            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <button
+              mat-menu-item
+              (click)="routeEdit($event)"
+              [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
+            >
               <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
             </button>
           </mat-menu>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
index 5fac0d3f07..153112ba75 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
@@ -1,23 +1,23 @@
 <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
   <span *ngIf="allowUndo()">
-    <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()">
+    <button
+      mat-raised-button
+      color="warn"
+      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+      (click)="undoTransaction()"
+    >
       <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
     </button>
   </span>
 </div>
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="transactionColor()">
-        </div>
+        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Id" | translate }}
+          {{ 'labels.inputs.Transaction Id' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -25,7 +25,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Type" | translate }}
+          {{ 'labels.inputs.Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -33,7 +33,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Date" | translate }}
+          {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +41,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate }}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -49,32 +49,33 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate }}
+          {{ 'labels.inputs.Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
+          {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
-          {{"labels.inputs.Note" | translate }}
+          {{ 'labels.inputs.Note' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 
-        <mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData">
+        <mifosx-transaction-payment-detail
+          *ngIf="transactionData.paymentDetailData"
+          [paymentDetailData]="transactionData.paymentDetailData"
+        >
         </mifosx-transaction-payment-detail>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html
index 00ecfb1d3a..00ad48f059 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateFixedDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
-          <mat-label>{{"labels.inputs.Activated On Date" | translate }}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required formControlName="activatedOnDate">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activatedOnDatePicker"
+            required
+            formControlName="activatedOnDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #activatedOnDatePicker></mat-datepicker>
           <mat-error *ngIf="activateFixedDepositsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{"labels.inputs.Activated On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.html
index e4e270afa9..b26590fd11 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.html
@@ -1,46 +1,45 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="fixedDepositsChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let savingsCharge of savingsChargeOptions" [value]="savingsCharge.id">
                 {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="fixedDepositsChargeForm.controls.chargeId.hasError('required')">
-              {{"labels.inputs.Charge" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Amount" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="fixedDepositsChargeForm.controls.amount.hasError('required')">
-                {{"labels.inputs.Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge Calculation" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
               <mat-select formControlName="chargeCalculationType">
-                <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id">
+                <mat-option
+                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
+                  [value]="chargeCalculation.id"
+                >
                   {{ chargeCalculation.value }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge time type" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,45 +48,60 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="fixedDepositsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{"labels.inputs.Due for collection on" | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-                formControlName="dueDate">
+              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="dueDatePicker"
+                required
+                formControlName="dueDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="fixedDepositsChargeForm.controls.dueDate.hasError('required')">
-                {{"labels.inputs.Due for collection on" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>{{"labels.inputs.Due On" | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
-                formControlName="feeOnMonthDay">
+            <mat-form-field
+              *ngIf="fixedDepositsChargeForm.contains('feeOnMonthDay')"
+              (click)="feeOnMonthDayPicker.open()"
+            >
+              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="feeOnMonthDayPicker"
+                required
+                formControlName="feeOnMonthDay"
+              />
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="fixedDepositsChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{"labels.inputs.Due Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="fixedDepositsChargeForm.contains('feeInterval')">
-              <mat-label>{{"labels.inputs.Repeats Every" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
-
           </div>
-
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!fixedDepositsChargeForm.valid">{{"labels.buttons.Submit" | translate }}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!fixedDepositsChargeForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html
index f2074799c0..724b194a28 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html
@@ -1,39 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="approveFixedDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="approvedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Approved On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required formControlName="approvedOnDate">
+            <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="approvedOnDatePicker"
+              required
+              formControlName="approvedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="approveFixedDepositsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{"labels.inputs.Approved On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveFixedDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!approveFixedDepositsAccountForm">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.html
index e7cc412edb..b24bd5511d 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.html
@@ -1,73 +1,77 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeOnMaturityAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required formControlName="closedOnDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedOnDatePicker"
+              required
+              formControlName="closedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="closeOnMaturityAccountForm.controls.closedOnDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Maturity Amount" | translate }}</mat-label>
-            <input type="number" matInput formControlName="maturityAmount"/>
+            <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
+            <input type="number" matInput formControlName="maturityAmount" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Action" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
             <mat-select required formControlName="onAccountClosureId">
               <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
                 {{ closureOption.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeOnMaturityAccountForm.controls.onAccountClosureId.hasError('required')">
-              {{"labels.inputs.Account action" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="closeOnMaturityAccountForm.contains('toSavingsAccountId')">
-            <mat-label>{{"labels.inputs.Transfer to Savings" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
             <mat-select required formControlName="toSavingsAccountId">
               <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeOnMaturityAccountForm.controls.toSavingsAccountId.hasError('required')">
-              {{"labels.inputs.Transfer to savings account" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="closeOnMaturityAccountForm.contains('transferDescription')">
-            <mat-label>{{"labels.inputs.Transfer Description" | translate }}</mat-label>
-            <input matInput formControlName="transferDescription"/>
+            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+            <input matInput formControlName="transferDescription" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeOnMaturityAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!closeOnMaturityAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.html
index 57409d92b1..77704a95ec 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.html
@@ -1,9 +1,15 @@
 <mifosx-approve-fixed-deposits-account *ngIf="actions['Approve']"></mifosx-approve-fixed-deposits-account>
 <mifosx-reject-fixed-deposits-account *ngIf="actions['Reject']"></mifosx-reject-fixed-deposits-account>
 <mifosx-activate-fixed-deposits-account *ngIf="actions['Activate']"></mifosx-activate-fixed-deposits-account>
-<mifosx-undo-approval-fixed-deposits-account *ngIf="actions['Undo Approval'] || actions['Undo Activation']"></mifosx-undo-approval-fixed-deposits-account>
-<mifosx-withdraw-by-client-fixed-deposits-account *ngIf="actions['Withdrawn by Client']"></mifosx-withdraw-by-client-fixed-deposits-account>
+<mifosx-undo-approval-fixed-deposits-account
+  *ngIf="actions['Undo Approval'] || actions['Undo Activation']"
+></mifosx-undo-approval-fixed-deposits-account>
+<mifosx-withdraw-by-client-fixed-deposits-account
+  *ngIf="actions['Withdrawn by Client']"
+></mifosx-withdraw-by-client-fixed-deposits-account>
 <mifosx-add-charge-fixed-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-fixed-deposits-account>
-<mifosx-premature-close-fixed-deposits-account *ngIf="actions['Premature Close']"></mifosx-premature-close-fixed-deposits-account>
+<mifosx-premature-close-fixed-deposits-account
+  *ngIf="actions['Premature Close']"
+></mifosx-premature-close-fixed-deposits-account>
 <mifosx-close-fixed-deposits-account *ngIf="actions['Close']"></mifosx-close-fixed-deposits-account>
 <mifosx-fixed-deposits-cash-transaction *ngIf="actions['Withdrawal']"></mifosx-fixed-deposits-cash-transaction>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.html
index 491fe7c9a0..575c5be3e9 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.html
@@ -1,88 +1,95 @@
 <div class="container mat-elevation-z8">
+  <mat-card>
+    <h2 mat-title *ngIf="transactionType.withdrawal">
+      {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
+    </h2>
 
-    <mat-card>
-  
-      <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.menus.' + actionName | translate }} {{'labels.heading.Fixed Deposit Transactions' | translate}}</h2>
-  
-      <form [formGroup]="accountTransactionForm" (ngSubmit)="submit()">
-  
-        <mat-card-content fxLayout="column">
-  
-          <mat-form-field (click)="dueDatePicker.open()">
-            <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
-              formControlName="transactionDate" required>
-            <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #dueDatePicker></mat-datepicker>
-            <mat-error *ngIf="accountTransactionForm.controls.transactionDate.hasError('required')">
-              {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+    <form [formGroup]="accountTransactionForm" (ngSubmit)="submit()">
+      <mat-card-content fxLayout="column">
+        <mat-form-field (click)="dueDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="dueDatePicker"
+            formControlName="transactionDate"
+            required
+          />
+          <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #dueDatePicker></mat-datepicker>
+          <mat-error *ngIf="accountTransactionForm.controls.transactionDate.hasError('required')">
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
-            [inputFormControl]="accountTransactionForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
-          </mifosx-input-amount>
-  
-          <mat-form-field>
-            <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
-            <mat-select required formControlName="paymentTypeId">
-              <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
-                {{ paymentType.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-  
-          <div fxFlexFill>
-            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
-              <mat-slide-toggle>
-                <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
-                </div>
-              </mat-slide-toggle>
-            </span>
-          </div>
-  
-          <mat-form-field *ngIf="addPaymentDetailsFlag">
-            <mat-label>{{'labels.inputs.Account Number' | translate}}</mat-label>
-            <input type="number" formControlName="accountNumber" matInput />
-          </mat-form-field>
-  
-          <mat-form-field *ngIf="addPaymentDetailsFlag">
-            <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
-            <input type="number" formControlName="checkNumber" matInput />
-          </mat-form-field>
-  
-          <mat-form-field *ngIf="addPaymentDetailsFlag">
-            <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
-            <input formControlName="routingCode" matInput />
-          </mat-form-field>
-  
-          <mat-form-field *ngIf="addPaymentDetailsFlag">
-            <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
-            <input formControlName="receiptNumber" matInput />
-          </mat-form-field>
-  
-          <mat-form-field *ngIf="addPaymentDetailsFlag">
-            <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
-            <input formControlName="bankNumber" matInput />
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>{{'labels.inputs.Notes' | translate}}</mat-label>
-            <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-          </mat-form-field>
-  
-          <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-            <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-            <button mat-raised-button color="primary" [disabled]="!accountTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
-          </mat-card-actions>
-  
-        </mat-card-content>
-  
-      </form>
-  
-    </mat-card>
-  
-  </div>
-  
\ No newline at end of file
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
+          [inputFormControl]="accountTransactionForm.controls.transactionAmount"
+          [inputLabel]="'Transaction Amount'"
+        >
+        </mifosx-input-amount>
+
+        <mat-form-field>
+          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
+          <mat-select required formControlName="paymentTypeId">
+            <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
+              {{ paymentType.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div fxFlexFill>
+          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+            <mat-slide-toggle>
+              <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
+                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
+              </div>
+            </mat-slide-toggle>
+          </span>
+        </div>
+
+        <mat-form-field *ngIf="addPaymentDetailsFlag">
+          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+          <input type="number" formControlName="accountNumber" matInput />
+        </mat-form-field>
+
+        <mat-form-field *ngIf="addPaymentDetailsFlag">
+          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+          <input type="number" formControlName="checkNumber" matInput />
+        </mat-form-field>
+
+        <mat-form-field *ngIf="addPaymentDetailsFlag">
+          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+          <input formControlName="routingCode" matInput />
+        </mat-form-field>
+
+        <mat-form-field *ngIf="addPaymentDetailsFlag">
+          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+          <input formControlName="receiptNumber" matInput />
+        </mat-form-field>
+
+        <mat-form-field *ngIf="addPaymentDetailsFlag">
+          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+          <input formControlName="bankNumber" matInput />
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
+          <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+        </mat-form-field>
+
+        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+          <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!accountTransactionForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
+        </mat-card-actions>
+      </mat-card-content>
+    </form>
+  </mat-card>
+</div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.html
index eab37b344d..293ec84f6a 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.html
@@ -1,73 +1,77 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="prematureCloseAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Premature Close Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required formControlName="closedOnDate">
+            <mat-label>{{ 'labels.inputs.Premature Close Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedOnDatePicker"
+              required
+              formControlName="closedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="prematureCloseAccountForm.controls.closedOnDate.hasError('required')">
-              {{"labels.inputs.Premature Close Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Premature Close Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.controls.maturityAmount">
-            <mat-label>{{"labels.inputs.Maturity Amount" | translate }}</mat-label>
-            <input type="number" matInput formControlName="maturityAmount"/>
+            <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
+            <input type="number" matInput formControlName="maturityAmount" />
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('onAccountClosureId')">
-            <mat-label>{{"labels.inputs.Action" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
             <mat-select required formControlName="onAccountClosureId">
               <mat-option *ngFor="let closureOption of onAccountClosureOptions" [value]="closureOption.id">
                 {{ closureOption.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="prematureCloseAccountForm.controls.onAccountClosureId.hasError('required')">
-              {{"labels.inputs.Account action" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('toSavingsAccountId')">
-            <mat-label>{{"labels.inputs.Transfer to Savings" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
             <mat-select required formControlName="toSavingsAccountId">
               <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="prematureCloseAccountForm.controls.toSavingsAccountId.hasError('required')">
-              {{"labels.inputs.Transfer to savings account" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('transferDescription')">
-            <mat-label>{{"labels.inputs.Transfer Description" | translate }}</mat-label>
-            <input matInput formControlName="transferDescription"/>
+            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+            <input matInput formControlName="transferDescription" />
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('note')">
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!prematureCloseAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!prematureCloseAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component.html
index 530498bc6b..b52e2d6084 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component.html
@@ -1,39 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectFixedDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Rejected On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedOnDatePicker" required formControlName="rejectedOnDate">
+            <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectedOnDatePicker"
+              required
+              formControlName="rejectedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectFixedDepositsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{"labels.inputs.Rejected On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!rejectFixedDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.html
index 22142483b3..662343f06c 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.html
@@ -1,25 +1,21 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="undoApprovalFixedDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!undoApprovalFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!undoApprovalFixedDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-account.component.html
index c7000b1645..9652325dcb 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-account.component.html
@@ -1,39 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="withdrawFixedDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Withdrawn On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required formControlName="withdrawnOnDate">
+            <mat-label>{{ 'labels.inputs.Withdrawn On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="withdrawnOnDatePicker"
+              required
+              formControlName="withdrawnOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawFixedDepositsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{"labels.inputs.Withdrawn On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawFixedDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawFixedDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html
index 1d7aac0819..3840567b3b 100644
--- a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html
@@ -1,5 +1,4 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
@@ -22,73 +21,66 @@
     </ng-template>
 
     <mat-step [stepControl]="recurringDepositAccountDetailsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-details-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
-        (recurringDepositsAccountProductTemplate)="setTemplate($event)">
+        (recurringDepositsAccountProductTemplate)="setTemplate($event)"
+      >
       </mifosx-recurring-deposits-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositAccountTermsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-terms-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+      >
       </mifosx-recurring-deposits-account-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositAccountSettingsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-settings-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+      >
       </mifosx-recurring-deposits-account-settings-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-interest-rate-chart-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+      >
       </mifosx-recurring-deposits-account-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-charges-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
         [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
-        [recurringDepositAccountFormValid]="recurringDepositAccountFormValid">
+        [recurringDepositAccountFormValid]="recurringDepositAccountFormValid"
+      >
       </mifosx-recurring-deposits-account-charges-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="recurringDepositAccountFormValid" completed>
-
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-preview-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
         [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
-        [recurringDepositAccountData]="recurringDepositAccountData" (submitEvent)="submit()">
+        [recurringDepositAccountData]="recurringDepositAccountData"
+        (submitEvent)="submit()"
+      >
       </mifosx-recurring-deposits-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
index cff2b96385..6150550e9c 100644
--- a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
+++ b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
@@ -1,5 +1,4 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
@@ -22,73 +21,67 @@
     </ng-template>
 
     <mat-step [stepControl]="recurringDepositAccountDetailsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-details-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
-        (recurringDepositsAccountProductTemplate)="setTemplate($event)">
+        (recurringDepositsAccountProductTemplate)="setTemplate($event)"
+      >
       </mifosx-recurring-deposits-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositAccountTermsForm">
-
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-terms-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+      >
       </mifosx-recurring-deposits-account-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositAccountSettingsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
-
-      <mifosx-recurring-deposits-account-settings-step [isNew]="false"
+      <mifosx-recurring-deposits-account-settings-step
+        [isNew]="false"
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+      >
       </mifosx-recurring-deposits-account-settings-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-interest-rate-chart-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
-        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+      >
       </mifosx-recurring-deposits-account-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-charges-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
         [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
-        [recurringDepositAccountFormValid]="recurringDepositAccountFormValidAndNotPristine">
+        [recurringDepositAccountFormValid]="recurringDepositAccountFormValidAndNotPristine"
+      >
       </mifosx-recurring-deposits-account-charges-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="recurringDepositAccountFormValidAndNotPristine" completed>
-
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-recurring-deposits-account-preview-step
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
         [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
-        [recurringDepositAccountData]="recurringDepositAccountData" (submitEvent)="submit()">
+        [recurringDepositAccountData]="recurringDepositAccountData"
+        (submitEvent)="submit()"
+      >
       </mifosx-recurring-deposits-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html
index c668f0e72e..8cfed4f625 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html
@@ -1,31 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateRecurringDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
-          <mat-label>{{"labels.inputs.Activated On Date" | translate }}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
-            formControlName="activatedOnDate">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activatedOnDatePicker"
+            required
+            formControlName="activatedOnDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #activatedOnDatePicker></mat-datepicker>
           <mat-error *ngIf="activateRecurringDepositsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{"labels.inputs.Activated On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html
index 51d2fb01b3..013537c126 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html
@@ -1,46 +1,45 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="recurringDepositsChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let savingsCharge of savingsChargeOptions" [value]="savingsCharge.id">
                 {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="recurringDepositsChargeForm.controls.chargeId.hasError('required')">
-              {{"labels.inputs.Charge" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Amount" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="recurringDepositsChargeForm.controls.amount.hasError('required')">
-                {{"labels.inputs.Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge Calculation" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
               <mat-select formControlName="chargeCalculationType">
-                <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id">
+                <mat-option
+                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
+                  [value]="chargeCalculation.id"
+                >
                   {{ chargeCalculation.value }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Charge time type" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,45 +48,60 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="recurringDepositsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{"labels.inputs.Due for collection on" | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-                formControlName="dueDate">
+              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="dueDatePicker"
+                required
+                formControlName="dueDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="recurringDepositsChargeForm.controls.dueDate.hasError('required')">
-                {{"labels.inputs.Due for collection on" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field *ngIf="recurringDepositsChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>{{"labels.inputs.Due On" | translate }}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
-                formControlName="feeOnMonthDay">
+            <mat-form-field
+              *ngIf="recurringDepositsChargeForm.contains('feeOnMonthDay')"
+              (click)="feeOnMonthDayPicker.open()"
+            >
+              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="feeOnMonthDayPicker"
+                required
+                formControlName="feeOnMonthDay"
+              />
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="recurringDepositsChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{"labels.inputs.Due Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="recurringDepositsChargeForm.contains('feeInterval')">
-              <mat-label>{{"labels.inputs.Repeats Every" | translate }}</mat-label>
+              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
-
           </div>
-
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!recurringDepositsChargeForm.valid">{{"labels.buttons.Submit" | translate }}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!recurringDepositsChargeForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html
index d5dcf3d811..e78b35bbd8 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html
@@ -1,40 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="approveRecurringDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="approvedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Approved On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required
-              formControlName="approvedOnDate">
+            <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="approvedOnDatePicker"
+              required
+              formControlName="approvedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="approveRecurringDepositsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{"labels.inputs.Approved On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html
index f3fc172a09..98fa746193 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html
@@ -1,61 +1,68 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeRecurringDepositForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{title}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ title }}</h3>
 
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required
-              formControlName="closedOnDate">
+            <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedOnDatePicker"
+              required
+              formControlName="closedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="closeRecurringDepositForm.controls.closedOnDate.hasError('required')">
-              {{"labels.inputs.Closed On" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Closed On' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Maturity Amount" | translate }}</mat-label>
-            <input matInput required formControlName="maturityAmount">
+            <mat-label>{{ 'labels.inputs.Maturity Amount' | translate }}</mat-label>
+            <input matInput required formControlName="maturityAmount" />
             <mat-error *ngIf="closeRecurringDepositForm.controls.maturityAmount.hasError('required')">
-              {{"labels.inputs.Maturity Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Maturity Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Action" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
             <mat-select formControlName="onAccountClosureId" required>
-              <mat-option *ngFor="let onAccountClosureOption of onAccountClosureOptions"
-                [value]="onAccountClosureOption.id">
+              <mat-option
+                *ngFor="let onAccountClosureOption of onAccountClosureOptions"
+                [value]="onAccountClosureOption.id"
+              >
                 {{ onAccountClosureOption.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeRecurringDepositForm.controls.onAccountClosureId.hasError('required')">
-              {{"labels.inputs.Action" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type Id" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type Id' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId" required>
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeRecurringDepositForm.controls.paymentTypeId.hasError('required')">
-              {{"labels.inputs.Payment Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">{{"labels.inputs.Show Payment Details" | translate }}</span>
+            <span fxFlex="25%">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
             <span fxFlex="75%" class="expandcollapsebutton" (click)="toggleDisplay()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
@@ -68,47 +75,46 @@ <h3 class="mat-h3" fxFlexFill>{{title}}</h3>
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account" | translate }} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque" | translate }} #</mat-label>
-              <input matInput formControlName="chequeNumber">
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="chequeNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code" | translate }}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept" | translate }} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank" | translate }} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!closeRecurringDepositForm.valid">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!closeRecurringDepositForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html
index b0b3ff1efd..ed4f98f44b 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html
@@ -1,39 +1,48 @@
 <div class="container">
-
   <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.menus.' + actionName | translate }} {{'labels.heading.Recurring Deposit Transactions' | translate}}</h2>
+    <h2 mat-title *ngIf="transactionType.withdrawal">
+      {{ 'labels.menus.' + actionName | translate }} {{ 'labels.heading.Recurring Deposit Transactions' | translate }}
+    </h2>
 
     <form [formGroup]="depositRecurringDepositForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="depositRecurringDepositForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="depositRecurringDepositForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type Id" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type Id' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId" required>
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="depositRecurringDepositForm.controls.paymentTypeId.hasError('required')">
-              {{"labels.inputs.Payment Type" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -41,7 +50,7 @@ <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.menus.' + actionName
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -49,47 +58,46 @@ <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.menus.' + actionName
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account" | translate }} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque" | translate }} #</mat-label>
-              <input matInput formControlName="checkNumber">
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="checkNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code" | translate }}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept" | translate }} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank" | translate }} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!depositRecurringDepositForm.valid">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!depositRecurringDepositForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html
index 59f3da4773..65e82dd745 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html
@@ -1,35 +1,36 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="prematureCloseRecurringDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required
-              formControlName="closedOnDate">
+            <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedOnDatePicker"
+              required
+              formControlName="closedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="prematureCloseRecurringDepositsAccountForm.controls.closedOnDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!prematureCloseRecurringDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!prematureCloseRecurringDepositsAccountForm">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html
index 1deb6e6386..daacb93ab9 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html
@@ -1,9 +1,20 @@
 <mifosx-activate-recurring-deposits-account *ngIf="actions['Activate']"></mifosx-activate-recurring-deposits-account>
-<mifosx-undo-approval-recurring-deposits-account *ngIf="actions['Undo Approval'] || actions['Undo Activation']"></mifosx-undo-approval-recurring-deposits-account>
+<mifosx-undo-approval-recurring-deposits-account
+  *ngIf="actions['Undo Approval'] || actions['Undo Activation']"
+></mifosx-undo-approval-recurring-deposits-account>
 <mifosx-approve-recurring-deposits-account *ngIf="actions['Approve']"></mifosx-approve-recurring-deposits-account>
 <mifosx-reject-recurring-deposits-account *ngIf="actions['Reject']"></mifosx-reject-recurring-deposits-account>
-<mifosx-withdraw-by-client-recurring-deposits-account *ngIf="actions['Withdrawn by Client']"></mifosx-withdraw-by-client-recurring-deposits-account>
-<mifosx-add-charge-recurring-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-recurring-deposits-account>
-<mifosx-premature-close-recurring-deposit-account *ngIf="actions['Premature Close']"></mifosx-premature-close-recurring-deposit-account>
+<mifosx-withdraw-by-client-recurring-deposits-account
+  *ngIf="actions['Withdrawn by Client']"
+></mifosx-withdraw-by-client-recurring-deposits-account>
+<mifosx-add-charge-recurring-deposits-account
+  *ngIf="actions['Add Charge']"
+></mifosx-add-charge-recurring-deposits-account>
+<mifosx-premature-close-recurring-deposit-account
+  *ngIf="actions['Premature Close']"
+></mifosx-premature-close-recurring-deposit-account>
 <mifosx-close-recurring-deposits-account *ngIf="actions['Close']"></mifosx-close-recurring-deposits-account>
-<mifosx-deposit-recurring-deposits-account [currency]="currency" *ngIf="actions['Deposit'] || actions['Withdrawal']"></mifosx-deposit-recurring-deposits-account>
+<mifosx-deposit-recurring-deposits-account
+  [currency]="currency"
+  *ngIf="actions['Deposit'] || actions['Withdrawal']"
+></mifosx-deposit-recurring-deposits-account>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html
index 239e2c59c1..adb17c1e1b 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html
@@ -1,40 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectRecurringDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Rejected On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedOnDatePicker" required
-              formControlName="rejectedOnDate">
+            <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectedOnDatePicker"
+              required
+              formControlName="rejectedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectRecurringDepositsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{"labels.inputs.Rejected On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.html
index b480676d00..cc35783dbf 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.html
@@ -1,25 +1,21 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="undoApprovalRecurringDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!undoApprovalRecurringDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!undoApprovalRecurringDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.html
index d4ee93a521..a2dfad1307 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.html
@@ -1,40 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="withdrawRecurringDepositsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Withdrawn On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required
-              formControlName="withdrawnOnDate">
+            <mat-label>{{ 'labels.inputs.Withdrawn On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="withdrawnOnDatePicker"
+              required
+              formControlName="withdrawnOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawRecurringDepositsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{"labels.inputs.Withdrawn On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawRecurringDepositsAccountForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawRecurringDepositsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html
index e3123e4f92..4165919eca 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html
@@ -1,7 +1,6 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{"labels.inputs.Charge" | translate }}</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,29 +11,33 @@
   <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>
-      {{"labels.buttons.Add" | translate }}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource"
-    [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </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> {{"labels.inputs.Type" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+        {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount | formatNumber }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -44,46 +47,67 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </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'">
-          {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+        <span
+          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+        >
+          {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
+          {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
         </span>
-        <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                {{"labels.inputs.N/A" | translate }}
+        <span
+          *ngIf="
+            !(
+              charge.chargeTimeType.value === 'Monthly Fee' ||
+              charge.chargeTimeType.value === 'Annual Fee' ||
+              charge.chargeTimeType.value === 'Specified due date' ||
+              charge.chargeTimeType.value === 'Weekly Fee'
+            )
+          "
+        >
+          {{ '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)">
+        <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)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
-        <button mat-icon-button color="primary"
+        <button
+          mat-icon-button
+          color="primary"
           *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
-          (click)="editChargeFeeInterval(charge)">
+          (click)="editChargeFeeInterval(charge)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </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>
@@ -92,19 +116,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!recurringDepositAccountFormValid">
-    {{"labels.buttons.Next" | translate }}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html
index 853bb12b7e..3f9b30c982 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html
@@ -1,32 +1,38 @@
 <form [formGroup]="recurringDepositAccountDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Product Name" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Product Name" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="isProductSelected">
-      <mat-label>{{"labels.inputs.Submitted On" | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
-        formControlName="submittedOnDate" required>
+      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedOnDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        {{"labels.inputs.Submission Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="isProductSelected">
-      <mat-label>{{"labels.inputs.Field Officer" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -35,21 +41,19 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="isProductSelected">
-      <mat-label>{{"labels.inputs.External id" | translate}}</mat-label>
-      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate}}">
+      <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
+      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}" />
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html
index 0ce4952a4a..8dcf87e6cc 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html
@@ -1,154 +1,165 @@
 <div fxLayout="column" fxLayoutGap="2%">
-
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
-    <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.name' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.accountChart.name }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-    <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-    <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
+    }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
-
     <ng-container matColumnDef="period">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
       <td mat-cell *matCellDef="let chartSlab">
-        {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs'}}</td>
+        {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+          chartSlab.periodType.value | translateKey: 'catalogs'
+        }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="amountRange">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber }}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-        <button mat-button color="primary"
-          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+        <button
+          mat-button
+          color="primary"
+          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+        >
           <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
             <fa-icon icon="eye" class="m-r-10"></fa-icon>
-            {{"labels.buttons.View Incentives" | translate }}
+            {{ 'labels.buttons.View Incentives' | translate }}
           </span>
           <span *ngIf="expandChartSlabIndex === chartSlabIndex">
             <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-            {{"labels.buttons.Hide Incentives" | translate }}
+            {{ 'labels.buttons.Hide Incentives' | translate }}
           </span>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="incentives">
-      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-        [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-        <div fxLayout="row wrap" fxFlexFill class="incentives"
-          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+      <td
+        mat-cell
+        *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+        [attr.colspan]="chartSlabsDisplayedColumns.length"
+      >
+        <div
+          fxLayout="row wrap"
+          fxFlexFill
+          class="incentives"
+          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+        >
           <mat-card fxLayout="row wrap" fxFlexFill>
-
             <h4 class="m-b-10" fxFlex="13%">
-              {{"labels.heading.Incentives" | translate }}
+              {{ 'labels.heading.Incentives' | translate }}
             </h4>
 
-            <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
-              *ngIf="chartSlab.incentives.length">
-
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="chartSlab.incentives"
+              *ngIf="chartSlab.incentives.length"
+            >
               <ng-container matColumnDef="entityType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.entityType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeName">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.attributeName.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="conditionType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.conditionType.value | titlecase }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="attributeValue">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                   {{ incentive.attributeValueDesc }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incentiveType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.incentiveType.value }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                 <td mat-cell *matCellDef="let incentive">
                   {{ incentive.amount | formatNumber }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
             </table>
-
           </mat-card>
         </div>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
   </table>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{"labels.buttons.Next" | translate }}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
index 08220f44ce..8d7205b242 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
@@ -1,358 +1,435 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Product" | translate }}</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.productId | find:recurringDepositsAccountTemplate.productOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
+    <span fxFlex="60%">{{
+      recurringDepositAccountData.productId | find: recurringDepositsAccountTemplate.productOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Submitted On" | translate }}</span>
-    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Field Officer" | translate }}</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.fieldOfficerId | find:recurringDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
+    <span fxFlex="60%">{{
+      recurringDepositAccountData.fieldOfficerId
+        | find: recurringDepositsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Currency" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Currency' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Currency" | translate }}</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.code  }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.code }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Decimal Places" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Currency In Multiples Of" | translate }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest Compounding Period" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestCompoundingPeriodType | find:recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositAccountData.interestCompoundingPeriodType
+        | find: recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest Posting Period" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestPostingPeriodType | find:recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositAccountData.interestPostingPeriodType
+        | find: recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest Calculated using" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationType | find:recurringDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositAccountData.interestCalculationType
+        | find: recurringDepositsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Days in Year" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationDaysInYearType | find:recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositAccountData.interestCalculationDaysInYearType
+        | find: recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Settings" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
-    <span fxFlex="40%">{{"labels.inputs.Lock-in Period" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.lockinPeriodFrequency}} {{(recurringDepositAccountData.lockinPeriodFrequencyType | find:recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ recurringDepositAccountData.lockinPeriodFrequency }}
+      {{
+        recurringDepositAccountData.lockinPeriodFrequencyType
+          | find: recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
+          | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
-    <span fxFlex="40%">{{"labels.inputs.Recurring Deposit Amount" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount | formatNumber}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}:</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Deposit Period" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ recurringDepositAccountData.depositPeriod}} {{recurringDepositAccountData.depositPeriodFrequencyId | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value' | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ recurringDepositAccountData.depositPeriod }}
+      {{
+        recurringDepositAccountData.depositPeriodFrequencyId
+          | find: recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions : 'id' : 'value'
+          | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Deposit Frequency Same as Group/Center meeting" | translate }}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited | yesNo }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Deposit Start Date" | translate }}:</span>
-      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate  | dateFormat}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Deposit Start Date' | translate }}:</span>
+      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Deposit Frequency" | translate }}:</span>
-      <span *ngIf="recurringDepositAccountData.recurringFrequency"
-        fxFlex="60%">{{ recurringDepositAccountData.recurringFrequency}} {{(recurringDepositAccountData.recurringFrequencyType | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs'}}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Deposit Frequency' | translate }}:</span>
+      <span *ngIf="recurringDepositAccountData.recurringFrequency" fxFlex="60%"
+        >{{ recurringDepositAccountData.recurringFrequency }}
+        {{
+          recurringDepositAccountData.recurringFrequencyType
+            | find: recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions : 'id' : 'value'
+            | translateKey: 'catalogs'
+        }}</span
+      >
     </div>
   </ng-container>
 
-
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Minimum Deposit Term" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.minDepositTerm ? recurringDepositsAccountProductTemplate.minDepositTerm: '')}} {{(this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value: '') | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{
+        recurringDepositsAccountProductTemplate.minDepositTerm
+          ? recurringDepositsAccountProductTemplate.minDepositTerm
+          : ''
+      }}
+      {{
+        (this.recurringDepositsAccountProductTemplate.minDepositTermType
+          ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value
+          : ''
+        ) | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.In Multiples Of" | translate }}:</span>
-    <span
-      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm: '')}} {{(this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value: '') | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{
+        recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm
+          ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm
+          : ''
+      }}
+      {{
+        (this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType
+          ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value
+          : ''
+        ) | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Maximum Deposit Term" | translate }}</span>
-    <span
-      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.maxDepositTerm ? recurringDepositsAccountProductTemplate.maxDepositTerm: '')}} {{(this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value: '') | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
+    <span fxFlex="60%"
+      >{{
+        recurringDepositsAccountProductTemplate.maxDepositTerm
+          ? recurringDepositsAccountProductTemplate.maxDepositTerm
+          : ''
+      }}
+      {{
+        (this.recurringDepositsAccountProductTemplate.maxDepositTermType
+          ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value
+          : ''
+        ) | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
-
-  <h3 class="mat-h3" fxFlexFill>{{"labels.inputs.Interest Rate Chart" | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div class="margin-b" fxFlexFill fxLayout="column">
-
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
-      <span fxFlex="40%">{{"labels.inputs.name" | translate }}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.name' | translate }}:</span>
       <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Valid from Date" | translate }}:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">{{"labels.inputs.End Date" | translate }}:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-      <span fxFlex="40%">{{"labels.inputs.Description" | translate }}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
       <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Primary Grouping by Amount" | translate }}:</span>
-      <span
-        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+      <span fxFlex="60%">{{
+        recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
+      }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
-
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs'}}</td>
+          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+            chartSlab.periodType.value | translateKey: 'catalogs'
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button mat-button color="primary"
-            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+          <button
+            mat-button
+            color="primary"
+            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+          >
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{"labels.buttons.View Incentives" | translate }}
+              {{ 'labels.buttons.View Incentives' | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Hide Incentives" | translate }}
+              {{ 'labels.buttons.Hide Incentives' | translate }}
             </span>
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="incentives">
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-          [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-          <div fxLayout="row wrap" fxFlexFill class="incentives"
-            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+        <td
+          mat-cell
+          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length"
+        >
+          <div
+            fxLayout="row wrap"
+            fxFlexFill
+            class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+          >
             <mat-card fxLayout="row wrap" fxFlexFill>
-
               <h4 class="m-b-10" fxFlex="13%">
-                {{"labels.heading.Incentives" | translate }}
+                {{ 'labels.heading.Incentives' | translate }}
               </h4>
 
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
-                *ngIf="chartSlab.incentives.length">
-
+              <table
+                fxFlexFill
+                class="mat-elevation-z1"
+                mat-table
+                [dataSource]="chartSlab.incentives"
+                *ngIf="chartSlab.incentives.length"
+              >
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
               </table>
-
             </mat-card>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges" | translate }}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </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> {{"labels.inputs.Type" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </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="date">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </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'">
-            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+          >
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
+            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
           </span>
           <span
-            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-              {{"labels.inputs.N/A" | translate }}
+            *ngIf="
+              !(
+                charge.chargeTimeType.value === 'Monthly Fee' ||
+                charge.chargeTimeType.value === 'Annual Fee' ||
+                charge.chargeTimeType.value === 'Specified due date' ||
+                charge.chargeTimeType.value === 'Weekly Fee'
+              )
+            "
+          >
+            {{ 'labels.inputs.N/A' | translate }}
           </span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../..']">
-    {{"labels.buttons.Cancel" | translate }}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{"labels.buttons.Submit" | translate }}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
index 1fa15c6260..b6a8f23be3 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
@@ -1,174 +1,191 @@
 <form [formGroup]="recurringDepositAccountSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
-      {{"labels.inputs.Is Mandatory Deposit" | translate }}?
+      {{ 'labels.inputs.Is Mandatory Deposit' | translate }}?
     </mat-checkbox>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments"
-      class="margin-v">
-      {{"labels.inputs.Adjust advance payments toward future installments" | translate }}?
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="adjustAdvanceTowardsFuturePayments"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Adjust advance payments toward future installments' | translate }}?
     </mat-checkbox>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
-      {{"labels.inputs.Allow Withdrawals" | translate }}?
+      {{ 'labels.inputs.Allow Withdrawals' | translate }}?
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Lock-in Period" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
-          [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
+          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Recurring Deposit Details" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Recurring Deposit Amount" | translate }}</mat-label>
-      <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required>
+      <mat-label>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</mat-label>
+      <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required />
       <mat-error>
-        {{"labels.inputs.Recurring Deposit Amount" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
+        {{ 'labels.inputs.Recurring Deposit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Deposit Period" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Deposit Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Deposit Period" | translate }}</mat-label>
-      <input type="number" matInput formControlName="depositPeriod" required>
+      <mat-label>{{ 'labels.inputs.Deposit Period' | translate }}</mat-label>
+      <input type="number" matInput formControlName="depositPeriod" required />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isCalendarInherited" class="margin-v">
-      {{"labels.inputs.Deposit Frequency Same as Group/Center meeting" | translate }}
+      {{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}
     </mat-checkbox>
 
     <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
       <mat-form-field fxFlex="48%" (click)="expectedFirstDepositOnDatePicker.open()">
-        <mat-label>{{"labels.inputs.Deposit Start Date" | translate }}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="expectedFirstDepositOnDatePicker"
-          formControlName="expectedFirstDepositOnDate" required>
+        <mat-label>{{ 'labels.inputs.Deposit Start Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="expectedFirstDepositOnDatePicker"
+          formControlName="expectedFirstDepositOnDate"
+          required
+        />
         <mat-datepicker-toggle matSuffix [for]="expectedFirstDepositOnDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
       </mat-form-field>
 
-      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Deposit Frequency" | translate }}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Deposit Frequency' | translate }}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Deposit Frequency" | translate }}</mat-label>
-        <input type="number" matInput formControlName="recurringFrequency" required>
+        <mat-label>{{ 'labels.inputs.Deposit Frequency' | translate }}</mat-label>
+        <input type="number" matInput formControlName="recurringFrequency" required />
         <mat-error>
-          {{"labels.inputs.Deposit Frequency" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
+          {{ 'labels.inputs.Deposit Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+        <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
         <mat-select formControlName="recurringFrequencyType" required>
           <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-            {{ periodFrequencyType.value | translateKey:'catalogs' }}
+            {{ periodFrequencyType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{"labels.inputs.Deposit Frequency Type" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
+          {{ 'labels.inputs.Deposit Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
     </ng-container>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Minimum Deposit Term" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Deposit Term' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="minDepositTerm" required>
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minDepositTerm" required />
       <mat-error>
-        {{"labels.inputs.Minimum Deposit Term Frequency" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Minimum Deposit Term Frequency Type" | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate }}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.And thereafter, in Multiples of" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.And thereafter, in Multiples of' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOfDepositTerm">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="inMultiplesOfDepositTerm" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Maximum Deposit Term" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Maximum Deposit Term' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Frequency" | translate }}</mat-label>
-      <input type="number" matInput formControlName="maxDepositTerm">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maxDepositTerm" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value | translateKey:'catalogs' }}
+          {{ periodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.For Pre-mature closure" | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      {{"labels.inputs.Apply Penal Interest (less)" | translate }}
+      {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Penal Interest" | translate }} (%)</mat-label>
-      <input type="number" matInput formControlName="preClosurePenalInterest">
+      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Period" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
-        <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
-          [value]="preClosurePenalInterestOnType.id">
-          {{ preClosurePenalInterestOnType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
+          [value]="preClosurePenalInterestOnType.id"
+        >
+          {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -176,34 +193,32 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.For Pre-mature closure" | tran
     <!-- <mat-divider fxFlex="98%"></mat-divider> -->
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Minimum Balance For Interest Calculation" | translate }}</mat-label>
-      <input type="number" matInput formControlName="minBalanceForInterestCalculation">
+      <mat-label>{{ 'labels.inputs.Minimum Balance For Interest Calculation' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
     </mat-form-field>
 
     <ng-container *ngIf="taxGroup">
-      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Tax Group" | translate }}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Tax Group' | translate }}</h4>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
-        {{"labels.inputs.Is Withhold Tax Applicable" | translate }}?
+        {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
       </mat-checkbox>
 
       <mat-form-field fxFlex="48%" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
-        <mat-label>{{"labels.inputs.Tax Group" | translate }}</mat-label>
-        <input type="text" matInput formControlName="taxGroupId">
+        <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
+        <input type="text" matInput formControlName="taxGroupId" />
       </mat-form-field>
     </ng-container>
-
   </div>
 
   <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>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html
index 3d1ba4f6f1..7f1f83357b 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html
@@ -1,70 +1,78 @@
 <form [formGroup]="recurringDepositAccountTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest Compounding Period" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
-          [value]="interestCompoundingPeriodType.id">
-          {{ interestCompoundingPeriodType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id"
+        >
+          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Interest Compounding Period" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest Posting Period" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
-          [value]="interestPostingPeriodType.id">
-          {{ interestPostingPeriodType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id"
+        >
+          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Interest Posting Period" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest Calculated using" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData"
-          [value]="interestCalculationType.id">
-          {{ interestCalculationType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id"
+        >
+          {{ interestCalculationType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Interest Calculated using" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Days in Year" | translate }}</mat-label>
+      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
-          [value]="interestCalculationDaysInYearType.id">
-          {{ interestCalculationDaysInYearType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id"
+        >
+          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Days in Year" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html
index 583cc80b36..2273eb7b30 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html
@@ -1,87 +1,122 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{"labels.heading.All Charges" | translate }}</h3>
+      <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #chargesTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Fee/Penalty" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? 'Penalty' : 'Fee' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Penalty' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.penalty === true ? 'Penalty' : 'Fee' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Payment Due At" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Due At' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due As Of" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due As Of' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repeats On" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned'}} </td>
+          {{ charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Calculation Type" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Due" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.currency.displaySymbol }}&nbsp;{{ charge.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Paid" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountPaid }}</td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Waived" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountWaived }}</td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.currency.displaySymbol }}&nbsp;{{ charge.amountOutstanding }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="recurringDepositsAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate}}"
-            *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); editCharge(charge)"
+            >
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate}}"
-            *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); deleteCharge(charge.id)"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </span>
-          <span *ngIf="recurringDepositsAccountData.status.value !== 'Submitted and pending approval' && charge.amountOutstanding !== 0">
-            <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'|| charge.chargeTimeType.value === 'Specified due date'">
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate}}"
-              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+          <span
+            *ngIf="
+              recurringDepositsAccountData.status.value !== 'Submitted and pending approval' &&
+              charge.amountOutstanding !== 0
+            "
+          >
+            <span
+              *ngIf="
+                charge.chargeTimeType.value === 'Monthly Fee' ||
+                charge.chargeTimeType.value === 'Annual Fee' ||
+                charge.chargeTimeType.value === 'Specified due date'
+              "
+            >
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+                *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); payCharge(charge.id)"
+              >
                 <i class="fa fa-dollar"></i>
               </button>
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate}}"
-              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+                *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+                (click)="routeEdit($event); waiveCharge(charge.id)"
+              >
                 <i class="fa fa-flag"></i>
               </button>
             </span>
@@ -90,10 +125,7 @@ <h3>{{"labels.heading.All Charges" | translate }}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.html
index 2163668844..b66810e210 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{data.heading}}</h1>
+<h1 mat-dialog-title>{{ data.heading }}</h1>
 <div mat-dialog-content>
   <p>{{ data.dialogContext }}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html
index 96584c9c21..e12cce31bc 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html
@@ -1,232 +1,334 @@
-
 <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-  <div fxFlex="49%"
-    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-    <h4 class="table-headers">{{"labels.inputs.Account Details" | translate }}</h4>
+  <div
+    fxFlex="49%"
+    *ngIf="
+      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
+    "
+  >
+    <h4 class="table-headers">{{ 'labels.inputs.Account Details' | translate }}</h4>
     <table>
       <tbody>
         <tr>
-          <td>{{"labels.inputs.External Id" | translate }}</td>
+          <td>{{ 'labels.inputs.External Id' | translate }}</td>
           <td>
             <span *ngIf="recurringDepositsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{recurringDepositsAccountData.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ recurringDepositsAccountData.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
+            </span>
+            <span *ngIf="!recurringDepositsAccountData.externalId">
+              {{ 'labels.inputs.Not Available' | translate }}
             </span>
-            <span *ngIf="!recurringDepositsAccountData.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Field Officer" | translate }}</td>
-          <td>{{recurringDepositsAccountData.fieldOfficerName}}<span
-              *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{"labels.inputs.Unassigned" | translate }}</span></td>
+          <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+          <td>
+            {{ recurringDepositsAccountData.fieldOfficerName
+            }}<span *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{
+              'labels.inputs.Unassigned' | translate
+            }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Activation date" | translate }}</td>
-          <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
+          <td>{{ 'labels.inputs.Activation date' | translate }}</td>
+          <td>{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}</td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
+          <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
+          </td>
         </tr>
         <tr
-          *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
+          *ngIf="
+            recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals
+          "
+        >
           <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-            {{"labels.inputs.Closed on Date" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
-        </tr>
-        <tr>
+            {{ 'labels.inputs.Closed on Date' | translate }}
+          </td>
+          <td>
+            <span>{{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
+          </td>
         </tr>
+        <tr></tr>
         <tr>
-          <td>{{"labels.inputs.Deposit Frequency" | translate }}</td>
-          <td><span class="m-r-5">{{recurringDepositsAccountData.recurringFrequency}}</span>
-            {{recurringDepositsAccountData.recurringFrequencyType.value | translateKey:'catalogs'}}
+          <td>{{ 'labels.inputs.Deposit Frequency' | translate }}</td>
+          <td>
+            <span class="m-r-5">{{ recurringDepositsAccountData.recurringFrequency }}</span>
+            {{ recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs' }}
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-          <td> {{"labels.inputs.Balance Required for Interest Calculation" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
+          <td>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation }}</span>
+          </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-          <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
-          <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+          <td>{{ 'labels.inputs.Witdhold Tax Group' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.taxGroup.name }}</span>
+          </td>
         </tr>
       </tbody>
     </table>
   </div>
 
-  <div fxFlex="49%"
-    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-    <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
+  <div
+    fxFlex="49%"
+    *ngIf="
+      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
+    "
+  >
+    <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
     <table>
       <tbody>
         <tr>
-          <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+          <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
           <td class="r-amount">
-            <span>{{recurringDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span>{{
+              recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+          <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
           <td class="r-amount">
-            <span>{{recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span>{{
+              recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
+          <td>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</td>
           <td class="r-amount">
-            <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span>{{
+              recurringDepositsAccountData?.mandatoryRecommendedDepositAmount
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Deposits till Date" | translate }}</td>
-          <td class="r-amount"><span
-              *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
-            <span
-              *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          <td>{{ 'labels.inputs.Deposits till Date' | translate }}</td>
+          <td class="r-amount">
+            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{
+              recurringDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{
+              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Withdrwals till Date" | translate }}</td>
-          <td class="r-amount"><span
-              *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
-            <span
-              *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          <td>{{ 'labels.inputs.Withdrwals till Date' | translate }}</td>
+          <td class="r-amount">
+            <span *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{
+              recurringDepositsAccountData.summary.totalWithdrawals
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{
+              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
 
         <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
-          <td>{{"labels.inputs.Interest Earned" | translate }}</td>
-          <td class="r-amount"><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
+          <td class="r-amount">
+            <span>{{
+              recurringDepositsAccountData.summary.totalInterestEarned
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
-
       </tbody>
     </table>
   </div>
 
-  <div fxFlex="49%"
-    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+  <div
+    fxFlex="49%"
+    *ngIf="
+      recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
+    "
+  >
     <table>
       <tbody>
         <tr>
-          <td>{{"labels.inputs.External Id" | translate }}</td>
+          <td>{{ 'labels.inputs.External Id' | translate }}</td>
           <td>
             <span *ngIf="recurringDepositsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{recurringDepositsAccountData.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ recurringDepositsAccountData.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
+            </span>
+            <span *ngIf="!recurringDepositsAccountData.externalId">
+              {{ 'labels.inputs.Not Available' | translate }}
             </span>
-            <span *ngIf="!recurringDepositsAccountData.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Date of Deposit" | translate }}</td>
+          <td>{{ 'labels.inputs.Date of Deposit' | translate }}</td>
           <td>
-            <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
-              <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
+            <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate"
+              >{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}
+              <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{
+                'labels.inputs.Not Activated' | translate
+              }}</span>
             </span>
-            <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
-              <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
+            <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate"
+              >{{ recurringDepositsAccountData.expectedFirstDepositOnDate | dateFormat }}
+              <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{
+                'labels.inputs.Not Activated' | translate
+              }}</span>
             </span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Period" | translate }}</td>
+          <td>{{ 'labels.inputs.Period' | translate }}</td>
           <td>
-            <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
+            <span
+              >{{ recurringDepositsAccountData.depositPeriod }}&nbsp;{{
+                recurringDepositsAccountData.depositPeriodFrequency.value
+              }}</span
+            >
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.maturityDate">
-          <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
+          <td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Total Deposits" | translate }}</td>
+          <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
           <td class="r-amount">
-            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
-            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{
+              recurringDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{
+              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
-        <tr >
-          <td> {{"labels.inputs.Actual Available Balance" | translate }}</td>
-          <td class="r-amount">{{ recurringDepositsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        <tr>
+          <td>{{ 'labels.inputs.Actual Available Balance' | translate }}</td>
+          <td class="r-amount">
+            {{
+              recurringDepositsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}
+          </td>
         </tr>
         <tr>
-          <td> {{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
+          <td>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</td>
           <td class="r-amount">
-            {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+            {{
+              recurringDepositsAccountData.mandatoryRecommendedDepositAmount
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-          <td> {{"labels.inputs.Interests Earned" | translate }} </td>
-          <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
+          <td>{{ 'labels.inputs.Interests Earned' | translate }}</td>
+          <td>
+            <span
+              >{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{
+                recurringDepositsAccountData.summary.totalInterestEarned
+              }}</span
+            >
+          </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
-          <td> {{"labels.inputs.Total Withdrawls" | translate }} </td>
+          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
           <td class="r-amount">
-            <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span>{{
+              recurringDepositsAccountData.summary.totalWithdrawals
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-          <td> {{"labels.inputs.Balance Required for Interest Calculation" | translate }} </td>
+          <td>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</td>
           <td class="r-amount">
-            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
+            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
 
-  <div fxFlex="49%"
-    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+  <div
+    fxFlex="49%"
+    *ngIf="
+      recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
+    "
+  >
     <table>
       <tbody>
         <tr>
-          <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-          <td class="r-amount"><span
-              *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
-            <span
-              *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          <td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
+          <td class="r-amount">
+            <span *ngIf="recurringDepositsAccountData.depositAmount">{{
+              recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
+            <span *ngIf="!recurringDepositsAccountData.depositAmount">{{
+              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
+          <td>{{ 'labels.inputs.Rate of Interest' | translate }}</td>
           <td class="r-amount">
-            <span>{{recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber}} %</span>
+            <span>{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</span>
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.maturityDate">
-          <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+          <td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
           <td class="r-amount">
-            <span>{{ recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span>{{
+              recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Total Withdrawls" | translate }} </td>
+          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
           <td class="r-amount">
-            <span
-              *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
-            <span
-              *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{
+              recurringDepositsAccountData.summary.totalWithdrawals
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{
+              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-          <td> {{"labels.inputs.Closed on Date" | translate }} </td>
+          <td>{{ 'labels.inputs.Closed on Date' | translate }}</td>
           <td>
             {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
           </td>
         </tr>
         <tr>
-          <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
+          <td>{{ 'labels.inputs.Deposits Frequency' | translate }}</td>
           <td>
-            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value | translateKey:'catalogs' }}
+            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{
+              recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs'
+            }}
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-          <td> {{"labels.inputs.Interests Posted" | translate }} </td>
+          <td>{{ 'labels.inputs.Interests Posted' | translate }}</td>
           <td class="r-amount">
-            <span
-              *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
-            <span
-              *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{
+              recurringDepositsAccountData.summary.totalInterestPosted
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{
+              0 | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</span>
           </td>
         </tr>
       </tbody>
@@ -235,71 +337,112 @@ <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}<
 </div>
 
 <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-  <div fxFlex="49%"
-    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-    <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
+  <div
+    fxFlex="49%"
+    *ngIf="
+      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
+    "
+  >
+    <h4 class="table-headers">{{ 'labels.heading.Interest Details' | translate }}</h4>
     <table>
       <tbody>
         <tr>
-          <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-          <td class="r-amount">{{recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+          <td>{{ 'labels.inputs.Interest Rate' | translate }}</td>
+          <td class="r-amount">{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+          <td>
+            <span>{{
+              recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
+            }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Interest calculated using' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Days in Year" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+          <td>
+            <span>{{
+              recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
+            }}</span>
+          </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-          <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</td>
+          <td>
+            <span
+              >{{ recurringDepositsAccountData.preClosurePenalInterest }} % on
+              {{ recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}</span
+            >
+          </td>
         </tr>
       </tbody>
     </table>
   </div>
 
-  <div fxFlex="49%"
-    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+  <div
+    fxFlex="49%"
+    *ngIf="
+      recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval
+    "
+  >
     <table>
       <tbody>
         <tr>
-          <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+          <td>
+            <span>{{
+              recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
+            }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Interest calculated using' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</span>
+          </td>
         </tr>
         <tr>
-          <td>{{"labels.inputs.Days in Year" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+          <td>
+            <span>{{
+              recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
+            }}</span>
+          </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-          <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey:'catalogs'}}</span></td>
+          <td>{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</td>
+          <td>
+            <span
+              >{{ recurringDepositsAccountData.preClosurePenalInterest }} % on
+              {{ recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}</span
+            >
+          </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-          <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
-          <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+          <td>{{ 'labels.inputs.Witdhold Tax Group' | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.taxGroup.name }}</span>
+          </td>
         </tr>
       </tbody>
     </table>
   </div>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
index 3f2982a0f3..9f279c9f5f 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
@@ -1,127 +1,135 @@
 <div class="tab-container mat-typography">
-
   <div fxLayoutAlign="start">
     <div class="m-b-20">
-      <h3>{{"labels.heading.All Interest Rates" | translate }}</h3>
+      <h3>{{ 'labels.heading.All Interest Rates' | translate }}</h3>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
-
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value  | translateKey:'catalogs'}}</td>
+          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+            chartSlab.periodType.value | translateKey: 'catalogs'
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button mat-button color="primary"
-            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+          <button
+            mat-button
+            color="primary"
+            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+          >
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
               <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{"labels.buttons.View Incentives" | translate }}
+              {{ 'labels.buttons.View Incentives' | translate }}
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
               <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Hide Incentives" | translate }}
+              {{ 'labels.buttons.Hide Incentives' | translate }}
             </span>
           </button>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="incentives">
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-          [attr.colspan]="chartSlabsDisplayedColumns.length">
-
-          <div fxLayout="row wrap" fxFlexFill class="incentives"
-            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-
+        <td
+          mat-cell
+          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length"
+        >
+          <div
+            fxLayout="row wrap"
+            fxFlexFill
+            class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+          >
             <mat-card fxLayout="row wrap" fxFlexFill>
-
               <h4 class="m-b-10" fxFlex="13%">
-                {{"labels.heading.Incentives" | translate }}
+                {{ 'labels.heading.Incentives' | translate }}
               </h4>
 
-              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
-                *ngIf="chartSlab.incentives?.length">
-
+              <table
+                fxFlexFill
+                class="mat-elevation-z1"
+                mat-table
+                [dataSource]="chartSlab.incentives"
+                *ngIf="chartSlab.incentives?.length"
+              >
                 <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
 
                 <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                   <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.amount | formatNumber}}
+                    {{ incentive.amount | formatNumber }}
                   </td>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
               </table>
-
             </mat-card>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html
index 31bc6ef345..485d48d61e 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html
@@ -1,13 +1,14 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" matTooltip="{{ 'tooltips.Recurring Deposits Account' | translate}}"
-            [src]="'assets/images/recurring-deposits_account_placeholder.png'">
+          <img
+            mat-card-md-image
+            class="profile-image"
+            matTooltip="{{ 'tooltips.Recurring Deposits Account' | translate }}"
+            [src]="'assets/images/recurring-deposits_account_placeholder.png'"
+          />
         </div>
       </div>
 
@@ -15,40 +16,55 @@
         <mat-card-title>
           <div fxFlex="60%">
             <h3>
-              <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
-                [matTooltip]="recurringDepositsAccountData.status.value"></i>
-              {{"labels.inputs.Recurring Deposit" | translate }} : {{recurringDepositsAccountData.depositProductName}}
-              <mifosx-account-number accountNo="{{recurringDepositsAccountData.accountNo}}"></mifosx-account-number>
+              <i
+                class="fa fa-stop"
+                [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
+                [matTooltip]="recurringDepositsAccountData.status.value"
+              ></i>
+              {{ 'labels.inputs.Recurring Deposit' | translate }} :
+              {{ recurringDepositsAccountData.depositProductName }}
+              <mifosx-account-number accountNo="{{ recurringDepositsAccountData.accountNo }}"></mifosx-account-number>
             </h3>
             <span class="account-overview">
-              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}:
-              {{recurringDepositsAccountData.clientName ||
-              recurringDepositsAccountData.groupName}}
+              {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
+              {{ recurringDepositsAccountData.clientName || recurringDepositsAccountData.groupName }}
               <span class="m-l-10" *ngIf="recurringDepositsAccountData.clientAccountNo">
                 <mifosx-account-number
-                  accountNo="{{recurringDepositsAccountData.clientAccountNo}}"></mifosx-account-number>
+                  accountNo="{{ recurringDepositsAccountData.clientAccountNo }}"
+                ></mifosx-account-number>
               </span>
             </span>
           </div>
 
           <div
-            *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            *ngIf="
+              !recurringDepositsAccountData.status.rejected &&
+              !recurringDepositsAccountData.status.submittedAndPendingApproval
+            "
+          >
+            <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
             <table class="account-overview">
               <tbody>
                 <tr>
-                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
-                  <td class="r-amount">{{recurringDepositsAccountData.summary.accountBalance |
-                    currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      recurringDepositsAccountData.summary.accountBalance
+                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
                 <tr>
-                  <td>{{"labels.inputs.Deposit Amount" | translate }}</td>
-                  <td class="r-amount">{{recurringDepositsAccountData.depositAmount |
-                    currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td>{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
                 <tr>
-                  <td>{{"labels.inputs.Deposit Period" | translate }}</td>
-                  <td class="r-amount">{{recurringDepositsAccountData.depositPeriod | number}}</td>
+                  <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
+                  <td class="r-amount">{{ recurringDepositsAccountData.depositPeriod | number }}</td>
                 </tr>
               </tbody>
             </table>
@@ -57,78 +73,106 @@ <h3> {{"labels.heading.Account Overview" | translate}} </h3>
           <span fxFlex="auto"></span>
 
           <div fxFlex="5%">
-            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
-              yPosition="below">
+            <button
+              mat-icon-button
+              [matMenuTriggerFor]="accountMenu"
+              aria-label="Loan account actions"
+              yPosition="below"
+            >
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
               </mat-icon>
             </button>
           </div>
         </mat-card-title>
-
       </div>
 
       <mat-menu #accountMenu="matMenu">
         <ng-container *ngFor="let item of buttonConfig.singleButtons">
           <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
-            <i ngClass="{{item.icon}}"></i> {{'labels.menus.' + item.name | translate}}
+            <i ngClass="{{ item.icon }}"></i> {{ 'labels.menus.' + item.name | translate }}
           </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
-                (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                {{ 'labels.menus.' + option.name | translate }}
+              </button>
             </span>
           </mat-menu>
         </ng-container>
-
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content class="content">
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{"labels.inputs.General" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-        [active]="IRC.isActive">
-        {{"labels.inputs.Interest Rate Chart" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./interest-rate-chart']"
+        routerLinkActive
+        #IRC="routerLinkActive"
+        [active]="IRC.isActive"
+      >
+        {{ 'labels.inputs.Interest Rate Chart' | translate }}
       </a>
       <ng-container *ngIf="showTransactions">
-        <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-          [active]="transactions.isActive">
-          {{"labels.inputs.Transactions" | translate }}
+        <a
+          mat-tab-link
+          [routerLink]="['./transactions']"
+          routerLinkActive
+          #transactions="routerLinkActive"
+          [active]="transactions.isActive"
+        >
+          {{ 'labels.inputs.Transactions' | translate }}
         </a>
       </ng-container>
-      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-        [active]="charges.isActive">
-        {{"labels.inputs.Charges" | translate }}
+      <a
+        mat-tab-link
+        [routerLink]="['./charges']"
+        routerLinkActive
+        #charges="routerLinkActive"
+        [active]="charges.isActive"
+      >
+        {{ 'labels.inputs.Charges' | translate }}
       </a>
       <ng-container *ngIf="recurringDepositsAccountData.clientId">
-        <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive
-          #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive">
-          {{"labels.inputs.Standing Instructions" | translate }}
+        <a
+          mat-tab-link
+          [routerLink]="['./standing-instructions-tab']"
+          routerLinkActive
+          #standingInstructions="routerLinkActive"
+          [active]="standingInstructions.isActive"
+        >
+          {{ 'labels.inputs.Standing Instructions' | translate }}
         </a>
       </ng-container>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{savingsDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+          [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ savingsDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html
index 2d0ea111d2..5b109263af 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html
@@ -1,75 +1,90 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{"labels.heading.All Standing Instructions" | translate }}</h3>
+    <h3>{{ 'labels.heading.All Standing Instructions' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #instructionsTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}}
-          ({{instruction.fromAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Beneficiary" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.toClient.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}}
-          ({{instruction.toAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.validFrom | dateFormat }} to {{ instruction.validTill | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="primary"
-              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate}}" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
-              [routerLink]="['../', 'standing-instructions', instruction.id, 'edit']">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+              [routerLink]="['../', 'standing-instructions', instruction.id, 'edit']"
+            >
               <i class="fa fa-edit"></i>
             </button>
           </span>
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="warn"
-              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate}}" *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+              (click)="deleteStandingInstruction(instruction.id)"
+            >
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate}}"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'" [routerLink]="['../', 'standing-instructions', instruction.id, 'view']">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+            [routerLink]="['../', 'standing-instructions', instruction.id, 'view']"
+          >
             <i class="fa fa-eye"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html
index 91e05a5e68..41cb6f1d77 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html
@@ -1,80 +1,86 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transaction Date" | translate }}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate" required>
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="dueDatePicker"
+            formControlName="transactionDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            {{"labels.inputs.Transaction Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
           [inputFormControl]="editTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'">
+          [inputLabel]="'Transaction Amount'"
+        >
         </mifosx-input-amount>
 
         <mat-form-field>
-          <mat-label>{{"labels.inputs.Payment Type" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-  
+
         <div fxFlexFill>
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>{{"labels.inputs.Account Number" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>{{"labels.inputs.Cheque" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>{{"labels.inputs.Routing Code" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>{{"labels.inputs.Receipt Number" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>{{"labels.inputs.Bank" | translate }}</mat-label>
+          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{"labels.buttons.Submit" | translate }}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
index edbf5c81a9..d32cb32b26 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html
@@ -1,67 +1,104 @@
 <div class="tab-container mat-typography">
-
   <div class="mat-elevation-z1 m-b-25">
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-20">
-        <h3>{{"labels.heading.All Transactions" | translate }}</h3>
+        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-          {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
+          {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+        >
         <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-          {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
+          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+        >
       </div>
     </div>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="row">
-        <th mat-header-cell *matHeaderCellDef> # </th>
-        <td mat-cell *matCellDef="let transaction; let idx = index;" (click)="showTransactions(transaction)">{{(idx + 1)}}</td>
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let transaction; let idx = index" (click)="showTransactions(transaction)">
+          {{ idx + 1 }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.id }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ transaction.date  | dateFormat }}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.date | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ transaction.transactionType.value  }}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.transactionType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Debit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" class="r-amount" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}}
+        <th mat-header-cell *matHeaderCellDef class="center">{{ 'labels.inputs.Debit' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          class="r-amount"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Credit" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" class="r-amount" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef class="center">{{ 'labels.inputs.Credit' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          class="r-amount"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let transaction" class="r-amount" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell *matHeaderCellDef class="center">{{ 'labels.inputs.Balance' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          class="r-amount"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.runningBalance | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell class="center" *matCellDef="let transaction">
           <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
             <mat-icon>more_vert</mat-icon>
@@ -69,21 +106,22 @@ <h3>{{"labels.heading.All Transactions" | translate }}</h3>
           <mat-menu #transactionMenu="matMenu">
             <button mat-menu-item (click)="showTransactions(transaction)">
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+              <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
-            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <button
+              mat-menu-item
+              (click)="routeEdit($event)"
+              [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
+            >
               <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
             </button>
           </mat-menu>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" ></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
index 8b52ea4440..0b8a63515d 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
@@ -1,31 +1,32 @@
-<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%"
-  *ngIf="!(transactionData.reversed)">
+<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%" *ngIf="!transactionData.reversed">
   <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-    <button mat-raised-button color="primary"
+    <button
+      mat-raised-button
+      color="primary"
       *ngIf="!(transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true')"
-      [routerLink]="'edit'">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Edit" | translate }}
+      [routerLink]="'edit'"
+    >
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
     </button>
   </span>
-  <button mat-raised-button color="warn"
+  <button
+    mat-raised-button
+    color="warn"
     *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-    (click)="undoTransaction()">
-    <fa-icon icon="undo" class="m-r-10"></fa-icon>{{"labels.buttons.Undo" | translate }}
+    (click)="undoTransaction()"
+  >
+    <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="transactionColor()">
-        </div>
+        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Id" | translate }}
+          {{ 'labels.inputs.Transaction Id' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -33,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Type" | translate }}
+          {{ 'labels.inputs.Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Date" | translate }}
+          {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -49,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate }}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -57,32 +58,33 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate }}
+          {{ 'labels.inputs.Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2'}}
+          {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
-          {{"labels.inputs.Note" | translate }}
+          {{ 'labels.inputs.Note' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 
-        <mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData">
+        <mifosx-transaction-payment-detail
+          *ngIf="transactionData.paymentDetailData"
+          [paymentDetailData]="transactionData.paymentDetailData"
+        >
         </mifosx-transaction-payment-detail>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-b-20">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>
diff --git a/src/app/groups/create-group/create-group.component.html b/src/app/groups/create-group/create-group.component.html
index 84bd4c9adb..36879565e7 100644
--- a/src/app/groups/create-group/create-group.component.html
+++ b/src/app/groups/create-group/create-group.component.html
@@ -1,79 +1,92 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="groupForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.name" | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="groupForm.controls.name.hasError('required')">
-              {{"labels.inputs.Group Name" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Group Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="groupForm.controls.name.hasError('pattern')">
-              {{"labels.inputs.Group Name" | translate }} <strong>{{"labels.inputs.cannot" | translate }}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
+              {{ 'labels.inputs.Group Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.commons.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
-              {{ office.name }}
+                {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupForm.controls.officeId.hasError('required')">
-              {{"labels.inputs.Office" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Staff" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-              {{ staff.displayName }}
+                {{ staff.displayName }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field (click)="submittedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="submittedOnDatePicker"
+              required
+              formControlName="submittedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="groupForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submission Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="active">
-            {{"labels.inputs.Active" | translate }}
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field *ngIf="groupForm.controls.active.value" (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activation Date" | translate }}</mat-label>
-            <input matInput [min]="groupForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="groupForm.value.submittedOnDate"
+              [max]="maxDate"
+              [matDatepicker]="activationDatePicker"
+              required
+              formControlName="activationDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="groupForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activation Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External id" | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Add Clients" | translate }}</mat-label>
-            <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
+            <mat-label>{{ 'labels.inputs.Add Clients' | translate }}</mat-label>
+            <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete" />
           </mat-form-field>
-
         </div>
 
         <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
@@ -83,49 +96,47 @@
         </mat-autocomplete>
 
         <div fxLayout="row">
-
           <div class="mat-table" *ngIf="clientChoice.value">
             <div class="mat-header-row">
-              <div class="mat-header-cell">{{"labels.inputs.Client Details" | translate }}</div>
+              <div class="mat-header-cell">{{ 'labels.inputs.Client Details' | translate }}</div>
               <button mat-icon-button (click)="addClient()">
                 <fa-icon icon="plus"></fa-icon>
               </button>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">{{"labels.inputs.name" | translate }}</div>
-              <div class="mat-cell">{{clientChoice.value.displayName}}</div>
+              <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+              <div class="mat-cell">{{ clientChoice.value.displayName }}</div>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">{{"labels.inputs.Id" | translate }}</div>
-              <div class="mat-cell">{{clientChoice.value.id}}</div>
+              <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+              <div class="mat-cell">{{ clientChoice.value.id }}</div>
             </div>
             <div class="mat-row">
-              <div class="mat-cell">{{"labels.inputs.Office" | translate }}</div>
-              <div class="mat-cell">{{clientChoice.value.officeName}}</div>
+              <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+              <div class="mat-cell">{{ clientChoice.value.officeName }}</div>
             </div>
           </div>
 
           <mat-nav-list *ngIf="clientMembers.length">
-            <h3 matSubheader>{{"labels.heading.Selected Clients" | translate }}</h3>
-            <div mat-list-item *ngFor="let client of clientMembers index as i">
-              <span matLine>{{client.displayName}}</span>
+            <h3 matSubheader>{{ 'labels.heading.Selected Clients' | translate }}</h3>
+            <div mat-list-item *ngFor="let client of clientMembers; index as i">
+              <span matLine>{{ client.displayName }}</span>
               <button mat-icon-button color="warn" (click)="removeClient(i)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
             </div>
           </mat-nav-list>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!groupForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/edit-group/edit-group.component.html b/src/app/groups/edit-group/edit-group.component.html
index baad9a040d..dfd875cca7 100644
--- a/src/app/groups/edit-group/edit-group.component.html
+++ b/src/app/groups/edit-group/edit-group.component.html
@@ -1,69 +1,81 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editGroupForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.name" | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="editGroupForm.controls.name.hasError('required')">
-              {{"labels.inputs.Group Name" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Group Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editGroupForm.controls.name.hasError('pattern')">
-              {{"labels.inputs.Group Name" | translate }} <strong>{{"labels.inputs.cannot" | translate }}</strong> {{ "labels.commons.begin with a special character or number" | translate }}
+              {{ 'labels.inputs.Group Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.commons.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Staff" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-              {{ staff.displayName }}
+                {{ staff.displayName }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field (click)="submittedOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="submittedOnDatePicker"
+              required
+              formControlName="submittedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="editGroupForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submission Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="this.editGroupForm.contains('activationDate')" (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activation Date" | translate }}</mat-label>
-            <input matInput [min]="editGroupForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="editGroupForm.value.submittedOnDate"
+              [max]="maxDate"
+              [matDatepicker]="activationDatePicker"
+              required
+              formControlName="activationDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="editGroupForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activation Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External id" | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editGroupForm.valid" (click)="submit()">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!editGroupForm.valid" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/add-role/add-role.component.html b/src/app/groups/groups-view/add-role/add-role.component.html
index 01c9b004fe..7ca154f467 100644
--- a/src/app/groups/groups-view/add-role/add-role.component.html
+++ b/src/app/groups/groups-view/add-role/add-role.component.html
@@ -1,49 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="groupsAddRoleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Client" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
             <mat-select formControlName="clientId">
               <mat-option *ngFor="let client of clientMemberData" [value]="client.id">
                 {{ client.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupsAddRoleForm.controls.clientId.hasError('required')">
-              {{"labels.inputs.Client Member" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Client Member' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Role" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Role' | translate }}</mat-label>
             <mat-select formControlName="role">
               <mat-option *ngFor="let role of roleData" [value]="role.id">
                 {{ role.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupsAddRoleForm.controls.role.hasError('required')">
-              {{"labels.inputs.Role" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Role' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupsAddRoleForm.valid"
-          *mifosxHasPermission="'ASSIGNROLE_GROUP'">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!groupsAddRoleForm.valid"
+          *mifosxHasPermission="'ASSIGNROLE_GROUP'"
+        >
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/committee-tab/committee-tab.component.html b/src/app/groups/groups-view/committee-tab/committee-tab.component.html
index a7c64dfb38..a076f23589 100644
--- a/src/app/groups/groups-view/committee-tab/committee-tab.component.html
+++ b/src/app/groups/groups-view/committee-tab/committee-tab.component.html
@@ -1,52 +1,57 @@
 <div class="tab-container mat-typography">
-  
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{"labels.heading.Client Members" | translate }}</h3>
+      <h3>{{ 'labels.heading.Client Members' | translate }}</h3>
     </div>
     <div class="action-button m-b-10" fxLayoutGap="25px" *ngIf="groupStatus !== 'Closed'">
-      <button mat-raised-button class="f-right" color="primary"
-      *mifosxHasPermission="'ASSIGNROLE_GROUP'" [routerLink]="['add-role']">
-        <i class="fa fa-plus"></i>&nbsp; {{"labels.buttons.Add" | translate }}</button>
+      <button
+        mat-raised-button
+        class="f-right"
+        color="primary"
+        *mifosxHasPermission="'ASSIGNROLE_GROUP'"
+        [routerLink]="['add-role']"
+      >
+        <i class="fa fa-plus"></i>&nbsp; {{ 'labels.buttons.Add' | translate }}
+      </button>
     </div>
   </div>
 
   <div *ngIf="groupRolesData">
-    
     <table #rolesTable mat-table [dataSource]="groupRolesData" class="mat-elevation-z1 m-b-25">
-
       <ng-container matColumnDef="Name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.clientName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.clientName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Role">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Role" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.role.name}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Role' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.role.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Client Id">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Id" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.clientId}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Id' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.clientId }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let element">
           <span *ngIf="groupStatus !== 'Closed'">
-            <button class="account-action-button" mat-raised-button color="warn"
-            *mifosxHasPermission="'UNASSIGNROLE_GROUP'" (click)="unassignRole(element.clientId, element.id)">
-            <i class="fa fa-ban" matTooltip="{{ 'tooltips.Unassign' | translate }}"></i>
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              *mifosxHasPermission="'UNASSIGNROLE_GROUP'"
+              (click)="unassignRole(element.clientId, element.id)"
+            >
+              <i class="fa fa-ban" matTooltip="{{ 'tooltips.Unassign' | translate }}"></i>
             </button>
           </span>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="groupRolesColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: groupRolesColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: groupRolesColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.html b/src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.html
index a3b6cd20cf..8dfc36c374 100644
--- a/src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.html
+++ b/src/app/groups/groups-view/custom-dialogs/unassign-role-dialog/unassign-role-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{ "labels.heading.Unassign Role" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Unassign Role' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Unassign role for client member" |translate}}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Unassign role for client member' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html b/src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
index 73346e540d..f586efff95 100644
--- a/src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
+++ b/src/app/groups/groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{ "labels.heading.Unassign Role" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Unassign Role' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Unassign staff for this group" |translate}} ?</p>
+  <p>{{ 'labels.text.Unassign staff for this group' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/groups/groups-view/general-tab/general-tab.component.html b/src/app/groups/groups-view/general-tab/general-tab.component.html
index da368bf53b..4602ea6c83 100644
--- a/src/app/groups/groups-view/general-tab/general-tab.component.html
+++ b/src/app/groups/groups-view/general-tab/general-tab.component.html
@@ -1,51 +1,45 @@
 <div class="tab-container mat-typography">
-
-  <h3>{{"labels.heading.Group Details" | translate }}</h3>
+  <h3>{{ 'labels.heading.Group Details' | translate }}</h3>
 
   <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
     <p>
-      {{"labels.inputs.Active Client Loans" | translate }}: {{groupSummary?.activeClientLoans}}<br/>
-      {{"labels.inputs.Active Client Borrowers" | translate }}: {{groupSummary?.activeClientBorrowers}}<br/>
-      {{"labels.inputs.Active Overdue Client Loans" | translate }}: {{groupSummary?.overdueClientLoans}}<br/>
-    </p>
-    <p>
-      {{"labels.inputs.Active Group Loans" | translate }}: {{groupSummary?.activeGroupLoans}}<br/>
-      {{"labels.inputs.Active Group Borrowers" | translate }}: {{groupSummary?.activeGroupBorrowers}}<br/>
-      {{"labels.inputs.Active Overdue Group Loans" | translate }}: {{groupSummary?.overdueGroupLoans}}<br/>
+      {{ 'labels.inputs.Active Client Loans' | translate }}: {{ groupSummary?.activeClientLoans }}<br />
+      {{ 'labels.inputs.Active Client Borrowers' | translate }}: {{ groupSummary?.activeClientBorrowers }}<br />
+      {{ 'labels.inputs.Active Overdue Client Loans' | translate }}: {{ groupSummary?.overdueClientLoans }}<br />
     </p>
     <p>
-      {{"labels.inputs.Active Clients" | translate }}: {{groupSummary?.activeClients}}<br/>
+      {{ 'labels.inputs.Active Group Loans' | translate }}: {{ groupSummary?.activeGroupLoans }}<br />
+      {{ 'labels.inputs.Active Group Borrowers' | translate }}: {{ groupSummary?.activeGroupBorrowers }}<br />
+      {{ 'labels.inputs.Active Overdue Group Loans' | translate }}: {{ groupSummary?.overdueGroupLoans }}<br />
     </p>
+    <p>{{ 'labels.inputs.Active Clients' | translate }}: {{ groupSummary?.activeClients }}<br /></p>
   </div>
 
   <!-- Client Members Table -->
   <div *ngIf="groupClientMembers">
+    <h3>{{ 'labels.heading.Client Members' | translate }}</h3>
 
-    <h3>{{"labels.heading.Client Members" | translate }}</h3>
-
-    <table mat-table [dataSource]="groupClientMembers"
-      class="mat-elevation-z1 m-b-30">
-
+    <table mat-table [dataSource]="groupClientMembers" class="mat-elevation-z1 m-b-30">
       <ng-container matColumnDef="Name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
-          {{element.displayName}}
+          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
+          {{ element.displayName }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
-        <td mat-cell *matCellDef="let element"> {{element.accountNo}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+        <td mat-cell *matCellDef="let element">{{ element.accountNo }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Office">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="JLG Loan Application">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.JLG Loan Application" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.JLG Loan Application' | translate }}</th>
         <td mat-cell *matCellDef="let element">
           <div class="m-l-30" *ngIf="element.status.code !== 'clientStatusType.closed'">
             <button class="account-action-button" mat-raised-button color="primary">
@@ -56,328 +50,415 @@ <h3>{{"labels.heading.Client Members" | translate }}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'loans-accounts', 'create']" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: clientMemberColumns"
+        [routerLink]="['/clients', row.id, 'loans-accounts', 'create']"
+        class="select-row"
+      ></tr>
     </table>
-
   </div>
 
   <div *ngIf="loanAccounts">
-
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>{{"labels.heading.Loan Accounts" | translate }}</h3>
+        <h3>{{ 'labels.heading.Loan Accounts' | translate }}</h3>
       </div>
-      <div *ngIf="(loanAccounts|accountsFilter:'loan':'closed').length" class="action-button m-b-10">
-        <button mat-raised-button class="f-right" color="primary"
-      (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      <div *ngIf="(loanAccounts | accountsFilter: 'loan' : 'closed').length" class="action-button m-b-10">
+        <button mat-raised-button class="f-right" color="primary" (click)="toggleLoanAccountsOverview()">
+          {{ showClosedLoanAccounts ? 'View Active Accounts' : 'View Closed Accounts' }}
+        </button>
       </div>
     </div>
 
     <!-- Open Loan Accounts Table -->
-    <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'"
-      class="mat-elevation-z1 m-b-30">
-
+    <table
+      *ngIf="!showClosedLoanAccounts"
+      mat-table
+      [dataSource]="loanAccounts | accountsFilter: 'loan'"
+      class="mat-elevation-z1 m-b-30"
+    >
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
-        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
-            [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
-            [matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
-          {{element.accountNo}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+        <td mat-cell *matCellDef="let element">
+          <i
+            class="fa fa-stop"
+            [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
+            [matTooltip]="element.inArrears ? 'Active Overdue' : element.status.value"
+          ></i>
+          {{ element.accountNo }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Account">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.originalLoan }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Balance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.loanBalance }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Amount Paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Paid" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.amountPaid }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Type">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <i class="fa fa-large" [ngClass]="(element.loanType.value==='Individual')?'fa-user':'fa-group'"
-          [matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
+          <i
+            class="fa fa-large"
+            [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
+            [matTooltip]="element.loanType.value === 'Individual' ? 'Individual' : 'Group'"
+          ></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="Actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let element">
           <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
             <i class="fa fa-dollar" matTooltip="{{ 'tooltips.Make Repayment' | translate }}"></i>
           </button>
-          <button *ngIf="element.status.pendingApproval" class="account-action-button" mat-raised-button color="primary">
+          <button
+            *ngIf="element.status.pendingApproval"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+          >
             <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
           </button>
-          <button *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
-            class="account-action-button" mat-raised-button color="primary">
+          <button
+            *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+          >
             <i class="fa fa-flag" matTooltip="{{ 'tooltips.Disburse' | translate }}"></i>
           </button>
-          <button *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
-            class="account-action-button" mat-raised-button color="primary">
+          <button
+            *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+          >
             <i class="fa fa-exchange" matTooltip="{{ 'tooltips.Transfer Funds' | translate }}"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: openLoansColumns;" [routerLink]="['../', 'loans-accounts', row.id, 'general']"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: openLoansColumns"
+        [routerLink]="['../', 'loans-accounts', row.id, 'general']"
+      ></tr>
     </table>
 
     <!-- Closed Loan Accounts Table-->
-    <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'"
-      class="mat-elevation-z1 m-b-30">
-
+    <table
+      *ngIf="showClosedLoanAccounts"
+      mat-table
+      [dataSource]="loanAccounts | accountsFilter: 'loan' : 'closed'"
+      class="mat-elevation-z1 m-b-30"
+    >
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
-        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
-            [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
-            [matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
-          {{element.accountNo}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+        <td mat-cell *matCellDef="let element">
+          <i
+            class="fa fa-stop"
+            [ngClass]="element.inArrears ? 'status-active-overdue' : (element.status.code | statusLookup)"
+            [matTooltip]="element.inArrears ? 'Active Overdue' : element.status.value"
+          ></i>
+          {{ element.accountNo }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Account">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Balance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.loanBalance }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Amount Paid">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Paid" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Type">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"
-          [matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
+          <i
+            class="fa fa-large"
+            [ngClass]="element.loanType.value === 'Individual' ? 'fa-user' : 'fa-group'"
+            [matTooltip]="element.loanType.value === 'Individual' ? 'Individual' : 'Group'"
+          ></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="Closed Date">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate }} </th>
-        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: closedLoansColumns;" [routerLink]="['../', 'loans-accounts', row.id, 'general']"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: closedLoansColumns"
+        [routerLink]="['../', 'loans-accounts', row.id, 'general']"
+      ></tr>
     </table>
-
   </div>
 
   <div *ngIf="gsimAccounts">
-
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>{{"labels.heading.GSIM Account Overview" | translate }}</h3>
+        <h3>{{ 'labels.heading.GSIM Account Overview' | translate }}</h3>
       </div>
     </div>
 
     <!-- GSIM Accounts Table -->
-    <table mat-table [dataSource]="gsimAccounts"
-      class="mat-elevation-z1 m-b-30">
-
+    <table mat-table [dataSource]="gsimAccounts" class="mat-elevation-z1 m-b-30">
       <ng-container matColumnDef="GSIM Id">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.GSIM Id" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.GSIM Id' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          {{element.gsimId}} </td>
+          {{ element.gsimId }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Account Number">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account Number" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.accountNumber}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.accountNumber }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Product">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Product" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.childGSIMAccounts[0].productName}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Product' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.childGSIMAccounts[0].productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Balance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.parentBalance}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.parentBalance }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.savingsStatus}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.savingsStatus }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="gsimAccountsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: gsimAccountsColumns;" [routerLink]="['../', 'savings-accounts', 'gsim-account', row.accountNumber]"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: gsimAccountsColumns"
+        [routerLink]="['../', 'savings-accounts', 'gsim-account', row.accountNumber]"
+      ></tr>
     </table>
-
   </div>
 
   <div *ngIf="glimAccounts">
-
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>{{"labels.heading.GLIM Loans Account Overview" | translate }}</h3>
+        <h3>{{ 'labels.heading.GLIM Loans Account Overview' | translate }}</h3>
       </div>
     </div>
 
     <!-- GLIM Loans Accounts Table -->
-    <table mat-table [dataSource]="glimAccounts"
-      class="mat-elevation-z1 m-b-30">
-
+    <table mat-table [dataSource]="glimAccounts" class="mat-elevation-z1 m-b-30">
       <ng-container matColumnDef="GLIM Id">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.GLIM Id" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.GLIM Id' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          {{element.glimId}} </td>
+          {{ element.glimId }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Account Number">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account Number" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.accountNumber}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.accountNumber }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Product">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Product" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.childGLIMAccounts[0].productName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Product' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.childGLIMAccounts[0].productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Original Loan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.parentPrincipalAmount}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.parentPrincipalAmount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate }} </th>
-        <td mat-cell *matCellDef="let element">{{element.loanStatus}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.loanStatus }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="glimAccountsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: glimAccountsColumns;" [routerLink]="['../', 'loans-accounts', 'glim-account', row.glimId]"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: glimAccountsColumns"
+        [routerLink]="['../', 'loans-accounts', 'glim-account', row.glimId]"
+      ></tr>
     </table>
-
   </div>
 
   <div *ngIf="savingAccounts">
-
     <div fxLayout="row" fxLayoutAlign="start" class="table-header">
       <div class="m-b-10">
-        <h3>{{"labels.heading.Saving Accounts" | translate }}</h3>
+        <h3>{{ 'labels.heading.Saving Accounts' | translate }}</h3>
       </div>
       <div class="action-button m-b-10">
-        <button *ngIf="(savingAccounts|accountsFilter:'saving':'closed').length" mat-raised-button class="f-right" color="primary"
-        (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+        <button
+          *ngIf="(savingAccounts | accountsFilter: 'saving' : 'closed').length"
+          mat-raised-button
+          class="f-right"
+          color="primary"
+          (click)="toggleSavingAccountsOverview()"
+        >
+          {{ showClosedSavingAccounts ? 'View Active Accounts' : 'View Closed Accounts' }}
+        </button>
       </div>
     </div>
 
     <!-- Open Savings Accounts Table -->
-    <table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'"
-      class="mat-elevation-z1 m-b-30">
-
+    <table
+      *ngIf="!showClosedSavingAccounts"
+      mat-table
+      [dataSource]="savingAccounts | accountsFilter: 'saving'"
+      class="mat-elevation-z1 m-b-30"
+    >
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
-        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
-          {{element.accountNo}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+        <td mat-cell *matCellDef="let element">
+          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
+          {{ element.accountNo }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Saving Account">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Last Active">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Active" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Balance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Balance" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.accountBalance }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
+          <button
+            *ngIf="element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+          >
             <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
           </button>
-          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
+          <button
+            *ngIf="element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+          >
             <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
           </button>
-          <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button color="primary"
-            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
+          <button
+            *ngIf="element.status.submittedAndPendingApproval"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
+          >
             <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
           </button>
-          <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button" mat-raised-button color="primary"
-            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Undo Approval']">
+          <button
+            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+          >
             <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
           </button>
-          <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-            class="account-action-button" mat-raised-button color="primary"
-            (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Activate']">
+          <button
+            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Activate']"
+          >
             <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: openSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: openSavingsColumns"
+        [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
+      ></tr>
     </table>
 
     <!-- Closed Saving Accounts Table -->
-    <table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'"
-      class="mat-elevation-z1 m-b-30">
-
+    <table
+      *ngIf="showClosedSavingAccounts"
+      mat-table
+      [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed'"
+      class="mat-elevation-z1 m-b-30"
+    >
       <ng-container matColumnDef="Account No">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account No" | translate }}. </th>
-        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
-          {{element.accountNo}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}.</th>
+        <td mat-cell *matCellDef="let element">
+          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
+          {{ element.accountNo }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Saving Account">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Saving Account" | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Closed Date">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Closed Date" | translate }} </th>
-        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: closedSavingsColumns"
+        [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"
+      ></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html b/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html
index 16eca638a2..69fc1f4fa2 100644
--- a/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html
+++ b/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateGroupForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>{{"labels.inputs.Activated On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #activationDatePicker></mat-datepicker>
-            <mat-error *ngIf="activateGroupForm.controls.activationDate.hasError('required')">
-              {{"labels.inputs.Activated On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activationDatePicker"
+            required
+            formControlName="activationDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #activationDatePicker></mat-datepicker>
+          <mat-error *ngIf="activateGroupForm.controls.activationDate.hasError('required')">
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateGroupForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateGroupForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html b/src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html
index 836c29e359..8d095118d6 100644
--- a/src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html
+++ b/src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html
@@ -1,75 +1,85 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="groupMeetingForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{"labels.inputs.Meeting Start Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="groupMeetingForm.controls.startDate.hasError('required')">
-              {{"labels.inputs.Start Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
-            {{"labels.inputs.Repeats" | translate }}?
+            {{ 'labels.inputs.Repeats' | translate }}?
           </mat-checkbox>
 
           <mat-form-field *ngIf="groupMeetingForm.contains('frequency')">
-            <mat-label>{{"labels.inputs.Repetition Frequency" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="groupMeetingForm.contains('interval')">
-            <mat-label>{{"labels.inputs.Repetition Interval" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repeition Interval" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="groupMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day" | translate }}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" | translate }} <strong>{{"labels.inputs.one" | translate }}</strong> {{"labels.inputs.day must be selected" | translate }}
-          </mat-error>
-        </mat-form-field>
-  
+            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+            <mat-select formControlName="repeatsOnDay" required>
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+                {{ day.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+              {{ 'labels.inputs.day must be selected' | translate }}
+            </mat-error>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupMeetingForm.valid" (click)="submit()"
-          *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!groupMeetingForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'CREATE_MEETING'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/close-group/close-group.component.html b/src/app/groups/groups-view/group-actions/close-group/close-group.component.html
index c25cac4600..591cd65034 100644
--- a/src/app/groups/groups-view/group-actions/close-group/close-group.component.html
+++ b/src/app/groups/groups-view/group-actions/close-group/close-group.component.html
@@ -1,46 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeGroupForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On Date" | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closureDatePicker"
+              required
+              formControlName="closureDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeGroupForm.controls.closureDate.hasError('required')">
-              {{"labels.inputs.Closed On Date" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Closure Reason" | translate }}</mat-label>
+            <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeGroupForm.controls.closureReasonId.hasError('required')">
-              {{"labels.inputs.Closure Reason" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeGroupForm.valid">{{"labels.buttons.Confirm" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!closeGroupForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html b/src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html
index 3762a86bb6..eee5bbef0c 100644
--- a/src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html
+++ b/src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html
@@ -1,47 +1,55 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="groupEditMeetingScheduleForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
-        <mat-form-field>
-          <mat-label>{{"labels.inputs.Existing Meeting Date"  |translate}}</mat-label>
-          <mat-select formControlName="presentMeetingDate">
-            <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date | dateFormat }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-            {{"labels.inputs.Existing Meeting Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field (click)="newMeetingDatePicker.open()">
-          <mat-label>{{"labels.inputs.Revised Meeting Date"  |translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
-          <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #newMeetingDatePicker></mat-datepicker>
-          <mat-error *ngIf="groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-            {{"labels.inputs.Revised Meeting Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
-          </mat-error>
-        </mat-form-field>
-
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
+            <mat-select formControlName="presentMeetingDate">
+              <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
+                {{ date | dateFormat }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field (click)="newMeetingDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Revised Meeting Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="newMeetingDatePicker"
+              required
+              formControlName="newMeetingDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #newMeetingDatePicker></mat-datepicker>
+            <mat-error *ngIf="groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
+              {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupEditMeetingScheduleForm.valid" (click)="submit()"
-          *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!groupEditMeetingScheduleForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'CREATE_MEETING'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html b/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html
index 45a9f98774..de85ab2320 100644
--- a/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html
+++ b/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html
@@ -1,81 +1,91 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit Schedule"  |translate}}
+    {{ 'labels.buttons.Edit Schedule' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="groupEditMeetingForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Frequency"  |translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
               <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
                 {{ option.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repetition Frequency"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Repetition Interval"  |translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
               <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
                 {{ interval }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{"labels.inputs.Repeition Interval"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="groupEditMeetingForm.contains('repeatsOnDay')">
-          <mat-label>{{"labels.inputs.Repeats on Day"  |translate}}</mat-label>
-          <mat-select formControlName="repeatsOnDay" required>
-            <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-              {{ day.value }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-            {{"labels.inputs.At least" | translate }} <strong>{{"labels.inputs.one" | translate }}</strong> {{"labels.inputs.day must be selected" | translate }}
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
-          <mat-label>{{"labels.inputs.Above Changes are Effective from"  |translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
-          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #startDatePicker></mat-datepicker>
-          <mat-error *ngIf="groupEditMeetingForm.controls.startDate.hasError('required')">
-            {{"labels.inputs.Changes Affection Date"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
-          </mat-error>
-          <mat-hint>
-            {{"labels.text.Repeats' and 'Repeats every" |translate}}
-          </mat-hint>
-        </mat-form-field>
+            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+            <mat-select formControlName="repeatsOnDay" required>
+              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
+                {{ day.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
+              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+              {{ 'labels.inputs.day must be selected' | translate }}
+            </mat-error>
+          </mat-form-field>
 
+          <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Above Changes are Effective from' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #startDatePicker></mat-datepicker>
+            <mat-error *ngIf="groupEditMeetingForm.controls.startDate.hasError('required')">
+              {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-hint>
+              {{ "labels.text.Repeats' and 'Repeats every" | translate }}
+            </mat-hint>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupEditMeetingForm.valid" (click)="submit()"
-        *mifosxHasPermission="'CREATE_MEETING'">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!groupEditMeetingForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'CREATE_MEETING'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html b/src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html
index 1c9612f2a4..c637a71b63 100644
--- a/src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html
+++ b/src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html
@@ -1,36 +1,31 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="groupAssignStaffForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Staff"  |translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="groupAssignStaffForm.controls.staffId.hasError('required')">
-              {{"labels.inputs.Staff"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel"  |translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!groupAssignStaffForm.valid">{{"labels.buttons.Confirm"  |translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!groupAssignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html b/src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html
index 060d2c5043..ef42d2394c 100644
--- a/src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html
+++ b/src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html
@@ -1,50 +1,54 @@
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="3%">
-
     <mat-form-field fxFlex>
-      <mat-label>{{"labels.inputs.Meeting Date"  |translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Meeting Date' | translate }}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
           {{ date | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>{{"labels.inputs.Next Meeting on"  |translate}}: {{this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat}}</mat-hint>
+      <mat-hint
+        >{{ 'labels.inputs.Next Meeting on' | translate }}:
+        {{ this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}</mat-hint
+      >
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
-        <td mat-cell *matCellDef="let member"> {{ member.clientId | find:membersData:'id':'displayName' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let member">{{ member.clientId | find: membersData : 'id' : 'displayName' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="attendance">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attendance"  |translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attendance' | translate }}</th>
         <td mat-cell *matCellDef="let member" [ngSwitch]="member.attendanceType">
-          <span *ngSwitchCase="1">{{"labels.inputs.Present"  |translate}}</span>
-          <span *ngSwitchCase="2">{{"labels.inputs.Absent"  |translate}}</span>
-          <span *ngSwitchCase="3">{{"labels.inputs.Approved"  |translate}}</span>
-          <span *ngSwitchCase="4">{{"labels.inputs.Leave"  |translate}}</span>
-          <span *ngSwitchCase="5">{{"labels.inputs.Late"  |translate}}</span>
-          <button mat-icon-button color="primary"
-            (click)="editAttendance(member)">
+          <span *ngSwitchCase="1">{{ 'labels.inputs.Present' | translate }}</span>
+          <span *ngSwitchCase="2">{{ 'labels.inputs.Absent' | translate }}</span>
+          <span *ngSwitchCase="3">{{ 'labels.inputs.Approved' | translate }}</span>
+          <span *ngSwitchCase="4">{{ 'labels.inputs.Leave' | translate }}</span>
+          <span *ngSwitchCase="5">{{ 'labels.inputs.Late' | translate }}</span>
+          <button mat-icon-button color="primary" (click)="editAttendance(member)">
             <fa-icon icon="pen"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel"  |translate}}</button>
-      <button mat-raised-button color="primary" (click)="submit()"
-        *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'">{{"labels.buttons.Confirm"  |translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="submit()"
+        *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+      >
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html b/src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html
index ecc2ac6b03..6ad2638025 100644
--- a/src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html
+++ b/src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html
@@ -1,37 +1,37 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="transferClientsForm">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Select Client Members for Transfer"  |translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Select Client Members for Transfer' | translate }}</mat-label>
             <mat-select required formControlName="clients" multiple>
               <mat-option *ngFor="let member of clientMembers" [value]="{ id: member.id }">
                 {{ member.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientsForm.controls.clients.hasError('required')">
-              {{"labels.inputs.Office"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="inheritDestinationGroupLoanOfficer">
-            {{"labels.inputs.Inherit Group Loan Officer"  |translate}}?
+          <mat-checkbox
+            class="m-t-10 m-b-10"
+            labelPosition="before"
+            formControlName="inheritDestinationGroupLoanOfficer"
+          >
+            {{ 'labels.inputs.Inherit Group Loan Officer' | translate }}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Destination Group"  |translate}}</mat-label>
-            <input matInput formControlName="destinationGroupId" [matAutocomplete]="groupsAutocomplete">
+            <mat-label>{{ 'labels.inputs.Destination Group' | translate }}</mat-label>
+            <input matInput formControlName="destinationGroupId" [matAutocomplete]="groupsAutocomplete" />
             <mat-error *ngIf="transferClientsForm.controls.destinationGroupId.hasError('required')">
-              {{"labels.inputs.Destination Group"  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Destination Group' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
@@ -42,40 +42,51 @@
 
         <div class="mat-table" *ngIf="transferClientsForm.get('destinationGroupId').value">
           <div class="mat-header-row">
-            <div class="mat-header-cell">{{"labels.inputs.Destination Group Details"  |translate}}</div>
+            <div class="mat-header-cell">{{ 'labels.inputs.Destination Group Details' | translate }}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">{{"labels.inputs.name"  |translate}}</div>
-            <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.name}}</div>
+            <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+            <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.name }}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">{{"labels.inputs.Id"  |translate}}</div>
-            <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.id}}</div>
+            <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+            <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.id }}</div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">{{"labels.inputs.Activation Date"  |translate}}</div>
-            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate  | dateFormat) || 'Not Activated'}}</div>
+            <div class="mat-cell">{{ 'labels.inputs.Activation Date' | translate }}</div>
+            <div class="mat-cell">
+              {{ (transferClientsForm.get('destinationGroupId').value.activationDate | dateFormat) || 'Not Activated' }}
+            </div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">{{"labels.inputs.Staff"  |translate}}</div>
-            <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned'}}</div>
+            <div class="mat-cell">{{ 'labels.inputs.Staff' | translate }}</div>
+            <div class="mat-cell">
+              {{ transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned' }}
+            </div>
           </div>
           <div class="mat-row">
-            <div class="mat-cell">{{"labels.inputs.External Id"  |translate}}</div>
-            <div class="mat-cell">{{transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned'}}</div>
+            <div class="mat-cell">{{ 'labels.inputs.External Id' | translate }}</div>
+            <div class="mat-cell">
+              {{ transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned' }}
+            </div>
           </div>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel"  |translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!transferClientsForm.valid" (click)="submit()"
-          *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'">{{"labels.buttons.Submit"  |translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!transferClientsForm.valid"
+          (click)="submit()"
+          *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html b/src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html
index 3364522ce9..9ad2f82b12 100644
--- a/src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html
+++ b/src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html
@@ -1,10 +1,8 @@
 <div class="container" fxLayout="row" fxLayoutGap="3%">
-
   <mat-card fxFlex class="client-card" fxLayout="column" fxLayoutGap="2%">
-
     <mat-form-field fxFlex="30%">
-      <mat-label>{{"labels.inputs.Add Clients"  |translate}}</mat-label>
-      <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
+      <mat-label>{{ 'labels.inputs.Add Clients' | translate }}</mat-label>
+      <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete" />
     </mat-form-field>
 
     <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
@@ -15,45 +13,47 @@
 
     <div class="mat-table">
       <div class="mat-header-row">
-        <div class="mat-header-cell">{{"labels.inputs.Client Details"  |translate}}</div>
+        <div class="mat-header-cell">{{ 'labels.inputs.Client Details' | translate }}</div>
         <button mat-icon-button (click)="addClient()">
           <fa-icon icon="plus"></fa-icon>
         </button>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.name"  |translate}}</div>
-        <div class="mat-cell">{{clientChoice.value.displayName}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+        <div class="mat-cell">{{ clientChoice.value.displayName }}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.Id"  |translate}}</div>
-        <div class="mat-cell">{{clientChoice.value.id}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+        <div class="mat-cell">{{ clientChoice.value.id }}</div>
       </div>
       <div class="mat-row">
-        <div class="mat-cell">{{"labels.inputs.Office"  |translate}}</div>
-        <div class="mat-cell">{{clientChoice.value.officeName}}</div>
+        <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+        <div class="mat-cell">{{ clientChoice.value.officeName }}</div>
       </div>
     </div>
-
   </mat-card>
 
   <mat-card fxFlex="50%">
+    <h3 matSubheader>{{ 'labels.heading.Client Members' | translate }}</h3>
 
-    <h3 matSubheader>{{"labels.heading.Client Members"  |translate}}</h3>
-
-    <mat-nav-list  *ngIf="clientMembers?.length">
-      <div mat-list-item *ngFor="let client of clientMembers index as i">
-        <span matLine class="p-t-10">{{client.displayName}}</span>
+    <mat-nav-list *ngIf="clientMembers?.length">
+      <div mat-list-item *ngFor="let client of clientMembers; index as i">
+        <span matLine class="p-t-10">{{ client.displayName }}</span>
         <div fxFlex></div>
-        <button mat-icon-button color="warn" (click)="removeClient(i, client)" matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}" matTooltipPosition="left">
+        <button
+          mat-icon-button
+          color="warn"
+          (click)="removeClient(i, client)"
+          matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}"
+          matTooltipPosition="left"
+        >
           <fa-icon icon="trash"></fa-icon>
         </button>
       </div>
     </mat-nav-list>
-
   </mat-card>
 
   <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-    <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Back"  |translate}}</button>
+    <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Back' | translate }}</button>
   </div>
-
 </div>
diff --git a/src/app/groups/groups-view/groups-view.component.html b/src/app/groups/groups-view/groups-view.component.html
index a91efc2602..15899ce58f 100644
--- a/src/app/groups/groups-view/groups-view.component.html
+++ b/src/app/groups/groups-view/groups-view.component.html
@@ -1,21 +1,21 @@
 <mat-card class="group-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" src="assets/images/group_placeholder.png">
+          <img mat-card-md-image class="profile-image" src="assets/images/group_placeholder.png" />
         </div>
       </div>
 
       <div class="mat-typography group-card-title">
         <mat-card-title>
           <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="groupViewData.status.code|statusLookup"
-              [matTooltip]="groupViewData.status.value"></i>
-              {{"labels.heading.Group Name"  |translate}} : {{groupViewData.name}}
+            <i
+              class="fa fa-stop"
+              [ngClass]="groupViewData.status.code | statusLookup"
+              [matTooltip]="groupViewData.status.value"
+            ></i>
+            {{ 'labels.heading.Group Name' | translate }} : {{ groupViewData.name }}
           </h3>
 
           <div fxFlex="5%">
@@ -29,28 +29,33 @@ <h3 fxFlex="95%">
 
         <mat-card-subtitle>
           <div fxFlex="45%">
-            <b>{{"labels.inputs.Group"  |translate}} :</b> {{groupViewData.name}} | <b>{{"labels.inputs.Center Name"  |translate}}:</b> {{groupViewData.centerName}} | <b>{{"labels.inputs.Staff"  |translate}}:</b>
-            {{groupViewData.staffName || 'Unassigned'}}<br />
-            <b>{{"labels.inputs.Office Name"  |translate}} :</b> {{groupViewData.officeName}}<br />
-            <b>{{"labels.inputs.Activation Date"  |translate}} :</b> {{(groupViewData.activationDate)?(groupViewData.activationDate | dateFormat) :'Not Activated'}}<br />
+            <b>{{ 'labels.inputs.Group' | translate }} :</b> {{ groupViewData.name }} |
+            <b>{{ 'labels.inputs.Center Name' | translate }}:</b> {{ groupViewData.centerName }} |
+            <b>{{ 'labels.inputs.Staff' | translate }}:</b> {{ groupViewData.staffName || 'Unassigned' }}<br />
+            <b>{{ 'labels.inputs.Office Name' | translate }} :</b> {{ groupViewData.officeName }}<br />
+            <b>{{ 'labels.inputs.Activation Date' | translate }} :</b>
+            {{ groupViewData.activationDate ? (groupViewData.activationDate | dateFormat) : 'Not Activated' }}<br />
             <span *ngIf="!groupViewData.active">
-              <b>{{"labels.inputs.Closure Date"  |translate}} :</b> {{groupViewData.timeline.closedOnDate | dateFormat}}
+              <b>{{ 'labels.inputs.Closure Date' | translate }} :</b>
+              {{ groupViewData.timeline.closedOnDate | dateFormat }}
             </span>
           </div>
-          <div  fxFlex="45%" class="group-meeting" fxLayoutAlign="start start">
+          <div fxFlex="45%" class="group-meeting" fxLayoutAlign="start start">
             <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
               <p>
-                {{"labels.inputs.Next Meeting on"  |translate}}: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                {{ 'labels.inputs.Next Meeting on' | translate }}:
+                {{ groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat }}
                 <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br />
-                {{"labels.inputs.Meeting Frequency"  |translate}}: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+                {{ 'labels.inputs.Meeting Frequency' | translate }}:
+                {{ groupViewData.collectionMeetingCalendar?.frequency.value | lowercase }}
               </p>
             </div>
             <ng-template #unassigned>
               <div>
                 <p>
-                  {{"labels.inputs.Next Meeting on"  |translate}}: {{"labels.inputs.Unassigned"  |translate}}
+                  {{ 'labels.inputs.Next Meeting on' | translate }}: {{ 'labels.inputs.Unassigned' | translate }}
                   <i class="fa fa-calendar"></i><br />
-                  {{"labels.inputs.Meeting Frequency"  |translate}}: {{"labels.inputs.N/A"  |translate}}
+                  {{ 'labels.inputs.Meeting Frequency' | translate }}: {{ 'labels.inputs.N/A' | translate }}
                 </p>
               </div>
             </ng-template>
@@ -59,111 +64,156 @@ <h3 fxFlex="95%">
       </div>
 
       <mat-menu #groupMenu="matMenu">
-
-        <span *ngIf="!(groupViewData.status.value==='Active')">
+        <span *ngIf="!(groupViewData.status.value === 'Active')">
           <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Activate')">
             <mat-icon matListIcon>
               <fa-icon icon="checkSign" size="sm"></fa-icon>
             </mat-icon>
-            <span>{{"labels.buttons.Activate"  |translate}}</span>
+            <span>{{ 'labels.buttons.Activate' | translate }}</span>
           </button>
         </span>
         <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Edit')">
           <mat-icon matListIcon>
             <fa-icon icon="edit" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Edit"  |translate}}</span>
+          <span>{{ 'labels.buttons.Edit' | translate }}</span>
         </button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_CLIENT'" (click)="doAction('Manage Members')">
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Add Clients"  |translate}}</span>
+          <span>{{ 'labels.buttons.Add Clients' | translate }}</span>
         </button>
-        <button mat-menu-item *mifosxHasPermission="'ASSOCIATECLIENTS_GROUP'"
-          (click)="doAction('Transfer Clients')">
+        <button mat-menu-item *mifosxHasPermission="'ASSOCIATECLIENTS_GROUP'" (click)="doAction('Transfer Clients')">
           <mat-icon matListIcon>
             <fa-icon icon="users" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Transfer Clients"  |translate}}</span>
+          <span>{{ 'labels.buttons.Transfer Clients' | translate }}</span>
         </button>
         <button mat-menu-item *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'" (click)="doAction('Manage Members')">
           <mat-icon matListIcon>
             <fa-icon icon="user" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Manage Members"  |translate}}</span>
+          <span>{{ 'labels.buttons.Manage Members' | translate }}</span>
         </button>
 
         <button mat-menu-item *ngIf="groupViewData.active" [matMenuTriggerFor]="AccountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{"labels.buttons.Applications"  |translate}}</span>
+          <span>{{ 'labels.buttons.Applications' | translate }}</span>
         </button>
 
         <mat-menu #AccountApplications="matMenu">
           <span *ngIf="groupViewData.clientMembers">
-            <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">{{"labels.buttons.Bulk JLG Loan Application"  |translate}}</button></span>
-          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-            [routerLink]="['savings-accounts', 'create']">{{"labels.buttons.Group Saving Application"  |translate}}</button>
+            <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">
+              {{ 'labels.buttons.Bulk JLG Loan Application' | translate }}
+            </button></span
+          >
+          <button
+            mat-menu-item
+            *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+            [routerLink]="['savings-accounts', 'create']"
+          >
+            {{ 'labels.buttons.Group Saving Application' | translate }}
+          </button>
           <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
-            {{"labels.buttons.Group Loan Application"  |translate}}</button>
+            {{ 'labels.buttons.Group Loan Application' | translate }}
+          </button>
           <button mat-menu-item [routerLink]="['loans-accounts', 'glim-account', 'create']">
-            {{"labels.buttons.GLIM Loan Application"  |translate}}</button>
-          <button mat-menu-item [routerLink]="['savings-accounts', 'gsim-account' , 'create']"> 
-            {{"labels.buttons.GSIM Application"  |translate}}
+            {{ 'labels.buttons.GLIM Loan Application' | translate }}
+          </button>
+          <button mat-menu-item [routerLink]="['savings-accounts', 'gsim-account', 'create']">
+            {{ 'labels.buttons.GSIM Application' | translate }}
           </button>
         </mat-menu>
 
-        <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.buttons.More"  |translate}}</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
         <mat-menu #More="matMenu">
           <span *ngIf="groupViewData.collectionMeetingCalendar">
-            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
-              (click)="doAction('Attendance')">{{"labels.buttons.Attendance"  |translate}}</button></span>
+            <button
+              mat-menu-item
+              *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+              (click)="doAction('Attendance')"
+            >
+              {{ 'labels.buttons.Attendance' | translate }}
+            </button></span
+          >
           <span *ngIf="!groupViewData.staffId">
             <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">
-              {{"labels.buttons.Assign Staff"  |translate}}</button></span>
+              {{ 'labels.buttons.Assign Staff' | translate }}
+            </button></span
+          >
           <span *ngIf="groupViewData.staffId">
-            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'"
-              (click)="doAction('Unassign Staff')">{{"labels.buttons.Unassign Staff"  |translate}}</button></span>
+            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">
+              {{ 'labels.buttons.Unassign Staff' | translate }}
+            </button></span
+          >
           <span
-            *ngIf="!(groupViewData.centerId || groupViewData.collectionMeetingCalendar) && groupViewData.status.value==='Active'">
+            *ngIf="
+              !(groupViewData.centerId || groupViewData.collectionMeetingCalendar) &&
+              groupViewData.status.value === 'Active'
+            "
+          >
             <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">
-              {{"labels.buttons.Attach Meeting"  |translate}}</button></span>
-          <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'" (click)="doAction('Close')">{{"labels.buttons.Close"  |translate}}</button>
-          <button mat-menu-item *mifosxHasPermission="'DELETE_GROUP'" (click)="doAction('Delete')">{{"labels.buttons.Delete"  |translate}}</button>
+              {{ 'labels.buttons.Attach Meeting' | translate }}
+            </button></span
+          >
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'" (click)="doAction('Close')">
+            {{ 'labels.buttons.Close' | translate }}
+          </button>
+          <button mat-menu-item *mifosxHasPermission="'DELETE_GROUP'" (click)="doAction('Delete')">
+            {{ 'labels.buttons.Delete' | translate }}
+          </button>
         </mat-menu>
       </mat-menu>
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{"labels.inputs.General"  |translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./notes']" *mifosxHasPermission="'READ_GROUPNOTE'" routerLinkActive
-        #notes="routerLinkActive" [active]="notes.isActive">
-        {{"labels.inputs.Notes"  |translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./notes']"
+        *mifosxHasPermission="'READ_GROUPNOTE'"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./committee']" routerLinkActive #committee="routerLinkActive"
-        [active]="committee.isActive">
-        {{"labels.inputs.Committee"  |translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./committee']"
+        routerLinkActive
+        #committee="routerLinkActive"
+        [active]="committee.isActive"
+      >
+        {{ 'labels.inputs.Committee' | translate }}
       </a>
       <span *ngFor="let groupDatatable of groupDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + groupDatatable.registeredTableName"
-          [routerLink]="['./datatables',groupDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{groupDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + groupDatatable.registeredTableName"
+          [routerLink]="['./datatables', groupDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ groupDatatable.registeredTableName }}
         </a>
       </span>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/groups/groups-view/notes-tab/notes-tab.component.html b/src/app/groups/groups-view/notes-tab/notes-tab.component.html
index 04cf7318f2..bbeca4fa04 100644
--- a/src/app/groups/groups-view/notes-tab/notes-tab.component.html
+++ b/src/app/groups/groups-view/notes-tab/notes-tab.component.html
@@ -1,4 +1,5 @@
-<mifosx-entity-notes-tab [entityId]="entityId"
+<mifosx-entity-notes-tab
+  [entityId]="entityId"
   [entityNotes]="entityNotes"
   [callbackAdd]="addNote"
   [callbackEdit]="editNote"
diff --git a/src/app/groups/groups.component.html b/src/app/groups/groups.component.html
index b42b353fc7..70e2af0114 100644
--- a/src/app/groups/groups.component.html
+++ b/src/app/groups/groups.component.html
@@ -1,58 +1,66 @@
 <mat-card class="container">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box">
       <mat-form-field>
-        <input matInput placeholder="Search by Name" [formControl]="name">
+        <input matInput placeholder="Search by Name" [formControl]="name" />
       </mat-form-field>
-      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{"labels.inputs.Show Closed Groups"  |translate}}</mat-checkbox>
+      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{
+        'labels.inputs.Show Closed Groups' | translate
+      }}</mat-checkbox>
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{"labels.buttons.Import Group"  |translate}}
+        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Create Group"  |translate}}
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name"  |translate}} </th>
-      <td mat-cell *matCellDef="let group"> {{ group.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let group">{{ group.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="accountNo">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Account"  |translate}} # </th>
-      <td mat-cell *matCellDef="let group"> {{ group.accountNo }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account' | translate }} #</th>
+      <td mat-cell *matCellDef="let group">{{ group.accountNo }}</td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id"  |translate}} </th>
-      <td mat-cell *matCellDef="let group"> {{ group.externalId }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
+      <td mat-cell *matCellDef="let group">{{ group.externalId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status"  |translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
       <td mat-cell *matCellDef="let row">
-        <div [ngClass]="row.status.code|statusLookup">
+        <div [ngClass]="row.status.code | statusLookup">
           <fa-icon icon="stop"></fa-icon>
         </div>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Office Name"  |translate}} </th>
-      <td mat-cell *matCellDef="let group"> {{ group.officeName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
+      <td mat-cell *matCellDef="let group">{{ group.officeName }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']" class="select-row"></tr>
-
+    <tr
+      mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [routerLink]="[row.id, 'general']"
+      class="select-row"
+    ></tr>
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    [length]="dataSource?.records$ | async"
+    [pageSize]="10"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    showFirstLastButtons
+  ></mat-paginator>
 </mat-card>
diff --git a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html
index de73f1a94f..47ebfcb0a0 100644
--- a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html
+++ b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html
@@ -1,12 +1,11 @@
 <mat-card class="card">
-
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="donate"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Collected" | translate}}
+      &nbsp;&nbsp; {{ 'labels.inputs.Amount Collected' | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -19,12 +18,11 @@ <h3 fxFlex="100%">
 
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
-    <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+    <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="collection-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data" | translate}}</p>
+      <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html
index 71d83dd6ea..fdbfc579af 100644
--- a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html
+++ b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html
@@ -1,12 +1,11 @@
 <mat-card class="card">
-
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="money-bill"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed" | translate}}
+      &nbsp;&nbsp; {{ 'labels.inputs.Amount Pending / Disbursed' | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -19,12 +18,11 @@ <h3 fxFlex="100%">
 
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
-    <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+    <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="disbursement-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data" | translate}}</p>
+      <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html
index 22b19d45fb..af9488a2fc 100644
--- a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html
+++ b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html
@@ -1,12 +1,11 @@
 <mat-card class="card">
-
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="chart-line"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Client Trends" | translate}}
+      &nbsp;&nbsp; {{ 'labels.inputs.Client Trends' | translate }}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -19,14 +18,13 @@ <h3 fxFlex="100%">
 
   <mat-card-content>
     <!-- Structural directives like *ngIf break the canvas -->
-    <div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+    <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="client-trends-bar" width="800" height="465" class="fallback"></canvas>
     </div>
-    <mat-button-toggle-group [formControl]="timescale" id='timescale' appearance="legacy">
-      <mat-button-toggle value="Day">{{"labels.buttons.Day" | translate}}</mat-button-toggle>
-      <mat-button-toggle value="Week">{{"labels.buttons.Week" | translate}}</mat-button-toggle>
-      <mat-button-toggle value="Month">{{"labels.buttons.Month" | translate}}</mat-button-toggle>
+    <mat-button-toggle-group [formControl]="timescale" id="timescale" appearance="legacy">
+      <mat-button-toggle value="Day">{{ 'labels.buttons.Day' | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Week">{{ 'labels.buttons.Week' | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Month">{{ 'labels.buttons.Month' | translate }}</mat-button-toggle>
     </mat-button-toggle-group>
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/home/dashboard/dashboard.component.html b/src/app/home/dashboard/dashboard.component.html
index 9e5e4d461a..2aa7225261 100644
--- a/src/app/home/dashboard/dashboard.component.html
+++ b/src/app/home/dashboard/dashboard.component.html
@@ -1,32 +1,27 @@
 <div class="container">
-
   <mat-card class="card" fxLayout="column" fxLayoutGap="40px">
-
     <div fxLayout="row" class="search">
       <mat-card-content>
-
         <mat-form-field>
-          <mat-label>{{'labels.placeholders.Search Activity' | translate}}</mat-label>
-          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
+          <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
+          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
         </mat-form-field>
 
         <mat-autocomplete #activitySearch="matAutocomplete">
           <mat-option *ngFor="let activity of filteredActivities | async" [routerLink]="activity.path">
-            <span>{{activity.activity}}</span>
+            <span>{{ activity.activity }}</span>
           </mat-option>
         </mat-autocomplete>
-
       </mat-card-content>
     </div>
 
     <div fxLayout="row" class="top-card">
-        <div class="trends-bar">
-          <mifosx-client-trends-bar></mifosx-client-trends-bar>
-        </div>
+      <div class="trends-bar">
+        <mifosx-client-trends-bar></mifosx-client-trends-bar>
+      </div>
     </div>
 
     <div fxLayout="row" class="bottom-card">
-
       <div class="amount-disbursed">
         <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
       </div>
@@ -34,9 +29,6 @@
       <div class="amount-collected">
         <mifosx-amount-collected-pie></mifosx-amount-collected-pie>
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index cc016a2c52..78e7dbf597 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,63 +1,73 @@
 <div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
       <fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Dashboard' | translate}}
+      {{ 'labels.buttons.Dashboard' | translate }}
     </button>
   </div>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-header>
-      <mat-card-title class="title">
-        {{'labels.text.Welcome' | translate}}, {{ username }}!
-      </mat-card-title>
+      <mat-card-title class="title"> {{ 'labels.text.Welcome' | translate }}, {{ username }}! </mat-card-title>
     </mat-card-header>
 
     <mat-card-content #searchActivity>
-
       <div fxLayout="column">
         <mat-form-field>
-          <mat-label>{{'labels.placeholders.Search Activity' | translate}}</mat-label>
-          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
+          <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
+          <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
         </mat-form-field>
       </div>
 
       <mat-autocomplete #activitySearch="matAutocomplete">
         <mat-option *ngFor="let activity of filteredActivities | async" [routerLink]="activity.path">
-          <span>{{activity.activity}}</span>
+          <span>{{ activity.activity }}</span>
         </mat-option>
       </mat-autocomplete>
-
     </mat-card-content>
 
-    <img mat-card-image src="assets/images/mifos_lg-logo.png" alt="Mifos X">
-
+    <img mat-card-image src="assets/images/mifos_lg-logo.png" alt="Mifos X" />
   </mat-card>
-
 </div>
 
 <ng-template #templateButtonDashboard let-popover="popover">
-  <h2>{{"labels.heading.Dashboard" | translate}}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the dashboard component." | translate}}</p>
+  <h2>{{ 'labels.heading.Dashboard' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This will navigate the user to the dashboard component.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSearchActivity, searchActivity,'bottom',true)">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateSearchActivity let-popover="popover">
-  <h2>{{"labels.heading.Search Activity" | translate}}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the searched activity." | translate}}</p>
+  <h2>{{ 'labels.heading.Search Activity' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This will navigate the user to the searched activity.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDashboard, buttonDashboard,'bottom',true)">{{"labels.buttons.Back" | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/home/timeout-dialog/session-timeout-dialog.component.html b/src/app/home/timeout-dialog/session-timeout-dialog.component.html
index b46beb3d48..341f64a8e0 100644
--- a/src/app/home/timeout-dialog/session-timeout-dialog.component.html
+++ b/src/app/home/timeout-dialog/session-timeout-dialog.component.html
@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Session Timeout' | translate }}</h1>
 <mat-dialog-content>{{ 'labels.text.Session timed out after a period of inactivity' | translate }}.</mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
-</mat-dialog-actions>
\ No newline at end of file
+  <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+</mat-dialog-actions>
diff --git a/src/app/home/warning-dialog/warning-dialog.component.html b/src/app/home/warning-dialog/warning-dialog.component.html
index 6573c19d48..89a54cf798 100644
--- a/src/app/home/warning-dialog/warning-dialog.component.html
+++ b/src/app/home/warning-dialog/warning-dialog.component.html
@@ -1,5 +1,5 @@
-<h1 mat-dialog-title>{{ "labels.text." + title | translate }}</h1>
-<mat-dialog-content>{{ "labels.text.Warning message" | translate }}</mat-dialog-content>
+<h1 mat-dialog-title>{{ 'labels.text.' + title | translate }}</h1>
+<mat-dialog-content>{{ 'labels.text.Warning message' | translate }}</mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-raised-button color="primary" mat-dialog-close>{{ "labels.buttons." + buttonText | translate}}</button>
-</mat-dialog-actions>
\ No newline at end of file
+  <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.' + buttonText | translate }}</button>
+</mat-dialog-actions>
diff --git a/src/app/loans/create-loans-account/create-loans-account.component.html b/src/app/loans/create-loans-account/create-loans-account.component.html
index 91b9f6b472..797948e881 100644
--- a/src/app/loans/create-loans-account/create-loans-account.component.html
+++ b/src/app/loans/create-loans-account/create-loans-account.component.html
@@ -1,5 +1,4 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
@@ -22,65 +21,71 @@
     </ng-template>
 
     <mat-step [stepControl]="loansAccountDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate}}</ng-template>
-
-      <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountTemplate"
-        (loansAccountProductTemplate)="setTemplate($event)" #loansAccountDetailsForm>
+      <mifosx-loans-account-details-step
+        [loansAccountTemplate]="loansAccountTemplate"
+        (loansAccountProductTemplate)="setTemplate($event)"
+        #loansAccountDetailsForm
+      >
       </mifosx-loans-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="loansAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate}}</ng-template>
-
-      <mifosx-loans-account-terms-step #loanAccountTerms [loansAccountProductTemplate]="loansAccountProductTemplate"
-      [loansAccountTemplate] = "loansAccountTemplate" [collateralOptions]="collateralOptions"
-      [loansAccountFormValid]="loansAccountFormValid" [loanPrincipal]="loanPrincipal">
+      <mifosx-loans-account-terms-step
+        #loanAccountTerms
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccountTemplate]="loansAccountTemplate"
+        [collateralOptions]="collateralOptions"
+        [loansAccountFormValid]="loansAccountFormValid"
+        [loanPrincipal]="loanPrincipal"
+      >
       </mifosx-loans-account-terms-step>
-
     </mat-step>
 
     <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate}}</ng-template>
-
-      <mifosx-loans-account-charges-step #loanAccountCharges [loansAccountProductTemplate]="loansAccountProductTemplate"
+      <mifosx-loans-account-charges-step
+        #loanAccountCharges
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
-        [loansAccountFormValid]="loansAccountFormValid">
+        [loansAccountFormValid]="loansAccountFormValid"
+      >
       </mifosx-loans-account-charges-step>
-
     </mat-step>
 
     <mat-step state="repayment" *ngIf="loansAccountFormValid" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.REPAYMENT SCHEDULE' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE" | translate}}</ng-template>
-
-      <mifosx-loans-account-schedule-step #loanAccountSchedule [loansAccountTemplate]="loansAccountTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" [currencyCode]="currencyCode">
+      <mifosx-loans-account-schedule-step
+        #loanAccountSchedule
+        [loansAccountTemplate]="loansAccountTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccount]="loansAccount"
+        [currencyCode]="currencyCode"
+      >
       </mifosx-loans-account-schedule-step>
-
     </mat-step>
 
     <mat-step *ngFor="let datatable of datatables">
-
-      <ng-template matStepLabel>{{datatable.registeredTableName}}</ng-template>
+      <ng-template matStepLabel>{{ datatable.registeredTableName }}</ng-template>
 
       <mifosx-loans-account-datatable-step [datatableData]="datatable" #dtloan></mifosx-loans-account-datatable-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate}}</ng-template>
-
-      <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submitEvent)="submit()">
+      <mifosx-loans-account-preview-step
+        [loansAccountTemplate]="loansAccountTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccount]="loansAccount"
+        (submitEvent)="submit()"
+      >
       </mifosx-loans-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/loans/custom-dialog/loan-delinquency-action-dialog/loan-delinquency-action-dialog.component.html b/src/app/loans/custom-dialog/loan-delinquency-action-dialog/loan-delinquency-action-dialog.component.html
index 731a9bb556..8913dfe405 100644
--- a/src/app/loans/custom-dialog/loan-delinquency-action-dialog/loan-delinquency-action-dialog.component.html
+++ b/src/app/loans/custom-dialog/loan-delinquency-action-dialog/loan-delinquency-action-dialog.component.html
@@ -1,34 +1,51 @@
-
-<h2 mat-dialog-title>{{"labels.heading.Loan Delinquency Actions" | translate}}</h2>
+<h2 mat-dialog-title>{{ 'labels.heading.Loan Delinquency Actions' | translate }}</h2>
 
 <div mat-dialog-content [formGroup]="delinquencyActionForm" fxLayout="column">
-
   <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
-    <mat-label>{{"labels.inputs.Start Date" | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
-      formControlName="startDate">
+    <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="validFromDatePicker"
+      required
+      formControlName="startDate"
+    />
     <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #validFromDatePicker></mat-datepicker>
     <mat-error *ngIf="delinquencyActionForm.controls.startDate.hasError('required')">
-      {{"labels.inputs.Start Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+      {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%"  (click)="validTillDatePicker.open()">
-    <mat-label>{{"labels.inputs.End Date" | translate}}</mat-label>
-    <input matInput [min]="delinquencyActionForm.value.startDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
-      formControlName="endDate">
+  <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
+    <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
+    <input
+      matInput
+      [min]="delinquencyActionForm.value.startDate"
+      [max]="maxDate"
+      [matDatepicker]="validTillDatePicker"
+      required
+      formControlName="endDate"
+    />
     <mat-datepicker-toggle matSuffix [for]="validTillDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #validTillDatePicker></mat-datepicker>
     <mat-error *ngIf="delinquencyActionForm.controls.endDate.hasError('required')">
-      {{"labels.inputs.End Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+      {{ 'labels.inputs.End Date' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
-
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel" | translate}} </button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: delinquencyActionForm }"
-    [disabled]="!delinquencyActionForm.valid || delinquencyActionForm.pristine">{{"labels.buttons.Submit" | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [mat-dialog-close]="{ data: delinquencyActionForm }"
+    [disabled]="!delinquencyActionForm.valid || delinquencyActionForm.pristine"
+  >
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html b/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html
index 351546c598..43403a4716 100644
--- a/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html
+++ b/src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html
@@ -1,44 +1,50 @@
-<h1 mat-dialog-title>{{"labels.heading.Add Loan Collateral" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Add Loan Collateral' | translate }}</h1>
 
 <div mat-dialog-content [formGroup]="addCollateralForm" fxLayout="column">
-
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Collateral" | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Collateral' | translate }}</mat-label>
     <mat-select formControlName="collateral" required>
-      <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType" >
+      <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType">
         {{ collateralType.name }}
       </mat-option>
     </mat-select>
     <mat-error>
-      {{"labels.inputs.Collateral" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+      {{ 'labels.inputs.Collateral' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Quantity" | translate}}</mat-label>
-    <input type="number" [max]="maxQuantity" [min]="0" matInput formControlName="quantity" required>
+    <mat-label>{{ 'labels.inputs.Quantity' | translate }}</mat-label>
+    <input type="number" [max]="maxQuantity" [min]="0" matInput formControlName="quantity" required />
     <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('required')">
-      {{"labels.inputs.Quantity" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+      {{ 'labels.inputs.Quantity' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
     <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('max')">
-      {{"labels.inputs.Quantity can not be more than" | translate}} <strong>{{ maxQuantity }}</strong>
+      {{ 'labels.inputs.Quantity can not be more than' | translate }} <strong>{{ maxQuantity }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Total Value" | translate}}</mat-label>
-    <input type="text" matInput formControlName="totalValue" [disabled]="true">
+    <mat-label>{{ 'labels.inputs.Total Value' | translate }}</mat-label>
+    <input type="text" matInput formControlName="totalValue" [disabled]="true" />
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{"labels.inputs.Total Collateral Value" | translate}}</mat-label>
-    <input type="text" matInput formControlName="totalCollateralValue" [disabled]="true">
+    <mat-label>{{ 'labels.inputs.Total Collateral Value' | translate }}</mat-label>
+    <input type="text" matInput formControlName="totalCollateralValue" [disabled]="true" />
   </mat-form-field>
-
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel" | translate}} </button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: addCollateralForm }"
-    [disabled]="!addCollateralForm.valid || addCollateralForm.pristine">{{ layout.addButtonText }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [mat-dialog-close]="{ data: addCollateralForm }"
+    [disabled]="!addCollateralForm.valid || addCollateralForm.pristine"
+  >
+    {{ layout.addButtonText }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html b/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html
index 3f99ef79ef..a03ca19864 100644
--- a/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html
+++ b/src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html
@@ -1,44 +1,41 @@
-<h1 mat-dialog-title>{{"labels.heading.Guarantor Detail" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Guarantor Detail' | translate }}</h1>
 
 <div mat-dialog-content fxLayout="column">
-
   <div fxLayout="row wrap" fxLayout.lt-md="column">
-
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.First Name" | translate}}:</span>
+      <span fxFlex="50%">{{ 'labels.inputs.First Name' | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.firstname }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Last Name" | translate}}:</span>
+      <span fxFlex="50%">{{ 'labels.inputs.Last Name' | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.lastname }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Relationship" | translate}}:</span>
+      <span fxFlex="50%">{{ 'labels.inputs.Relationship' | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.clientRelationshipType.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Guarantor Type" | translate}}:</span>
+      <span fxFlex="50%">{{ 'labels.inputs.Guarantor Type' | translate }}:</span>
       <span fxFlex="50%">{{ data.guarantorData.guarantorType.value }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="50%">{{"labels.inputs.Status" | translate}}:</span>
+      <span fxFlex="50%">{{ 'labels.inputs.Status' | translate }}:</span>
       <span fxFlex="50%">
         <span *ngIf="data.guarantorData.status">
-          {{"labels.inputs.Active" | translate}}
+          {{ 'labels.inputs.Active' | translate }}
         </span>
         <span *ngIf="!data.guarantorData.status">
-          {{"labels.inputs.Deleted" | translate}}
-        </span></span>
+          {{ 'labels.inputs.Deleted' | translate }}
+        </span></span
+      >
     </div>
-
   </div>
-
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> {{"labels.buttons.Cancel" | translate}} </button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
 </mat-dialog-actions>
diff --git a/src/app/loans/edit-loans-account/edit-loans-account.component.html b/src/app/loans/edit-loans-account/edit-loans-account.component.html
index e42fb8c5ea..3956f4ca5c 100644
--- a/src/app/loans/edit-loans-account/edit-loans-account.component.html
+++ b/src/app/loans/edit-loans-account/edit-loans-account.component.html
@@ -1,5 +1,4 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
@@ -22,57 +21,59 @@
     </ng-template>
 
     <mat-step [stepControl]="loansAccountDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate}}</ng-template>
-
-      <mifosx-loans-account-details-step [loansAccountTemplate]="loansAccountAndTemplate"
-        (loansAccountProductTemplate)="setTemplate($event)">
+      <mifosx-loans-account-details-step
+        [loansAccountTemplate]="loansAccountAndTemplate"
+        (loansAccountProductTemplate)="setTemplate($event)"
+      >
       </mifosx-loans-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="loansAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate}}</ng-template>
-
-      <mifosx-loans-account-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-      [loansAccountTemplate]="loansAccountAndTemplate" [collateralOptions]="collateralOptions">
+      <mifosx-loans-account-terms-step
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccountTemplate]="loansAccountAndTemplate"
+        [collateralOptions]="collateralOptions"
+      >
       </mifosx-loans-account-terms-step>
-
     </mat-step>
 
     <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate}}</ng-template>
-
-      <mifosx-loans-account-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+      <mifosx-loans-account-charges-step
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountAndTemplate"
-        [loansAccountFormValid]="loansAccountFormValidAndNotPristine">
+        [loansAccountFormValid]="loansAccountFormValidAndNotPristine"
+      >
       </mifosx-loans-account-charges-step>
-
     </mat-step>
 
     <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.REPAYMENT SCHEDULE' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.REPAYMENT SCHEDULE" | translate}}</ng-template>
-
-      <mifosx-loans-account-schedule-step [loansAccountTemplate]="loansAccountAndTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount"
-        [currencyCode]="currencyCode">
+      <mifosx-loans-account-schedule-step
+        [loansAccountTemplate]="loansAccountAndTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccount]="loansAccount"
+        [currencyCode]="currencyCode"
+      >
       </mifosx-loans-account-schedule-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="loansAccountFormValidAndNotPristine" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate}}</ng-template>
-
-      <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountAndTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submitEvent)="submit()">
+      <mifosx-loans-account-preview-step
+        [loansAccountTemplate]="loansAccountAndTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccount]="loansAccount"
+        (submitEvent)="submit()"
+      >
       </mifosx-loans-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html b/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
index b9eee9144b..0407e05455 100644
--- a/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
+++ b/src/app/loans/glim-account/create-glim-account/create-glim-account.component.html
@@ -1,5 +1,4 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loansAccountStepper>
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
@@ -22,47 +21,47 @@
     </ng-template>
 
     <mat-step [stepControl]="loansAccountDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate}}</ng-template>
-
-      <mifosx-glim-details-step [loansAccountTemplate]="loansAccountTemplate"
-        (loansAccountProductTemplate)="setTemplate($event)" [gsimData]="gsimData">
+      <mifosx-glim-details-step
+        [loansAccountTemplate]="loansAccountTemplate"
+        (loansAccountProductTemplate)="setTemplate($event)"
+        [gsimData]="gsimData"
+      >
       </mifosx-glim-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="loansAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate}}</ng-template>
-
-      <mifosx-glim-terms-step [loansAccountProductTemplate]="loansAccountProductTemplate"
-      [loansAccountTemplate] = "loansAccountTemplate">
+      <mifosx-glim-terms-step
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccountTemplate]="loansAccountTemplate"
+      >
       </mifosx-glim-terms-step>
-
     </mat-step>
 
     <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate}}</ng-template>
-
-      <mifosx-glim-charges-step [loansAccountProductTemplate]="loansAccountProductTemplate"
+      <mifosx-glim-charges-step
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
-          [activeClientMembers]="activeClientMembers"
-        >
+        [activeClientMembers]="activeClientMembers"
+      >
       </mifosx-glim-charges-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="loansAccountFormValid" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate}}</ng-template>
-
-      <mifosx-loans-account-preview-step [loansAccountTemplate]="loansAccountTemplate"
-        [loansAccountProductTemplate]="loansAccountProductTemplate" [loansAccount]="loansAccount" (submitEvent)="submit()">
+      <mifosx-loans-account-preview-step
+        [loansAccountTemplate]="loansAccountTemplate"
+        [loansAccountProductTemplate]="loansAccountProductTemplate"
+        [loansAccount]="loansAccount"
+        (submitEvent)="submit()"
+      >
       </mifosx-loans-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
index 55be096d73..8bdc35a5db 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
@@ -1,169 +1,186 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <mat-form-field fxFlex="48%">
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
+    <mat-select #charge>
+      <mat-option *ngFor="let charge of chargeData" [value]="charge">
+        {{ charge.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <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>
+      {{ 'labels.buttons.Add' | translate }}
+    </button>
+  </div>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Charge" | translate}}</mat-label>
-      <mat-select #charge>
-        <mat-option *ngFor="let charge of chargeData" [value]="charge">
-          {{ charge.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <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>
-        {{"labels.buttons.Add" | translate}}
-      </button>
-    </div>
-
-    <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-
-      <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>
-      </ng-container>
-
-      <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value }}
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
+    <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>
+    </ng-container>
+
+    <ng-container matColumnDef="chargeCalculationType">
+      <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>{{ 'labels.inputs.Amount' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.amount }}
+        <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="chargeTimeType">
+      <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>{{ 'labels.inputs.Date' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">
+        <span
+          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+        >
+          {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
+        </span>
+        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+          {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
+        </span>
+        <span
+          *ngIf="
+            !(
+              charge.chargeTimeType.value === 'Monthly Fee' ||
+              charge.chargeTimeType.value === 'Annual Fee' ||
+              charge.chargeTimeType.value === 'Specified due date' ||
+              charge.chargeTimeType.value === 'Weekly Fee'
+            )
+          "
+        >
+          {{ '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)"
+        >
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="repaymentsEvery">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.feeInterval || 'Not Provided' }}
+        <button
+          mat-icon-button
+          color="primary"
+          *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
+          (click)="editChargeFeeInterval(charge)"
+        >
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <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>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+
+  <div fxFlex="98%" *ngIf="activeClientMembers">
+    <table fxFlex="98%" mat-table [dataSource]="dataSource">
+      <!-- Check Column -->
+      <ng-container matColumnDef="check">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="amount">
-        <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)">
-            <fa-icon icon="pen"></fa-icon>
-          </button>
-        </td>
+      <!-- Position Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
       </ng-container>
 
-      <ng-container matColumnDef="chargeTimeType">
-        <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> {{"labels.inputs.Date" | translate}} </th>
-        <td mat-cell *matCellDef="let charge">
-          <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
-          </span>
-          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
-          </span>
-          <span
-            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-              {{"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)">
-            <fa-icon icon="pen"></fa-icon>
-          </button>
-        </td>
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
       </ng-container>
 
-      <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate}} </th>
-        <td mat-cell *matCellDef="let charge">
-          {{ charge.feeInterval || 'Not Provided' }}
-          <button mat-icon-button color="primary"
-            *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
-            (click)="editChargeFeeInterval(charge)">
-            <fa-icon icon="pen"></fa-icon>
-          </button>
+      <!-- Weight Column -->
+      <ng-container matColumnDef="purpose">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Purpose' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Select Purpose' | translate }}</mat-label>
+            <mat-select [(ngModel)]="element.loanPurposeId">
+              <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
+                {{ purpose.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="action">
-        <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>
-          </button>
+      <!-- Symbol Column -->
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          <mat-form-field>
+            <input type="number" matInput [(ngModel)]="element.principal" />
+          </mat-form-field>
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
     </table>
-
-    <div fxFlex="98%" *ngIf="activeClientMembers">
-      <table fxFlex="98%" mat-table [dataSource]="dataSource">
-
-        <!-- Check Column -->
-        <ng-container matColumnDef="check">
-            <th mat-header-cell *matHeaderCellDef>
-                <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-            </th>
-            <td mat-cell *matCellDef="let element">
-                <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-            </td>
-        </ng-container>
-
-        <!-- Position Column -->
-        <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID" | translate}} </th>
-          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
-        </ng-container>
-
-        <!-- Name Column -->
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name" | translate}} </th>
-          <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
-        </ng-container>
-
-         <!-- Weight Column -->
-         <ng-container matColumnDef="purpose">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Purpose" | translate}} </th>
-          <td mat-cell *matCellDef="let element">
-            <mat-form-field>
-                <mat-label>{{"labels.inputs.Select Purpose" | translate}}</mat-label>
-                <mat-select [(ngModel)]="element.loanPurposeId">
-                <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
-                    {{ purpose.name }}
-                </mat-option>
-                </mat-select>
-            </mat-form-field>
-          </td>
-        </ng-container>
-
-        <!-- Symbol Column -->
-        <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Original Loan" | translate}} </th>
-          <td mat-cell *matCellDef="let element">
-            <mat-form-field>
-                <input type="number" matInput [(ngModel)]="element.principal">
-            </mat-form-field>
-          </td>
-        </ng-container>
-
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
-      </table>
-    </div>
-
-
-  </div>
-
-  <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>
-      {{"labels.buttons.Previous" | translate}}
-    </button>
-    <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
-      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-    </button>
   </div>
+</div>
+
+<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>
+    {{ 'labels.buttons.Previous' | translate }}
+  </button>
+  <button mat-raised-button matStepperNext>
+    {{ 'labels.buttons.Next' | translate }}
+    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+  </button>
+</div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
index 98cef474cc..de9eb3b9cf 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
@@ -1,88 +1,94 @@
 <form [formGroup]="loansAccountDetailsForm">
-
-    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Product Name" | translate}}</mat-label>
-        <mat-select formControlName="productId" required>
-          <mat-option *ngFor="let product of productData" [value]="product.id">
-            {{ product.name }}
-          </mat-option>
-        </mat-select>
-        <mat-error>
-          {{"labels.inputs.Product Name" | translate}} {{"labels.commons.is" | translate}}  <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Loan officer" | translate}}</mat-label>
-        <mat-select formControlName="loanOfficerId">
-          <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
-            {{ loanOfficer.displayName }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Fund" | translate}}</mat-label>
-        <mat-select formControlName="fundId">
-          <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
-            {{ fund.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
-        <mat-label>{{"labels.inputs.Submitted on" | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
-          formControlName="submittedOnDate">
-        <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
-        <mat-datepicker #submitPicker></mat-datepicker>
-        <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-          {{"labels.inputs.Submitted on" | translate}} {{"labels.commons.is" | translate}}  <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
-        <mat-label>{{"labels.inputs.Disbursement on" | translate}}</mat-label>
-        <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
-          formControlName="expectedDisbursementDate">
-        <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
-        <mat-datepicker #disbursementPicker></mat-datepicker>
-        <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-          {{"labels.inputs.Disbursement on" | translate}} {{"labels.commons.is" | translate}}  <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
-      </mat-form-field>
-
-
-
-      <mat-divider fxFlex="98%"></mat-divider>
-
-      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate}}</h3>
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Link savings" | translate}}</mat-label>
-        <mat-select formControlName="linkAccountId">
-          <mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
-            {{ savingaccount.accountNumber }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-
-
-    </div>
-
-    <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-      <button mat-raised-button matStepperPrevious disabled>
-        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-        {{"labels.buttons.Previous" | translate}}
-      </button>
-      <button mat-raised-button matStepperNext>
-        {{"labels.buttons.Next" | translate}}
-        <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-      </button>
-    </div>
-
-  </form>
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <mat-select formControlName="productId" required>
+        <mat-option *ngFor="let product of productData" [value]="product.id">
+          {{ product.name }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Loan officer' | translate }}</mat-label>
+      <mat-select formControlName="loanOfficerId">
+        <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
+          {{ loanOfficer.displayName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Fund' | translate }}</mat-label>
+      <mat-select formControlName="fundId">
+        <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
+          {{ fund.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
+      <mat-label>{{ 'labels.inputs.Submitted on' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submitPicker"
+        required
+        formControlName="submittedOnDate"
+      />
+      <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
+      <mat-datepicker #submitPicker></mat-datepicker>
+      <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
+        {{ 'labels.inputs.Submitted on' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
+      <mat-label>{{ 'labels.inputs.Disbursement on' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="loansAccountDetailsForm.value.submittedOnDate"
+        [max]="maxDate"
+        [matDatepicker]="disbursementPicker"
+        required
+        formControlName="expectedDisbursementDate"
+      />
+      <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
+      <mat-datepicker #disbursementPicker></mat-datepicker>
+      <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
+        {{ 'labels.inputs.Disbursement on' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Savings Linkage' | translate }}</h3>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Link savings' | translate }}</mat-label>
+      <mat-select formControlName="linkAccountId">
+        <mat-option *ngFor="let savingaccount of gsimData" [value]="savingaccount.id">
+          {{ savingaccount.accountNumber }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Previous' | translate }}
+    </button>
+    <button mat-raised-button matStepperNext>
+      {{ 'labels.buttons.Next' | translate }}
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+    </button>
+  </div>
+</form>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
index 6ea21d6d9d..00d6f369d5 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
@@ -1,275 +1,300 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate}}</h3>
+  <mat-divider fxFlexFill></mat-divider>
 
-    <mat-divider fxFlexFill></mat-divider>
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name' }}</span>
+  </div>
 
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Product" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-      <span fxFlex="40%">{{"labels.inputs.Loan officer" | translate}}:</span>
-      <span
-        fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-      <span fxFlex="40%">{{"labels.inputs.Loan purpose" | translate}}:</span>
-      <span
-        fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.fundId">
-      <span fxFlex="40%">{{"labels.inputs.Fund" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Submitted on" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.submittedOnDate | dateFormat }}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Disbursement on" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.externalId">
-      <span fxFlex="40%">{{"labels.inputs.External id" | translate}}:</span>
-      <span fxFlex="60%">
-        <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
-      </span>
-    </div>
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate}}</h3>
+  <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
+    <span fxFlex="40%">{{ 'labels.inputs.Loan officer' | translate }}:</span>
+    <span fxFlex="60%">{{
+      loansAccount.loanOfficerId | find: loansAccountProductTemplate.loanOfficerOptions : 'id' : 'displayName'
+    }}</span>
+  </div>
 
-    <mat-divider fxFlexFill></mat-divider>
+  <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
+    <span fxFlex="40%">{{ 'labels.inputs.Loan purpose' | translate }}:</span>
+    <span fxFlex="60%">{{
+      loansAccount.loanPurposeId | find: loansAccountProductTemplate.loanPurposeOptions : 'id' : 'name'
+    }}</span>
+  </div>
 
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Principal" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Loan term" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
-        {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Number of repayments" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Repaid every" | translate}}:</span>
-      <span fxFlex="60%">{{loansAccount.repaymentEvery}}
-        {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
-        {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
-        {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-      <span fxFlex="40%">{{"labels.inputs.First repayment on" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-      <span fxFlex="40%">{{"labels.inputs.Interest charged from" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-      <span fxFlex="40%">{{"labels.inputs.Nominal interest rate" | translate}}:</span>
-      <span
-        fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.interestType">
-      <span fxFlex="40%">{{"labels.inputs.Interest method" | translate}}: </span>
-      <span fxFlex="60%">{{loansAccount.interestType}}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-      <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization" | translate}}:</span>
-      <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Amortization" | translate}}</span>
-      <span
-        fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Interest calculation period" | translate}}: </span>
-      <span
-        fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
-      <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period" | translate}}:</span>
-      <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-      <span fxFlex="40%">{{"labels.inputs.Arrears tolerance" | translate}}: </span>
-      <span
-        fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-      <span fxFlex="40%">{{"labels.inputs.Interest free period" | translate}}: </span>
-      <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Repayment strategy" | translate}}: </span>
-      <span
-        fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
-    </div>
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium" | translate}}</h3>
+  <div fxFlexFill *ngIf="loansAccount.fundId">
+    <span fxFlex="40%">{{ 'labels.inputs.Fund' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.fundId | find: loansAccountProductTemplate.fundOptions : 'id' : 'name' }}</span>
+  </div>
 
-    <mat-divider fxFlexFill></mat-divider>
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted on' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.submittedOnDate | dateFormat }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Disbursement on' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.externalId">
+    <span fxFlex="40%">{{ 'labels.inputs.External id' | translate }}:</span>
+    <span fxFlex="60%">
+      <mifosx-external-identifier externalId="{{ loansAccount.externalId }}"></mifosx-external-identifier>
+    </span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Principal' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.principal }} {{ loansAccountProductTemplate.currency.DisplaySymbol }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Loan term' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ loansAccount.loanTermFrequency }}
+      {{
+        loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
+      }}</span
+    >
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Number of repayments' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Repaid every' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ loansAccount.repaymentEvery }}
+      {{
+        loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
+      }}
+      {{
+        loansAccount.repaymentFrequencyNthDayType
+          | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions : 'id' : 'name'
+      }}
+      {{
+        loansAccount.repaymentFrequencyDayOfWeekType
+          | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions : 'id' : 'name'
+      }}</span
+    >
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
+    <span fxFlex="40%">{{ 'labels.inputs.First repayment on' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
+    <span fxFlex="40%">{{ 'labels.inputs.Interest charged from' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ loansAccount.interestRatePerPeriod }}&nbsp;&nbsp;{{
+        loansAccountProductTemplate.interestRateFrequencyType.value
+      }}</span
+    >
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.interestType">
+    <span fxFlex="40%">{{ 'labels.inputs.Interest method' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.interestType }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
+    <span fxFlex="40%">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.isEqualAmortization }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Amortization' | translate }}</span>
+    <span fxFlex="60%">{{
+      loansAccount.amortizationType | find: loansAccountProductTemplate.amortizationTypeOptions : 'id' : 'value'
+    }}</span>
+  </div>
 
-    <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-      <span fxFlex="40%">{{"labels.inputs.On principal payment" | translate}}: </span>
-      <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-      <span fxFlex="40%">{{"labels.inputs.On interest payment" | translate}}: </span>
-      <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-      <span fxFlex="40%">{{"labels.inputs.On Arrears Aging" | translate}}: </span>
-      <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.isTopup">
-      <span fxFlex="40%">{{"labels.inputs.Is Topup Loan" | translate}}? </span>
-      <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
-    </div>
-
-    <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate}}: </span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-      <span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}: </span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges" | translate}}</h3>
-
-      <mat-divider fxFlexFill></mat-divider>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
-
-        <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>
-        </ng-container>
-
-        <ng-container matColumnDef="chargeCalculationType">
-          <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> {{"labels.inputs.Amount" | translate}} </th>
-          <td mat-cell *matCellDef="let charge">
-            {{ charge.amount }}
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="chargeTimeType">
-          <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> {{"labels.inputs.Date" | translate}} </th>
-          <td mat-cell *matCellDef="let charge">
-            <span
-              *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-              {{(charge.dueDate | dateFormat) || 'Unassigned'}}
-            </span>
-            <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-              {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
-            </span>
-            <span
-              *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                    || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                    {{"labels.inputs.N/A" | translate}}
-            </span>
-          </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
-      </table>
-
-    </div>
-
-    <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges" | translate}}</h3>
-
-      <mat-divider fxFlex="98%"></mat-divider>
-
-      <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>
-        </ng-container>
-
-        <ng-container matColumnDef="type">
-          <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> {{"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> {{"labels.inputs.Collected On" | translate}} </th>
-          <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
-      </table>
-    </div>
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest calculation period' | translate }}: </span>
+    <span fxFlex="60%">{{
+      loansAccount.interestCalculationPeriodType
+        | find: loansAccountProductTemplate.interestCalculationPeriodTypeOptions : 'id' : 'value'
+    }}</span>
+  </div>
 
+  <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
+    <span fxFlex="40%">{{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
   </div>
 
-  <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>
-      {{"labels.buttons.Previous" | translate}}
-    </button>
-    <button mat-raised-button [routerLink]="['../']">
-      {{"labels.buttons.Cancel" | translate}}
-    </button>
-    <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-      {{"labels.buttons.Submit" | translate}}
-    </button>
+  <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
+    <span fxFlex="40%">{{ 'labels.inputs.Arrears tolerance' | translate }}: </span>
+    <span fxFlex="60%"
+      >{{ loansAccount.inArrearsTolerance }}&nbsp;{{ loansAccountProductTemplate.currency.displaySymbol }}</span
+    >
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
+    <span fxFlex="40%">{{ 'labels.inputs.Interest free period' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Repayment strategy' | translate }}: </span>
+    <span fxFlex="60%">{{
+      loansAccount.transactionProcessingStrategyCode
+        | find: loansAccountTemplate.transactionProcessingStrategyOptions : 'code' : 'name'
+    }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Moratorium' | translate }}</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
+    <span fxFlex="40%">{{ 'labels.inputs.On principal payment' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
+    <span fxFlex="40%">{{ 'labels.inputs.On interest payment' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
+    <span fxFlex="40%">{{ 'labels.inputs.On Arrears Aging' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.isTopup">
+    <span fxFlex="40%">{{ 'labels.inputs.Is Topup Loan' | translate }}? </span>
+    <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">{{ 'labels.inputs.Recalculate Interest' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled | yesNo }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
+    <span fxFlex="40%">{{ 'labels.inputs.Days in month' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
+
+    <mat-divider fxFlexFill></mat-divider>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
+      <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>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeCalculationType">
+        <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>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeTimeType">
+        <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>{{ 'labels.inputs.Date' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          <span
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+          >
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
+          </span>
+          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
+          </span>
+          <span
+            *ngIf="
+              !(
+                charge.chargeTimeType.value === 'Monthly Fee' ||
+                charge.chargeTimeType.value === 'Annual Fee' ||
+                charge.chargeTimeType.value === 'Specified due date' ||
+                charge.chargeTimeType.value === 'Weekly Fee'
+              )
+            "
+          >
+            {{ 'labels.inputs.N/A' | translate }}
+          </span>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
+    </table>
+  </div>
+
+  <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Overdue Charges' | translate }}</h3>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <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>
+      </ng-container>
+
+      <ng-container matColumnDef="type">
+        <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>{{ '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>{{ 'labels.inputs.Collected On' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns"></tr>
+    </table>
   </div>
+</div>
+
+<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>
+    {{ 'labels.buttons.Previous' | translate }}
+  </button>
+  <button mat-raised-button [routerLink]="['../']">
+    {{ 'labels.buttons.Cancel' | translate }}
+  </button>
+  <button mat-raised-button color="primary" (click)="submitEvent.emit()">
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
+</div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
index ff08f9a08a..db897a1266 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
@@ -1,129 +1,144 @@
 <form [formGroup]="loansAccountTermsForm">
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Term Options' | translate }}</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Loan Term' | translate }}</mat-label>
+      <input matInput required formControlName="loanTermFrequency" />
+      <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
+        {{ 'labels.inputs.Loan Term' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <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 }}
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
+        {{ 'labels.inputs.Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Number of repayments' | translate }}</mat-label>
+      <input type="number" matInput formControlName="numberOfRepayments" />
+      <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
+        {{ 'labels.inputs.Number of repayments' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
+      <mat-label>{{ 'labels.inputs.First repayment on' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="repaymentsPicker"
+        formControlName="repaymentsStartingFromDate"
+      />
+      <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
+      <mat-datepicker #repaymentsPicker></mat-datepicker>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Repaid Every' | translate }}</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Repaid every' | translate }}</mat-label>
+      <input
+        matInput
+        required
+        formControlName="repaymentEvery"
+        [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery"
+      />
+      <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
+        {{ 'labels.inputs.Repaid every' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <mat-select
+        formControlName="repaymentFrequencyType"
+        required
+        [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery"
+      >
+        <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
+          {{ repaymentFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
+      <mat-label>{{ 'labels.inputs.Select On' | translate }}</mat-label>
+      <mat-select formControlName="repaymentFrequencyNthDayType">
+        <mat-option
+          *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
+          [value]="repaymentFrequencyNthDayType.id"
+        >
+          {{ repaymentFrequencyNthDayType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
+      <mat-label>{{ 'labels.inputs.Select Day' | translate }}</mat-label>
+      <mat-select formControlName="repaymentFrequencyDayOfWeekType">
+        <mat-option
+          *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
+          [value]="repaymentFrequencyDayOfWeekType.id"
+        >
+          {{ repaymentFrequencyDayOfWeekType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
+      <mat-label>{{ 'labels.inputs.Interest charged from' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="interestPicker"
+        formControlName="interestChargedFromDate"
+      />
+      <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
+      <mat-datepicker #interestPicker></mat-datepicker>
+    </mat-form-field>
 
-    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate}}</h4>
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Loan Term" | translate}}</mat-label>
-        <input matInput required formControlName="loanTermFrequency">
-        <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
-          {{"labels.inputs.Loan Term" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%">
-        <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 }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
-          {{"labels.inputs.Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Number of repayments" | translate}}</mat-label>
-        <input type="number" matInput formControlName="numberOfRepayments">
-        <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
-          {{"labels.inputs.Number of repayments" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
-        <mat-label>{{"labels.inputs.First repayment on" | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
-          formControlName="repaymentsStartingFromDate">
-        <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
-        <mat-datepicker #repaymentsPicker></mat-datepicker>
-      </mat-form-field>
-
-      <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}}</h4>
-
+    <ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Repaid every" | translate}}</mat-label>
-        <input matInput required formControlName="repaymentEvery"
-          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
-        <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
-          {{"labels.inputs.Repaid every" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-        </mat-error>
+        <mat-label>{{ 'labels.inputs.Nominal interest rate' | translate }}</mat-label>
+        <input type="number" matInput formControlName="interestRatePerPeriod" />
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
-        <mat-select formControlName="repaymentFrequencyType" required
-          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.repaymentEvery">
-          <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData"
-            [value]="repaymentFrequencyType.id">
-            {{ repaymentFrequencyType.value }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
-        <mat-label>{{"labels.inputs.Select On" | translate}}</mat-label>
-        <mat-select formControlName="repaymentFrequencyNthDayType">
-          <mat-option
-            *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
-            [value]="repaymentFrequencyNthDayType.id">
-            {{ repaymentFrequencyNthDayType.value }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
-        <mat-label>{{"labels.inputs.Select Day" | translate}}</mat-label>
-        <mat-select formControlName="repaymentFrequencyDayOfWeekType">
-          <mat-option
-            *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
-            [value]="repaymentFrequencyDayOfWeekType.id">
-            {{ repaymentFrequencyDayOfWeekType.value }}
+        <mat-label>{{ 'labels.inputs.Interest method' | translate }}</mat-label>
+        <mat-select
+          [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
+          formControlName="interestType"
+        >
+          <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
+            {{ interestType.value }}
           </mat-option>
         </mat-select>
       </mat-form-field>
-
-      <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
-        <mat-label>{{"labels.inputs.Interest charged from" | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
-          formControlName="interestChargedFromDate">
-        <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
-        <mat-datepicker #interestPicker></mat-datepicker>
-      </mat-form-field>
-
-    <ng-container *ngIf="!loansAccountProductTemplate?.isLoanProductLinkedToFloatingRate">
-
-      <mat-form-field fxFlex="48%">
-        <mat-label>{{"labels.inputs.Nominal interest rate" | translate}}</mat-label>
-        <input type="number" matInput formControlName="interestRatePerPeriod">
-      </mat-form-field>
-
-        <mat-form-field fxFlex="48%">
-          <mat-label>{{"labels.inputs.Interest method" | translate}}</mat-label>
-          <mat-select [disabled]="!loansAccountProductTemplate?.product.allowAttributeOverrides.interestType"
-            formControlName="interestType">
-            <mat-option *ngFor="let interestType of interestTypeData"
-              [value]="interestType.id">
-              {{ interestType.value }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
     </ng-container>
-
-
-
-    </div>
-    <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>
-        {{"labels.buttons.Previous" | translate}}
-      </button>
-      <button mat-raised-button matStepperNext>
-        {{"labels.buttons.Next" | translate}}
-        <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-      </button>
-    </div>
-
+  </div>
+  <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>
+      {{ 'labels.buttons.Previous' | translate }}
+    </button>
+    <button mat-raised-button matStepperNext>
+      {{ 'labels.buttons.Next' | translate }}
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+    </button>
+  </div>
 </form>
diff --git a/src/app/loans/glim-account/glim-account.component.html b/src/app/loans/glim-account/glim-account.component.html
index ed200327df..30d5515dea 100644
--- a/src/app/loans/glim-account/glim-account.component.html
+++ b/src/app/loans/glim-account/glim-account.component.html
@@ -1,46 +1,46 @@
 <mat-card class="loan-card">
-
   <mat-card-content>
-
-    <h2> {{"labels.heading.GLIM Account Overview" | translate}}</h2>
+    <h2>{{ 'labels.heading.GLIM Account Overview' | translate }}</h2>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="loanId">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Id' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          {{element.childLoanId}} </td>
+          {{ element.childLoanId }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="clientId">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client ID" | translate}} </th>
-        <td mat-cell *matCellDef="let element">{{element.clientId}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.clientId }}</td>
       </ng-container>
 
       <ng-container matColumnDef="clientName">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Name" | translate}} </th>
-        <td mat-cell *matCellDef="let element">{{element.clientName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.clientName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="loanAccountNumber">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Account Number" | translate}} </th>
-        <td mat-cell *matCellDef="let element"> {{element.childLoanAccountNo}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account Number' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.childLoanAccountNo }}</td>
       </ng-container>
 
       <ng-container matColumnDef="clientPrincipalLoan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client Principal Loan" | translate}} </th>
-        <td mat-cell *matCellDef="let element" > {{element.childPrincipalAmount}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Principal Loan' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.childPrincipalAmount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="groupPrincipalLoan">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Group Principal Loan" | translate}} </th>
-        <td mat-cell *matCellDef="let element" > {{element.parentPrincipalAmount}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Group Principal Loan' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.parentPrincipalAmount }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row  [routerLink]="['../../', row.childLoanId, 'general']" *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr
+        mat-row
+        [routerLink]="['../../', row.childLoanId, 'general']"
+        *matRowDef="let row; columns: displayedColumns"
+      ></tr>
     </table>
-
   </mat-card-content>
 </mat-card>
diff --git a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
index 730087c6fc..38f67ec3b9 100644
--- a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
@@ -1,7 +1,6 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{"labels.inputs.Charge" | translate}}</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,29 +11,33 @@
   <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>
-      {{"labels.buttons.Add" | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource"
-    [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </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> {{"labels.inputs.Type" | translate}} </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> {{"labels.inputs.Amount" | translate}} </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,36 +47,52 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate}} </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> {{"labels.inputs.Date" | translate}} </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'">
-          {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+        >
+          {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
+          {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
         </span>
         <span
-          *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                      || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                      {{"labels.inputs.N/A" | translate}}
+          *ngIf="
+            !(
+              charge.chargeTimeType.value === 'Monthly Fee' ||
+              charge.chargeTimeType.value === 'Annual Fee' ||
+              charge.chargeTimeType.value === 'Specified due date' ||
+              charge.chargeTimeType.value === 'Weekly Fee'
+            )
+          "
+        >
+          {{ '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)">
+        <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)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </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>
@@ -82,52 +101,49 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
   </table>
 
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Overdue Charges" | translate}}</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> {{"labels.inputs.name" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
+      <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> {{"labels.inputs.Type" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+      <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> {{"labels.inputs.Amount" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
+      <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> {{"labels.inputs.Collected On" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
-    {{"labels.buttons.Next" | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    {{"labels.buttons.Cancel" | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
 </div>
diff --git a/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html b/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
index 4cb94353db..1a683bdcbc 100644
--- a/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
@@ -1,51 +1,68 @@
 <form [formGroup]="datatableForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
       <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+        <mat-label>{{ getInputName(datatableInput) }}</mat-label>
 
-        <mat-label>{{getInputName(datatableInput)}}</mat-label>
-
-        <mat-select *ngIf="isDropdown(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}">
+        <mat-select
+          *ngIf="isDropdown(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        >
           <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
             {{ code.value }}
           </mat-option>
         </mat-select>
 
-        <input matInput type="number" *ngIf="isNumeric(datatableInput.columnDisplayType)"
-        formControlName="{{datatableInput.controlName}}">
+        <input
+          matInput
+          type="number"
+          *ngIf="isNumeric(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        />
 
-        <input matInput *ngIf="isString(datatableInput.columnDisplayType)"
-        formControlName="{{datatableInput.controlName}}">
+        <input
+          matInput
+          *ngIf="isString(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        />
 
-        <textarea matInput *ngIf="isText(datatableInput.columnDisplayType)"
-        formControlName="{{datatableInput.controlName}}"></textarea>
+        <textarea
+          matInput
+          *ngIf="isText(datatableInput.columnDisplayType)"
+          formControlName="{{ datatableInput.controlName }}"
+        ></textarea>
 
         <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
-          <input matInput [matDatepicker]="datePicker" formControlName="{{datatableInput.controlName}}" class="date-picker">
+          <input
+            matInput
+            [matDatepicker]="datePicker"
+            formControlName="{{ datatableInput.controlName }}"
+            class="date-picker"
+          />
           <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
           <mat-datepicker #datePicker></mat-datepicker>
         </span>
       </mat-form-field>
 
-      <mat-checkbox *ngIf="isBoolean(datatableInput.columnDisplayType)" formControlName="{{datatableInput.controlName}}"
-        labelPosition="before" class="margin-v">
-        {{getInputName(datatableInput)}}
+      <mat-checkbox
+        *ngIf="isBoolean(datatableInput.columnDisplayType)"
+        formControlName="{{ datatableInput.controlName }}"
+        labelPosition="before"
+        class="margin-v"
+      >
+        {{ getInputName(datatableInput) }}
       </mat-checkbox>
     </div>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
index 97431dbeaf..7c4365da69 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
@@ -1,10 +1,12 @@
 <form [formGroup]="loansAccountDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="72%">
-      <mat-label>{{"labels.inputs.Product Name" | translate}}</mat-label>
-      <mat-select required matTooltip="{{ 'tooltips.Name of the loan product' | translate}}" formControlName="productId">
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <mat-select
+        required
+        matTooltip="{{ 'tooltips.Name of the loan product' | translate }}"
+        formControlName="productId"
+      >
         <mat-option>
           <ngx-mat-select-search [formControl]="filterFormCtrl"></ngx-mat-select-search>
         </mat-option>
@@ -13,21 +15,24 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.Product Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
   </div>
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.External id" | translate}}</mat-label>
-      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate}}">
+      <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
+      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loanProductSelected">
-      <mat-label>{{"labels.inputs.Loan officer" | translate}}</mat-label>
-      <mat-select formControlName="loanOfficerId" matTooltip="{{ 'tooltips.Financial institution representative' | translate}}">
+      <mat-label>{{ 'labels.inputs.Loan officer' | translate }}</mat-label>
+      <mat-select
+        formControlName="loanOfficerId"
+        matTooltip="{{ 'tooltips.Financial institution representative' | translate }}"
+      >
         <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
           {{ loanOfficer.displayName }}
         </mat-option>
@@ -35,8 +40,8 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Loan Purpose" | translate}}</mat-label>
-      <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate}}">
+      <mat-label>{{ 'labels.inputs.Loan Purpose' | translate }}</mat-label>
+      <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate }}">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
           {{ loanPurpose.name }}
         </mat-option>
@@ -44,7 +49,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Fund" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Fund' | translate }}</mat-label>
       <mat-select formControlName="fundId">
         <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
           {{ fund.name }}
@@ -53,33 +58,49 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
-      <mat-label>{{"labels.inputs.Submitted on" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" matTooltip="{{ 'tooltips.Date the loan account application' | translate}}" required
-        formControlName="submittedOnDate">
+      <mat-label>{{ 'labels.inputs.Submitted on' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submitPicker"
+        matTooltip="{{ 'tooltips.Date the loan account application' | translate }}"
+        required
+        formControlName="submittedOnDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="submitPicker"></mat-datepicker-toggle>
       <mat-datepicker #submitPicker></mat-datepicker>
       <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-        {{"labels.inputs.Submitted on" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Submitted on' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
-      <mat-label>{{"labels.inputs.Disbursement on" | translate}}</mat-label>
-      <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" matTooltip="{{ 'tooltips.Date that the loan account disbursed' | translate}}" required
-        formControlName="expectedDisbursementDate">
+      <mat-label>{{ 'labels.inputs.Disbursement on' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="loansAccountDetailsForm.value.submittedOnDate"
+        [max]="maxDate"
+        [matDatepicker]="disbursementPicker"
+        matTooltip="{{ 'tooltips.Date that the loan account disbursed' | translate }}"
+        required
+        formControlName="expectedDisbursementDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="disbursementPicker"></mat-datepicker-toggle>
       <mat-datepicker #disbursementPicker></mat-datepicker>
       <mat-error *ngIf="loansAccountDetailsForm.controls.submittedOnDate?.hasError('required')">
-        {{"labels.inputs.Disbursement on" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Disbursement on' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Savings Linkage' | translate }}</h3>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Link savings" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Link savings' | translate }}</mat-label>
       <mat-select formControlName="linkAccountId">
         <mat-option *ngFor="let savingaccount of accountLinkingOptions" [value]="savingaccount.id">
           ({{ savingaccount.accountNo }}) {{ savingaccount.productName }}
@@ -88,22 +109,21 @@ <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate}}</
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
-      <p>{{"labels.inputs.Create standing instructions at disbursement" | translate}}</p>
+      <p>{{ 'labels.inputs.Create standing instructions at disbursement' | translate }}</p>
     </mat-checkbox>
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
     <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-      {{"labels.buttons.Cancel" | translate}}
+      {{ 'labels.buttons.Cancel' | translate }}
     </button>
   </div>
-
 </form>
diff --git a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
index d45c8e2b3a..3481f8cf0d 100644
--- a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
@@ -1,296 +1,321 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Details" | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Product" | translate}}:</span>
-    <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-    <span fxFlex="40%">{{"labels.inputs.Loan officer" | translate}}:</span>
-    <span
-      fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Loan officer' | translate }}:</span>
+    <span fxFlex="60%">{{
+      loansAccount.loanOfficerId | find: loansAccountProductTemplate.loanOfficerOptions : 'id' : 'displayName'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-    <span fxFlex="40%">{{"labels.inputs.Loan purpose" | translate}}:</span>
-    <span
-      fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Loan purpose' | translate }}:</span>
+    <span fxFlex="60%">{{
+      loansAccount.loanPurposeId | find: loansAccountProductTemplate.loanPurposeOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.fundId">
-    <span fxFlex="40%">{{"labels.inputs.Fund" | translate}}:</span>
-    <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Fund' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.fundId | find: loansAccountProductTemplate.fundOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Submitted on" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted on' | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Disbursement on" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Disbursement on' | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.externalId">
-    <span fxFlex="40%">{{"labels.inputs.External id" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External id' | translate }}:</span>
     <span fxFlex="60%">
-      <mifosx-external-identifier externalId="{{loansAccount.externalId}}"></mifosx-external-identifier>
+      <mifosx-external-identifier externalId="{{ loansAccount.externalId }}"></mifosx-external-identifier>
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Terms" | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Principal" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Principal' | translate }}:</span>
     <span fxFlex="60%">
-      {{ loansAccount.principalAmount | currency:loansAccountProductTemplate.currency.code:'symbol-narrow':'1.2-2'}}
-      <span class="m-l-5">{{loansAccountProductTemplate.currency.code}}</span>
+      {{
+        loansAccount.principalAmount | currency: loansAccountProductTemplate.currency.code : 'symbol-narrow' : '1.2-2'
+      }}
+      <span class="m-l-5">{{ loansAccountProductTemplate.currency.code }}</span>
     </span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Loan Term" | translate}}:</span>
-    <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
-      {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Loan Term' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ loansAccount.loanTermFrequency }}
+      {{
+        loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Number of repayments" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Number of repayments' | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Repaid every" | translate}}:</span>
-    <span fxFlex="60%">{{loansAccount.repaymentEvery}}
-      {{loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}
-      {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
-      {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Repaid every' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ loansAccount.repaymentEvery }}
+      {{
+        loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
+      }}
+      {{
+        loansAccount.repaymentFrequencyNthDayType
+          | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions : 'id' : 'name'
+      }}
+      {{
+        loansAccount.repaymentFrequencyDayOfWeekType
+          | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions : 'id' : 'name'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="productEnableDownPayment">
-    <span fxFlex="40%">{{ 'labels.inputs.Enable Down Payments' | translate}}:</span>
-    <span  fxFlex="60%">{{ loansAccount.enableDownPayment | yesNo }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.enableDownPayment | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-    <span fxFlex="40%">{{"labels.inputs.First repayment on" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.First repayment on' | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-    <span fxFlex="40%">{{"labels.inputs.Interest charged from" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest charged from' | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-    <span fxFlex="40%">{{"labels.inputs.Nominal interest rate" | translate}}:</span>
-    <span
-      fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
+    <span fxFlex="60%"
+      >{{ loansAccount.interestRatePerPeriod }}&nbsp;&nbsp;{{
+        loansAccountProductTemplate.interestRateFrequencyType.value
+      }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestType">
-    <span fxFlex="40%">{{"labels.inputs.Interest method" | translate}}: </span>
-    <span fxFlex="60%">{{loansAccount.interestType}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest method' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.interestType }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-    <span fxFlex="40%">{{"labels.inputs.Is Equal Amortization" | translate}}:</span>
-    <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
+    <span fxFlex="60%">{{ loansAccount.isEqualAmortization }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Amortization" | translate}}</span>
-    <span
-      fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Amortization' | translate }}</span>
+    <span fxFlex="60%">{{
+      loansAccount.amortizationType | find: loansAccountProductTemplate.amortizationTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Interest calculation period" | translate}}: </span>
-    <span
-      fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest calculation period' | translate }}: </span>
+    <span fxFlex="60%">{{
+      loansAccount.interestCalculationPeriodType
+        | find: loansAccountProductTemplate.interestCalculationPeriodTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
-    <span fxFlex="40%">{{"labels.inputs.Calculate interest for exact days in partial period" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}:</span>
     <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-    <span fxFlex="40%">{{"labels.inputs.Arrears tolerance" | translate}}: </span>
-    <span
-      fxFlex="60%">{{loansAccount.inArrearsTolerance}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Arrears tolerance' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccount.inArrearsTolerance }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-    <span fxFlex="40%">{{"labels.inputs.Interest free period" | translate}}: </span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest free period' | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Repayment strategy" | translate}}: </span>
-    <span
-      fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountProductTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Repayment strategy' | translate }}: </span>
+    <span fxFlex="60%">{{
+      loansAccount.transactionProcessingStrategyCode
+        | find: loansAccountProductTemplate.transactionProcessingStrategyOptions : 'code' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%"> {{"labels.inputs.Installment Amount" | translate}} </span>
+    <span fxFlex="40%"> {{ 'labels.inputs.Installment Amount' | translate }} </span>
     <span fxFlex="60%"> {{ loansAccount.fixedEmiAmount | formatNumber }} </span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%"> {{"labels.inputs.Balloon Repayment Amount" | translate}} </span>
+    <span fxFlex="40%"> {{ 'labels.inputs.Balloon Repayment Amount' | translate }} </span>
     <span fxFlex="60%"> {{ loansAccount.balloonRepaymentAmount | formatNumber }} </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Moratorium" | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Moratorium' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-    <span fxFlex="40%">{{"labels.inputs.On principal payment" | translate}}: </span>
+    <span fxFlex="40%">{{ 'labels.inputs.On principal payment' | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-    <span fxFlex="40%">{{"labels.inputs.On interest payment" | translate}}: </span>
+    <span fxFlex="40%">{{ 'labels.inputs.On interest payment' | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-    <span fxFlex="40%">{{"labels.inputs.On Arrears Aging" | translate}}: </span>
+    <span fxFlex="40%">{{ 'labels.inputs.On Arrears Aging' | translate }}: </span>
     <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%"> {{"labels.inputs.Enable installment level Delinquency" | translate}} </span>
+    <span fxFlex="40%"> {{ 'labels.inputs.Enable installment level Delinquency' | translate }} </span>
     <span fxFlex="60%"> {{ loansAccount.enableInstallmentLevelDelinquency | yesNo }} </span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.isTopup">
-    <span fxFlex="40%">{{"labels.inputs.Is Topup Loan" | translate}}? </span>
+    <span fxFlex="40%">{{ 'labels.inputs.Is Topup Loan' | translate }}? </span>
     <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate}}: </span>
-    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Recalculate Interest' | translate }}: </span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-    <span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}: </span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in month' | translate }}: </span>
     <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Charges" | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </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> {{"labels.inputs.Type" | translate}} </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> {{"labels.inputs.Amount" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate}} </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> {{"labels.inputs.Date" | translate}} </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'">
-            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+          >
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
+            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
           </span>
           <span
-            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                  || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-                  {{"labels.inputs.N/A" | translate}}
+            *ngIf="
+              !(
+                charge.chargeTimeType.value === 'Monthly Fee' ||
+                charge.chargeTimeType.value === 'Annual Fee' ||
+                charge.chargeTimeType.value === 'Specified due date' ||
+                charge.chargeTimeType.value === 'Weekly Fee'
+              )
+            "
+          >
+            {{ 'labels.inputs.N/A' | translate }}
           </span>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 fxFlex="98%" class="mat-h3">{{"labels.heading.Overdue Charges" | translate}}</h3>
+    <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Overdue Charges' | translate }}</h3>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <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>
+        <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> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+        <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> {{"labels.inputs.Amount" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
+        <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> {{"labels.inputs.Collected On" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns"></tr>
     </table>
   </div>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../..']">
-    {{"labels.buttons.Cancel" | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{"labels.buttons.Submit" | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
index 67decd15a0..9a41a38a28 100644
--- a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
@@ -1,25 +1,26 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
   <button mat-flat-button color="primary" (click)="showRepaymentInfo()">
-    <fa-icon icon="calendar" class="m-r-10"></fa-icon>{{"labels.inputs.Generate Repayment Schedule" | translate}}
+    <fa-icon icon="calendar" class="m-r-10"></fa-icon>{{ 'labels.inputs.Generate Repayment Schedule' | translate }}
   </button>
 
-  <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"
-    [currencyCode]="currencyCode">
+  <mifosx-repayment-schedule-tab
+    fxFlex="100%"
+    [repaymentScheduleDetails]="repaymentScheduleDetails"
+    [currencyCode]="currencyCode"
+  >
   </mifosx-repayment-schedule-tab>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{"labels.buttons.Next" | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    {{"labels.buttons.Cancel" | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
 </div>
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 241d29c637..0bd34d388e 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
@@ -1,476 +1,634 @@
 <form [formGroup]="loansAccountTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mifosx-input-amount fxFlex="48%"  *ngIf="currency" [currency]="currency" [isRequired]="true"
+    <mifosx-input-amount
+      fxFlex="48%"
+      *ngIf="currency"
+      [currency]="currency"
+      [isRequired]="true"
       [inputFormControl]="loansAccountTermsForm.controls.principalAmount"
-      [inputLabel]="'Principal'">
+      [inputLabel]="'Principal'"
+    >
     </mifosx-input-amount>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate}} <i class="fas fa-question" matTooltip="The loan term parameter in loan accounts
-      is the default-calculated field based on the number of repayments and repaid every value entered by the user"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.heading.Term Options' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="The loan term parameter in loan accounts
+      is the default-calculated field based on the number of repayments and repaid every value entered by the user"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.Loan Term" | translate}}</mat-label>
-      <input type="number" matInput required disabled formControlName="loanTermFrequency">
+      <mat-label>{{ 'labels.inputs.Loan Term' | translate }}</mat-label>
+      <input type="number" matInput required disabled formControlName="loanTermFrequency" />
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
-        {{"labels.inputs.Loan Term" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Loan Term' | 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.Frequency" | translate}}</mat-label>
+      <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 | translateKey:'catalogs' }}
+          {{ type.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
-        {{"labels.inputs.Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="20%" *ngIf="hasFixedLength()">
-      <mat-label>{{"labels.inputs.Fixed Length" | translate}}</mat-label>
-      <input type="number" matInput formControlName="fixedLength">
+      <mat-label>{{ 'labels.inputs.Fixed Length' | translate }}</mat-label>
+      <input type="number" matInput formControlName="fixedLength" />
     </mat-form-field>
-    <span fxFlex="20%" *ngIf="hasFixedLength()" class="label-field">{{ loansAccountTermsForm.value.loanTermFrequencyType | find:termFrequencyTypeData:'id':'value' }}</span>
+    <span fxFlex="20%" *ngIf="hasFixedLength()" class="label-field">{{
+      loansAccountTermsForm.value.loanTermFrequencyType | find: termFrequencyTypeData : 'id' : 'value'
+    }}</span>
 
-    <h4 fxFlex="98%" class="mat-h4">Repayments </h4>
+    <h4 fxFlex="98%" class="mat-h4">Repayments</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Number of repayments" | translate}}</mat-label>
-      <input type="number" matInput formControlName="numberOfRepayments" matTooltip="Enter the total count of repayments that loan schedule has excluding the down-payment. Example:
-      If the loan account has 4 Installments including down-payment then number of repayments is equal to 3">
+      <mat-label>{{ 'labels.inputs.Number of repayments' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="numberOfRepayments"
+        matTooltip="Enter the total count of repayments that loan schedule has excluding the down-payment. Example:
+      If the loan account has 4 Installments including down-payment then number of repayments is equal to 3"
+      />
       <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
-        {{"labels.inputs.Number of repayments" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Number of repayments' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="23%" (click)="repaymentsPicker.open()">
-      <mat-label>{{"labels.inputs.First repayment on" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" matTooltip="{{ 'tooltips.May be entered to override' | translate}}" [matDatepicker]="repaymentsPicker"
-        formControlName="repaymentsStartingFromDate">
+      <mat-label>{{ 'labels.inputs.First repayment on' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        matTooltip="{{ 'tooltips.May be entered to override' | translate }}"
+        [matDatepicker]="repaymentsPicker"
+        formControlName="repaymentsStartingFromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="repaymentsPicker"></mat-datepicker-toggle>
       <mat-datepicker #repaymentsPicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="23%" (click)="interestPicker.open()">
-      <mat-label>{{"labels.inputs.Interest charged from" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker" matTooltip="{{ 'tooltips.May be entered to override the date' | translate}}"
-        formControlName="interestChargedFromDate">
+      <mat-label>{{ 'labels.inputs.Interest charged from' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="interestPicker"
+        matTooltip="{{ 'tooltips.May be entered to override the date' | translate }}"
+        formControlName="interestChargedFromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="interestPicker"></mat-datepicker-toggle>
       <mat-datepicker #interestPicker></mat-datepicker>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.heading.Repaid Every' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.Repaid every" | translate}}</mat-label>
-      <input type="number" matInput required formControlName="repaymentEvery"
-      matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate}}">
+      <mat-label>{{ 'labels.inputs.Repaid every' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        required
+        formControlName="repaymentEvery"
+        matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate }}"
+      />
       <mat-error *ngIf="loansAccountTermsForm.controls.repaymentEvery.hasError('required')">
-        {{"labels.inputs.Repaid every" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Repaid every' | 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.Frequency" | translate}}</mat-label>
+      <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 | translateKey:'catalogs' }}
+          {{ repaymentFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="14%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
-      <mat-label>{{"labels.inputs.Select On" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Select On' | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyNthDayType">
-        <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
-          [value]="repaymentFrequencyNthDayType.id">
-          {{ repaymentFrequencyNthDayType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
+          [value]="repaymentFrequencyNthDayType.id"
+        >
+          {{ repaymentFrequencyNthDayType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="14%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
-      <mat-label>{{"labels.inputs.Select Day" | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Select Day' | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
-        <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
-          [value]="repaymentFrequencyDayOfWeekType.id">
-          {{ repaymentFrequencyDayOfWeekType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
+          [value]="repaymentFrequencyDayOfWeekType.id"
+        >
+          {{ repaymentFrequencyDayOfWeekType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="Leave this checkbox checked if the loan has Down Payment, A Down Payment is
-    a sum a buyer pays upfront when purchasing a good. It represents a percentage of the total purchase price, and the balance is usually financed" class="margin-b" *ngIf="productEnableDownPayment">
-      {{'labels.inputs.Enable Down Payment' | translate}}
+    <mat-checkbox
+      fxFlex="73%"
+      labelPosition="before"
+      formControlName="enableDownPayment"
+      matTooltip="Leave this checkbox checked if the loan has Down Payment, A Down Payment is
+    a sum a buyer pays upfront when purchasing a good. It represents a percentage of the total purchase price, and the balance is usually financed"
+      class="margin-b"
+      *ngIf="productEnableDownPayment"
+    >
+      {{ 'labels.inputs.Enable Down Payment' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Nominal interest rate' | translate }}</h4>
 
     <ng-container *ngIf="!loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
-
       <mat-form-field fxFlex="23%">
-        <mat-label>{{"labels.inputs.Nominal interest rate" | translate}} %</mat-label>
-        <input type="number" matInput formControlName="interestRatePerPeriod">
+        <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-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
         <mat-select formControlName="interestRateFrequencyType">
-          <mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
-            {{ interestRateFrequencyType.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData"
+            [value]="interestRateFrequencyType.id"
+          >
+            {{ interestRateFrequencyType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Nominal interest rate frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ '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-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 | translateKey:'catalogs' }}
+            {{ interestType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <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-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 | translateKey:'catalogs' }}
+            {{ amortizationType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
-          {{"labels.inputs.Amortization Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Amortization Type' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <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-label>{{ 'labels.inputs.Principal Percentage Per Installment' | translate }}</mat-label>
+        <input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment" />
       </mat-form-field>
 
-      <mat-checkbox fxFlex="23%" formControlName="isEqualAmortization"
-        [checked]="loansAccountTermsData?.isEqualAmortization">
-        <p>{{"labels.inputs.Is Equal Amortization" | translate}}</p>
+      <mat-checkbox
+        fxFlex="23%"
+        formControlName="isEqualAmortization"
+        [checked]="loansAccountTermsData?.isEqualAmortization"
+      >
+        <p>{{ 'labels.inputs.Is Equal Amortization' | translate }}</p>
       </mat-checkbox>
-
     </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-label>{{ 'labels.inputs.Interest Method' | translate }}</mat-label>
           <mat-select formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-              {{ interestType.value | translateKey:'catalogs' }}
+              {{ interestType.value | translateKey: 'catalogs' }}
             </mat-option>
           </mat-select>
         </mat-form-field>
 
         <mat-form-field fxFlex="48%">
-          <mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
-          <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
+          <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 | translateKey:'catalogs' }}
+              {{ amortizationType.value | translateKey: 'catalogs' }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
-            {{"labels.inputs.Amortization Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Amortization Type' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
-          <p>{{"labels.inputs.Is Floating Rate" | translate}}?</p>
+          <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>
+    <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 | translateKey:'catalogs' }}</p></span>
+      <span fxFlex="40%"
+        ><p>{{ 'labels.inputs.Loan Schedule Type' | translate }}</p></span
+      >
+      <span fxFlex="60%"
+        ><p>{{ loanScheduleType.value | translateKey: 'catalogs' }}</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 | translateKey:'catalogs' }}
+      <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 | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
-        {{"labels.inputs.Repayment Strategy" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Repayment Strategy' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </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-label>{{ 'labels.inputs.Installment Amount' | translate }}</mat-label>
+      <input type="number" matInput formControlName="fixedEmiAmount" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Balloon Repayment Amount" | translate}}</mat-label>
-      <input type="number" matInput formControlName="balloonRepaymentAmount">
+      <mat-label>{{ 'labels.inputs.Balloon Repayment Amount' | translate }}</mat-label>
+      <input type="number" matInput formControlName="balloonRepaymentAmount" />
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations" | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Interest Calculations' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest calculation period" | translate}}</mat-label>
-      <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}">
-        <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
-          [value]="interestCalculationPeriodType.id">
-          {{ interestCalculationPeriodType.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Interest calculation period' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCalculationPeriodType"
+        matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate }}"
+      >
+        <mat-option
+          *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
+          [value]="interestCalculationPeriodType.id"
+        >
+          {{ interestCalculationPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion" matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate}}">
-      <p>{{"labels.inputs.Calculate interest for exact days in partial period" | translate}}</p>
+    <mat-checkbox
+      fxFlex="48%"
+      formControlName="allowPartialPeriodInterestCalcualtion"
+      matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate }}"
+    >
+      <p>{{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}</p>
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Arrears tolerance" | translate}} </mat-label>
-      <input matInput type="number" formControlName="inArrearsTolerance" matTooltip="{{ 'tooltips.With Arrears tolerance' | translate}}">
+      <mat-label>{{ 'labels.inputs.Arrears tolerance' | translate }} </mat-label>
+      <input
+        matInput
+        type="number"
+        formControlName="inArrearsTolerance"
+        matTooltip="{{ 'tooltips.With Arrears tolerance' | translate }}"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Interest free period" | translate}}</mat-label>
-      <input matInput formControlName="graceOnInterestCharged" matTooltip="{{ 'tooltips.If the Interest Free Period' | translate}}">
+      <mat-label>{{ 'labels.inputs.Interest free period' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="graceOnInterestCharged"
+        matTooltip="{{ 'tooltips.If the Interest Free Period' | translate }}"
+      />
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.heading.Moratorium' | translate }}
+      <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate }}"></i>
+    </h4>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.Grace on principal payment" | translate}}</mat-label>
-      <input type="number" matInput formControlName="graceOnPrincipalPayment">
+      <mat-label>{{ 'labels.inputs.Grace on principal payment' | translate }}</mat-label>
+      <input type="number" matInput formControlName="graceOnPrincipalPayment" />
     </mat-form-field>
 
     <mat-form-field fxFlex="23%">
-      <mat-label>{{"labels.inputs.Grace on interest payment" | translate}}</mat-label>
-      <input type="number" matInput formControlName="graceOnInterestPayment">
+      <mat-label>{{ 'labels.inputs.Grace on interest payment' | translate }}</mat-label>
+      <input type="number" matInput formControlName="graceOnInterestPayment" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.On arrears ageing" | translate}}</mat-label>
-      <input type="number" matInput formControlName="graceOnArrearsAgeing">
+      <mat-label>{{ 'labels.inputs.On arrears ageing' | translate }}</mat-label>
+      <input type="number" matInput formControlName="graceOnArrearsAgeing" />
     </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>
+      <p>
+        <span fxFlex="53%"
+          ><b>{{ 'labels.inputs.Delinquency Bucket' | translate }}</b></span
+        >
+        <span fxFlex="48%">{{ loanProduct?.delinquencyBucket.name }}</span>
+      </p>
     </div>
 
     <ng-container fxFlex="48%" *ngIf="isDelinquencyEnabled()">
       <mat-checkbox formControlName="enableInstallmentLevelDelinquency">
-        <p>{{'labels.inputs.Enable installment level Delinquency' | translate}}</p>
+        <p>{{ 'labels.inputs.Enable installment level Delinquency' | translate }}</p>
       </mat-checkbox>
     </ng-container>
 
     <ng-container fxFlex="48%" *ngIf="loansAccountTermsData?.isTopup">
-
       <mat-checkbox fxFlex="20%" formControlName="isTopup">
-        <p>{{"labels.inputs.Is Topup Loan" | translate}}?</p>
+        <p>{{ 'labels.inputs.Is Topup Loan' | translate }}?</p>
       </mat-checkbox>
 
       <mat-form-field fxFlex="24%" *ngIf="loansAccountTermsForm.controls.isTopup.value">
-        <mat-label>{{"labels.inputs.Loan closed with Topup" | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Loan closed with Topup' | translate }}</mat-label>
         <mat-select formControlName="loanIdToClose">
           <mat-option *ngFor="let clientActiveLoan of clientActiveLoanData" [value]="clientActiveLoan.id">
             {{ clientActiveLoan.accountNo }}
           </mat-option>
         </mat-select>
       </mat-form-field>
-
     </ng-container>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%"><b>{{"labels.inputs.Recalculate Interest" | translate}}</b></span>
-      <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled| yesNo }}</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 | translateKey:'catalogs' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Days in year' | translate }}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">{{"labels.inputs.Advance payments adjustment type" | translate}}</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
         <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
       </div>
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateKey:'catalogs' }}</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Days in month' | translate }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateKey: 'catalogs' }}</span>
       </div>
-
     </ng-container>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-
       <div fxFlexFill>
-        <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value | translateKey:'catalogs' }}</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}</span>
+        <span fxFlex="60%">{{
+          loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
+            | translateKey: 'catalogs'
+        }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation" | translate}}</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
         <span fxFlex="60%">
-          <span>{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.value}}</span>
-          <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id === 3 &&
-                loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyWeekday">
-            on {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
-          <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
-                loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyOnDay">on day
-            {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyOnDay}}</span>
-          <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
-                ! loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyOnDay &&
-                loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyNthDay">on
-            {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyNthDay.value}}
-            {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</span>
+          <span>{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.value }}</span>
+          <span
+            *ngIf="
+              loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id === 3 &&
+              loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyWeekday
+            "
+          >
+            on {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyWeekday.value }}</span
+          >
+          <span
+            *ngIf="
+              loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
+              loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyOnDay
+            "
+            >on day {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyOnDay }}</span
+          >
+          <span
+            *ngIf="
+              loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
+              !loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyOnDay &&
+              loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyNthDay
+            "
+            >on
+            {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyNthDay.value }}
+            {{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyWeekday.value }}</span
+          >
         </span>
       </div>
-
     </ng-container>
 
-    <div fxFlexFill
-      *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled && loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id !== 1">
-      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for recalculation" | translate}}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyInterval}}</span>
+    <div
+      fxFlexFill
+      *ngIf="
+        loansAccountTermsData?.isInterestRecalculationEnabled &&
+        loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id !== 1
+      "
+    >
+      <span fxFlex="40%">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
     </div>
 
     <ng-container *ngIf="multiDisburseLoan">
       <mat-divider fxFlex="98%"></mat-divider>
       <div fxFlexFill *ngIf="allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details" | translate}}</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Loan Tranche Details' | translate }}</h4>
         <mat-form-field fxFlex="48%">
-          <mat-label>{{"labels.inputs.Maximum allowed outstanding balance" | translate}}</mat-label>
-          <input matInput required formControlName="maxOutstandingLoanBalance">
+          <mat-label>{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}</mat-label>
+          <input matInput required formControlName="maxOutstandingLoanBalance" />
         </mat-form-field>
         <span fxFlex>
-          <button type="button" mat-icon-button color="primary" required (click)="addDisbursementDataEntry(disbursementData)"
-            [disabled]="isMultiDisbursedCompleted">
+          <button
+            type="button"
+            mat-icon-button
+            color="primary"
+            required
+            (click)="addDisbursementDataEntry(disbursementData)"
+            [disabled]="isMultiDisbursedCompleted"
+          >
             <fa-icon icon="plus-circle" size="lg"></fa-icon>
           </button>
         </span>
       </div>
       <div fxFlexFill *ngIf="!allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Loan Tranche Details are not allowed for this Loan Product" | translate}}</h4>
+        <h4 fxFlex="98%" class="mat-h4">
+          {{ 'labels.heading.Loan Tranche Details are not allowed for this Loan Product' | translate }}
+        </h4>
       </div>
 
       <table mat-table [dataSource]="disbursementDataSource" [hidden]="disbursementDataSource.length === 0">
-
         <ng-container matColumnDef="expectedDisbursementDate">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Eexpected Disbursement Date" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Eexpected Disbursement Date' | translate }}</th>
           <td mat-cell *matCellDef="let row">
-            {{ row.expectedDisbursementDate | dateFormat }} </td>
+            {{ row.expectedDisbursementDate | dateFormat }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="principal">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Principal' | translate }}</th>
           <td mat-cell *matCellDef="let row">
-            {{ row.principal }} </td>
+            {{ row.principal }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let row; let rowIndex = index">
-            <button type="button" mat-icon-button color="warn" (click)="removeDisbursementDataEntry(rowIndex)"
-              matTooltip="{{ 'tooltips.Delete' | translate}}" matTooltipPosition="left">
+            <button
+              type="button"
+              mat-icon-button
+              color="warn"
+              (click)="removeDisbursementDataEntry(rowIndex)"
+              matTooltip="{{ 'tooltips.Delete' | translate }}"
+              matTooltipPosition="left"
+            >
               <fa-icon icon="trash"></fa-icon>
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="disbursementDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: disbursementDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: disbursementDisplayedColumns"></tr>
       </table>
     </ng-container>
 
     <ng-container
-      *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled  && loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id !== 0">
-
+      *ngIf="
+        loansAccountTermsData?.isInterestRecalculationEnabled &&
+        loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id !== 0
+      "
+    >
       <div fxFlexFill>
-        <span fxFlex="40%">{{"labels.inputs.Frequency for compounding" | translate}}</span>
-        <span fxFlex="60%">{{
-          loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
-          <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3 &&
-            loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyWeekday">
-            on {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
+        <span fxFlex="40%">{{ 'labels.inputs.Frequency for compounding' | translate }}</span>
+        <span fxFlex="60%"
+          >{{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
+          <span
+            *ngIf="
+              loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3 &&
+              loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyWeekday
+            "
+          >
+            on {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value }}
           </span>
-          <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
-            loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyOnDay">on day
-            {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyOnDay}}
+          <span
+            *ngIf="
+              loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
+              loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyOnDay
+            "
+            >on day
+            {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyOnDay }}
           </span>
-          <span *ngIf="loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
-            ! loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyOnDay &&
-            loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyNthDay">on
-            {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}}
-            {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
+          <span
+            *ngIf="
+              loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
+              !loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyOnDay &&
+              loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyNthDay
+            "
+            >on
+            {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value }}
+            {{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value }}
           </span>
         </span>
       </div>
     </ng-container>
 
-    <div fxFlexFill
-      *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled && loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id !== 0 && loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1">
-      <span fxFlex="40%">{{"labels.inputs.Frequency Interval for compounding" | translate}}</span>
+    <div
+      fxFlexFill
+      *ngIf="
+        loansAccountTermsData?.isInterestRecalculationEnabled &&
+        loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id !== 0 &&
+        loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1
+      "
+    >
+      <span fxFlex="40%">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}</span>
       <span fxFlex="60%">{{
-        loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyInterval}}</span>
+        loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyInterval
+      }}</span>
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlex="50%">
       <div fxLayout="column" fxFlex="50%" class="table_name">
-        <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Collaterals Data" | translate}}</h4>
+        <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Collaterals Data' | translate }}</h4>
       </div>
 
       <div fxLayout="column" fxFlex="50%">
         <div fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-raised-button color="primary" (click)="addCollateral()">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
           </button>
         </div>
       </div>
     </div>
     <table mat-table class="mat-elevation-z1" [dataSource]="collateralDataSource">
-
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.type.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let ele">{{ ele.type.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Quantity" | translate}} </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.value }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Quantity' | translate }}</th>
+        <td mat-cell *matCellDef="let ele">{{ ele.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalValue">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Value" | translate}} </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.type.basePrice*ele.value }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Total Value' | translate }}</th>
+        <td mat-cell *matCellDef="let ele">{{ ele.type.basePrice * ele.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalCollateralValue">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Collateral Value" | translate}} </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.type.pctToBase*ele.type.basePrice*ele.value/100 }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Total Collateral Value' | translate }}</th>
+        <td mat-cell *matCellDef="let ele">{{ (ele.type.pctToBase * ele.type.basePrice * ele.value) / 100 }}</td>
       </ng-container>
 
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let ele; let collateralIndex = index">
           <button mat-icon-button color="warn" (click)="deleteCollateral(collateralIndex)">
             <fa-icon icon="trash"></fa-icon>
@@ -479,22 +637,21 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Collaterals Data" | translate}
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns"></tr>
     </table>
   </div>
 
   <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>
-      {{"labels.buttons.Previous" | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
     <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-      {{"labels.buttons.Cancel" | translate}}
+      {{ 'labels.buttons.Cancel' | translate }}
     </button>
   </div>
-
 </form>
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 533a03ee3c..d3d95a5b5b 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
@@ -1,191 +1,228 @@
 <div class="container p-b-20">
-  <h3> {{"labels.heading.Loan Details" | translate}} </h3>
-
-    <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-        <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate}}</span>
-            <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateKey:'catalogs' }}</span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Repayments" | translate}}</span>
-            <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value | translateKey:'catalogs' }}
-            <span *ngIf="loanDetails.repaymentFrequencyType?.id === 2 && loanDetails.repaymentFrequencyNthDayType?.id !== 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id !== 0" class="m-l-10">
-              <span *ngIf="loanDetails.repaymentFrequencyDayOfWeekType">
-                <span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}
-                <span class="m-l-10">{{loanDetails.repaymentFrequencyDayOfWeekType?.value | translateKey:'catalogs' }}</span>
-              </span>
-            </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 | translateKey:'catalogs' }}</span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Amortization" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.amortizationType.value | translateKey:'catalogs' }} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
-            <span fxFlex="50%"> {{"labels.inputs.Principal Percentage Per Installment" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.fixedPrincipalPercentagePerInstallment | formatNumber}} %</span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Equal Amortization" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.isEqualAmortization | yesNo}} </span>
-        </div>
-
-        <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 | translateKey:'catalogs' }}) </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Type" | translate}} </span>
-            <span fxFlex="50%"> {{"labels.text." + loanDetails.interestType.value | translate}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%">{{ 'labels.inputs.Enable Down Payments' | translate}}:</span>
-            <span fxFlex="50%">{{ loanDetails.enableDownPayment | yesNo }}</span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="50%">{{ 'labels.inputs.Loan Charge-off behaviour' | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Grace: On Principal Payment" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.graceOnPrincipalPayment}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Grace: On Interest Payment" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.graceOnInterestPayment}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Grace on Arrears Ageing" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.graceOnArrearsAgeing}} </span>
-        </div>
-
-        <div fxFlexFill>
-          <span fxFlex="50%"> {{"labels.inputs.Enable installment level Delinquency" | translate}} </span>
-          <span fxFlex="50%"> {{loanDetails.enableInstallmentLevelDelinquency | yesNo}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Fund Source" | translate}} </span>
-            <span fxFlex="50%" *ngIf="loanDetails.fundName"> {{loanDetails.fundName}} </span>
-            <span fxFlex="50%" *ngIf="!loanDetails.fundName"> {{"labels.inputs.Unassigned" | translate}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Free Period" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.graceOnInterestCharged}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value | translateKey:'catalogs' }} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Allow Partial Interest Calculation with same as repayment" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.allowPartialPeriodInterestCalcualtion | yesNo}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Submitted on" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.submittedOnDate | dateFormat }} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Approved on" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.approvedOnDate | dateFormat }} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Disbursed on" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.actualDisbursementDate | dateFormat }} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Matures on" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.expectedMaturityDate | dateFormat }} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">
-            <span fxFlex="50%"> {{"labels.inputs.Fixed EMI amount" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.fixedEmiAmount | formatNumber}} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> {{"labels.inputs.Is Topup Loan" | translate}}?</span>
-            <span fxFlex="50%"> {{loanDetails.isTopup | yesNo}} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> {{"labels.inputs.Loan closed with Topup" | translate}} </span>
-            <span fxFlex="50%"> <a href="#">{{loanDetails.closureLoanAccountNo}}</a> </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isTopup">
-            <span fxFlex="50%"> {{"labels.inputs.Topup closure amount" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.topupAmount | formatNumber}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Recalculate Interest based on new terms" | translate}}</span>
-            <span fxFlex="50%">  {{loanDetails.isInterestRecalculationEnabled | yesNo}} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Days in year" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.daysInYearType.value | translateKey:'catalogs' }} </span>
-        </div>
-
-        <div fxFlexFill>
-            <span fxFlex="50%"> {{"labels.inputs.Days in month" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.daysInMonthType.value | translateKey:'catalogs' }} </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 | translateKey:'catalogs' }} </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 | translateKey:'catalogs' }} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-            <span fxFlex="50%"> {{"labels.inputs.Frequency for recalculate Outstanding Principal" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.calendarData.humanReadable}} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled && loanDetails.interestRecalculationData.interestRecalculationCompoundingType.id !== 0">
-            <span fxFlex="50%"> {{"labels.inputs.Frequency for compounding" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.compoundingCalendarData.humanReadable}} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-            <span fxFlex="50%"> {{"labels.inputs.Variable Installments Allowed" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.isVariableInstallmentsAllowed | yesNo}} </span>
-        </div>
-
-        <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-            <span fxFlex="50%"> {{"labels.inputs.Gap between Installments" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.minimumGap | formatNumber}}&nbsp;{{"labels.text.Days" | translate}}&nbsp;, Max:{{loanDetails.maximumGap | formatNumber}}&nbsp;{{"labels.text.Days" | translate}}) </span>
-        </div>
+  <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
 
+  <div fxLayout="row wrap" fxLayout.lt-md="column">
+    <div fxFlexFill>
+      <span fxFlex="50%">{{ 'labels.inputs.Repayment Strategy' | translate }}</span>
+      <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateKey: 'catalogs' }}</span>
     </div>
 
+    <div fxFlexFill>
+      <span fxFlex="50%">{{ 'labels.inputs.Repayments' | translate }}</span>
+      <span fxFlex="50%"
+        >{{ loanDetails.numberOfRepayments }} every {{ loanDetails.repaymentEvery }}&nbsp;{{
+          loanDetails.repaymentFrequencyType.value | translateKey: 'catalogs'
+        }}
+        <span
+          *ngIf="
+            loanDetails.repaymentFrequencyType?.id === 2 &&
+            loanDetails.repaymentFrequencyNthDayType?.id !== 0 &&
+            loanDetails.repaymentFrequencyDayOfWeekType?.id !== 0
+          "
+          class="m-l-10"
+        >
+          <span *ngIf="loanDetails.repaymentFrequencyDayOfWeekType">
+            <span class="m-l-10">{{ 'labels.commons.on' | translate }}</span
+            >{{ loanDetails.repaymentFrequencyNthDayType?.value }}
+            <span class="m-l-10">{{
+              loanDetails.repaymentFrequencyDayOfWeekType?.value | translateKey: 'catalogs'
+            }}</span>
+          </span>
+        </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 | translateKey: 'catalogs' }}</span
+      >
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Amortization' | translate }} </span>
+      <span fxFlex="50%"> {{ loanDetails.amortizationType.value | translateKey: 'catalogs' }} </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
+      <span fxFlex="50%"> {{ 'labels.inputs.Principal Percentage Per Installment' | translate }} </span>
+      <span fxFlex="50%"> {{ loanDetails.fixedPrincipalPercentagePerInstallment | formatNumber }} %</span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Equal Amortization' | translate }} </span>
+      <span fxFlex="50%"> {{ loanDetails.isEqualAmortization | yesNo }} </span>
+    </div>
+
+    <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 | translateKey: 'catalogs' }})
+      </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Interest Type' | translate }} </span>
+      <span fxFlex="50%"> {{ 'labels.text.' + loanDetails.interestType.value | translate }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
+      <span fxFlex="50%">{{ loanDetails.enableDownPayment | yesNo }}</span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
+      <span fxFlex="50%">{{ loanDetails.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Grace: On Principal Payment' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.graceOnPrincipalPayment }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Grace: On Interest Payment' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.graceOnInterestPayment }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Grace on Arrears Ageing' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.graceOnArrearsAgeing }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Enable installment level Delinquency' | translate }} </span>
+      <span fxFlex="50%"> {{ loanDetails.enableInstallmentLevelDelinquency | yesNo }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Fund Source' | translate }} </span>
+      <span fxFlex="50%" *ngIf="loanDetails.fundName"> {{ loanDetails.fundName }} </span>
+      <span fxFlex="50%" *ngIf="!loanDetails.fundName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Interest Free Period' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.graceOnInterestCharged }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Interest Calculation Period' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.interestCalculationPeriodType.value | translateKey: 'catalogs' }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%">
+        {{ 'labels.inputs.Allow Partial Interest Calculation with same as repayment' | translate }}</span
+      >
+      <span fxFlex="50%"> {{ loanDetails.allowPartialPeriodInterestCalcualtion | yesNo }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Submitted on' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.timeline.submittedOnDate | dateFormat }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Approved on' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.timeline.approvedOnDate | dateFormat }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Disbursed on' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.timeline.actualDisbursementDate | dateFormat }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Matures on' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.timeline.expectedMaturityDate | dateFormat }} </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">
+      <span fxFlex="50%"> {{ 'labels.inputs.Fixed EMI amount' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.fixedEmiAmount | formatNumber }} </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.isTopup">
+      <span fxFlex="50%"> {{ 'labels.inputs.Is Topup Loan' | translate }}?</span>
+      <span fxFlex="50%"> {{ loanDetails.isTopup | yesNo }} </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.isTopup">
+      <span fxFlex="50%"> {{ 'labels.inputs.Loan closed with Topup' | translate }} </span>
+      <span fxFlex="50%">
+        <a href="#">{{ loanDetails.closureLoanAccountNo }}</a>
+      </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.isTopup">
+      <span fxFlex="50%"> {{ 'labels.inputs.Topup closure amount' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.topupAmount | formatNumber }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Recalculate Interest based on new terms' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.isInterestRecalculationEnabled | yesNo }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Days in year' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.daysInYearType.value | translateKey: 'catalogs' }} </span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="50%"> {{ 'labels.inputs.Days in month' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.daysInMonthType.value | translateKey: 'catalogs' }} </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 | translateKey: 'catalogs'
+        }}
+      </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 | translateKey: 'catalogs' }}
+      </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
+      <span fxFlex="50%"> {{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.interestRecalculationData.calendarData.humanReadable }} </span>
+    </div>
+
+    <div
+      fxFlexFill
+      *ngIf="
+        loanDetails.isInterestRecalculationEnabled &&
+        loanDetails.interestRecalculationData.interestRecalculationCompoundingType.id !== 0
+      "
+    >
+      <span fxFlex="50%"> {{ 'labels.inputs.Frequency for compounding' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.interestRecalculationData.compoundingCalendarData.humanReadable }} </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
+      <span fxFlex="50%"> {{ 'labels.inputs.Variable Installments Allowed' | translate }}</span>
+      <span fxFlex="50%"> {{ loanDetails.isVariableInstallmentsAllowed | yesNo }} </span>
+    </div>
+
+    <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
+      <span fxFlex="50%"> {{ 'labels.inputs.Gap between Installments' | translate }}</span>
+      <span fxFlex="50%">
+        {{ loanDetails.minimumGap | formatNumber }}&nbsp;{{ 'labels.text.Days' | translate }}&nbsp;, Max:{{
+          loanDetails.maximumGap | formatNumber
+        }}&nbsp;{{ 'labels.text.Days' | translate }})
+      </span>
+    </div>
+  </div>
 </div>
diff --git a/src/app/loans/loans-view/charges-tab/charges-tab.component.html b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
index 3df10de176..101fca9a94 100644
--- a/src/app/loans/loans-view/charges-tab/charges-tab.component.html
+++ b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
@@ -1,34 +1,32 @@
 <div class="tab-container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="feepenalty">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Fee/Penalty" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Fee/Penalty' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        <span *ngIf="charge.penalty">{{"labels.inputs.Penalty" | translate}}</span>
-        <span *ngIf="!charge.penalty">{{"labels.inputs.Fee" | translate}}</span>
+        <span *ngIf="charge.penalty">{{ 'labels.inputs.Penalty' | translate }}</span>
+        <span *ngIf="!charge.penalty">{{ 'labels.inputs.Fee' | translate }}</span>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="paymentdueat">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Payment due at" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Payment due at' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
     </ng-container>
 
     <ng-container matColumnDef="submittedDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Submitted On" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.submittedOnDate | dateFormat }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Submitted On' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">{{ charge.submittedOnDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="dueDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header [hide]="useDueDate">
-        <span *ngIf="useDueDate"> {{'labels.inputs.Due As Of' | translate}} </span>
-        <span *ngIf="!useDueDate"> {{"labels.inputs.Submitted On" | translate}} </span>
+        <span *ngIf="useDueDate"> {{ 'labels.inputs.Due As Of' | translate }} </span>
+        <span *ngIf="!useDueDate"> {{ 'labels.inputs.Submitted On' | translate }} </span>
       </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="useDueDate">{{ charge.dueDate | dateFormat }}</span>
@@ -37,68 +35,103 @@
     </ng-container>
 
     <ng-container matColumnDef="calculationtype">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Calculation Type" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Calculation Type' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value }}</td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Due" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge">  {{ charge.amount |
-        currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Due' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let charge">
+        {{ charge.amount | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Paid" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.amountPaid |
-        currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Paid' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let charge">
+        {{ charge.amountPaid | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="waived">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Waived" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.amountWaived |
-        currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header>
+        {{ 'labels.inputs.Waived' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let charge">
+        {{ charge.amountWaived | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Outstanding" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let charge"> {{charge.amountOutstanding |
-        currency:charge.currency.code:'symbol-narrow':'1.2-2' }} </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header>
+        {{ 'labels.inputs.Outstanding' | translate }}
+      </th>
+      <td mat-cell class="r-amount" *matCellDef="let charge">
+        {{ charge.amountOutstanding | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header>
+        {{ 'labels.inputs.Actions' | translate }}
+      </th>
       <td mat-cell class="center" *matCellDef="let charge">
         <span *ngIf="status === 'Submitted and pending approval'">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate}}"
-            (click)="routeEdit($event); editCharge(charge)">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+            (click)="routeEdit($event); editCharge(charge)"
+          >
             <i class="fa fa-pencil"></i>
           </button>
-          <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate}}"
-            (click)="routeEdit($event); deleteCharge(charge.id)">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="warn"
+            matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+            (click)="routeEdit($event); deleteCharge(charge.id)"
+          >
             <i class="fa fa-trash"></i>
           </button>
         </span>
-        <button class="account-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Adjust Charge' | translate}}"
-          *ngIf="!charge.paid && status==='Active'"
-          (click)="routeEdit($event); adjustCharge(charge.id)">
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="accent"
+          matTooltip="{{ 'tooltips.Adjust Charge' | translate }}"
+          *ngIf="!charge.paid && status === 'Active'"
+          (click)="routeEdit($event); adjustCharge(charge.id)"
+        >
           <i class="fa fa-pencil"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate}}"
-          *ngIf="charge.chargePayable && !charge.paid && status==='Active'"
-          (click)="routeEdit($event); payCharge(charge.id)">
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+          *ngIf="charge.chargePayable && !charge.paid && status === 'Active'"
+          (click)="routeEdit($event); payCharge(charge.id)"
+        >
           <i class="fa fa-dollar"></i>
         </button>
-        <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate}}"
-          *ngIf="!charge.actionFlag" (click)="routeEdit($event); waiveCharge(charge.id)">
+        <button
+          class="account-action-button"
+          mat-raised-button
+          color="primary"
+          matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+          *ngIf="!charge.actionFlag"
+          (click)="routeEdit($event); waiveCharge(charge.id)"
+        >
           <i class="fa fa-flag"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
   </table>
 
   <mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
-
 </div>
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
index 0f9a3a1fb5..8a97eb1e25 100644
--- a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
@@ -1,70 +1,95 @@
 <div class="tab-container mat-typography">
   <div fxFlexFill *ngIf="existActiveTransfer">
-    <h3>{{"labels.heading.Active Asset Transfer" | translate}}</h3>
+    <h3>{{ 'labels.heading.Active Asset Transfer' | translate }}</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
       <table>
         <tbody>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Status" | translate}} :</b>
+              <b>{{ 'labels.inputs.Status' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
               <div [ngClass]="itemStatus(activeTransferData.status)">
                 <fa-icon icon="stop"></fa-icon>
-                <span class="m-l-10 external-asset-owner-status">{{activeTransferData.status}}</span>
+                <span class="m-l-10 external-asset-owner-status">{{ activeTransferData.status }}</span>
               </div>
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Owner External Id" | translate}} :</b>
+              <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ activeTransferData.owner.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
             </td>
           </tr>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Settlement Date" | translate}} :</b>
+              <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{activeTransferData.settlementDate | dateFormat}}
+              {{ activeTransferData.settlementDate | dateFormat }}
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Effective Date" | translate}} :</b>
+              <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{activeTransferData.effectiveFrom | dateFormat}}
+              {{ activeTransferData.effectiveFrom | dateFormat }}
             </td>
           </tr>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Details" | translate}} :</b>
+              <b>{{ 'labels.inputs.Details' | translate }} :</b>
             </td>
             <td fxFlex="75%" class="left">
               <table>
                 <tbody>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Principal Outstanding" | translate}} :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | formatNumber}}</td>
+                    <td fxFlex="50%">
+                      <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
+                    </td>
+                    <td fxFlex="50%" class="r-amount">
+                      {{ activeTransferData.details.totalPrincipalOutstanding | formatNumber }}
+                    </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Interest Outstanding" | translate}} :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | formatNumber}}</td>
+                    <td fxFlex="50%">
+                      <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
+                    </td>
+                    <td fxFlex="50%" class="r-amount">
+                      {{ activeTransferData.details.totalInterestOutstanding | formatNumber }}
+                    </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Fees Outstanding" | translate}} :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
+                    <td fxFlex="50%">
+                      <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
+                    </td>
+                    <td fxFlex="50%" class="r-amount">
+                      {{ activeTransferData.details.totalFeeChargesOutstanding | formatNumber }}
+                    </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Penalties Outstanding" | translate}} :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
+                    <td fxFlex="50%">
+                      <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
+                    </td>
+                    <td fxFlex="50%" class="r-amount">
+                      {{ activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber }}
+                    </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Outstanding" | translate}} :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | formatNumber}}</td>
+                    <td fxFlex="50%">
+                      <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
+                    </td>
+                    <td fxFlex="50%" class="r-amount">
+                      {{ activeTransferData.details.totalOutstanding | formatNumber }}
+                    </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%"><b>{{"labels.inputs.Overpaid" | translate}} :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
+                    <td fxFlex="50%">
+                      <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
+                    </td>
+                    <td fxFlex="50%" class="r-amount">{{ activeTransferData.details.totalOverpaid | formatNumber }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -76,82 +101,100 @@ <h3>{{"labels.heading.Active Asset Transfer" | translate}}</h3>
   </div>
 
   <div fxLayout="row" fxLayoutAlign="start center">
+    <h3 fxFlex="90%">{{ 'labels.heading.External Asset Owner' | translate }}</h3>
 
-    <h3 fxFlex="90%">{{"labels.heading.External Asset Owner" | translate}}</h3>
-
-    <div fxFlex="10%" *ngIf="canBeSold()" >
+    <div fxFlex="10%" *ngIf="canBeSold()">
       <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Sell Loan" | translate}}
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{ 'labels.buttons.Sell Loan' | translate }}
       </button>
     </div>
 
-    <div fxFlex="10%" *ngIf="canBeCancelled()" >
-      <button mat-raised-button class="f-right" color="warn" (click)="cancelSaleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{"labels.buttons.Cancel Sell Loan" | translate}}
+    <div fxFlex="10%" *ngIf="canBeCancelled()">
+      <button
+        mat-raised-button
+        class="f-right"
+        color="warn"
+        (click)="cancelSaleLoan()"
+        *mifosxHasPermission="'SALE_LOAN'"
+      >
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Cancel Sell Loan' | translate }}
       </button>
     </div>
 
-    <div fxFlex="10%" *ngIf="canBeBuyed()" >
-      <button mat-raised-button class="f-right" color="primary" (click)="buyBackLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{"labels.buttons.Buy Back Loan" | translate}}
+    <div fxFlex="10%" *ngIf="canBeBuyed()">
+      <button
+        mat-raised-button
+        class="f-right"
+        color="primary"
+        (click)="buyBackLoan()"
+        *mifosxHasPermission="'SALE_LOAN'"
+      >
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{ 'labels.buttons.Buy Back Loan' | translate }}
       </button>
     </div>
   </div>
 
-  <table mat-table mat-sort [dataSource]="loanTransfersData" *ngIf="loanTransfersData.length>0">
-
+  <table mat-table mat-sort [dataSource]="loanTransfersData" *ngIf="loanTransfersData.length > 0">
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         <div [ngClass]="itemStatus(item.status)">
           <fa-icon icon="stop"></fa-icon>
           <span class="m-l-10 status">
-            {{ itemCurrentStatus(item) | translate}}
+            {{ itemCurrentStatus(item) | translate }}
           </span>
         </div>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="effectiveFrom">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Effective From" | translate}} </th>
-      <td mat-cell *matCellDef="let item"> {{ item.effectiveFrom | dateFormat }}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Effective From' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.effectiveFrom | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="ownerExternalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Owner External Id" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Owner External Id' | translate }}</th>
       <td mat-cell *matCellDef="let item">
-        <mifosx-external-identifier externalId="{{item.owner.externalId}}"></mifosx-external-identifier>
+        <mifosx-external-identifier externalId="{{ item.owner.externalId }}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="transferExternalId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transfer External Id" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transfer External Id' | translate }}</th>
       <td mat-cell *matCellDef="let item">
-        <mifosx-external-identifier externalId="{{item.transferExternalId}}"></mifosx-external-identifier>
+        <mifosx-external-identifier externalId="{{ item.transferExternalId }}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="settlementDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Settlement Date" | translate}} </th>
-      <td mat-cell *matCellDef="let item"> {{ item.settlementDate | dateFormat }}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Settlement Date' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.settlementDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="purchasePriceRatio">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Purchase Price Ratio" | translate}} </th>
-      <td mat-cell *matCellDef="let item"> {{ item.purchasePriceRatio | number }}</td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Purchase Price Ratio' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.purchasePriceRatio | number }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let item" class="center td-min-space">
-        <button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Journal Entries' | translate}}"
-          matTooltipPosition="left" (click)="routeJournalEntry($event)" [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]">
+        <button
+          class="account-action-button"
+          *ngIf="!isPendingOrCanceled(item)"
+          mat-raised-button
+          color="primary"
+          matTooltip="{{ 'tooltips.View Journal Entries' | translate }}"
+          matTooltipPosition="left"
+          (click)="routeJournalEntry($event)"
+          [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]"
+        >
           <i class="fa fa-arrow-circle-right"></i>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="loanTransferColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanTransferColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanTransferColumns"></tr>
   </table>
 </div>
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html
index 4cdf5be236..c8faefae0a 100644
--- a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html
@@ -7,60 +7,79 @@
       <td fxFlex="25%" class="m-l-5 left">
         <div [ngClass]="itemStatus(transferData.status)">
           <fa-icon icon="stop"></fa-icon>
-          <span class="m-l-5 status">{{transferData.status}}</span>
+          <span class="m-l-5 status">{{ transferData.status }}</span>
         </div>
       </td>
       <td fxFlex="25%" class="m-l-5">
-        <b>{{'labels.inputs.Owner External Id' | translate}} :</b>
+        <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
       </td>
       <td fxFlex="25%" class="m-l-5 left">
-        <mifosx-external-identifier externalId="{{transferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
+        <mifosx-external-identifier
+          externalId="{{ transferData.owner.externalId }}"
+          completed="true"
+        ></mifosx-external-identifier>
       </td>
     </tr>
     <tr>
       <td fxFlex="25%" class="m-l-5">
-        <b>{{'labels.inputs.Settlement Date' | translate}} :</b>
+        <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
       </td>
       <td fxFlex="25%" class="m-l-5">
-        {{transferData.settlementDate | dateFormat}}
+        {{ transferData.settlementDate | dateFormat }}
       </td>
       <td fxFlex="25%" class="m-l-5">
-        <b>{{'labels.inputs.Effective Date' | translate}} :</b>
+        <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
       </td>
       <td fxFlex="25%" class="m-l-5">
-        {{transferData.effectiveFrom | dateFormat}}
+        {{ transferData.effectiveFrom | dateFormat }}
       </td>
     </tr>
     <tr>
       <td fxFlex="25%" class="m-l-5">
-        <b>{{'labels.inputs.Details' | translate}} :</b>
+        <b>{{ 'labels.inputs.Details' | translate }} :</b>
       </td>
       <td fxFlex="75%" class="left">
         <table>
           <tbody>
             <tr>
-              <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Principal Outstanding' | translate}} :</b></td>
-              <td fxFlex="50%" class="r-amount">{{transferData.details.totalPrincipalOutstanding | formatNumber}}</td>
+              <td fxFlex="50%" class="m-l-5">
+                <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
+              </td>
+              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalPrincipalOutstanding | formatNumber }}</td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Interest Outstanding' | translate}} :</b></td>
-              <td fxFlex="50%" class="r-amount">{{transferData.details.totalInterestOutstanding | formatNumber}}</td>
+              <td fxFlex="50%" class="m-l-5">
+                <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
+              </td>
+              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalInterestOutstanding | formatNumber }}</td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Fees Outstanding' | translate}} :</b></td>
-              <td fxFlex="50%" class="r-amount">{{transferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
+              <td fxFlex="50%" class="m-l-5">
+                <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
+              </td>
+              <td fxFlex="50%" class="r-amount">
+                {{ transferData.details.totalFeeChargesOutstanding | formatNumber }}
+              </td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Penalties Outstanding' | translate}} :</b></td>
-              <td fxFlex="50%" class="r-amount">{{transferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
+              <td fxFlex="50%" class="m-l-5">
+                <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
+              </td>
+              <td fxFlex="50%" class="r-amount">
+                {{ transferData.details.totalPenaltyChargesOutstanding | formatNumber }}
+              </td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Outstanding' | translate}} :</b></td>
-              <td fxFlex="50%" class="r-amount">{{transferData.details.totalOutstanding | formatNumber}}</td>
+              <td fxFlex="50%" class="m-l-5">
+                <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
+              </td>
+              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalOutstanding | formatNumber }}</td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Overpaid' | translate}} :</b></td>
-              <td fxFlex="50%" class="r-amount">{{transferData.details.totalOverpaid | formatNumber}}</td>
+              <td fxFlex="50%" class="m-l-5">
+                <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
+              </td>
+              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalOverpaid | formatNumber }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
index 2d57c8a678..1e2ff2906d 100644
--- a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
+++ b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
@@ -1,19 +1,16 @@
 <div class="container">
-
   <table mat-table [dataSource]="interestRateData">
-
     <ng-container matColumnDef="fromDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Date" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.fromDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.fromDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="interestRate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest Rate" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.effectiveInterestRate }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest Rate' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.effectiveInterestRate }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
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 3b208abfda..89bd7ed43e 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
@@ -1,22 +1,21 @@
 <div class="tab-container mat-typography">
-
   <ng-container *ngIf="loanDetails.summary">
-    <h3>{{"labels.heading.Performance History" | translate}}</h3>
+    <h3>{{ 'labels.heading.Performance History' | translate }}</h3>
     <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
       <table>
         <tbody>
           <tr>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Number of Repayments" | translate}} :</b>
+              <b>{{ 'labels.inputs.Number of Repayments' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{loanDetails?.numberOfRepayments | formatNumber}}
+              {{ loanDetails?.numberOfRepayments | formatNumber }}
             </td>
             <td fxFlex="25%">
-              <b>{{"labels.inputs.Maturity Date" | translate}} :</b>
+              <b>{{ 'labels.inputs.Maturity Date' | translate }} :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{loanDetails?.timeline.expectedMaturityDate | dateFormat}}
+              {{ loanDetails?.timeline.expectedMaturityDate | dateFormat }}
             </td>
           </tr>
         </tbody>
@@ -25,193 +24,216 @@ <h3>{{"labels.heading.Performance History" | translate}}</h3>
   </ng-container>
 
   <div *ngIf="loanDetails.summary">
-
-    <h3> {{"labels.heading.Loan Summary" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Summary' | translate }}</h3>
 
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="Empty">
-        <th mat-header-cell *matHeaderCellDef>  </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.property }} </td>
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let ele">{{ ele.property }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Original">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Original" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.original | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Original' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.original | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Paid">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.paid | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele">
+          {{ ele.paid | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Adjustments">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit Adjustments" | translate}} </th>
-        <td mat-cell class="r-amount amount-plus" *matCellDef="let ele"> {{ ele.adjustment | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Credit Adjustments' | translate }}</th>
+        <td mat-cell class="r-amount amount-plus" *matCellDef="let ele">
+          {{ ele.adjustment | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.waived | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele">
+          {{ ele.waived | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Written Off">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Written Off" | translate}} </th>
-        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele"> {{ ele.writtenOff | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Written Off' | translate }}</th>
+        <td mat-cell class="r-amount amount-minus" *matCellDef="let ele">
+          {{ ele.writtenOff | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Outstanding">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.outstanding | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.outstanding | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="Over Due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Over Due" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.overdue | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Over Due' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.overdue | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="loanSummaryColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: loanSummaryColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: loanSummaryColumns"></tr>
     </table>
-
   </div>
 
   <div *ngIf="loanDetails.summary">
-
-    <h3> {{"labels.heading.Loan Details" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
     <table mat-table [dataSource]="detailsDataSource">
-
       <ng-container matColumnDef="Key">
-        <td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
+        <td mat-cell *matCellDef="let ele">{{ 'labels.inputs.' + ele.key | translate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
         <td mat-cell *matCellDef="let ele">
-          <ng-container *ngIf="ele.key === 'Disbursement Date'" >
-            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available" | translate}} </span>
+          <ng-container *ngIf="ele.key === 'Disbursement Date'">
+            <span *ngIf="loanDetails.timeline.actualDisbursementDate">
+              {{ loanDetails.timeline.actualDisbursementDate | dateFormat }}
+            </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate">
+              {{ 'labels.inputs.Not Available' | translate }}
+            </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Purpose'">
-            <span *ngIf="loanDetails.loanPurposeName"> {{loanDetails.loanPurposeName}} </span>
-            <span *ngIf="!loanDetails.loanPurposeName"> {{"labels.inputs.Not Available" | translate}} </span>
+            <span *ngIf="loanDetails.loanPurposeName"> {{ loanDetails.loanPurposeName }} </span>
+            <span *ngIf="!loanDetails.loanPurposeName"> {{ 'labels.inputs.Not Available' | translate }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate}} </span>
-            <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
-              <span *ngIf="loanDetails.loanOfficerName">
-              </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
+            <span *ngIf="loanDetails.loanOfficerName">
+              {{ loanDetails.loanOfficerName }} &nbsp;
+              <span *ngIf="loanDetails.loanOfficerName"> </span>
             </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Currency'">
-            <span> {{loanDetails.currency.name }} {{loanDetails.currency.code}} </span>
+            <span> {{ loanDetails.currency.name }} {{ loanDetails.currency.code }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
             <span *ngIf="loanDetails.externalId">
-              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ loanDetails.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
+            <span *ngIf="!loanDetails.externalId"> {{ 'labels.inputs.Not Available' | translate }} </span>
           </ng-container>
 
-          <ng-container *ngIf="ele.key === 'Proposed Amount' || ele.key === 'Approved Amount' || ele.key === 'Disburse Amount'">
+          <ng-container
+            *ngIf="ele.key === 'Proposed Amount' || ele.key === 'Approved Amount' || ele.key === 'Disburse Amount'"
+          >
             {{ ele.value }}
           </ng-container>
         </td>
       </ng-container>
 
-      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns"></tr>
     </table>
-
   </div>
 
   <div *ngIf="!loanDetails.summary">
-
-    <h3> {{"labels.heading.Loan Details" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
     <table mat-table [dataSource]="detailsDataSource">
-
       <ng-container matColumnDef="Key">
-        <td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
+        <td mat-cell *matCellDef="let ele">{{ 'labels.inputs.' + ele.key | translate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
         <td mat-cell *matCellDef="let ele">
-          <ng-container *ngIf="ele.key === 'Disbursement Date'" >
-            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | dateFormat}} </span>
-            <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> {{"labels.inputs.Not Available" | translate}} </span>
+          <ng-container *ngIf="ele.key === 'Disbursement Date'">
+            <span *ngIf="loanDetails.timeline.actualDisbursementDate">
+              {{ loanDetails.timeline.actualDisbursementDate | dateFormat }}
+            </span>
+            <span *ngIf="!loanDetails.timeline.actualDisbursementDate">
+              {{ 'labels.inputs.Not Available' | translate }}
+            </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Loan Officer'">
-            <span *ngIf="!loanDetails.loanOfficerName"> {{"labels.inputs.Unassigned" | translate}} </span>
-            <span *ngIf="loanDetails.loanOfficerName"> {{loanDetails.loanOfficerName}} &nbsp;
-              <span *ngIf="loanDetails.loanOfficerName">
-              </span>
+            <span *ngIf="!loanDetails.loanOfficerName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
+            <span *ngIf="loanDetails.loanOfficerName">
+              {{ loanDetails.loanOfficerName }} &nbsp;
+              <span *ngIf="loanDetails.loanOfficerName"> </span>
             </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'Currency'">
-            <span> {{loanDetails.currency.name }} {{loanDetails.currency.code}} </span>
+            <span> {{ loanDetails.currency.name }} {{ loanDetails.currency.code }} </span>
           </ng-container>
 
           <ng-container *ngIf="ele.key === 'External Id'">
             <span *ngIf="loanDetails.externalId">
-              <mifosx-external-identifier externalId="{{loanDetails.externalId}}" completed="true"></mifosx-external-identifier>
+              <mifosx-external-identifier
+                externalId="{{ loanDetails.externalId }}"
+                completed="true"
+              ></mifosx-external-identifier>
             </span>
-            <span *ngIf="!loanDetails.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
+            <span *ngIf="!loanDetails.externalId"> {{ 'labels.inputs.Not Available' | translate }} </span>
           </ng-container>
-
         </td>
       </ng-container>
 
-      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: loanDetailsColumns"></tr>
     </table>
   </div>
 
   <div *ngIf="!loanDetails.summary">
-    <h3> {{"labels.heading.Loan Purpose" | translate}} </h3>
+    <h3>{{ 'labels.heading.Loan Purpose' | translate }}</h3>
     <div class="container">
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <div fxFlexFill>
-            <span fxFlex="50%">{{"labels.inputs.Loan Purpose" | translate}}:</span>
-            <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
-              {{ loanDetails.loanPurposeName }}
-            </span>
-            <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
-              {{"labels.inputs.Not Provided" | translate}}
-            </span>
+          <span fxFlex="50%">{{ 'labels.inputs.Loan Purpose' | translate }}:</span>
+          <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
+            {{ loanDetails.loanPurposeName }}
+          </span>
+          <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
+            {{ 'labels.inputs.Not Provided' | translate }}
+          </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">{{"labels.inputs.Proposed Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.proposedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Proposed Amount' | translate }}:</span>
+          <span fxFlex="50%">{{
+            loanDetails.proposedPrincipal | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{"labels.inputs.Approved Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.approvedPrincipal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Approved Amount' | translate }}:</span>
+          <span fxFlex="50%">{{
+            loanDetails.approvedPrincipal | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
         </div>
 
         <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{"labels.inputs.Disburse Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.principal | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Disburse Amount' | translate }}:</span>
+          <span fxFlex="50%">{{ loanDetails.principal | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.balloonRepaymentAmount > 0">
-          <span fxFlex="50%">{{"labels.inputs.Balloon Repayment Amount" | translate}}:</span>
-          <span fxFlex="50%">{{ loanDetails.balloonRepaymentAmount | currency:currencyCode:'symbol-narrow':'1.2-2' }}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Balloon Repayment Amount' | translate }}:</span>
+          <span fxFlex="50%">{{
+            loanDetails.balloonRepaymentAmount | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+          }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="50%">{{"labels.inputs.Arrears By" | translate}}:</span>
-          <span fxFlex="50%">{{"labels.inputs.Not Provided" | translate}}</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Arrears By' | translate }}:</span>
+          <span fxFlex="50%">{{ 'labels.inputs.Not Provided' | translate }}</span>
         </div>
-
       </div>
     </div>
   </div>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
index c82f9513fa..24c948a478 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
@@ -1,48 +1,50 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="collateralForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Collateral Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Collateral Type' | translate }}</mat-label>
             <mat-select required formControlName="collateralTypeId">
               <mat-option *ngFor="let collateral of dataObject.allowedCollateralTypes" [value]="collateral.id">
-                {{ collateral.name }}</mat-option>
+                {{ collateral.name }}</mat-option
+              >
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
-              {{"labels.inputs.Collateral Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Collateral Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Value" | translate}}</mat-label>
-            <input matInput required formControlName="value">
+            <mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
+            <input matInput required formControlName="value" />
             <mat-error *ngIf="collateralForm.controls.value.hasError('required')">
-              {{"labels.inputs.Value" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Description" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
-            *mifosxHasPermission="'CREATE_COLLATERAL'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!collateralForm.valid"
+            *mifosxHasPermission="'CREATE_COLLATERAL'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html b/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html
index 93554a7f78..9705677fc8 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html
@@ -1,65 +1,73 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
                 {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
-              {{"labels.inputs.Charge" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input type="number" required matInput formControlName="amount" />
             <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge Calculation" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
             <input matInput formControlName="chargeCalculation" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Charge Time" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Time' | translate }}</mat-label>
             <input matInput formControlName="chargeTime" />
           </mat-form-field>
 
           <mat-form-field *ngIf="loanChargeForm.controls['dueDate']" (click)="dueDatePicker.open()">
-            <mat-label>{{"labels.inputs.Due On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-              formControlName="dueDate">
+            <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="dueDatePicker"
+              required
+              formControlName="dueDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
             <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
-              {{"labels.inputs.Due Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
-            *mifosxHasPermission="'CREATE_LOANCHARGE'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!loanChargeForm.valid"
+            *mifosxHasPermission="'CREATE_LOANCHARGE'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html b/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html
index a443a51797..eadfcaf6cf 100644
--- a/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html
@@ -1,30 +1,26 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="adjustLoanChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field appearance="fill">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <span matTextSuffix class="m-l-10">{{ loanDetailsData.currency.code }}</span>
             <span fxFlex="auto"></span>
-            <input type="number" matInput required class="right-input" formControlName="amount">
+            <input type="number" matInput required class="right-input" formControlName="amount" />
             <mat-error *ngIf="adjustLoanChargeForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -36,7 +32,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -44,48 +40,51 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account" | translate}} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque" | translate}} #</mat-label>
-              <input matInput formControlName="checkNumber">
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="checkNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code" | translate}}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept" | translate}} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank" | translate}} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../..']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!adjustLoanChargeForm.valid"
-            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../..']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!adjustLoanChargeForm.valid"
+            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html b/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html
index c013905202..e8a94e41ee 100644
--- a/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html
@@ -1,62 +1,74 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="approveLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="approvedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Approved On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [matDatepicker]="approvedDatePicker" required
-              formControlName="approvedOnDate">
+            <mat-label>{{ 'labels.inputs.Approved On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [matDatepicker]="approvedDatePicker"
+              required
+              formControlName="approvedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedDatePicker></mat-datepicker>
             <mat-error *ngIf="approveLoanForm.controls.approvedOnDate.hasError('required')">
-              {{"labels.inputs.Approved Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Approved Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="disbursementDatePicker.open()">
-            <mat-label>{{"labels.inputs.Expected disbursement on" | translate}}</mat-label>
-            <input matInput [min]="minDate" [matDatepicker]="disbursementDatePicker"
-              formControlName="expectedDisbursementDate">
+            <mat-label>{{ 'labels.inputs.Expected disbursement on' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [matDatepicker]="disbursementDatePicker"
+              formControlName="expectedDisbursementDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #disbursementDatePicker></mat-datepicker>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="approveLoanForm.controls.approvedLoanAmount"
-            [inputLabel]="'Approved Amount'">
+            [inputLabel]="'Approved Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput type="number" required formControlName="approvedLoanAmount">
+            <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
+            <input matInput type="number" required formControlName="approvedLoanAmount" />
             <mat-error *ngIf="approveLoanForm.controls.approvedLoanAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!approveLoanForm.valid"
+            *mifosxHasPermission="'APPROVE_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html b/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html
index c662dcc7c5..4eb49435b8 100644
--- a/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html
@@ -1,57 +1,59 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="saleLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="settlementDatePicker.open()">
-            <mat-label>{{"labels.inputs.Settlement Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementDatePicker" required
-              formControlName="settlementDate">
+            <mat-label>{{ 'labels.inputs.Settlement Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="settlementDatePicker"
+              required
+              formControlName="settlementDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="settlementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #settlementDatePicker></mat-datepicker>
             <mat-error *ngIf="saleLoanForm.controls.settlementDate.hasError('required')">
-              {{"labels.inputs.Settlement Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Settlement Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isBuyBack()">
-            <mat-label>{{"labels.inputs.Purchase Price Ratio" | translate}}</mat-label>
-            <input type="number" matInput required formControlName="purchasePriceRatio">
+            <mat-label>{{ 'labels.inputs.Purchase Price Ratio' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="purchasePriceRatio" />
             <mat-error *ngIf="saleLoanForm.controls.purchasePriceRatio.hasError('required')">
-              {{"labels.inputs.Purchase Price Ratio" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Purchase Price Ratio' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isBuyBack()">
-            <mat-label>{{"labels.inputs.Owner External Id" | translate}}</mat-label>
-            <input matInput formControlName="ownerExternalId">
+            <mat-label>{{ 'labels.inputs.Owner External Id' | translate }}</mat-label>
+            <input matInput formControlName="ownerExternalId" />
             <mat-error *ngIf="saleLoanForm.controls.ownerExternalId.hasError('required')">
-              {{"labels.inputs.Owner External Id" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Owner External Id' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Transfer External Id" | translate}}</mat-label>
-            <input matInput formControlName="transferExternalId">
+            <mat-label>{{ 'labels.inputs.Transfer External Id' | translate }}</mat-label>
+            <input matInput formControlName="transferExternalId" />
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!saleLoanForm.valid"
-            *mifosxHasPermission="'SALE_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!saleLoanForm.valid" *mifosxHasPermission="'SALE_LOAN'">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html b/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html
index 5de82567dc..48a5ddb2c7 100644
--- a/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html
@@ -1,48 +1,54 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label> {{"labels.inputs.To Loan Officer" | translate}}</mat-label>
+            <mat-label> {{ 'labels.inputs.To Loan Officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
               <mat-option *ngFor="let loanOfficer of loanOfficers" [value]="loanOfficer.id">
                 {{ loanOfficer.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="assignOfficerForm.controls.toLoanOfficerId.hasError('required')">
-              {{"labels.inputs.Loan Officer" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="assignOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Assignment Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required
-              formControlName="assignmentDate">
+            <mat-label>{{ 'labels.inputs.Assignment Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="assignOnDatePicker"
+              required
+              formControlName="assignmentDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="assignOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignOnDatePicker></mat-datepicker>
             <mat-error *ngIf="assignOfficerForm.controls.assignmentDate.hasError('required')">
-              {{"labels.inputs.Assignment Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid"
-            *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!assignOfficerForm.valid"
+            *mifosxHasPermission="'BULKREASSIGN_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html b/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html
index af534a20bd..070a52d4b6 100644
--- a/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html
@@ -1,58 +1,64 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="chargeoffLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="chargeoffLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Reason for Charge-Off" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Reason for Charge-Off' | translate }}</mat-label>
             <mat-select formControlName="chargeOffReasonId">
               <mat-option *ngFor="let chargeOffReason of chargeOffReasonOptions" [value]="chargeOffReason.id">
                 {{ chargeOffReason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeoffLoanForm.controls.chargeOffReasonId.hasError('required')">
-              {{"labels.inputs.Reason for Charge-Off" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Reason for Charge-Off' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!chargeoffLoanForm.valid"
-            *mifosxHasPermission="'CHARGEOFF_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!chargeoffLoanForm.valid"
+            *mifosxHasPermission="'CHARGEOFF_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html b/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html
index a44f3a60a6..5cccfcb0c4 100644
--- a/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html
@@ -1,41 +1,46 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Closed Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
-            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html b/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html
index f4b9cdd108..200a31bdfb 100644
--- a/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html
@@ -1,36 +1,35 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="newGuarantorForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-checkbox labelPosition="before" formControlName="existingClient">
-            {{"labels.inputs.Existing Client" | translate}}
+            {{ 'labels.inputs.Existing Client' | translate }}
           </mat-checkbox>
 
           <ng-container *ngIf="!showClientDetailsForm">
-
             <mat-form-field fxFlex="30%">
-              <mat-label>{{"labels.inputs.name" | translate}}</mat-label>
-              <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete">
+              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+              <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete" />
               <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
-                {{"labels.inputs.name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient"
-              (optionSelected)="clientSelected($event.option.value)">
+            <mat-autocomplete
+              autoActiveFirstOption
+              #clientsAutocomplete="matAutocomplete"
+              [displayWith]="displayClient"
+              (optionSelected)="clientSelected($event.option.value)"
+            >
               <mat-option *ngFor="let client of clientsData" [value]="client">
                 {{ client.displayName }}
               </mat-option>
             </mat-autocomplete>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
               <mat-select formControlName="clientRelationshipTypeId">
                 <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
                   {{ relationType.name }}
@@ -39,9 +38,8 @@
             </mat-form-field>
 
             <ng-container *ngIf="accountOptions.length > 0">
-
               <mat-form-field>
-                <mat-label>{{"labels.inputs.Account" | translate}}</mat-label>
+                <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
                 <mat-select formControlName="savingsId">
                   <mat-option *ngFor="let accountOption of accountOptions" [value]="accountOption.id">
                     {{ accountOption.productName }} - {{ accountOption.accountNo }}
@@ -50,18 +48,15 @@
               </mat-form-field>
 
               <mat-form-field>
-                <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-                <input type="number" matInput required formControlName="amount">
+                <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+                <input type="number" matInput required formControlName="amount" />
               </mat-form-field>
-
             </ng-container>
-
           </ng-container>
 
           <ng-container *ngIf="showClientDetailsForm">
-
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Relationship" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
               <mat-select formControlName="clientRelationshipTypeId">
                 <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
                   {{ relationType.name }}
@@ -70,92 +65,96 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.First Name" | translate}}</mat-label>
-              <input matInput required formControlName="firstname">
+              <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+              <input matInput required formControlName="firstname" />
               <mat-error *ngIf="newGuarantorForm.controls.firstname.hasError('required')">
-                {{"labels.inputs.First Name" | translate}} {{"labels.commons.is" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+                {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Last Name" | translate}}</mat-label>
-              <input matInput required formControlName="lastname">
+              <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+              <input matInput required formControlName="lastname" />
               <mat-error *ngIf="newGuarantorForm.controls.lastname.hasError('required')">
-                {{"labels.inputs.Last Name" | translate}} {{"labels.commons.is" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+                {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field (click)="dobDatePicker.open()">
-              <mat-label>{{"labels.inputs.Date Of Birth" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dobDatePicker" formControlName="dob">
+              <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dobDatePicker" formControlName="dob" />
               <mat-datepicker-toggle matSuffix [for]="dobDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dobDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Address Line" | translate}} 1</mat-label>
-              <input matInput formControlName="addressLine1">
+              <mat-label>{{ 'labels.inputs.Address Line' | translate }} 1</mat-label>
+              <input matInput formControlName="addressLine1" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Address Line" | translate}} 2</mat-label>
-              <input matInput formControlName="addressLine2">
+              <mat-label>{{ 'labels.inputs.Address Line' | translate }} 2</mat-label>
+              <input matInput formControlName="addressLine2" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.City" | translate}}</mat-label>
-              <input matInput formControlName="city">
+              <mat-label>{{ 'labels.inputs.City' | translate }}</mat-label>
+              <input matInput formControlName="city" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Zip" | translate}}</mat-label>
-              <input matInput formControlName="zip">
+              <mat-label>{{ 'labels.inputs.Zip' | translate }}</mat-label>
+              <input matInput formControlName="zip" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Mobile" | translate}}</mat-label>
-              <input type="number" matInput formControlName="mobileNumber">
+              <mat-label>{{ 'labels.inputs.Mobile' | translate }}</mat-label>
+              <input type="number" matInput formControlName="mobileNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Residence Phone" | translate}} #</mat-label>
-              <input type="number" matInput formControlName="housePhoneNumber">
+              <mat-label>{{ 'labels.inputs.Residence Phone' | translate }} #</mat-label>
+              <input type="number" matInput formControlName="housePhoneNumber" />
             </mat-form-field>
-
           </ng-container>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!newGuarantorForm.valid"
-            *mifosxHasPermission="'CREATE_GUARANTOR'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!newGuarantorForm.valid"
+            *mifosxHasPermission="'CREATE_GUARANTOR'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
 
     <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">
       <div class="mat-table">
         <div class="mat-header-row">
-          <div class="mat-header-cell">{{"labels.inputs.Client Details" | translate}}</div>
+          <div class="mat-header-cell">{{ 'labels.inputs.Client Details' | translate }}</div>
         </div>
         <div class="mat-row">
-          <div class="mat-cell">{{"labels.inputs.name" | translate}}</div>
-          <div class="mat-cell">{{newGuarantorForm.controls.name.value.displayName}}</div>
+          <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+          <div class="mat-cell">{{ newGuarantorForm.controls.name.value.displayName }}</div>
         </div>
         <div class="mat-row">
-          <div class="mat-cell">{{"labels.inputs.Id" | translate}}</div>
-          <div class="mat-cell">{{newGuarantorForm.controls.name.value.id}}</div>
+          <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+          <div class="mat-cell">{{ newGuarantorForm.controls.name.value.id }}</div>
         </div>
         <div class="mat-row">
-          <div class="mat-cell">{{"labels.inputs.Office" | translate}}</div>
-          <div class="mat-cell">{{newGuarantorForm.controls.name.value.officeName}}</div>
+          <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+          <div class="mat-cell">{{ newGuarantorForm.controls.name.value.officeName }}</div>
         </div>
       </div>
     </ng-container>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html b/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html
index 058e48b65f..c3840ee6b3 100644
--- a/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html
@@ -1,51 +1,59 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="disbursementDatePicker.open()">
-            <mat-label>{{"labels.inputs.Disbursement On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementDatePicker" required
-              formControlName="actualDisbursementDate">
+            <mat-label>{{ 'labels.inputs.Disbursement On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="disbursementDatePicker"
+              required
+              formControlName="actualDisbursementDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #disbursementDatePicker></mat-datepicker>
             <mat-error *ngIf="disbursementForm.controls.actualDisbursementDate.hasError('required')">
-              {{"labels.inputs.Disbursement Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Disbursement Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="disbursementForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field *ngIf="dataObject.fixedEmiAmount">
-            <mat-label>{{"labels.inputs.Fixed EMI amount" | translate}}</mat-label>
-            <input matInput type="number" formControlName="fixedEmiAmount">
+            <mat-label>{{ 'labels.inputs.Fixed EMI amount' | translate }}</mat-label>
+            <input matInput type="number" formControlName="fixedEmiAmount" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
-            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!disbursementForm.valid"
+            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
index 45b0fc97bf..49106969ef 100644
--- a/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html
@@ -1,36 +1,41 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="actualDisbursementDatePicker.open()">
-            <mat-label>{{"labels.inputs.Disbursed On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="actualDisbursementDatePicker" required
-              formControlName="actualDisbursementDate">
+            <mat-label>{{ 'labels.inputs.Disbursed On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="actualDisbursementDatePicker"
+              required
+              formControlName="actualDisbursementDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="actualDisbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #actualDisbursementDatePicker></mat-datepicker>
             <mat-error *ngIf="disbursementLoanForm.controls.actualDisbursementDate.hasError('required')">
-              {{"labels.inputs.Disbursed On Date" | translate}}<strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Disbursed On Date' | translate
+              }}<strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="disbursementLoanForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -42,7 +47,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -50,48 +55,51 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Account" | translate}} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label>{{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque" | translate}} #</mat-label>
-              <input matInput formControlName="checkNumber">
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="checkNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code" | translate}}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept" | translate}} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank" | translate}} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid"
-            *mifosxHasPermission="'DISBURSE_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!disbursementLoanForm.valid"
+            *mifosxHasPermission="'DISBURSE_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html b/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html
index 0250dc35c9..a9338c54de 100644
--- a/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html
@@ -1,25 +1,30 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
     <mat-card-content>
-
       <div fxLayout="column">
-        <mifosx-repayment-schedule-tab fxFlex="100%"
+        <mifosx-repayment-schedule-tab
+          fxFlex="100%"
           [repaymentScheduleDetails]="repaymentScheduleDetails"
-          [forEditing]="true">
+          [forEditing]="true"
+        >
         </mifosx-repayment-schedule-tab>
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button type="button" (click)="reset()">{{"labels.buttons.Reset" | translate}}</button>
-        <button type="button" color="primary" mat-raised-button (click)="applyPattern()">{{"labels.buttons.Pattern" | translate}}</button>
-        <button type="button" color="primary" mat-raised-button [disabled]="!wasChanged" (click)="validate()">{{"labels.buttons.Validate" | translate}}</button>
-        <button type="button" color="primary" mat-raised-button [disabled]="!wasValidated" (click)="submit()">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button type="button" (click)="reset()">{{ 'labels.buttons.Reset' | translate }}</button>
+        <button type="button" color="primary" mat-raised-button (click)="applyPattern()">
+          {{ 'labels.buttons.Pattern' | translate }}
+        </button>
+        <button type="button" color="primary" mat-raised-button [disabled]="!wasChanged" (click)="validate()">
+          {{ 'labels.buttons.Validate' | translate }}
+        </button>
+        <button type="button" color="primary" mat-raised-button [disabled]="!wasValidated" (click)="submit()">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
index 4874971bf4..929714e75c 100644
--- a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
@@ -1,66 +1,71 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="foreclosureForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionsDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionsDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionsDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionsDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionsDatePicker></mat-datepicker>
             <mat-error *ngIf="foreclosureForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Principal" | translate}}</mat-label>
-            <input matInput formControlName="outstandingPrincipalPortion">
+            <mat-label>{{ 'labels.inputs.Principal' | translate }}</mat-label>
+            <input matInput formControlName="outstandingPrincipalPortion" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Interest" | translate}}</mat-label>
-            <input matInput formControlName="outstandingInterestPortion">
+            <mat-label>{{ 'labels.inputs.Interest' | translate }}</mat-label>
+            <input matInput formControlName="outstandingInterestPortion" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Fee Amount" | translate}}</mat-label>
-            <input matInput formControlName="outstandingFeeChargesPortion">
+            <mat-label>{{ 'labels.inputs.Fee Amount' | translate }}</mat-label>
+            <input matInput formControlName="outstandingFeeChargesPortion" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Penalty Amount" | translate}}</mat-label>
-            <input matInput required formControlName="outstandingPenaltyChargesPortion">
+            <mat-label>{{ 'labels.inputs.Penalty Amount' | translate }}</mat-label>
+            <input matInput required formControlName="outstandingPenaltyChargesPortion" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <input matInput required formControlName="transactionAmount">
+            <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
+            <input matInput required formControlName="transactionAmount" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid"
-            *mifosxHasPermission="'FORECLOSURE_LOAN'">{{"labels.buttons.Foreclosure" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!foreclosureForm.valid"
+            *mifosxHasPermission="'FORECLOSURE_LOAN'"
+          >
+            {{ 'labels.buttons.Foreclosure' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
index 69b24242f0..d28c4872f6 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
@@ -1,29 +1,56 @@
 <mifosx-loans-account-close [dataObject]="actionButtonData" *ngIf="actions['Close']"></mifosx-loans-account-close>
 <mifosx-undo-approval *ngIf="actions['Undo Approval']"></mifosx-undo-approval>
-<mifosx-assign-loan-officer *ngIf="actions['Assign Loan Officer']" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
+<mifosx-assign-loan-officer
+  *ngIf="actions['Assign Loan Officer']"
+  [dataObject]="actionButtonData"
+></mifosx-assign-loan-officer>
 <mifosx-foreclosure [dataObject]="actionButtonData" *ngIf="actions['Foreclosure']"></mifosx-foreclosure>
 <mifosx-prepay-loan [dataObject]="actionButtonData" *ngIf="actions['Prepay Loan']"></mifosx-prepay-loan>
 <mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Make Repayment']"></mifosx-make-repayment>
 <mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Goodwill Credit']"></mifosx-make-repayment>
-<mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Interest Payment Waiver']"></mifosx-make-repayment>
+<mifosx-make-repayment
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Interest Payment Waiver']"
+></mifosx-make-repayment>
 <mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Payout Refund']"></mifosx-make-repayment>
-<mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Merchant Issued Refund']"></mifosx-make-repayment>
-<mifosx-loan-credit-balance-refund [dataObject]="actionButtonData" *ngIf="actions['Credit Balance Refund']"></mifosx-loan-credit-balance-refund>
+<mifosx-make-repayment
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Merchant Issued Refund']"
+></mifosx-make-repayment>
+<mifosx-loan-credit-balance-refund
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Credit Balance Refund']"
+></mifosx-loan-credit-balance-refund>
 <mifosx-waive-interest [dataObject]="actionButtonData" *ngIf="actions['Waive Interest']"></mifosx-waive-interest>
 <mifosx-write-off-page [dataObject]="actionButtonData" *ngIf="actions['Write Off']"></mifosx-write-off-page>
-<mifosx-close-as-rescheduled [dataObject]="actionButtonData" *ngIf="actions['Close (as Rescheduled)']"></mifosx-close-as-rescheduled>
+<mifosx-close-as-rescheduled
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Close (as Rescheduled)']"
+></mifosx-close-as-rescheduled>
 <mifosx-loan-reschedule [dataObject]="actionButtonData" *ngIf="actions['Reschedule']"></mifosx-loan-reschedule>
-<mifosx-recovery-repayment [dataObject]="actionButtonData" *ngIf="actions['Recovery Payment']"></mifosx-recovery-repayment>
+<mifosx-recovery-repayment
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Recovery Payment']"
+></mifosx-recovery-repayment>
 <mifosx-view-guarantors [dataObject]="actionButtonData" *ngIf="actions['View Guarantors']"></mifosx-view-guarantors>
 <mifosx-create-guarantor [dataObject]="actionButtonData" *ngIf="actions['Create Guarantor']"></mifosx-create-guarantor>
-<mifosx-disburse-to-savings-account [dataObject]="actionButtonData" *ngIf="actions['Disburse to Savings']"></mifosx-disburse-to-savings-account>
+<mifosx-disburse-to-savings-account
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Disburse to Savings']"
+></mifosx-disburse-to-savings-account>
 <mifosx-reject-loan *ngIf="actions['Reject']"></mifosx-reject-loan>
 <mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions['Disburse']"></mifosx-disburse>
 <mifosx-withdrawn-by-client *ngIf="actions['Withdrawn by Client']"></mifosx-withdrawn-by-client>
 <mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions['Add Collateral']"></mifosx-add-collateral>
-<mifosx-undo-disbursal *ngIf="actions['Undo Disbursal'] || actions['Undo Last Disbursal']" [actionName]="actionName"></mifosx-undo-disbursal>
-<mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions['Loan Screen Reports']"></mifosx-loan-screen-reports>
-<mifosx-approve-loan *ngIf="actions['Approve']" ></mifosx-approve-loan>
+<mifosx-undo-disbursal
+  *ngIf="actions['Undo Disbursal'] || actions['Undo Last Disbursal']"
+  [actionName]="actionName"
+></mifosx-undo-disbursal>
+<mifosx-loan-screen-reports
+  [dataObject]="actionButtonData"
+  *ngIf="actions['Loan Screen Reports']"
+></mifosx-loan-screen-reports>
+<mifosx-approve-loan *ngIf="actions['Approve']"></mifosx-approve-loan>
 <mifosx-add-loan-charge *ngIf="actions['Add Loan Charge']"></mifosx-add-loan-charge>
 <mifosx-edit-repayment-schedule *ngIf="actions['Edit Repayment Schedule']"></mifosx-edit-repayment-schedule>
 <mifosx-charge-off [dataObject]="actionButtonData" *ngIf="actions['Charge-Off']"></mifosx-charge-off>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html b/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html
index 4cb9a4e16c..2f7c781c41 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html
@@ -1,51 +1,59 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="creditBalanceLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="creditBalanceLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="creditBalanceLoanForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!creditBalanceLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html b/src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html
index 96025de3a3..6a0eb7698d 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html
@@ -1,65 +1,70 @@
 <div class="container mat-elevation-z8">
+  <mat-card>
+    <form [formGroup]="reagingLoanForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Number of Installments' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="numberOfInstallments" />
+          </mat-form-field>
 
-    <mat-card>
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Frequency Number' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="frequencyNumber" />
+          </mat-form-field>
 
-        <form [formGroup]="reagingLoanForm" (ngSubmit)="submit()">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
+            <mat-select formControlName="frequencyType">
+              <mat-option *ngFor="let frequencyType of frequencyOptions" [value]="frequencyType.code">
+                {{ frequencyType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
 
-            <mat-card-content>
+          <mat-form-field (click)="startDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #startDatePicker></mat-datepicker>
+            <mat-error *ngIf="reagingLoanForm.controls.startDate.hasError('required')">
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-                <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
+            <input matInput formControlName="note" />
+          </mat-form-field>
 
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.Number of Installments" | translate}}</mat-label>
-                        <input type="number" matInput required formControlName="numberOfInstallments">
-                    </mat-form-field>
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
+          </mat-form-field>
+        </div>
 
-                  <mat-form-field>
-                    <mat-label>{{"labels.inputs.Frequency Number" | translate}}</mat-label>
-                    <input type="number" matInput required formControlName="frequencyNumber">
-                  </mat-form-field>
-
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.Frequency Type" | translate}}</mat-label>
-                        <mat-select formControlName="frequencyType">
-                          <mat-option *ngFor="let frequencyType of frequencyOptions" [value]="frequencyType.code">
-                            {{ frequencyType.value }}
-                          </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-
-                    <mat-form-field (click)="startDatePicker.open()">
-                        <mat-label>{{"labels.inputs.Start Date" | translate}}</mat-label>
-                        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required
-                            formControlName="startDate">
-                        <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-                        <mat-datepicker #startDatePicker></mat-datepicker>
-                        <mat-error *ngIf="reagingLoanForm.controls.startDate.hasError('required')">
-                            {{"labels.inputs.Start Date" | translate}} {{"labels.commons.is" | translate}}
-                            <strong>{{"labels.commons.required" | translate}}</strong>
-                        </mat-error>
-                    </mat-form-field>
-
-
-                  <mat-form-field>
-                    <mat-label>{{"labels.inputs.Reason" | translate}}</mat-label>
-                    <input matInput formControlName="note">
-                  </mat-form-field>
-
-
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-                        <input matInput formControlName="externalId">
-                    </mat-form-field>
-                </div>
-
-                <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                    <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" |
-                        translate}}</button>
-                    <button mat-raised-button color="primary" [disabled]="!reagingLoanForm.valid"
-                        *mifosxHasPermission="'REAGING_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
-                </mat-card-actions>
-
-            </mat-card-content>
-        </form>
-    </mat-card>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!reagingLoanForm.valid"
+            *mifosxHasPermission="'REAGING_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
+        </mat-card-actions>
+      </mat-card-content>
+    </form>
+  </mat-card>
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component.html b/src/app/loans/loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component.html
index bee2ee5ebe..d45a47a084 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component.html
@@ -1,33 +1,35 @@
 <div class="container mat-elevation-z8">
+  <mat-card>
+    <form [formGroup]="reamortizeLoanForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
+            <input matInput formControlName="note" />
+          </mat-form-field>
+        </div>
 
-    <mat-card>
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
+          </mat-form-field>
+        </div>
 
-        <form [formGroup]="reamortizeLoanForm" (ngSubmit)="submit()">
-
-            <mat-card-content>
-
-                <div fxLayout="column">
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.Reason" | translate}}</mat-label>
-                        <input matInput formControlName="note">
-                    </mat-form-field>
-                </div>
-
-                <div fxLayout="column">
-                    <mat-form-field>
-                        <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-                        <input matInput formControlName="externalId">
-                    </mat-form-field>
-                </div>
-
-                <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                    <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" |
-                        translate}}</button>
-                    <button mat-raised-button color="primary" [disabled]="!reamortizeLoanForm.valid"
-                        *mifosxHasPermission="'REAMORTIZE_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
-                </mat-card-actions>
-
-            </mat-card-content>
-        </form>
-    </mat-card>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!reamortizeLoanForm.valid"
+            *mifosxHasPermission="'REAMORTIZE_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
+        </mat-card-actions>
+      </mat-card-content>
+    </form>
+  </mat-card>
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html b/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html
index 8029c6827a..65802221f0 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html
@@ -1,107 +1,130 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="rescheduleLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rescheduleDatePicker.open()">
-            <mat-label>{{"labels.inputs.Reschedule from Installment On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [matDatepicker]="rescheduleDatePicker" required
-              formControlName="rescheduleFromDate">
+            <mat-label>{{ 'labels.inputs.Reschedule from Installment On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [matDatepicker]="rescheduleDatePicker"
+              required
+              formControlName="rescheduleFromDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rescheduleDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rescheduleDatePicker></mat-datepicker>
             <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleFromDate.hasError('required')">
-              {{"labels.inputs.Reschedule Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Reschedule Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Reason for Rescheduling" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Reason for Rescheduling' | translate }}</mat-label>
             <mat-select formControlName="rescheduleReasonId">
               <mat-option *ngFor="let rescheduleReasonCode of codes" [value]="rescheduleReasonCode.id">
                 {{ rescheduleReasonCode.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleReasonId.hasError('required')">
-              {{"labels.inputs.Reason for Rescheduling" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Reason for Rescheduling' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="submittedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Submitted On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [matDatepicker]="submittedDatePicker" required
-              formControlName="submittedOnDate">
+            <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [matDatepicker]="submittedDatePicker"
+              required
+              formControlName="submittedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="submittedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedDatePicker></mat-datepicker>
             <mat-error *ngIf="rescheduleLoanForm.controls.submittedOnDate.hasError('required')">
-              {{"labels.inputs.Submitted On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Submitted On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Comments" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="rescheduleReasonComment"></textarea>
           </mat-form-field>
 
-          <mat-checkbox [formControl]="changeRepaymentDate"> {{"labels.inputs.Change Repayment Date" | translate}} </mat-checkbox>
+          <mat-checkbox [formControl]="changeRepaymentDate">
+            {{ 'labels.inputs.Change Repayment Date' | translate }}
+          </mat-checkbox>
 
           <ng-container *ngIf="changeRepaymentDate.value">
             <mat-form-field (click)="installmentrescheduledDatePicker.open()">
-              <mat-label>{{"labels.inputs.Installment Rescheduled to" | translate}}</mat-label>
-              <input matInput [min]="minDate" [matDatepicker]="installmentrescheduledDatePicker"
-                formControlName="adjustedDueDate">
+              <mat-label>{{ 'labels.inputs.Installment Rescheduled to' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [matDatepicker]="installmentrescheduledDatePicker"
+                formControlName="adjustedDueDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="installmentrescheduledDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #installmentrescheduledDatePicker></mat-datepicker>
             </mat-form-field>
           </ng-container>
 
-          <mat-checkbox [formControl]="introduceGracePeriods"> {{"labels.inputs.Introduce Mid-term grace periods" | translate}} </mat-checkbox>
+          <mat-checkbox [formControl]="introduceGracePeriods">
+            {{ 'labels.inputs.Introduce Mid-term grace periods' | translate }}
+          </mat-checkbox>
 
           <ng-container *ngIf="introduceGracePeriods.value">
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Principal Grace Periods" | translate}} </mat-label>
-              <input matInput formControlName="graceOnPrincipal">
+              <mat-label>{{ 'labels.inputs.Principal Grace Periods' | translate }} </mat-label>
+              <input matInput formControlName="graceOnPrincipal" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Interest Grace Periods" | translate}} </mat-label>
-              <input matInput formControlName="graceOnInterest">
+              <mat-label>{{ 'labels.inputs.Interest Grace Periods' | translate }} </mat-label>
+              <input matInput formControlName="graceOnInterest" />
             </mat-form-field>
           </ng-container>
 
-          <mat-checkbox [formControl]="extendRepaymentPeriod"> {{"labels.inputs.Extend Repayment Period" | translate}} </mat-checkbox>
+          <mat-checkbox [formControl]="extendRepaymentPeriod">
+            {{ 'labels.inputs.Extend Repayment Period' | translate }}
+          </mat-checkbox>
 
           <ng-container *ngIf="extendRepaymentPeriod.value">
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Number Of new Repayments" | translate}}</mat-label>
-              <input matInput formControlName="extraTerms">
+              <mat-label>{{ 'labels.inputs.Number Of new Repayments' | translate }}</mat-label>
+              <input matInput formControlName="extraTerms" />
             </mat-form-field>
           </ng-container>
 
-          <mat-checkbox [formControl]="adjustinterestrates"> {{"labels.inputs.Adjust interest rates for remainder of loan" | translate}} </mat-checkbox>
+          <mat-checkbox [formControl]="adjustinterestrates">
+            {{ 'labels.inputs.Adjust interest rates for remainder of loan' | translate }}
+          </mat-checkbox>
           <ng-container *ngIf="adjustinterestrates.value">
             <mat-form-field>
-              <mat-label>{{"labels.inputs.New Interest Rate" | translate}}</mat-label>
-              <input matInput formControlName="newInterestRate">
+              <mat-label>{{ 'labels.inputs.New Interest Rate' | translate }}</mat-label>
+              <input matInput formControlName="newInterestRate" />
             </mat-form-field>
           </ng-container>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!rescheduleLoanForm.valid"
+            *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html b/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
index 009c4c8fbe..3112dfe600 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
@@ -1,57 +1,46 @@
 <div class="container m-b-20">
-
   <mat-card>
-
     <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
-
       <mat-card-content>
-
         <div>
-
           <mat-form-field fxFlex>
-            <mat-label>{{"labels.inputs.Loan Screen Reports" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Loan Screen Reports' | translate }}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
                 {{ template.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
-              {{"labels.inputs.Screen Report" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Screen Report' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
           <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{"labels.buttons.Generate Report" | translate}}
+            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }}
           </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <div #output class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="3%">
-
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
-        {{"labels.buttons.Print" | translate}}
+        {{ 'labels.buttons.Print' | translate }}
       </button>
     </div>
 
     <div #screenReport class="screen-report">
-      <p>{{"labels.text.Please select a screen report." | translate}}</p>
+      <p>{{ 'labels.text.Please select a screen report.' | translate }}</p>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
index 1c2a999118..7156b6b8dd 100644
--- a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html
@@ -1,41 +1,46 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Closed On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Closed Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
-            *mifosxHasPermission="'CLOSE_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSE_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
index 24bb66b79b..6c15597fd2 100644
--- a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
@@ -1,27 +1,29 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="repaymentLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxLayout="row wrap" class="content">
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Principal' | translate}}
+              {{ 'Principal' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -29,7 +31,7 @@
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Interest' | translate}}
+              {{ 'Interest' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -37,7 +39,7 @@
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Fees' | translate}}
+              {{ 'Fees' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -45,7 +47,7 @@
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Penalties' | translate}}
+              {{ 'Penalties' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -53,18 +55,21 @@
             </div>
           </div>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="repaymentLoanForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -76,7 +81,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -84,48 +89,51 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account" | translate}} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Cheque" | translate}} #</mat-label>
-              <input matInput formControlName="checkNumber">
+              <mat-label> {{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="checkNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Routing Code" | translate}}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label> {{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Reciept" | translate}} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label> {{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Bank" | translate}} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label> {{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label> {{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label> {{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!repaymentLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
index 74d8a2840b..24a348d93b 100644
--- a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
@@ -1,27 +1,29 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="prepayLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxLayout="row wrap" class="content">
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Principal' | translate}}
+              {{ 'Principal' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -29,7 +31,7 @@
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Interest' | translate}}
+              {{ 'Interest' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -37,7 +39,7 @@
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Fees' | translate}}
+              {{ 'Fees' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -45,7 +47,7 @@
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
-              {{ 'Penalties' | translate}}
+              {{ 'Penalties' | translate }}
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
@@ -53,18 +55,21 @@
             </div>
           </div>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="prepayLoanForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -76,7 +81,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -84,48 +89,51 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account" | translate}} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque" | translate}} #</mat-label>
-              <input matInput formControlName="checkNumber">
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="checkNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code" | translate}}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept" | translate}} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank" | translate}} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!prepayLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
index 7633a55b36..93e40315c5 100644
--- a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
@@ -1,36 +1,41 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="recoveryRepaymentLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="transactionDatePicker.open()">
-            <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="transactionDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="recoveryRepaymentLoanForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-            <input matInput formControlName="externalId">
+            <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+            <input matInput formControlName="externalId" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
                 {{ paymentType.name }}
@@ -42,7 +47,7 @@
             <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                 </div>
               </mat-slide-toggle>
             </span>
@@ -50,48 +55,51 @@
 
           <ng-container *ngIf="showPaymentDetails">
             <mat-form-field>
-              <mat-label> {{"labels.inputs.Account" | translate}} #</mat-label>
-              <input matInput formControlName="accountNumber">
+              <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>
+              <input matInput formControlName="accountNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Cheque" | translate}} #</mat-label>
-              <input matInput formControlName="checkNumber">
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }} #</mat-label>
+              <input matInput formControlName="checkNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Routing Code" | translate}}</mat-label>
-              <input matInput formControlName="routingCode">
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+              <input matInput formControlName="routingCode" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Reciept" | translate}} #</mat-label>
-              <input matInput formControlName="receiptNumber">
+              <mat-label>{{ 'labels.inputs.Reciept' | translate }} #</mat-label>
+              <input matInput formControlName="receiptNumber" />
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{"labels.inputs.Bank" | translate}} #</mat-label>
-              <input matInput formControlName="bankNumber">
+              <mat-label>{{ 'labels.inputs.Bank' | translate }} #</mat-label>
+              <input matInput formControlName="bankNumber" />
             </mat-form-field>
           </ng-container>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!recoveryRepaymentLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html b/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html
index db6c721303..856ebf631c 100644
--- a/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html
@@ -1,41 +1,46 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="rejectLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectedDatePicker.open()">
-            <mat-label>{{"labels.inputs.Rejected On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required
-              formControlName="rejectedOnDate">
+            <mat-label>{{ 'labels.inputs.Rejected On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectedDatePicker"
+              required
+              formControlName="rejectedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectLoanForm.controls.rejectedOnDate.hasError('required')">
-              {{"labels.inputs.Rejected Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejected Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid"
-            *mifosxHasPermission="'REJECT_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!rejectLoanForm.valid"
+            *mifosxHasPermission="'REJECT_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
index 0d10902867..a112367df9 100644
--- a/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html
@@ -1,26 +1,21 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="column">
-
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput [formControl]="note"></textarea>
         </mat-form-field>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" (click)="submit()"
-            *mifosxHasPermission="'APPROVALUNDO_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'APPROVALUNDO_LOAN'">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html b/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html
index c21dc9fe47..34a37158de 100644
--- a/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html
@@ -1,26 +1,21 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="column">
-
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput required [formControl]="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" (click)="submit()"
-          *mifosxHasPermission="'DISBURSALUNDO_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'DISBURSALUNDO_LOAN'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html b/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
index e466112358..614f4d5bfd 100644
--- a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
@@ -1,32 +1,36 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <div class="view-guarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
-
       <div fxFlex="49%">
         <table>
           <tbody>
             <tr>
-              <td>{{"labels.inputs.Disbursement Date" | translate}}</td>
-              <td>{{dataObject.timeline.actualDisbursementDate}}<span
-                  *ngIf="!dataObject.timeline.actualDisbursementDate">{{"labels.inputs.Not Available" | translate}}</span></td>
+              <td>{{ 'labels.inputs.Disbursement Date' | translate }}</td>
+              <td>
+                {{ dataObject.timeline.actualDisbursementDate
+                }}<span *ngIf="!dataObject.timeline.actualDisbursementDate">{{
+                  'labels.inputs.Not Available' | translate
+                }}</span>
+              </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Currency" | translate}}</td>
-              <td>{{dataObject.currency.name}}</td>
+              <td>{{ 'labels.inputs.Currency' | translate }}</td>
+              <td>{{ dataObject.currency.name }}</td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Loan Officer" | translate}}</td>
-              <td>{{dataObject.loanOfficerName}} <span *ngIf="!dataObject.loanOfficerName">{{"labels.inputs.Unassigned" | translate}}</span>
+              <td>{{ 'labels.inputs.Loan Officer' | translate }}</td>
+              <td>
+                {{ dataObject.loanOfficerName }}
+                <span *ngIf="!dataObject.loanOfficerName">{{ 'labels.inputs.Unassigned' | translate }}</span>
                 <span *ngIf="dataObject.loanOfficerName">
                   <fa-icon icon="times"></fa-icon>
-                </span></td>
+                </span>
+              </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.External Id" | translate}}</td>
+              <td>{{ 'labels.inputs.External Id' | translate }}</td>
               <td>
-                <mifosx-external-identifier externalId="{{dataObject.externalId}}"></mifosx-external-identifier>
+                <mifosx-external-identifier externalId="{{ dataObject.externalId }}"></mifosx-external-identifier>
               </td>
             </tr>
           </tbody>
@@ -37,27 +41,29 @@
         <table>
           <tbody>
             <tr>
-              <td>{{"labels.inputs.Loan Purpose" | translate}}</td>
+              <td>{{ 'labels.inputs.Loan Purpose' | translate }}</td>
               <td>
-                {{dataObject.loanPurposeName}} <span *ngIf="!dataObject.loanPurposeName"> {{"labels.inputs.Not Provided" | translate}} </span>
+                {{ dataObject.loanPurposeName }}
+                <span *ngIf="!dataObject.loanPurposeName"> {{ 'labels.inputs.Not Provided' | translate }} </span>
               </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Approved Amount" | translate}}</td>
+              <td>{{ 'labels.inputs.Approved Amount' | translate }}</td>
               <td>
-                <span>{{dataObject.approvedPrincipal | formatNumber}}</span>
+                <span>{{ dataObject.approvedPrincipal | formatNumber }}</span>
               </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Disburse Amount" | translate}}</td>
+              <td>{{ 'labels.inputs.Disburse Amount' | translate }}</td>
               <td>
-                <span>{{dataObject.principal | formatNumber}}</span>
+                <span>{{ dataObject.principal | formatNumber }}</span>
               </td>
             </tr>
             <tr>
-              <td>{{"labels.inputs.Arrears By" | translate}}</td>
-              <td>{{dataObject.summary.totalOverdue | formatNumber}}
-                <span *ngIf="dataObject.summary.totalOverdue < 0">{{"labels.inputs.Not Provided" | translate}}</span>
+              <td>{{ 'labels.inputs.Arrears By' | translate }}</td>
+              <td>
+                {{ dataObject.summary.totalOverdue | formatNumber }}
+                <span *ngIf="dataObject.summary.totalOverdue < 0">{{ 'labels.inputs.Not Provided' | translate }}</span>
               </td>
             </tr>
           </tbody>
@@ -66,107 +72,118 @@
     </div>
 
     <div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
-
       <!-- guarantors details table -->
       <div class="heading-content">
         <div fxLayout="column" fxFlex="50%">
           <div class="heading-name">
-            <h3>{{"labels.heading.Guarantors Details" | translate}}</h3>
+            <h3>{{ 'labels.heading.Guarantors Details' | translate }}</h3>
           </div>
         </div>
         <div fxLayout="column" fxFlex="50%">
           <div fxLayout="row" fxLayoutAlign="flex-end">
-            <button mat-raised-button class="f-right" color="primary"
-              (click)="toggleGuarantorsDetailsOverview()">{{showDeletedGuarantorsAccounts?'Hide Deleted Guarantors':'Show Deleted Guarantors'}}</button>
+            <button mat-raised-button class="f-right" color="primary" (click)="toggleGuarantorsDetailsOverview()">
+              {{ showDeletedGuarantorsAccounts ? 'Hide Deleted Guarantors' : 'Show Deleted Guarantors' }}
+            </button>
           </div>
         </div>
       </div>
 
-      <table fxFlexFill mat-table
-        [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
+      <table
+        fxFlexFill
+        mat-table
+        [dataSource]="guarantorDetails | accountsFilter: 'guarantor' : showDeletedGuarantorsAccounts"
+      >
         <ng-container matColumnDef="fullname">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
-              {{guarantor.firstname}} &nbsp; {{guarantor.lastname}}
+              {{ guarantor.firstname }} &nbsp; {{ guarantor.lastname }}
             </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="relationship">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Relationship" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Relationship' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
-              {{guarantor.clientRelationshipType.name}}
+              {{ guarantor.clientRelationshipType.name }}
             </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="guarantortype">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Guarantor Type" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Guarantor Type' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
-              {{guarantor.guarantorType.value}}
+              {{ guarantor.guarantorType.value }}
             </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="depositAccount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Deposit Account" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Deposit Account' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
-            <span *ngIf="!guarantor.guarantorFundingDetails">
-
-            </span>
+            <span *ngIf="!guarantor.guarantorFundingDetails"> </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
-            <span *ngIf="!guarantor.guarantorFundingDetails">
-
-            </span>
+            <span *ngIf="!guarantor.guarantorFundingDetails"> </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="remainingAmount">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Remaining Amount" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Remaining Amount' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
-            <span *ngIf="!guarantor.guarantorFundingDetails">
-
-            </span>
+            <span *ngIf="!guarantor.guarantorFundingDetails"> </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="status">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor">
             <span *ngIf="!guarantor.guarantorFundingDetails">
               <span *ngIf="guarantor.status">
-                {{"labels.inputs.Active" | translate}}
+                {{ 'labels.inputs.Active' | translate }}
               </span>
               <span *ngIf="!guarantor.status">
-                {{"labels.inputs.Deleted" | translate}}
+                {{ 'labels.inputs.Deleted' | translate }}
               </span>
             </span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="action">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Action" | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Action' | translate }}</th>
           <td mat-cell *matCellDef="let guarantor; let id = index">
             <span *ngIf="!guarantor.guarantorFundingDetails">
-              <button mat-raised-button class="account-action-button" color="primary"
-                *mifosxHasPermission="'READ_SAVINGSACCOUNT'" (click)="viewGuarantorDetails(guarantor)">
+              <button
+                mat-raised-button
+                class="account-action-button"
+                color="primary"
+                *mifosxHasPermission="'READ_SAVINGSACCOUNT'"
+                (click)="viewGuarantorDetails(guarantor)"
+              >
                 <fa-icon icon="eye" class="m-r-10"></fa-icon>
               </button>
-              <button mat-raised-button class="account-action-button" color="primary"
-                *ngIf="guarantor.status && guarantor.guarantorType.id === 3 && guarantor.id">
+              <button
+                mat-raised-button
+                class="account-action-button"
+                color="primary"
+                *ngIf="guarantor.status && guarantor.guarantorType.id === 3 && guarantor.id"
+              >
                 <fa-icon icon="edit" class="m-r-10"></fa-icon>
               </button>
               <span *ngIf="guarantor.status">
-                <button mat-raised-button class="account-action-button" color="warn"
-                  *mifosxHasPermission="'DELETE_GUARANTOR'" (click)="deleteGuarantor(guarantor.id)">
+                <button
+                  mat-raised-button
+                  class="account-action-button"
+                  color="warn"
+                  *mifosxHasPermission="'DELETE_GUARANTOR'"
+                  (click)="deleteGuarantor(guarantor.id)"
+                >
                   <fa-icon icon="trash" class="m-r-10"></fa-icon>
                 </button>
               </span>
@@ -176,10 +193,7 @@ <h3>{{"labels.heading.Guarantors Details" | translate}}</h3>
 
         <tr mat-header-row *matHeaderRowDef="guarantorsDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: guarantorsDisplayedColumns"></tr>
-
       </table>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html b/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html
index 69933cb15c..76e53cf2c7 100644
--- a/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html
@@ -1,46 +1,54 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="loanInterestForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="interestDatePicker.open()">
-            <mat-label>{{"labels.inputs.Interest waived on" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Interest waived on' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="interestDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="interestDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #interestDatePicker></mat-datepicker>
             <mat-error *ngIf="loanInterestForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Interest Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Interest Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
             [inputFormControl]="loanInterestForm.controls.transactionAmount"
-            [inputLabel]="'Transaction Amount'">
+            [inputLabel]="'Transaction Amount'"
+          >
           </mifosx-input-amount>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid"
-            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!loanInterestForm.valid"
+            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html b/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html
index 724d0b74a7..bebd56af32 100644
--- a/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html
@@ -1,41 +1,46 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="withdrawnByClientLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
-            <mat-label>{{"labels.inputs.Withdrawn On" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required
-              formControlName="withdrawnOnDate">
+            <mat-label>{{ 'labels.inputs.Withdrawn On' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="withdrawnOnDatePicker"
+              required
+              formControlName="withdrawnOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawnByClientLoanForm.controls.withdrawnOnDate.hasError('required')">
-              {{"labels.inputs.Withdrawn On Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid"
-            *mifosxHasPermission="'WITHDRAW_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../../general']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!withdrawnByClientLoanForm.valid"
+            *mifosxHasPermission="'WITHDRAW_LOAN'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html b/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html
index 6d194b4300..191ee51f7c 100644
--- a/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html
@@ -1,46 +1,46 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <mat-card-content>
-
       <form [formGroup]="writeOffForm">
-
         <div fxLayout="column">
-
           <mat-form-field (click)="writeOffDatePicker.open()">
-            <mat-label>{{"labels.inputs.Write off on" | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="writeOffDatePicker" required
-              formControlName="transactionDate">
+            <mat-label>{{ 'labels.inputs.Write off on' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="writeOffDatePicker"
+              required
+              formControlName="transactionDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="writeOffDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #writeOffDatePicker></mat-datepicker>
             <mat-error *ngIf="writeOffForm.controls.transactionDate.hasError('required')">
-              {{"labels.inputs.Write Off Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Write Off Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-            <input matInput formControlName="amount">
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+            <input matInput formControlName="amount" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Note" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </form>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" (click)="submit()"
-          *mifosxHasPermission="'WRITEOFF_LOAN'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'WRITEOFF_LOAN'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
index 25d111dd26..99242a1c6e 100644
--- a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
+++ b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
@@ -1,10 +1,9 @@
 <div class="tab-container mat-typography">
   <div fxLayout="row" fxLayoutAlign="start center">
-
-    <h3 fxFlex="90%">{{"labels.inputs.Loan Collateral Details" | translate}}</h3>
+    <h3 fxFlex="90%">{{ 'labels.inputs.Loan Collateral Details' | translate }}</h3>
     <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
       <button mat-raised-button color="primary" [routerLink]="['../actions/Add Collateral']">
-        {{"labels.buttons.Add Collateral" | translate}}
+        {{ 'labels.buttons.Add Collateral' | translate }}
       </button>
     </div>
   </div>
@@ -14,16 +13,16 @@ <h3 fxFlex="90%">{{"labels.inputs.Loan Collateral Details" | translate}}</h3>
       <tbody>
         <tr>
           <td fxFlex="25%">
-            <b>{{"labels.inputs.Number of Collaterals" | translate}} :</b>
+            <b>{{ 'labels.inputs.Number of Collaterals' | translate }} :</b>
           </td>
           <td fxFlex="25%" class="left">
-            {{loanCollaterals?.length | formatNumber}}
+            {{ loanCollaterals?.length | formatNumber }}
           </td>
           <td fxFlex="25%">
-            <b>{{"labels.inputs.Total Amount" | translate}} :</b>
+            <b>{{ 'labels.inputs.Total Amount' | translate }} :</b>
           </td>
           <td fxFlex="25%" class="left">
-            {{totalAmount | formatNumber}}
+            {{ totalAmount | formatNumber }}
           </td>
         </tr>
       </tbody>
@@ -31,34 +30,32 @@ <h3 fxFlex="90%">{{"labels.inputs.Loan Collateral Details" | translate}}</h3>
   </div>
 
   <table mat-table *ngIf="loanCollaterals?.length > 0" [dataSource]="loanCollaterals">
-
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.id }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="currency">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Currency" | translate}}</th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.currency.code }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Currency' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.currency.code }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.description }}</td>
     </ng-container>
 
     <ng-container matColumnDef="total">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Value" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.total }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Total Value' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.total }}</td>
     </ng-container>
 
     <ng-container matColumnDef="totalCollateral">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Total Collateral Value" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalCollateral }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Total Collateral Value' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.totalCollateral }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html b/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html
index 3a0781768b..afae0cd57d 100644
--- a/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html
+++ b/src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html
@@ -1,19 +1,20 @@
 <div class="container">
+  <h3>{{ 'labels.heading.Loan Delinquency Tags' | translate }}</h3>
 
-  <h3>{{"labels.heading.Loan Delinquency Tags" | translate}}</h3>
-
-  <table mat-table [dataSource]="loanDelinquencyTags" *ngIf="loanDelinquencyTags.length>0">
-
+  <table mat-table [dataSource]="loanDelinquencyTags" *ngIf="loanDelinquencyTags.length > 0">
     <ng-container matColumnDef="classification">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Delinquency Classification" | translate}} </th>
-      <td mat-cell *matCellDef="let item"> {{ item.delinquencyRange.classification }}
-        <span *ngIf="item.delinquencyRange.maximumAgeDays">( {{ item.delinquencyRange.minimumAgeDays }} - {{ item.delinquencyRange.maximumAgeDays }} )</span>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Delinquency Classification' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.delinquencyRange.classification }}
+        <span *ngIf="item.delinquencyRange.maximumAgeDays"
+          >( {{ item.delinquencyRange.minimumAgeDays }} - {{ item.delinquencyRange.maximumAgeDays }} )</span
+        >
         <span *ngIf="!item.delinquencyRange.maximumAgeDays">( {{ item.delinquencyRange.minimumAgeDays }} )</span>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="addedOn">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Added On" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Added On' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.addedOnDate">
           {{ item.addedOnDate | dateFormat }}
@@ -22,7 +23,7 @@ <h3>{{"labels.heading.Loan Delinquency Tags" | translate}}</h3>
     </ng-container>
 
     <ng-container matColumnDef="liftedOn">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lifted On" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lifted On' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.liftedOnDate">
           {{ item.liftedOnDate | dateFormat }}
@@ -31,73 +32,81 @@ <h3>{{"labels.heading.Loan Delinquency Tags" | translate}}</h3>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="loanDelinquencyTagsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanDelinquencyTagsColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanDelinquencyTagsColumns"></tr>
   </table>
 
   <div *ngIf="installmentLevelDelinquency.length > 0">
-
-    <h3>{{"labels.heading.Loan Delinquency Installment Tags" | translate}}</h3>
+    <h3>{{ 'labels.heading.Loan Delinquency Installment Tags' | translate }}</h3>
 
     <table mat-table [dataSource]="installmentLevelDelinquency">
-
       <ng-container matColumnDef="classification">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Delinquency Classification" | translate}} </th>
-        <td mat-cell *matCellDef="let item"> {{ item.classification }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Delinquency Classification' | translate }}</th>
+        <td mat-cell *matCellDef="let item">{{ item.classification }}</td>
       </ng-container>
 
       <ng-container matColumnDef="minimumAgeDays">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Days" | translate}} </th>
-        <td mat-cell *matCellDef="let item"> {{ item.minimumAgeDays | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Days' | translate }}</th>
+        <td mat-cell *matCellDef="let item">{{ item.minimumAgeDays | formatNumber }}</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-        <td mat-cell *matCellDef="let item"> {{ item.delinquentAmount | currency:currency.code:'symbol-narrow':'1.2-2' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let item">
+          {{ item.delinquentAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="installmentDelinquencyTagsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: installmentDelinquencyTagsColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: installmentDelinquencyTagsColumns"></tr>
     </table>
-
   </div>
 
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-t-20 m-b-10" *ngIf="allowPause">
-    <button mat-raised-button color="primary" (click)="createDelinquencyAction()" *mifosxHasPermission="'CREATE_DELINQUENCY_ACTION'">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="createDelinquencyAction()"
+      *mifosxHasPermission="'CREATE_DELINQUENCY_ACTION'"
+    >
       <fa-icon icon="pause" class="m-r-10"></fa-icon>{{ 'labels.buttons.Pause Delinquency Classification' | translate }}
     </button>
   </div>
 
   <div *ngIf="loanDelinquencyActions.length > 0" class="m-t-10">
-    <h3>{{"labels.heading.Loan Delinquency Actions" | translate}}</h3>
+    <h3>{{ 'labels.heading.Loan Delinquency Actions' | translate }}</h3>
 
     <table mat-table [dataSource]="loanDelinquencyActions">
-
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Action" | translate}} </th>
-        <td mat-cell *matCellDef="let item" ngClass="{{actionClass(item.action)}}"> {{ item.action }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Action' | translate }}</th>
+        <td mat-cell *matCellDef="let item" ngClass="{{ actionClass(item.action) }}">{{ item.action }}</td>
       </ng-container>
 
       <ng-container matColumnDef="startDate">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Start Date" | translate}} </th>
-        <td mat-cell *matCellDef="let item"> {{ item.startDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
+        <td mat-cell *matCellDef="let item">{{ item.startDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="endDate">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.End Date" | translate}} </th>
-        <td mat-cell *matCellDef="let item"> {{ item.endDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.End Date' | translate }}</th>
+        <td mat-cell *matCellDef="let item">{{ item.endDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdOn">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Created On" | translate}} </th>
-        <td mat-cell *matCellDef="let item"> {{ item.createdOn | datetimeFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Created On' | translate }}</th>
+        <td mat-cell *matCellDef="let item">{{ item.createdOn | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let item">
           <span *ngIf="isCurrentAndPauseAction(item)">
-            <button mat-button color="primary" (click)="resumeDelinquencyClassification(item)"
-              *mifosxHasPermission="'CREATE_DELINQUENCY_ACTION'" matTooltip="{{'tooltips.Resume Delinquency Classification' | translate}}" >
+            <button
+              mat-button
+              color="primary"
+              (click)="resumeDelinquencyClassification(item)"
+              *mifosxHasPermission="'CREATE_DELINQUENCY_ACTION'"
+              matTooltip="{{ 'tooltips.Resume Delinquency Classification' | translate }}"
+            >
               <fa-icon icon="play" class="m-r-10"></fa-icon>
             </button>
           </span>
@@ -105,9 +114,7 @@ <h3>{{"labels.heading.Loan Delinquency Actions" | translate}}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="loanDelinquencyActionsColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: loanDelinquencyActionsColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: loanDelinquencyActionsColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html
index 8c0dd9b622..1be9a0313e 100644
--- a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html
+++ b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html
@@ -1,4 +1,6 @@
-<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
+<mifosx-entity-documents-tab
+  [entityType]="entityType"
+  [entityId]="entityId"
   [entityDocuments]="entityDocuments"
   [callbackUpload]="uploadDocument"
   [callbackDownload]="downloadDocument"
diff --git a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
index eadfbffa26..63cad50065 100644
--- a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
+++ b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
@@ -1,29 +1,27 @@
 <div class="container">
+  <h3>{{ 'labels.heading.Term Variations' | translate }}</h3>
+  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData.length > 0">
+    <ng-container matColumnDef="termType">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.termType.value | translate }}</td>
+    </ng-container>
 
-    <h3>{{"labels.heading.Term Variations" | translate}}</h3>
-    <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData.length>0">
+    <ng-container matColumnDef="applicableFrom">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Added On' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.termVariationApplicableFrom | dateFormat }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="termType">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
-          <td mat-cell *matCellDef="let item">{{ item.termType.value | translate }}</td>
-        </ng-container>
-    
-        <ng-container matColumnDef="applicableFrom">
-          <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Added On" | translate}} </th>
-          <td mat-cell *matCellDef="let item">{{ item.termVariationApplicableFrom | dateFormat }}</td>
-        </ng-container>
+    <ng-container matColumnDef="value">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.decimalValue | formatNumber }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="value">
-            <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Value" | translate}} </th>
-            <td mat-cell *matCellDef="let item">{{ item.decimalValue | formatNumber }}</td>
-        </ng-container>
-        
-        <ng-container matColumnDef="specificToInstallment">
-            <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Specific to Installment" | translate}} </th>
-            <td mat-cell *matCellDef="let item">{{ item.isSpecificToInstallment | yesNo }}</td>
-        </ng-container>
+    <ng-container matColumnDef="specificToInstallment">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Specific to Installment' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.isSpecificToInstallment | yesNo }}</td>
+    </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="loanDTermVariationsColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns;"></tr>
-    </table>
-</div>
\ No newline at end of file
+    <tr mat-header-row *matHeaderRowDef="loanDTermVariationsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns"></tr>
+  </table>
+</div>
diff --git a/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html b/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
index 75869c6be0..dc2607d098 100644
--- a/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
+++ b/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
@@ -1,32 +1,28 @@
 <div class="container">
-
   <div fxFlexFill>
-    <span fxFlex="40%">{{"labels.inputs.Maximum allowed outstanding balance" | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
     <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | formatNumber }}</span>
   </div>
 
-  <h3>{{"labels.heading.Loan Tranche Details" | translate}}</h3>
+  <h3>{{ 'labels.heading.Loan Tranche Details' | translate }}</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="flex-end" fxLayoutGap="2%">
-    <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()"
-      (click)="addDisbursementDataEntry()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{"labels.buttons.Add" | translate}}
+    <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()" (click)="addDisbursementDataEntry()">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
     </button>
-    <button mat-raised-button color="primary" *ngIf="!pristine"
-      (click)="editDisbursementData()">
-      {{"labels.buttons.Apply Changes" | translate}}
+    <button mat-raised-button color="primary" *ngIf="!pristine" (click)="editDisbursementData()">
+      {{ 'labels.buttons.Apply Changes' | translate }}
     </button>
   </div>
 
   <table mat-table [dataSource]="disbursementDataSource" *ngIf="disbursementDataSource.length > 0">
-
     <ng-container matColumnDef="expected disbursement on">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Expected Disbursement On" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expected Disbursement On' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.expectedDisbursementDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="disbursed on">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Disbursed On" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Disbursed On' | translate }}</th>
       <td mat-cell *matCellDef="let ele">
         <span *ngIf="ele.actualDisbursementDate">
           {{ ele.actualDisbursementDate | dateFormat }}
@@ -35,51 +31,61 @@ <h3>{{"labels.heading.Loan Tranche Details" | translate}}</h3>
     </ng-container>
 
     <ng-container matColumnDef="principal">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Principal" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.principal }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Principal' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.principal }}</td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let ele; let rowIndex = index">
         <span *ngIf="ele.actualDisbursementDate">
-          <i class="fa fa-check "></i>
+          <i class="fa fa-check"></i>
         </span>
-        <button type="button" mat-icon-button color="primary"
-          (click)="editDisbursementDataEntry(rowIndex)" matTooltip="{{ 'tooltips.Edit' | translate}}"
-          matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()">
+        <button
+          type="button"
+          mat-icon-button
+          color="primary"
+          (click)="editDisbursementDataEntry(rowIndex)"
+          matTooltip="{{ 'tooltips.Edit' | translate }}"
+          matTooltipPosition="left"
+          *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()"
+        >
           <fa-icon icon="edit"></fa-icon>
         </button>
-        <button type="button" mat-icon-button color="warn"
-          (click)="removeDisbursementDataEntry(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
-          matTooltipPosition="left" *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()">
+        <button
+          type="button"
+          mat-icon-button
+          color="warn"
+          (click)="removeDisbursementDataEntry(rowIndex)"
+          matTooltip="{{ 'tooltips.Delete' | translate }}"
+          matTooltipPosition="left"
+          *ngIf="!ele.actualDisbursementDate && showActionsTrancheButtons()"
+        >
           <fa-icon icon="trash"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="expectedDisbursementColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: expectedDisbursementColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: expectedDisbursementColumns"></tr>
   </table>
 
   <div *ngIf="loanDetails.emiAmountVariations.length > 0">
-
-    <h3>{{"labels.heading.Installment Amount Variations" | translate}}: </h3>
+    <h3>{{ 'labels.heading.Installment Amount Variations' | translate }}:</h3>
 
     <table mat-table [dataSource]="loanDetails.emiAmountVariations">
-
       <ng-container matColumnDef="emi amount variation from">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Applicable From Date" | translate}} </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Applicable From Date' | translate }}</th>
+        <td mat-cell *matCellDef="let ele">{{ ele.termVariationApplicableFrom | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="fixed emi amount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Installment Amount" | translate}} </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.termValue }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Installment Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let ele">{{ ele.termValue }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="emivariationColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: emivariationColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: emivariationColumns"></tr>
     </table>
   </div>
 </div>
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index 5f9bfb9e2a..c663a9aeb3 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -1,13 +1,15 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <mifosx-svg-icon [iconClass]="" iconFile="account_placeholder" iconName="LOAN_ACCOUNT" iconWidth="210"
-            matTooltip="{{ 'tooltips.Loan Account' | translate}}">
+          <mifosx-svg-icon
+            [iconClass]=""
+            iconFile="account_placeholder"
+            iconName="LOAN_ACCOUNT"
+            iconWidth="210"
+            matTooltip="{{ 'tooltips.Loan Account' | translate }}"
+          >
           </mifosx-svg-icon>
         </div>
       </div>
@@ -15,37 +17,54 @@
       <div class="mat-typography account-card-title">
         <mat-card-title>
           <div fxLayout="row" fxLayout.lt-md="column">
-
             <div fxFlex="60%">
               <h3>
-                <i class="fa fa-stop" matTooltip="{{'labels.status.' + loanDetailsData.status.value | translate}}"
-                  [ngClass]="loanDetailsData.inArrears?'status-active-overdue':( iconLoanStatusColor() | statusLookup)"></i>
-                <span class="m-r-5">{{'labels.heading.Loan Product' | translate}} :</span> 
-                <span class="m-r-5"><mifosx-long-text textValue="{{loanDetailsData.loanProductName}}"></mifosx-long-text></span>
-                <mifosx-account-number accountNo="{{loanDetailsData.accountNo}}" display="left"></mifosx-account-number>
+                <i
+                  class="fa fa-stop"
+                  matTooltip="{{ 'labels.status.' + loanDetailsData.status.value | translate }}"
+                  [ngClass]="
+                    loanDetailsData.inArrears ? 'status-active-overdue' : (iconLoanStatusColor() | statusLookup)
+                  "
+                ></i>
+                <span class="m-r-5">{{ 'labels.heading.Loan Product' | translate }} :</span>
+                <span class="m-r-5"
+                  ><mifosx-long-text textValue="{{ loanDetailsData.loanProductName }}"></mifosx-long-text
+                ></span>
+                <mifosx-account-number
+                  accountNo="{{ loanDetailsData.accountNo }}"
+                  display="left"
+                ></mifosx-account-number>
               </h3>
               <span class="loans-overview">
-                <span class="m-r-10">{{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}} :</span> {{loanDetailsData.clientName ||
-                loanDetailsData.groupName}}<span class="m-l-5">({{loanDetailsData.clientAccountNo}})</span><br />
+                <span class="m-r-10"
+                  >{{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }} :</span
+                >
+                {{ loanDetailsData.clientName || loanDetailsData.groupName
+                }}<span class="m-l-5">({{ loanDetailsData.clientAccountNo }})</span><br />
               </span>
               <div *ngIf="loanDisplayArrearsDelinquency !== 1">
                 <table class="account-overview">
                   <tbody>
                     <tr *ngIf="loanDetailsData.delinquencyRange">
-                      <td>{{"labels.inputs.Delinquency Classification" | translate}} :</td>
+                      <td>{{ 'labels.inputs.Delinquency Classification' | translate }} :</td>
                       <td>
                         <span class="m-r-3"><i [ngClass]="loanDelinquencyClassificationStyle"></i></span>
-                        {{loanDetailsData?.delinquencyRange.classification}}
+                        {{ loanDetailsData?.delinquencyRange.classification }}
                       </td>
                     </tr>
                     <tr *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.pastDueDays > 0">
-                      <td>{{"labels.inputs.Past Due Days" | translate}} :</td>
-                      <td>{{loanDetailsData?.delinquent.pastDueDays | formatNumber }}</td>
+                      <td>{{ 'labels.inputs.Past Due Days' | translate }} :</td>
+                      <td>{{ loanDetailsData?.delinquent.pastDueDays | formatNumber }}</td>
                     </tr>
-                    <tr *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.delinquentDays > 0
-                      && loanDetailsData.delinquent.pastDueDays !== loanDetailsData.delinquent.delinquentDays">
-                      <td>{{"labels.inputs.Delinquent Days" | translate}} :</td>
-                      <td>{{loanDetailsData?.delinquent.delinquentDays | formatNumber }}</td>
+                    <tr
+                      *ngIf="
+                        loanDetailsData.delinquent &&
+                        loanDetailsData.delinquent.delinquentDays > 0 &&
+                        loanDetailsData.delinquent.pastDueDays !== loanDetailsData.delinquent.delinquentDays
+                      "
+                    >
+                      <td>{{ 'labels.inputs.Delinquent Days' | translate }} :</td>
+                      <td>{{ loanDetailsData?.delinquent.delinquentDays | formatNumber }}</td>
                     </tr>
                   </tbody>
                 </table>
@@ -53,27 +72,35 @@ <h3>
             </div>
 
             <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
-              <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+              <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
               <table class="account-overview">
                 <tbody>
                   <tr>
-                    <td>{{"labels.inputs.Current Balance" | translate }}</td>
-                    <td class="r-amount">{{loanDetailsData.summary.totalOutstanding | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                    <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                    <td class="r-amount">
+                      {{
+                        loanDetailsData.summary.totalOutstanding | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                      }}
+                    </td>
                   </tr>
                   <tr *ngIf="loanDisplayArrearsDelinquency < 2">
-                    <td>{{"labels.inputs.Arrears By" | translate }}</td>
+                    <td>{{ 'labels.inputs.Arrears By' | translate }}</td>
                     <td class="r-amount" *ngIf="loanDetailsData.summary.totalOverdue >= 0">
-                      {{loanDetailsData.summary.totalOverdue | currency:currency.code:'symbol-narrow':'1.2-2'}}
+                      {{ loanDetailsData.summary.totalOverdue | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                    </td>
+                    <td *ngIf="!(loanDetailsData.summary.totalOverdue >= 0)">
+                      {{ 'labels.inputs.Not Provided' | translate }}
                     </td>
-                    <td *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate}}</td>
                   </tr>
                   <tr *ngIf="loanDetailsData.inArrears">
-                    <td>{{"labels.inputs.Arrears Since" | translate }}</td>
-                    <td> {{loanDetailsData.summary.overdueSinceDate | dateFormat}} </td>
+                    <td>{{ 'labels.inputs.Arrears Since' | translate }}</td>
+                    <td>{{ loanDetailsData.summary.overdueSinceDate | dateFormat }}</td>
                   </tr>
                   <tr *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                    <td>{{"labels.inputs.Overpaid By" | translate }}</td>
-                    <td class="r-amount">{{loanDetailsData.totalOverpaid | currency:currency.code:'symbol-narrow':'1.2-2'}} </td>
+                    <td>{{ 'labels.inputs.Overpaid By' | translate }}</td>
+                    <td class="r-amount">
+                      {{ loanDetailsData.totalOverpaid | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -82,14 +109,18 @@ <h3> {{"labels.heading.Account Overview" | translate}} </h3>
             <span fxFlex="auto"></span>
 
             <div fxFlex="4%">
-              <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
-                yPosition="below" *ngIf="buttonConfig.singleButtons.length > 0">
+              <button
+                mat-icon-button
+                [matMenuTriggerFor]="accountMenu"
+                aria-label="Loan account actions"
+                yPosition="below"
+                *ngIf="buttonConfig.singleButtons.length > 0"
+              >
                 <mat-icon matListIcon class="actions-menu">
                   <fa-icon icon="bars" size="sm"></fa-icon>
                 </mat-icon>
               </button>
             </div>
-
           </div>
         </mat-card-title>
       </div>
@@ -98,142 +129,231 @@ <h3> {{"labels.heading.Account Overview" | translate}} </h3>
         <ng-container *ngFor="let item of buttonConfig.singleButtons">
           <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
             <mat-icon matListIcon>
-              <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+              <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
             </mat-icon>
-            <span>{{'labels.menus.' + item.name | translate}}</span>
+            <span>{{ 'labels.menus.' + item.name | translate }}</span>
           </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.optionsPayment.length" class="loan-span">
-          <button mat-menu-item [matMenuTriggerFor]="Payments">{{"labels.menus.Payments" | translate}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="Payments">{{ 'labels.menus.Payments' | translate }}</button>
           <mat-menu #Payments="matMenu">
             <span *ngFor="let item of buttonConfig.optionsPayment">
-              <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
-                (click)="loanAction(item.name)">{{'labels.menus.' + item.name | translate}}</button>
+              <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
+                {{ 'labels.menus.' + item.name | translate }}
+              </button>
             </span>
           </mat-menu>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length" class="loan-span">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{"labels.menus.More" | translate}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let item of buttonConfig.options">
-              <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
-                (click)="loanAction(item.name)">{{'labels.menus.' + item.name | translate}}</button>
+              <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
+                {{ 'labels.menus.' + item.name | translate }}
+              </button>
             </span>
           </mat-menu>
         </ng-container>
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content>
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{"labels.inputs.General" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./accountdetail']" routerLinkActive #accountdetail="routerLinkActive"
-        [active]="accountdetail.isActive">
-        {{"labels.inputs.Account Details" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./accountdetail']"
+        routerLinkActive
+        #accountdetail="routerLinkActive"
+        [active]="accountdetail.isActive"
+      >
+        {{ 'labels.inputs.Account Details' | translate }}
       </a>
       <ng-container *ngIf="loanDetailsData.originalSchedule">
-        <a mat-tab-link [routerLink]="['./original-schedule']" routerLinkActive #originalSchedule="routerLinkActive"
-          [active]="originalSchedule.isActive">
-          {{"labels.inputs.Original Schedule" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./original-schedule']"
+          routerLinkActive
+          #originalSchedule="routerLinkActive"
+          [active]="originalSchedule.isActive"
+        >
+          {{ 'labels.inputs.Original Schedule' | translate }}
         </a>
       </ng-container>
-      <a mat-tab-link [routerLink]="['./repayment-schedule']" routerLinkActive #repaymentSchedule="routerLinkActive"
-        [active]="repaymentSchedule.isActive">
-        {{"labels.inputs.Repayment Schedule" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./repayment-schedule']"
+        routerLinkActive
+        #repaymentSchedule="routerLinkActive"
+        [active]="repaymentSchedule.isActive"
+      >
+        {{ 'labels.inputs.Repayment Schedule' | translate }}
       </a>
       <ng-container *ngIf="loanDetailsData.transactions">
-        <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-          [active]="transactions.isActive">
-          {{"labels.inputs.Transactions" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./transactions']"
+          routerLinkActive
+          #transactions="routerLinkActive"
+          [active]="transactions.isActive"
+        >
+          {{ 'labels.inputs.Transactions' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
-        <a mat-tab-link [routerLink]="['./delinquencytags']" routerLinkActive #delinquencytags="routerLinkActive"
-          [active]="delinquencytags.isActive">
-          {{"labels.inputs.Delinquency Tags" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./delinquencytags']"
+          routerLinkActive
+          #delinquencytags="routerLinkActive"
+          [active]="delinquencytags.isActive"
+        >
+          {{ 'labels.inputs.Delinquency Tags' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.collateral">
-        <a mat-tab-link [routerLink]="['./loan-collateral']" routerLinkActive #loanCollateralDetails="routerLinkActive"
-          [active]="loanCollateralDetails.isActive">
-          {{"labels.inputs.Loan Collateral Details" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./loan-collateral']"
+          routerLinkActive
+          #loanCollateralDetails="routerLinkActive"
+          [active]="loanCollateralDetails.isActive"
+        >
+          {{ 'labels.inputs.Loan Collateral Details' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.multiDisburseLoan">
-        <a mat-tab-link [routerLink]="['./loan-tranche-details']" routerLinkActive
-          #loanTrancheDetails="routerLinkActive" [active]="loanTrancheDetails.isActive">
-          {{"labels.inputs.Loan Tranche Details" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./loan-tranche-details']"
+          routerLinkActive
+          #loanTrancheDetails="routerLinkActive"
+          [active]="loanTrancheDetails.isActive"
+        >
+          {{ 'labels.inputs.Loan Tranche Details' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.loanTermVariations">
-        <a mat-tab-link [routerLink]="['./term-variations']" routerLinkActive #termVariations="routerLinkActive"
-          [active]="termVariations.isActive">
-          {{"labels.inputs.Term Variations" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./term-variations']"
+          routerLinkActive
+          #termVariations="routerLinkActive"
+          [active]="termVariations.isActive"
+        >
+          {{ 'labels.inputs.Term Variations' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
-        <a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive"
-          [active]="overduecharges.isActive">
-          {{"labels.inputs.Overdue Charges" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./overdue-charges']"
+          routerLinkActive
+          #overduecharges="routerLinkActive"
+          [active]="overduecharges.isActive"
+        >
+          {{ 'labels.inputs.Overdue Charges' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.isLoanProductLinkedToFloatingRate">
-        <a mat-tab-link [routerLink]="['./floating-interest-rates']" routerLinkActive
-          #floatingInterestRates="routerLinkActive" [active]="floatingInterestRates.isActive">
-          {{"labels.inputs.Floating Interest Rates" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./floating-interest-rates']"
+          routerLinkActive
+          #floatingInterestRates="routerLinkActive"
+          [active]="floatingInterestRates.isActive"
+        >
+          {{ 'labels.inputs.Floating Interest Rates' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.charges">
-        <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-          [active]="charges.isActive">
-          {{"labels.inputs.Charges" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./charges']"
+          routerLinkActive
+          #charges="routerLinkActive"
+          [active]="charges.isActive"
+        >
+          {{ 'labels.inputs.Charges' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
-        <a mat-tab-link [routerLink]="['./loan-reschedules']" routerLinkActive #loanReschedules="routerLinkActive"
-          [active]="loanReschedules.isActive">
-          {{"labels.inputs.Loan Reschedules" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./loan-reschedules']"
+          routerLinkActive
+          #loanReschedules="routerLinkActive"
+          [active]="loanReschedules.isActive"
+        >
+          {{ 'labels.inputs.Loan Reschedules' | translate }}
         </a>
       </ng-container>
-      <a mat-tab-link [routerLink]="['./loan-documents']" routerLinkActive #loanDocuments="routerLinkActive"
-        [active]="loanDocuments.isActive">
-        {{"labels.inputs.Loan Documents" | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./loan-documents']"
+        routerLinkActive
+        #loanDocuments="routerLinkActive"
+        [active]="loanDocuments.isActive"
+      >
+        {{ 'labels.inputs.Loan Documents' | translate }}
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_LOANNOTE'" [routerLink]="['./notes']" routerLinkActive
-        #notes="routerLinkActive" [active]="notes.isActive">
-        {{"labels.inputs.Notes" | translate}}
+      <a
+        mat-tab-link
+        *mifosxHasPermission="'READ_LOANNOTE'"
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <ng-container *ngIf="loanDetailsData.clientId">
-        <a mat-tab-link [routerLink]="['./standing-instruction']" routerLinkActive
-          #standingInstruction="routerLinkActive" [active]="standingInstruction.isActive">
-          {{"labels.inputs.Standing Instruction" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./standing-instruction']"
+          routerLinkActive
+          #standingInstruction="routerLinkActive"
+          [active]="standingInstruction.isActive"
+        >
+          {{ 'labels.inputs.Standing Instruction' | translate }}
         </a>
       </ng-container>
       <ng-container *ngIf="loanDetailsData.status.active">
-        <a mat-tab-link [routerLink]="['./external-asset-owner']" routerLinkActive
-          #externalAssetOwner="routerLinkActive" [active]="externalAssetOwner.isActive">
-          {{"labels.inputs.External Asset Owner" | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./external-asset-owner']"
+          routerLinkActive
+          #externalAssetOwner="routerLinkActive"
+          [active]="externalAssetOwner.isActive"
+        >
+          {{ 'labels.inputs.External Asset Owner' | translate }}
         </a>
       </ng-container>
       <ng-container *ngFor="let loanDatatable of loanDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + loanDatatable.registeredTableName"
-          [routerLink]="['./datatables',loanDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{loanDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + loanDatatable.registeredTableName"
+          [routerLink]="['./datatables', loanDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ loanDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/loans/loans-view/notes-tab/notes-tab.component.html b/src/app/loans/loans-view/notes-tab/notes-tab.component.html
index 04cf7318f2..bbeca4fa04 100644
--- a/src/app/loans/loans-view/notes-tab/notes-tab.component.html
+++ b/src/app/loans/loans-view/notes-tab/notes-tab.component.html
@@ -1,4 +1,5 @@
-<mifosx-entity-notes-tab [entityId]="entityId"
+<mifosx-entity-notes-tab
+  [entityId]="entityId"
   [entityNotes]="entityNotes"
   [callbackAdd]="addNote"
   [callbackEdit]="editNote"
diff --git a/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html b/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html
index 123887ad91..d8a4b14803 100644
--- a/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html
+++ b/src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html
@@ -1,78 +1,105 @@
 <div class="container">
-
   <table mat-table [dataSource]="originalScheduleDetails.periods" matSort>
-
     <ng-container matColumnDef="number">
-      <th mat-header-cell *matHeaderCellDef> # </th>
-      <td mat-cell *matCellDef="let ele; let idx = index;">{{(idx + 1)}}</td>
-      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+      <th mat-header-cell *matHeaderCellDef>#</th>
+      <td mat-cell *matCellDef="let ele; let idx = index">{{ idx + 1 }}</td>
+      <td mat-footer-cell *matFooterCellDef>&nbsp;</td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate}} </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate | dateFormat}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{"labels.inputs.Total" | translate}}</b> </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+      <td mat-cell *matCellDef="let ele">{{ ele.dueDate | dateFormat }}</td>
+      <td mat-footer-cell *matFooterCellDef>
+        <b> {{ 'labels.inputs.Total' | translate }}</b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
-      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance Of Loan' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.principalLoanBalanceOutstanding | formatNumber }}</td>
+      <td mat-footer-cell *matFooterCellDef>&nbsp;</td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ originalScheduleDetails.totalPrincipalExpected | currency:currency.code:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Principal Due' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.principalDue | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ originalScheduleDetails.totalPrincipalExpected | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ originalScheduleDetails.totalInterestCharged | currency:currency.code:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.interestOriginalDue | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ originalScheduleDetails.totalInterestCharged | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ originalScheduleDetails.totalFeeChargesCharged | currency:currency.code:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.feeChargesDue | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ originalScheduleDetails.totalFeeChargesCharged | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Penalties" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.penaltyChargesDue | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ originalScheduleDetails.totalPenaltyChargesCharged | currency:currency.code:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Penalties' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.penaltyChargesDue | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ originalScheduleDetails.totalPenaltyChargesCharged | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ originalScheduleDetails.totalRepaymentExpected | currency:currency.code:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.totalOutstandingForPeriod | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ originalScheduleDetails.totalRepaymentExpected | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <!-- Header row first group -->
     <ng-container matColumnDef="header">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"></th>
     </ng-container>
 
     <!-- Header row second group -->
     <ng-container matColumnDef="header-amount">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> {{"labels.inputs.Loan Amount and Balance" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2">
+        {{ 'labels.inputs.Loan Amount and Balance' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="header-total-cost">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> {{"labels.inputs.Total Cost of Loan" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3">
+        {{ 'labels.inputs.Total Cost of Loan' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="header-installment-totals">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Installment Totals" | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="1">
+        {{ 'labels.inputs.Installment Totals' | translate }}
+      </th>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"></tr>
+    <tr
+      mat-header-row
+      *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"
+    ></tr>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
-
   </table>
-
 </div>
diff --git a/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html b/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html
index 9edaf120a2..bebe10177b 100644
--- a/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html
+++ b/src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html
@@ -1,31 +1,28 @@
 <div class="container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Name" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ '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 mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ '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 mat-sort-header> {{"labels.inputs.Amount" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ '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 mat-sort-header> {{"labels.inputs.Collected On" | translate}} </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Collected On' | translate }}</th>
+      <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </div>
diff --git a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
index 148fc9d5bf..e77e38e3bc 100644
--- a/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
+++ b/src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html
@@ -6,240 +6,292 @@
   </div>
 
   <table mat-table [dataSource]="repaymentScheduleDetails.periods" *ngIf="!forEditing" id="repaymentSchedule">
-
     <ng-container matColumnDef="number">
-      <th mat-header-cell class="center" *matHeaderCellDef> # </th>
-      <td mat-cell class="right" *matCellDef="let ele"> {{ ele.period }} </td>
-      <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+      <th mat-header-cell class="center" *matHeaderCellDef>#</th>
+      <td mat-cell class="right" *matCellDef="let ele">{{ ele.period }}</td>
+      <td mat-footer-cell *matFooterCellDef>&nbsp;</td>
     </ng-container>
 
     <ng-container matColumnDef="days">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Days" | translate}} </th>
-      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.daysInPeriod }} </td>
-      <td mat-footer-cell class="center" *matFooterCellDef> <b> Total</b> </td>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Days' | translate }}</th>
+      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">{{ ele.daysInPeriod }}</td>
+      <td mat-footer-cell class="center" *matFooterCellDef><b> Total</b></td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date" | translate}} </th>
-      <td mat-cell class="m-r-5" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.dueDate | dateFormat}}
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+      <td mat-cell class="m-r-5" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.dueDate | dateFormat }}
       </td>
-      <td mat-footer-cell *matFooterCellDef> </td>
+      <td mat-footer-cell *matFooterCellDef></td>
     </ng-container>
 
     <ng-container matColumnDef="paiddate">
-      <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Paid Date" | translate}} </th>
-      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.obligationsMetOnDate |
-        dateFormat}} </td>
-      <td mat-footer-cell *matFooterCellDef> </td>
+      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Paid Date' | translate }}</th>
+      <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.obligationsMetOnDate | dateFormat }}
+      </td>
+      <td mat-footer-cell *matFooterCellDef></td>
     </ng-container>
 
     <ng-container matColumnDef="check">
-      <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
+      <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
       <td mat-cell class="center" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
         <span *ngIf="ele.obligationsMetOnDate"> <i class="fa fa-check"></i> </span>
       </td>
-      <td mat-footer-cell *matFooterCellDef> </td>
+      <td mat-footer-cell *matFooterCellDef></td>
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
-        ele.principalLoanBalanceOutstanding | formatNumber }} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance Of Loan' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.principalLoanBalanceOutstanding | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>&nbsp;</td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due" | translate}} </th>
-      <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue |
-        formatNumber }} </td>
-      <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{
-          repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Principal Due' | translate }}</th>
+      <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.principalDue | formatNumber }}
+      </td>
+      <td mat-footer-cell class="check r-amount" *matFooterCellDef>
+        <b>
+          {{ repaymentScheduleDetails.totalPrincipalExpected | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</b
+        >
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue
-        | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.interestOriginalDue | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ repaymentScheduleDetails.totalInterestCharged | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue |
-        formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.feeChargesDue | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ repaymentScheduleDetails.totalFeeChargesCharged | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Penalties" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue |
-        formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged
-          | currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Penalties' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.penaltyChargesDue | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Due" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod |
-        formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.totalDueForPeriod | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b>
+          {{ repaymentScheduleDetails.totalRepaymentExpected | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+        </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Paid" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod |
-        formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.totalPaidForPeriod | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b> {{ repaymentScheduleDetails.totalRepayment | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="inadvance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.In advance" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
-        ele.totalPaidInAdvanceForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.In advance' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.totalPaidInAdvanceForPeriod | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="late">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Late" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
-        ele.totalPaidLateForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Late' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+        {{ ele.totalPaidLateForPeriod | formatNumber }}
+      </td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b> {{ repaymentScheduleDetails.totalPaidLate | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} </b>
+      </td>
     </ng-container>
 
     <ng-container *ngIf="isWaived">
       <ng-container matColumnDef="waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Waived" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{
-          ele.totalWaivedForPeriod | formatNumber}} </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived |
-            currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)">
+          {{ ele.totalWaivedForPeriod | formatNumber }}
+        </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef>
+          <b> {{ repaymentScheduleDetails.totalWaived | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} </b>
+        </td>
       </ng-container>
     </ng-container>
 
     <ng-container *ngIf="!isWaived">
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> </th>
-        <td mat-cell *matCellDef="let ele"> </td>
-        <td mat-footer-cell *matFooterCellDef> <b> </b> </td>
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let ele"></td>
+        <td mat-footer-cell *matFooterCellDef><b> </b></td>
       </ng-container>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Outstanding" | translate}} </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
-      <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding |
-          currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+      <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.totalOutstandingForPeriod | formatNumber }}</td>
+      <td mat-footer-cell class="r-amount" *matFooterCellDef>
+        <b> {{ repaymentScheduleDetails.totalOutstanding | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} </b>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="header">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="5"> </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="5"></th>
     </ng-container>
 
     <ng-container matColumnDef="header-amount">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2"> {{"labels.inputs.Loan Amount and Balance"
-        | translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2">
+        {{ 'labels.inputs.Loan Amount and Balance' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="header-total-cost">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3"> {{"labels.inputs.Total Cost of Loan" |
-        translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3">
+        {{ 'labels.inputs.Total Cost of Loan' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="header-installment-totals">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6"> {{"labels.inputs.Installment Totals" |
-        translate}} </th>
+      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6">
+        {{ 'labels.inputs.Installment Totals' | translate }}
+      </th>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']">
-    </tr>
+    <tr
+      mat-header-row
+      *matHeaderRowDef="['header', 'header-amount', 'header-total-cost', 'header-installment-totals']"
+    ></tr>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
-
   </table>
 
   <!-- Repayment Schedule to be Edited -->
   <div *ngIf="forEditing" fxLayout="column" fxFlex="100%">
-
     <table mat-table [dataSource]="repaymentScheduleDetails.periods">
-
       <ng-container matColumnDef="number">
-        <th mat-header-cell class="center" *matHeaderCellDef> # </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.period }} </td>
-        <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
+        <th mat-header-cell class="center" *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let ele">{{ ele.period }}</td>
+        <td mat-footer-cell *matFooterCellDef>&nbsp;</td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Date" | translate}} </th>
-        <td mat-cell class="m-r-10" *matCellDef="let ele"> {{ ele.dueDate | dateFormat}} </td>
-        <td mat-footer-cell *matFooterCellDef> </td>
+        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+        <td mat-cell class="m-r-10" *matCellDef="let ele">{{ ele.dueDate | dateFormat }}</td>
+        <td mat-footer-cell *matFooterCellDef></td>
       </ng-container>
 
       <ng-container matColumnDef="balanceOfLoan">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance Of Loan" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }}
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance Of Loan' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">
+          {{ ele.principalLoanBalanceOutstanding | formatNumber }}
         </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef>&nbsp;</td>
       </ng-container>
 
       <ng-container matColumnDef="principalDue">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Principal Due" | translate}} </th>
-        <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
-        <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{
-            repaymentScheduleDetails.totalPrincipalExpected | currency:currencyCode:'symbol-narrow':'1.2-2' }}</b> </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Principal Due' | translate }}</th>
+        <td mat-cell class="check r-amount" *matCellDef="let ele">{{ ele.principalDue | formatNumber }}</td>
+        <td mat-footer-cell class="check r-amount" *matFooterCellDef>
+          <b>
+            {{
+              repaymentScheduleDetails.totalPrincipalExpected | currency: currencyCode : 'symbol-narrow' : '1.2-2'
+            }}</b
+          >
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Interest" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged |
-            currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.interestOriginalDue | formatNumber }}</td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef>
+          <b>
+            {{ repaymentScheduleDetails.totalInterestCharged | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+          </b>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="fees">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Fees" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged |
-            currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
+        <td mat-cell class="r-amount" *matCellDef="let ele">{{ ele.feeChargesDue | formatNumber }}</td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef>
+          <b>
+            {{ repaymentScheduleDetails.totalFeeChargesCharged | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+          </b>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Installment Amount" | translate}} </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Installment Amount' | translate }}</th>
         <td mat-cell class="r-amount" *matCellDef="let ele">
           <span *ngIf="!ele.changed">
-            {{ ele.totalDueForPeriod | formatNumber}}
+            {{ ele.totalDueForPeriod | formatNumber }}
           </span>
           <span *ngIf="ele.changed" class="amount-changed">
-            <b>{{ ele.totalDueForPeriod | formatNumber}}</b>
+            <b>{{ ele.totalDueForPeriod | formatNumber }}</b>
           </span>
         </td>
-        <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected |
-            currency:currencyCode:'symbol-narrow':'1.2-2' }} </b> </td>
+        <td mat-footer-cell class="r-amount" *matFooterCellDef>
+          <b>
+            {{ repaymentScheduleDetails.totalRepaymentExpected | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
+          </b>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell class="center" *matCellDef="let ele">
-          <button *ngIf="ele.period" type="button" color="primary" mat-icon-button
-            matTooltip="{{ 'tooltips.Edit' | translate}}" matTooltipPosition="above" (click)="editPeriod(ele)">
+          <button
+            *ngIf="ele.period"
+            type="button"
+            color="primary"
+            mat-icon-button
+            matTooltip="{{ 'tooltips.Edit' | translate }}"
+            matTooltipPosition="above"
+            (click)="editPeriod(ele)"
+          >
             <fa-icon icon="edit" size="lg"></fa-icon>
           </button>
         </td>
-        <td mat-footer-cell *matFooterCellDef> </td>
+        <td mat-footer-cell *matFooterCellDef></td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumnsEdit"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumnsEdit;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsEdit"></tr>
       <tr mat-footer-row *matFooterRowDef="displayedColumnsEdit"></tr>
-
     </table>
-
   </div>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
index b86142c2e9..a1f2845bb5 100644
--- a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
+++ b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
@@ -1,64 +1,72 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
     <button mat-raised-button color="primary" [routerLink]="['../actions/Reschedule']">
-      {{"labels.buttons.Reschedule" | translate}}
+      {{ 'labels.buttons.Reschedule' | translate }}
     </button>
   </div>
 
   <table mat-table [dataSource]="loanRescheduleData">
-
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> # </th>
-      <td mat-cell *matCellDef="let item"> {{ item.id }} </td>
+      <th mat-header-cell *matHeaderCellDef>#</th>
+      <td mat-cell *matCellDef="let item">{{ item.id }}</td>
     </ng-container>
 
     <!-- Status Column -->
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         <div [ngClass]="item.statusEnum.code | statusLookup">
           <fa-icon icon="stop"></fa-icon>
           <span class="m-l-10 status">
-            {{ item.statusEnum.value | translate}}
+            {{ item.statusEnum.value | translate }}
           </span>
         </div>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="rescheduleFromDate">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Date" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         {{ item.rescheduleFromDate | dateFormat }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="reason">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Reason" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Reason' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         {{ item.rescheduleReasonCodeValue.name }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let item">
         <span *ngIf="item.statusEnum.pendingApproval">
-          <button class="action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Reject Reschedule' | translate}}" matTooltipPosition="left"
-          (click)="manageRequest(item, 'Reject')">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-          <button class="action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Approve Reschedule' | translate}}" matTooltipPosition="right"
-            (click)="manageRequest(item, 'Approve')">
+          <button
+            class="action-button"
+            mat-raised-button
+            color="warn"
+            matTooltip="{{ 'tooltips.Reject Reschedule' | translate }}"
+            matTooltipPosition="left"
+            (click)="manageRequest(item, 'Reject')"
+          >
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+          <button
+            class="action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.Approve Reschedule' | translate }}"
+            matTooltipPosition="right"
+            (click)="manageRequest(item, 'Approve')"
+          >
             <fa-icon icon="check"></fa-icon>
           </button>
-
         </span>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="loanRescheduleDataColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanRescheduleDataColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanRescheduleDataColumns"></tr>
   </table>
-
 </div>
diff --git a/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html b/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html
index c17b316990..11eb51061f 100644
--- a/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html
+++ b/src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html
@@ -1,77 +1,95 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{"labels.heading.All Standing Instructions" | translate}}</h3>
+    <h3>{{ 'labels.heading.All Standing Instructions' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #instructionsTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Client" | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.From Account" | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}}
-          ({{instruction.fromAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Beneficiary" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.fromClient.id !== instruction.toClient.id"> {{instruction.toClient.displayName}} </span>
-          <span *ngIf="instruction.fromClient.id === instruction.toClient.id">{{"labels.inputs.Own Account" | translate}}</span>
+          <span *ngIf="instruction.fromClient.id !== instruction.toClient.id">
+            {{ instruction.toClient.displayName }}
+          </span>
+          <span *ngIf="instruction.fromClient.id === instruction.toClient.id">{{
+            'labels.inputs.Own Account' | translate
+          }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.To Account" | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}}
-          ({{instruction.toAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Validity" | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} to {{instruction.validTill | dateFormat}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.validFrom | dateFormat }} to {{ instruction.validTill | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="primary"
-              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate}}" *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+            >
               <i class="fa fa-edit"></i>
             </button>
           </span>
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="warn"
-              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate}}" *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+              (click)="deleteStandingInstruction(instruction.id)"
+            >
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate}}"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+          >
             <i class="fa fa-eye"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
index 5e03002dda..abcaca1594 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.html
@@ -1,111 +1,207 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
     <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-      {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
+      {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+    >
     <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-      {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
+      {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+    >
     <button mat-raised-button color="primary" class="transaction-button" [routerLink]="['export']">
-      {{"labels.buttons.Export" | translate}}
+      {{ 'labels.buttons.Export' | translate }}
     </button>
   </div>
 
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="row">
-      <td mat-cell *matCellDef="let transaction; let idx = index;" (click)="showTransactions(transaction)">{{(idx + 1)}}</td>
+      <td mat-cell *matCellDef="let transaction; let idx = index" (click)="showTransactions(transaction)">
+        {{ idx + 1 }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="id">
-      <td mat-cell *matCellDef="let transaction" class="td-select" [ngClass]="loanTransactionColor(transaction)" (click)="showTransactions(transaction)">{{ transaction.id }}</td>
+      <td
+        mat-cell
+        *matCellDef="let transaction"
+        class="td-select"
+        [ngClass]="loanTransactionColor(transaction)"
+        (click)="showTransactions(transaction)"
+      >
+        {{ transaction.id }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="office">
-      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)" (click)="showTransactions(transaction)">{{ transaction.officeName }}</td>
+      <td
+        mat-cell
+        *matCellDef="let transaction"
+        [ngClass]="loanTransactionColor(transaction)"
+        (click)="showTransactions(transaction)"
+      >
+        {{ transaction.officeName }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="externalId">
       <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)">
-        <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
+        <mifosx-external-identifier externalId="{{ transaction.externalId }}"></mifosx-external-identifier>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.date | dateFormat }} </td>
+      <td
+        mat-cell
+        *matCellDef="let transaction"
+        [ngClass]="loanTransactionColor(transaction)"
+        (click)="showTransactions(transaction)"
+      >
+        {{ transaction.date | dateFormat }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="transactionType">
-      <td mat-cell *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.type.value }} </td>
+      <td
+        mat-cell
+        *matCellDef="let transaction"
+        [ngClass]="loanTransactionColor(transaction)"
+        (click)="showTransactions(transaction)"
+      >
+        {{ transaction.type.value }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" (click)="showTransactions(transaction)"
-        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | formatNumber }} </td>
+      <td
+        mat-cell
+        class="r-amount td-min-space"
+        *matCellDef="let transaction"
+        (click)="showTransactions(transaction)"
+        [ngClass]="loanTransactionColor(transaction)"
+      >
+        {{ transaction.amount | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="principal">
-      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" (click)="showTransactions(transaction)"
-        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | formatNumber }} </td>
+      <td
+        mat-cell
+        class="r-amount td-min-space"
+        *matCellDef="let transaction"
+        (click)="showTransactions(transaction)"
+        [ngClass]="loanTransactionColor(transaction)"
+      >
+        {{ transaction.principalPortion | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" (click)="showTransactions(transaction)"
-        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | formatNumber }} </td>
+      <td
+        mat-cell
+        class="r-amount td-min-space"
+        *matCellDef="let transaction"
+        (click)="showTransactions(transaction)"
+        [ngClass]="loanTransactionColor(transaction)"
+      >
+        {{ transaction.interestPortion | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="fee">
-      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" (click)="showTransactions(transaction)"
-        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | formatNumber }} </td>
+      <td
+        mat-cell
+        class="r-amount td-min-space"
+        *matCellDef="let transaction"
+        (click)="showTransactions(transaction)"
+        [ngClass]="loanTransactionColor(transaction)"
+      >
+        {{ transaction.feeChargesPortion | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" (click)="showTransactions(transaction)"
-        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | formatNumber }} </td>
+      <td
+        mat-cell
+        class="r-amount td-min-space"
+        *matCellDef="let transaction"
+        (click)="showTransactions(transaction)"
+        [ngClass]="loanTransactionColor(transaction)"
+      >
+        {{ transaction.penaltyChargesPortion | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="loanBalance">
-      <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" (click)="showTransactions(transaction)"
-        [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | formatNumber }} </td>
+      <td
+        mat-cell
+        class="r-amount td-min-space"
+        *matCellDef="let transaction"
+        (click)="showTransactions(transaction)"
+        [ngClass]="loanTransactionColor(transaction)"
+      >
+        {{ transaction.outstandingLoanBalance | formatNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
       <td mat-cell *matCellDef="let transaction" class="center">
-        <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button" *ngIf="displaySubMenu(transaction)">
+        <button
+          mat-icon-button
+          [matMenuTriggerFor]="transactionMenu"
+          aria-label=""
+          class="action-button"
+          *ngIf="displaySubMenu(transaction)"
+        >
           <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #transactionMenu="matMenu">
           <span *ngIf="!isReAgoeOrReAmortize(transaction.type)">
             <button mat-menu-item (click)="showTransactions(transaction)">
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+              <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
           </span>
           <span *ngIf="allowUndoTransaction(transaction)">
             <button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
               <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.Undo Transaction' | translate}}</span>
-            </button>       
-            <button mat-menu-item class="account-action-button" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+              <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
+            </button>
+            <button
+              mat-menu-item
+              class="account-action-button"
+              (click)="routeEdit($event)"
+              [routerLink]="[transaction.id, 'reciept']"
+            >
               <mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Receipts' | translate}}</span>
+              <span>{{ 'tooltips.View Receipts' | translate }}</span>
             </button>
           </span>
           <span *ngIf="isReAge(transaction.type) && !transaction.manuallyReversed">
-            <button mat-menu-item *mifosxHasPermission="'UNDO_REAGE_LOAN'" (click)="undoReAgeOrReAmortize(transaction, $event)">
+            <button
+              mat-menu-item
+              *mifosxHasPermission="'UNDO_REAGE_LOAN'"
+              (click)="undoReAgeOrReAmortize(transaction, $event)"
+            >
               <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.menus.Undo Re-Age' | translate}}</span>
-            </button>   
+              <span>{{ 'labels.menus.Undo Re-Age' | translate }}</span>
+            </button>
           </span>
           <span *ngIf="isReAmortize(transaction.type) && !transaction.manuallyReversed">
-            <button mat-menu-item *mifosxHasPermission="'UNDO_REAMORTIZE_LOAN'" (click)="undoReAgeOrReAmortize(transaction, $event)">
+            <button
+              mat-menu-item
+              *mifosxHasPermission="'UNDO_REAMORTIZE_LOAN'"
+              (click)="undoReAgeOrReAmortize(transaction, $event)"
+            >
               <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.menus.Undo Re-Amortize' | translate}}</span>
-            </button>   
+              <span>{{ 'labels.menus.Undo Re-Amortize' | translate }}</span>
+            </button>
           </span>
           <span *ngIf="viewJournalEntry(transaction.type)">
-            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'L'+transaction.id ]">
+            <button
+              mat-menu-item
+              (click)="routeEdit($event)"
+              [routerLink]="['/', 'journal-entry', 'view', 'L' + transaction.id]"
+            >
               <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
             </button>
           </span>
         </mat-menu>
@@ -114,80 +210,90 @@
 
     <!-- Sub header -->
     <ng-container matColumnDef="h1-row">
-      <th mat-header-cell *matHeaderCellDef> # </th>
+      <th mat-header-cell *matHeaderCellDef>#</th>
     </ng-container>
 
     <ng-container matColumnDef="h1-id">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Id" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Id' | translate }}</th>
     </ng-container>
 
     <ng-container matColumnDef="h1-office">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Office" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office' | translate }}</th>
     </ng-container>
 
     <ng-container matColumnDef="h1-external-id">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.External Id" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
     </ng-container>
-    
+
     <ng-container matColumnDef="h1-transaction-date">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Date" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
     </ng-container>
-    
+
     <ng-container matColumnDef="h1-transaction-type">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
     </ng-container>
 
     <ng-container matColumnDef="h1-space">
-      <th mat-header-cell *matHeaderCellDef> </th>
+      <th mat-header-cell *matHeaderCellDef></th>
     </ng-container>
-    
+
     <ng-container matColumnDef="h1-breakdown">
-      <th mat-header-cell *matHeaderCellDef class="center" [attr.colspan]="4"> {{"labels.inputs.Breakdown" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef class="center" [attr.colspan]="4">
+        {{ 'labels.inputs.Breakdown' | translate }}
+      </th>
     </ng-container>
-    
+
     <ng-container matColumnDef="h1-loan-balance">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Balance" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Balance' | translate }}</th>
     </ng-container>
-    
+
     <ng-container matColumnDef="h1-actions">
-      <th mat-header-cell *matHeaderCellDef class="center"> {{"labels.inputs.Actions" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef class="center">{{ 'labels.inputs.Actions' | translate }}</th>
     </ng-container>
 
     <!-- Sub header -->
     <ng-container matColumnDef="h2-space">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="6"> </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="6"></th>
     </ng-container>
 
     <ng-container matColumnDef="h2-amount">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Amount" | translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1">
+        {{ 'labels.inputs.Amount' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="h2-principal">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Principal" | translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1">
+        {{ 'labels.inputs.Principal' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="h2-interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Interest" | translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1">
+        {{ 'labels.inputs.Interest' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="h2-fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Fees" | translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1">
+        {{ 'labels.inputs.Fees' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="h2-penalties">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1"> {{"labels.inputs.Penalties" | translate}} </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef [attr.colspan]="1">
+        {{ 'labels.inputs.Penalties' | translate }}
+      </th>
     </ng-container>
 
     <ng-container matColumnDef="h2-action">
-      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> </th>
+      <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"></th>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedHeader1Columns"></tr>
     <tr mat-header-row *matHeaderRowDef="displayedHeader2Columns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
   </table>
 
   <mat-paginator [pageSize]="100" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
-
 </div>
diff --git a/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html b/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html
index 8ef2420edb..f31acda209 100644
--- a/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html
+++ b/src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html
@@ -1,34 +1,40 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate" required>
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="dueDatePicker"
+            formControlName="transactionDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong> {{"labels.commons.required" | translate}} </strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong> {{ 'labels.commons.required' | translate }} </strong>
           </mat-error>
         </mat-form-field>
 
-        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
           [inputFormControl]="editTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'">
+          [inputLabel]="'Transaction Amount'"
+        >
         </mifosx-input-amount>
 
         <mat-form-field>
-          <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-          <input matInput formControlName="externalId">
+          <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+          <input matInput formControlName="externalId" />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{"labels.inputs.Payment Type" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -40,46 +46,46 @@
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>{{"labels.inputs.Account Number" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>{{"labels.inputs.Cheque" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>{{"labels.inputs.Routing Code" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>{{"labels.inputs.Receipt Number" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>{{"labels.inputs.Bank" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{"labels.buttons.Submit" | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html b/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
index d02623c48a..aabcf440b1 100644
--- a/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
+++ b/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
@@ -1,35 +1,48 @@
 <form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
-
   <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-
     <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
-      <mat-label>{{"labels.inputs.From Date" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+      <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="fromDatePicker"
+        required
+        formControlName="fromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #fromDatePicker></mat-datepicker>
       <mat-error>
-        {{"labels.inputs.From date" | translate}}  {{"labels.commons.is" | translate}}  <strong> {{"labels.commons.required" | translate}} </strong>
+        {{ 'labels.inputs.From date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong> {{ 'labels.commons.required' | translate }} </strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
-      <mat-label>{{"labels.inputs.To Date" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+      <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="toDatePicker"
+        required
+        formControlName="toDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #toDatePicker></mat-datepicker>
       <mat-error>
-        {{"labels.inputs.To date" | translate}}  {{"labels.commons.is" | translate}}  <strong> {{"labels.commons.required" | translate}} </strong>
+        {{ 'labels.inputs.To date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong> {{ 'labels.commons.required' | translate }} </strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
-    <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
+    <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{"labels.buttons.Generate Report" | translate}} &nbsp;</button>
+      <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;
+    </button>
   </div>
-
 </form>
 
 <iframe *ngIf="!hideOutput" [src]="pentahoUrl" frameborder="0" width="100%" height="750px;"></iframe>
diff --git a/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html b/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html
index 82d114f419..ba0c6e3360 100644
--- a/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html
+++ b/src/app/loans/loans-view/transactions/view-reciept/view-reciept.component.html
@@ -1,10 +1,9 @@
 <mat-card class="container">
-
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../../general']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{ 'labels.buttons.Back' | translate }}
+    </button>
   </div>
 
-  <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
-
+  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="600px;"></iframe>
 </mat-card>
diff --git a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
index fed1c9fdbf..5f34b43e5f 100644
--- a/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
+++ b/src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html
@@ -1,33 +1,33 @@
-<div fxLayoutAlign="end" class="container m-b-20 transaction-buttons" fxLayoutGap="2%"
-  *ngIf="!(transactionData.type.contra)">
+<div
+  fxLayoutAlign="end"
+  class="container m-b-20 transaction-buttons"
+  fxLayoutGap="2%"
+  *ngIf="!transactionData.type.contra"
+>
   <span *mifosxHasPermission="'ADJUST_LOAN'">
     <button mat-raised-button color="primary" [routerLink]="'edit'" [disabled]="!allowEdition">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'Edit' | translate}}
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'Edit' | translate }}
     </button>
 
     <button mat-raised-button color="warn" (click)="undoTransaction()" [disabled]="!allowUndo">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'Undo' | translate}}
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'Undo' | translate }}
     </button>
   </span>
   <span *mifosxHasPermission="'CHARGEBACK_LOAN'">
     <button mat-raised-button color="warn" [disabled]="!allowChargeback" (click)="chargebackTransaction()">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'Chargeback' | translate}}
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'Chargeback' | translate }}
     </button>
   </span>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="loanTransactionColor()">
-        </div>
+        <div fxFlex="100%" [ngClass]="loanTransactionColor()"></div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'Transaction Id' | translate}}
+          {{ 'Transaction Id' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -35,17 +35,17 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
-          {{ 'Repayment Transaction' | translate}}
+          {{ 'Repayment Transaction' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.toLoanTransactionRelation">
           <a [href]="loanTransactionRelatedLink(transactionData.toLoanTransactionRelation.fromLoanTransaction)">
-              {{ transactionData.toLoanTransactionRelation.fromLoanTransaction }}
+            {{ transactionData.toLoanTransactionRelation.fromLoanTransaction }}
           </a>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'Type' | translate}}
+          {{ 'Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -53,7 +53,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'Transaction Date' | translate}}
+          {{ 'Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -61,7 +61,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'Currency' | translate}}
+          {{ 'Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -69,65 +69,70 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'Amount' | translate}}
+          {{ 'Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
+          {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.externalId">
-          {{ 'External Id' | translate}}
+          {{ 'External Id' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.externalId">
-          <mifosx-external-identifier externalId="{{transactionData.externalId}}" completed="true"></mifosx-external-identifier>
+          <mifosx-external-identifier
+            externalId="{{ transactionData.externalId }}"
+            completed="true"
+          ></mifosx-external-identifier>
         </div>
 
         <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>
 
         <div fxFlex="100%" class="mat-body-strong" *ngIf="existTransactionRelations">
-          {{ 'Linked Transactions' | translate}}
-          <br>
+          {{ 'Linked Transactions' | translate }}
+          <br />
 
           <table mat-table [dataSource]="transactionRelations">
-              <ng-container matColumnDef="relationType">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Relation Type" | translate}} </th>
-                <td mat-cell *matCellDef="let transactionRel" [matTooltip]="transactionRel.paymentType">
-                  {{ transactionRel.relationType | translate}}
-                </td>
-              </ng-container>
-
-              <ng-container matColumnDef="toTransaction">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Transaction" | translate}} </th>
-                <td mat-cell *matCellDef="let transactionRel">
-                  <a [href]="loanTransactionRelatedLink(transactionRel.toLoanTransaction)">
-                    {{ transactionRel.toLoanTransaction }}
-                  </a>
-                </td>
-              </ng-container>
-
-              <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate}} </th>
-                <td mat-cell *matCellDef="let transactionRel">
-                  {{ transactionRel.amount | currency }} {{ transactionData.currency.code }}
-                </td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <ng-container matColumnDef="relationType">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Relation Type' | translate }}</th>
+              <td mat-cell *matCellDef="let transactionRel" [matTooltip]="transactionRel.paymentType">
+                {{ transactionRel.relationType | translate }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="toTransaction">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction' | translate }}</th>
+              <td mat-cell *matCellDef="let transactionRel">
+                <a [href]="loanTransactionRelatedLink(transactionRel.toLoanTransaction)">
+                  {{ transactionRel.toLoanTransaction }}
+                </a>
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="amount">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+              <td mat-cell *matCellDef="let transactionRel">
+                {{ transactionRel.amount | currency }} {{ transactionData.currency.code }}
+              </td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
           </table>
         </div>
 
-        <mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData">
+        <mifosx-transaction-payment-detail
+          *ngIf="transactionData.paymentDetailData"
+          [paymentDetailData]="transactionData.paymentDetailData"
+        >
         </mifosx-transaction-payment-detail>
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/loans/loans-view/view-charge/view-charge.component.html b/src/app/loans/loans-view/view-charge/view-charge.component.html
index 6f0a7e5f67..badb6333c4 100644
--- a/src/app/loans/loans-view/view-charge/view-charge.component.html
+++ b/src/app/loans/loans-view/view-charge/view-charge.component.html
@@ -1,55 +1,71 @@
-<div *ngIf="loansAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0" fxLayout="row"
-  fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div
+  *ngIf="loansAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
+  fxLayout="row"
+  fxLayoutAlign="end"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+  class="container m-b-20"
+>
   <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="flag" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <span *ngIf="allowPayCharge">
     <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
       <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Pay" | translate}}
+      {{ 'labels.buttons.Pay' | translate }}
     </button>
   </span>
   <span *ngIf="allowWaive">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
-      (click)="waiveCharge()">
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+      (click)="waiveCharge()"
+    >
       <fa-icon icon="flag" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Waive" | translate}}
+      {{ 'labels.buttons.Waive' | translate }}
     </button>
   </span>
   <span>
-    <button mat-raised-button color="accent" *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'"
-      (click)="adjustmentCharge()">
+    <button
+      mat-raised-button
+      color="accent"
+      *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'"
+      (click)="adjustmentCharge()"
+    >
       <fa-icon icon="pen" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Adjustment" | translate}}
+      {{ 'labels.buttons.Adjustment' | translate }}
     </button>
   </span>
 </div>
 
-<div *ngIf="loansAccountData.status.value === 'Submitted and pending approval'" fxLayout="row" fxLayoutAlign="end"
-  fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div
+  *ngIf="loansAccountData.status.value === 'Submitted and pending approval'"
+  fxLayout="row"
+  fxLayoutAlign="end"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+  class="container m-b-20"
+>
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="loanChargeColor()">
-        </div>
+        <div fxFlex="100%" [ngClass]="loanChargeColor()"></div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.name" | translate}}
+          {{ 'labels.inputs.name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +73,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Charge Type" | translate}}
+          {{ 'labels.inputs.Charge Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -65,7 +81,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate}}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -73,7 +89,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Payment due at" | translate}}
+          {{ 'labels.inputs.Payment due at' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -81,7 +97,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Payment due as of" | translate}}
+          {{ 'labels.inputs.Payment due as of' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -89,7 +105,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Calculation Type" | translate}}
+          {{ 'labels.inputs.Calculation Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -97,7 +113,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Due" | translate}}
+          {{ 'labels.inputs.Due' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -105,7 +121,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Paid" | translate}}
+          {{ 'labels.inputs.Paid' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -113,7 +129,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Waived" | translate}}
+          {{ 'labels.inputs.Waived' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -121,7 +137,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Outstanding" | translate}}
+          {{ 'labels.inputs.Outstanding' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -129,20 +145,19 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Submitted On Date" | translate}}
+          {{ 'labels.inputs.Submitted On Date' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ chargeData.submittedOnDate | dateFormat }}
         </div>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{"labels.buttons.Back" | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/login/login-form/login-form.component.html b/src/app/login/login-form/login-form.component.html
index dec7e1ed6f..9865a823ea 100644
--- a/src/app/login/login-form/login-form.component.html
+++ b/src/app/login/login-form/login-form.component.html
@@ -1,13 +1,12 @@
 <form fxLayout="column" [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
-
   <mat-form-field fxFlexAlign="center" class="login-input">
     <span matPrefix class="m-r-10">
       <fa-icon icon="user-circle" size="lg"></fa-icon>
     </span>
-    <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
-    <input matInput type="text" autocomplete="off" formControlName="username">
+    <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+    <input matInput type="text" autocomplete="off" formControlName="username" />
     <mat-error *ngIf="loginForm.controls.username.hasError('required')">
-      {{'labels.inputs.Username' | translate}} <strong>{{'labels.commons.is required' | translate}}</strong>
+      {{ 'labels.inputs.Username' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
@@ -15,27 +14,41 @@
     <span matPrefix class="m-r-10">
       <fa-icon icon="lock" size="lg"></fa-icon>
     </span>
-    <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
-    <input matInput type="{{ passwordInputType }}" formControlName="password">
-    <button mat-button *ngIf="loginForm.controls.password.value && !loading" matSuffix mat-icon-button
-      (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
+    <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+    <input matInput type="{{ passwordInputType }}" formControlName="password" />
+    <button
+      mat-button
+      *ngIf="loginForm.controls.password.value && !loading"
+      matSuffix
+      mat-icon-button
+      (mousedown)="passwordInputType = 'text'"
+      (mouseup)="passwordInputType = 'password'"
+    >
       <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
       <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
     </button>
     <mat-error *ngIf="loginForm.controls.password.hasError('required')">
-      {{'labels.inputs.Password' | translate}} <strong>{{'labels.commons.is required' | translate}}</strong>
+      {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-checkbox fxFlexAlign="center" formControlName="remember" class="m-t-10">{{'labels.inputs.Remember me' | translate}}</mat-checkbox>
+  <mat-checkbox fxFlexAlign="center" formControlName="remember" class="m-t-10">{{
+    'labels.inputs.Remember me' | translate
+  }}</mat-checkbox>
 
   <button mat-raised-button color="primary" fxFlexAlign="center" class="login-button" [disabled]="!loginForm.valid">
-    {{'labels.buttons.Login' | translate}}
+    {{ 'labels.buttons.Login' | translate }}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
 
-  <button type="button" mat-button fxFlexAlign="center" class="login-button" (click)="forgotPassword()" [disabled]="loading">
-    {{'labels.links.Forgot Password?' | translate}}
+  <button
+    type="button"
+    mat-button
+    fxFlexAlign="center"
+    class="login-button"
+    (click)="forgotPassword()"
+    [disabled]="loading"
+  >
+    {{ 'labels.links.Forgot Password?' | translate }}
   </button>
-
 </form>
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 763b5d67b2..354dfd3cff 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,6 +1,5 @@
 <!-- The viewport is divided into two parts having max-width 70% and 30% -->
 <div fxLayout="row">
-
   <!--
     Content in 70%: (TODO: Allow customization by organization)
       Cover Image
@@ -12,11 +11,20 @@
 
   <div fxFlex="70%" fxLayout="column" fxLayoutAlign="center center" fxHide.lt-sm class="cover">
     <div class="cover-content">
-      <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate}}</h1>
+      <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
       <p class="mat-headline cover-description">
-        {{ 'APP_NAME' | translate}} {{'labels.text.is designed by the' | translate}} <a href="https://mifos.org/" target="_blank" class="cover-link">{{'labels.text.Mifos Initiative' | translate}}</a>. {{'labels.text.A' | translate}} <a href="https://mifos.org/resources/community/" target="_blank" class="cover-link">{{'labels.text.global community' | translate}}</a>
-        {{'labels.text.elimination of poverty' | translate}}
-        <a href="https://mifos.org/take-action/volunteer/" target="_blank" class="cover-link">{{'labels.text.Get involved' | translate}}!</a>
+        {{ 'APP_NAME' | translate }} {{ 'labels.text.is designed by the' | translate }}
+        <a href="https://mifos.org/" target="_blank" class="cover-link">{{
+          'labels.text.Mifos Initiative' | translate
+        }}</a
+        >. {{ 'labels.text.A' | translate }}
+        <a href="https://mifos.org/resources/community/" target="_blank" class="cover-link">{{
+          'labels.text.global community' | translate
+        }}</a>
+        {{ 'labels.text.elimination of poverty' | translate }}
+        <a href="https://mifos.org/take-action/volunteer/" target="_blank" class="cover-link"
+          >{{ 'labels.text.Get involved' | translate }}!</a
+        >
       </p>
     </div>
   </div>
@@ -31,18 +39,20 @@ <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate}}</h1>
   -->
 
   <div fxLayout="column" fxFlex.gt-sm="1 0 30%" class="login-container">
-
     <!-- Language Selector to the extreme right -->
     <div fxLayout="row-reverse" fxFlex="1 0 auto">
       <mifosx-language-selector class="p-r-10 p-t-10"></mifosx-language-selector>
       <mifosx-theme-toggle class="p-r-10 p-t-10"></mifosx-theme-toggle>
       <div fxFlex></div>
-      <mifosx-server-selector class="p-l-10 p-t-10" *ngIf="!environment.production && environment.allowServerSwitch"></mifosx-server-selector>
+      <mifosx-server-selector
+        class="p-l-10 p-t-10"
+        *ngIf="!environment.production && environment.allowServerSwitch"
+      ></mifosx-server-selector>
     </div>
 
     <!-- Logo with Organization Name -->
     <div fxLayout="row" fxLayoutAlign="center center" fxFlex="1 0 auto">
-      <img src="assets/images/mifos_lg-logo.png" alt="{{ 'APP_NAME' | translate}} Logo" class="img-container">
+      <img src="assets/images/mifos_lg-logo.png" alt="{{ 'APP_NAME' | translate }} Logo" class="img-container" />
     </div>
 
     <!-- Tenant Identifier Name -->
@@ -65,9 +75,21 @@ <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate}}</h1>
 
     <!-- Contact Information/Resources (hidden on smaller screens) -->
     <mat-list fxHide.lt-lg fxLayout="row" fxFlexAlign="center" fxFlex="3 0 auto" class="information-list">
-      <mat-list-item><button mat-button [matMenuTriggerFor]="resourcesMenu">{{'labels.links.Resources' | translate}}</button></mat-list-item>
-      <mat-list-item><button mat-button [matMenuTriggerFor]="communityMenu">{{'labels.links.Community' | translate}}</button></mat-list-item>
-      <mat-list-item><button mat-button [matMenuTriggerFor]="contributeMenu">{{'labels.links.Contribute' | translate}}</button></mat-list-item>
+      <mat-list-item
+        ><button mat-button [matMenuTriggerFor]="resourcesMenu">
+          {{ 'labels.links.Resources' | translate }}
+        </button></mat-list-item
+      >
+      <mat-list-item
+        ><button mat-button [matMenuTriggerFor]="communityMenu">
+          {{ 'labels.links.Community' | translate }}
+        </button></mat-list-item
+      >
+      <mat-list-item
+        ><button mat-button [matMenuTriggerFor]="contributeMenu">
+          {{ 'labels.links.Contribute' | translate }}
+        </button></mat-list-item
+      >
     </mat-list>
 
     <!-- Footer -->
@@ -77,24 +99,45 @@ <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate}}</h1>
       <a (click)="reloadSettings()"><fa-icon icon="refresh"></fa-icon></a>
     </div>
   </div>
-
 </div>
 
 <!-- Contact Information/Resources Menus -->
 <mat-menu #resourcesMenu="matMenu">
-  <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual" target="_blank" mat-menu-item>{{'labels.links.User Manual' | translate}}</a>
-  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Apache+Fineract+1.0+Functional+Specifications" target="_blank" mat-menu-item>{{'labels.links.Functional Specifications' | translate}}</a>
-  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Contributor%27s+Zone" target="_blank" mat-menu-item>{{'labels.links.Developer Zone' | translate}}</a>
+  <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual" target="_blank" mat-menu-item>{{
+    'labels.links.User Manual' | translate
+  }}</a>
+  <a
+    href="https://cwiki.apache.org/confluence/display/FINERACT/Apache+Fineract+1.0+Functional+Specifications"
+    target="_blank"
+    mat-menu-item
+    >{{ 'labels.links.Functional Specifications' | translate }}</a
+  >
+  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Contributor%27s+Zone" target="_blank" mat-menu-item>{{
+    'labels.links.Developer Zone' | translate
+  }}</a>
 </mat-menu>
 
 <mat-menu #communityMenu="matMenu">
-  <a href="https://groups.google.com/forum/#!forum/mifosusers" target="_blank" mat-menu-item>{{'labels.links.User Group' | translate}}</a>
-  <a href="https://groups.google.com/forum/#!forum/mifosdeveloper" target="_blank" mat-menu-item>{{'labels.links.Developer Group' | translate}}</a>
-  <a href="https://mifos.org/resources/community/communications/#mifos-irc" target="_blank" mat-menu-item>{{'labels.links.IRC' | translate}}</a>
+  <a href="https://groups.google.com/forum/#!forum/mifosusers" target="_blank" mat-menu-item>{{
+    'labels.links.User Group' | translate
+  }}</a>
+  <a href="https://groups.google.com/forum/#!forum/mifosdeveloper" target="_blank" mat-menu-item>{{
+    'labels.links.Developer Group' | translate
+  }}</a>
+  <a href="https://mifos.org/resources/community/communications/#mifos-irc" target="_blank" mat-menu-item>{{
+    'labels.links.IRC' | translate
+  }}</a>
 </mat-menu>
 
 <mat-menu #contributeMenu="matMenu">
-  <a href="https://mifosforge.jira.com/wiki/spaces/MDZ/pages/92012624/Key+Design+Principles" target="_blank" mat-menu-item>{{'labels.links.Key Design Principles' | translate}}</a>
-  <a href="https://sourceforge.net/projects/mifos/" target="_blank" mat-menu-item>{{'labels.links.Working with Code' | translate}}</a>
-  <a href="https://mifos.org/donate/" target="_blank" mat-menu-item>{{'labels.links.Donate' | translate}}</a>
+  <a
+    href="https://mifosforge.jira.com/wiki/spaces/MDZ/pages/92012624/Key+Design+Principles"
+    target="_blank"
+    mat-menu-item
+    >{{ 'labels.links.Key Design Principles' | translate }}</a
+  >
+  <a href="https://sourceforge.net/projects/mifos/" target="_blank" mat-menu-item>{{
+    'labels.links.Working with Code' | translate
+  }}</a>
+  <a href="https://mifos.org/donate/" target="_blank" mat-menu-item>{{ 'labels.links.Donate' | translate }}</a>
 </mat-menu>
diff --git a/src/app/login/reset-password/reset-password.component.html b/src/app/login/reset-password/reset-password.component.html
index 8bebe91529..fd616816e9 100644
--- a/src/app/login/reset-password/reset-password.component.html
+++ b/src/app/login/reset-password/reset-password.component.html
@@ -1,22 +1,27 @@
-<p>{{"labels.text.Please update your password" | translate}}:</p>
+<p>{{ 'labels.text.Please update your password' | translate }}:</p>
 
 <mat-divider></mat-divider>
 
 <form fxLayout="column" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()" id="reset-password-form">
-
   <mat-form-field fxFlexAlign="center" class="reset-password-input">
     <span matPrefix>
       <fa-icon icon="lock" size="lg" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
-    <input type="{{ passwordInputType }}" matInput required formControlName="password">
-    <button mat-button *ngIf="resetPasswordForm.controls.password.value && !loading" matSuffix mat-icon-button
-      (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
+    <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+    <input type="{{ passwordInputType }}" matInput required formControlName="password" />
+    <button
+      mat-button
+      *ngIf="resetPasswordForm.controls.password.value && !loading"
+      matSuffix
+      mat-icon-button
+      (mousedown)="passwordInputType = 'text'"
+      (mouseup)="passwordInputType = 'password'"
+    >
       <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
       <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
     </button>
     <mat-error *ngIf="resetPasswordForm.controls.password.hasError('required')">
-      {{'labels.inputs.Password' | translate}} <strong>{{'labels.commons.is required' | translate}}</strong>
+      {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
@@ -24,30 +29,55 @@
     <span matPrefix>
       <fa-icon icon="check-circle" size="lg" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>{{'labels.inputs.Confirm Password' | translate}}</mat-label>
-    <input type="password" matInput required formControlName="repeatPassword">
+    <mat-label>{{ 'labels.inputs.Confirm Password' | translate }}</mat-label>
+    <input type="password" matInput required formControlName="repeatPassword" />
     <mat-error *ngIf="resetPasswordForm.controls.password.hasError('required')">
-      {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
+      {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
     <mat-error *ngIf="resetPasswordForm.controls.password.hasError('minlength')">
-      {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.12 characters long' | translate }}</strong>
+      {{ 'labels.commons.Password should be at least' | translate }}
+      <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
     </mat-error>
     <mat-error *ngIf="resetPasswordForm.controls.password.hasError('maxlength')">
-      {{'labels.commons.Password should not be more than' | translate }} <strong>{{'labels.commons.50 characters long' | translate }}</strong>
+      {{ 'labels.commons.Password should not be more than' | translate }}
+      <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
     </mat-error>
-    <mat-error *ngIf="resetPasswordForm.controls.password.hasError('pattern') && !(resetPasswordForm.controls.password.hasError('minlength') || resetPasswordForm.controls.password.hasError('maxlength'))">
-      {{'labels.commons.Password should include a' | translate }} <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }} <strong>{{'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
+    <mat-error
+      *ngIf="
+        resetPasswordForm.controls.password.hasError('pattern') &&
+        !(
+          resetPasswordForm.controls.password.hasError('minlength') ||
+          resetPasswordForm.controls.password.hasError('maxlength')
+        )
+      "
+    >
+      {{ 'labels.commons.Password should include a' | translate }}
+      <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
+      <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{
+        'labels.commons.lowercase and special character' | translate
+      }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <p class="reset-password-error" *ngIf="resetPasswordForm.errors?.passwordsDoNotMatch &&
-    (!resetPasswordForm.controls.password.hasError('required') && !resetPasswordForm.controls.repeatPassword.hasError('required'))">
-    {{"labels.text.Passwords" | translate}} <strong>{{"labels.text.do not match" | translate}}</strong>
+  <p
+    class="reset-password-error"
+    *ngIf="
+      resetPasswordForm.errors?.passwordsDoNotMatch &&
+      !resetPasswordForm.controls.password.hasError('required') &&
+      !resetPasswordForm.controls.repeatPassword.hasError('required')
+    "
+  >
+    {{ 'labels.text.Passwords' | translate }} <strong>{{ 'labels.text.do not match' | translate }}</strong>
   </p>
 
-  <button mat-raised-button color="primary" fxFlexAlign="center" class="reset-password-button" [disabled]="!resetPasswordForm.valid">
-    {{"labels.buttons.Reset Password" | translate}}
+  <button
+    mat-raised-button
+    color="primary"
+    fxFlexAlign="center"
+    class="reset-password-button"
+    [disabled]="!resetPasswordForm.valid"
+  >
+    {{ 'labels.buttons.Reset Password' | translate }}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
-
 </form>
diff --git a/src/app/login/two-factor-authentication/two-factor-authentication.component.html b/src/app/login/two-factor-authentication/two-factor-authentication.component.html
index 98be73ee4c..c1b13e4ee1 100644
--- a/src/app/login/two-factor-authentication/two-factor-authentication.component.html
+++ b/src/app/login/two-factor-authentication/two-factor-authentication.component.html
@@ -1,60 +1,91 @@
-<p><strong>{{"labels.text.Two Factor Authentication" | translate}}</strong></p>
+<p>
+  <strong>{{ 'labels.text.Two Factor Authentication' | translate }}</strong>
+</p>
 
 <mat-divider></mat-divider>
 
 <!-- Select delivery method to receive OTP -->
-<p *ngIf="!otpRequested">{{"labels.text.Please select a delivery method" | translate}}:</p>
-
-<form fxLayout="column" *ngIf="!otpRequested" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" class="two-factor-auth-form"
-  (ngSubmit)="requestOTP()">
+<p *ngIf="!otpRequested">{{ 'labels.text.Please select a delivery method' | translate }}:</p>
 
+<form
+  fxLayout="column"
+  *ngIf="!otpRequested"
+  [formGroup]="twoFactorAuthenticationDeliveryMethodForm"
+  class="two-factor-auth-form"
+  (ngSubmit)="requestOTP()"
+>
   <mat-radio-group fxLayout="column" fxFlexAlign="center" formControlName="twoFactorAuthenticationDeliveryMethod">
-    <mat-radio-button *ngFor="let twoFactorAuthenticationDeliveryMethod of twoFactorAuthenticationDeliveryMethods"
-      [value]="twoFactorAuthenticationDeliveryMethod">
-      {{"labels.inputs.Send" | translate}} {{ twoFactorAuthenticationDeliveryMethod.name }} {{"labels.inputs.to" | translate}} {{ twoFactorAuthenticationDeliveryMethod.target }}
+    <mat-radio-button
+      *ngFor="let twoFactorAuthenticationDeliveryMethod of twoFactorAuthenticationDeliveryMethods"
+      [value]="twoFactorAuthenticationDeliveryMethod"
+    >
+      {{ 'labels.inputs.Send' | translate }} {{ twoFactorAuthenticationDeliveryMethod.name }}
+      {{ 'labels.inputs.to' | translate }} {{ twoFactorAuthenticationDeliveryMethod.target }}
     </mat-radio-button>
   </mat-radio-group>
 
-  <button mat-raised-button color="primary" fxFlexAlign="center" fxFlexFill [disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid">
-    {{"labels.buttons.Request OTP" | translate}}
+  <button
+    mat-raised-button
+    color="primary"
+    fxFlexAlign="center"
+    fxFlexFill
+    [disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid"
+  >
+    {{ 'labels.buttons.Request OTP' | translate }}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
-
 </form>
 
 <!-- Show input for OTP -->
-<p *ngIf="otpRequested">{{"labels.text.Please enter the OTP" | translate}}:</p>
-
-<form fxLayout="column" *ngIf="otpRequested" [formGroup]="twoFactorAuthenticationForm" class="two-factor-auth-form"
-  (ngSubmit)="validateOTP()">
+<p *ngIf="otpRequested">{{ 'labels.text.Please enter the OTP' | translate }}:</p>
 
+<form
+  fxLayout="column"
+  *ngIf="otpRequested"
+  [formGroup]="twoFactorAuthenticationForm"
+  class="two-factor-auth-form"
+  (ngSubmit)="validateOTP()"
+>
   <mat-form-field fxFlexAlign="center" class="two-factor-auth-input">
     <span matPrefix>
       <fa-icon icon="user-shield" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>{{"labels.inputs.OTP" | translate}}</mat-label>
-    <input type="password" matInput autocomplete="off" required formControlName="otp">
+    <mat-label>{{ 'labels.inputs.OTP' | translate }}</mat-label>
+    <input type="password" matInput autocomplete="off" required formControlName="otp" />
     <mat-hint align="start">
-      <strong>{{"labels.inputs.Delivery Method" | translate}}:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
+      <strong>{{ 'labels.inputs.Delivery Method' | translate }}:</strong>
+      {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
     </mat-hint>
     <mat-hint align="end">
-      <strong>{{"labels.inputs.Validity" | translate}}:</strong> {{ tokenValidityTime / 60 }} {{"labels.inputs.mins" | translate}}
+      <strong>{{ 'labels.inputs.Validity' | translate }}:</strong> {{ tokenValidityTime / 60 }}
+      {{ 'labels.inputs.mins' | translate }}
     </mat-hint>
     <mat-error *ngIf="twoFactorAuthenticationForm.controls.otp.hasError('required')">
-      {{"labels.inputs.OTP" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+      {{ 'labels.inputs.OTP' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <button mat-raised-button color="primary" fxFlexAlign="center" class="two-factor-auth-button"
-    [disabled]="!twoFactorAuthenticationForm.valid">
-    {{"labels.buttons.Validate OTP" | translate}}
+  <button
+    mat-raised-button
+    color="primary"
+    fxFlexAlign="center"
+    class="two-factor-auth-button"
+    [disabled]="!twoFactorAuthenticationForm.valid"
+  >
+    {{ 'labels.buttons.Validate OTP' | translate }}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
 
-  <button type="button" mat-button fxFlexAlign="center" class="two-factor-auth-button" (click)="resendOTP()"
-    [disabled]="loading || resendOTPLoading">
-    {{"labels.buttons.Resend OTP" | translate}}
+  <button
+    type="button"
+    mat-button
+    fxFlexAlign="center"
+    class="two-factor-auth-button"
+    (click)="resendOTP()"
+    [disabled]="loading || resendOTPLoading"
+  >
+    {{ 'labels.buttons.Resend OTP' | translate }}
     <mat-spinner [diameter]="20" *ngIf="resendOTPLoading"></mat-spinner>
   </button>
-
 </form>
diff --git a/src/app/navigation/center-navigation/center-navigation.component.html b/src/app/navigation/center-navigation/center-navigation.component.html
index 152a1c1fe6..d97b0db2f4 100644
--- a/src/app/navigation/center-navigation/center-navigation.component.html
+++ b/src/app/navigation/center-navigation/center-navigation.component.html
@@ -6,18 +6,23 @@
         <h2>
           {{ centerData.name }}
           <span [className]="centerData.status.code | statusLookup">
-            <fa-icon matTooltip="{{ centerData.status.value }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ centerData.status.value }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </span>
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          {{"labels.inputs.Account No" | translate}}:
-          <mifosx-account-number accountNo="{{centerData.accountNo}}"></mifosx-account-number>
+          {{ 'labels.inputs.Account No' | translate }}:
+          <mifosx-account-number accountNo="{{ centerData.accountNo }}"></mifosx-account-number>
         </p>
         <p *ngIf="centerData.externalId">
-          {{"labels.inputs.External Id" | translate}}:
-          <mifosx-external-identifier externalId="{{centerData.externalId}}"></mifosx-external-identifier>
+          {{ 'labels.inputs.External Id' | translate }}:
+          <mifosx-external-identifier externalId="{{ centerData.externalId }}"></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
@@ -25,13 +30,11 @@ <h2>
 </mat-card-header>
 
 <mat-card-content>
-
   <mat-tab-group>
     <mat-tab label="Details">
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Activation Date" | translate}}
+          {{ 'labels.inputs.Activation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -39,7 +42,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Associated Officer" | translate}}
+          {{ 'labels.inputs.Associated Officer' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -47,7 +50,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          {{"labels.inputs.Number of Active Clients" | translate}}
+          {{ 'labels.inputs.Number of Active Clients' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -55,7 +58,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          {{"labels.inputs.Number of Active Client Loans" | translate}}
+          {{ 'labels.inputs.Number of Active Client Loans' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -63,7 +66,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          {{"labels.inputs.Number of Active Client Borrowers" | translate}}
+          {{ 'labels.inputs.Number of Active Client Borrowers' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -71,7 +74,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          {{"labels.inputs.Number of Active Overdue Group Loans" | translate}}
+          {{ 'labels.inputs.Number of Active Overdue Group Loans' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
@@ -79,37 +82,50 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerSummaryData">
-          {{"labels.inputs.Number of Active Overdue Client Loans" | translate}}
+          {{ 'labels.inputs.Number of Active Overdue Client Loans' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="centerSummaryData">
           {{ centerSummaryData.overdueClientLoans }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-          {{"labels.inputs.Next Meeting Date" | translate}}
+        <div
+          fxFlex="50%"
+          class="mat-body-strong"
+          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]"
+        >
+          {{ 'labels.inputs.Next Meeting Date' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]">
+        <div
+          fxFlex="50%"
+          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]"
+        >
           {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable">
-          {{"labels.inputs.Meeting Frequency" | translate}}
+        <div
+          fxFlex="50%"
+          class="mat-body-strong"
+          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable"
+        >
+          {{ 'labels.inputs.Meeting Frequency' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable">
+        <div
+          fxFlex="50%"
+          *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable"
+        >
           {{ centerSummaryData.collectionMeetingCalendar.humanReadable }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Number of Groups" | translate}}
+          {{ 'labels.inputs.Number of Groups' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ groupData ? groupData.length : '' }}
         </div>
-
       </div>
     </mat-tab>
 
@@ -118,9 +134,9 @@ <h2>
     </mat-tab>
 
     <mat-tab label="Savings Accounts" *ngIf="centerAccountsData && centerAccountsData.savingsAccounts">
-      <mifosx-savings-account-table [savingsAccountData]="centerAccountsData.savingsAccounts"></mifosx-savings-account-table>
+      <mifosx-savings-account-table
+        [savingsAccountData]="centerAccountsData.savingsAccounts"
+      ></mifosx-savings-account-table>
     </mat-tab>
-
   </mat-tab-group>
-
 </mat-card-content>
diff --git a/src/app/navigation/client-navigation/client-navigation.component.html b/src/app/navigation/client-navigation/client-navigation.component.html
index 267b599465..04cbbe91a4 100644
--- a/src/app/navigation/client-navigation/client-navigation.component.html
+++ b/src/app/navigation/client-navigation/client-navigation.component.html
@@ -6,13 +6,19 @@
         <h2>
           {{ clientData.displayName }}
           <span [className]="clientData.status.code | statusLookup">
-            <fa-icon matTooltip="{{ clientData.status.value }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ clientData.status.value }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </span>
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          {{"labels.inputs.Account No" | translate}}: {{ clientData.accountNo }} {{ clientData.externalId ? '| External ID: ' + clientData.externalId : '' }}
+          {{ 'labels.inputs.Account No' | translate }}: {{ clientData.accountNo }}
+          {{ clientData.externalId ? '| External ID: ' + clientData.externalId : '' }}
         </p>
       </mat-card-subtitle>
     </div>
@@ -20,14 +26,11 @@ <h2>
 </mat-card-header>
 
 <mat-card-content>
-
   <mat-tab-group>
-
     <mat-tab label="Details">
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.firstName">
-          {{"labels.inputs.First Name" | translate}}
+          {{ 'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.firstName">
@@ -35,7 +38,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.middleName">
-          {{"labels.inputs.Middle Name" | translate}}
+          {{ 'labels.inputs.Middle Name' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.middleName">
@@ -43,7 +46,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.lastName">
-          {{"labels.inputs.Last Name" | translate}}
+          {{ 'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.lastName">
@@ -51,7 +54,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.dateOfBirth">
-          {{"labels.inputs.Date of Birth" | translate}}
+          {{ 'labels.inputs.Date of Birth' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.dateOfBirth">
@@ -59,7 +62,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.mobileNo">
-          {{"labels.inputs.Mobile Number" | translate}}
+          {{ 'labels.inputs.Mobile Number' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.mobileNo">
@@ -67,7 +70,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Activation Date" | translate}}
+          {{ 'labels.inputs.Activation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -75,7 +78,7 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.officeName">
-          {{"labels.inputs.Associated Office" | translate}}
+          {{ 'labels.inputs.Associated Office' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.officeName">
@@ -83,15 +86,13 @@ <h2>
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.staffName">
-          {{"labels.inputs.Associated Staff" | translate}}
+          {{ 'labels.inputs.Associated Staff' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.staffName">
           {{ clientData.staffName }}
         </div>
-
       </div>
-
     </mat-tab>
 
     <mat-tab label="Loan Accounts" *ngIf="clientAccountsData && clientAccountsData.loanAccounts">
@@ -99,7 +100,9 @@ <h2>
     </mat-tab>
 
     <mat-tab label="Savings Accounts" *ngIf="clientAccountsData && clientAccountsData.savingsAccounts">
-      <mifosx-savings-account-table [savingsAccountData]="clientAccountsData.savingsAccounts"></mifosx-savings-account-table>
+      <mifosx-savings-account-table
+        [savingsAccountData]="clientAccountsData.savingsAccounts"
+      ></mifosx-savings-account-table>
     </mat-tab>
 
     <mat-tab label="Share Accounts" *ngIf="clientAccountsData && clientAccountsData.shareAccounts">
@@ -109,7 +112,5 @@ <h2>
     <mat-tab label="Group Members" *ngIf="clientData.groups && clientData.groups.length !== 0">
       <mifosx-member-groups [memberGroupData]="clientData.groups"></mifosx-member-groups>
     </mat-tab>
-
   </mat-tab-group>
-
 </mat-card-content>
diff --git a/src/app/navigation/group-navigation/group-navigation.component.html b/src/app/navigation/group-navigation/group-navigation.component.html
index 76be2eb2b3..e45c4a35a6 100644
--- a/src/app/navigation/group-navigation/group-navigation.component.html
+++ b/src/app/navigation/group-navigation/group-navigation.component.html
@@ -6,13 +6,19 @@
         <h2>
           {{ groupData.name }}
           <span [className]="groupData.status.code | statusLookup">
-            <fa-icon matTooltip="{{ groupData.status.value }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ groupData.status.value }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </span>
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
         <p>
-          {{"labels.inputs.Account No" | translate}}: {{ groupData.accountNo }} {{ groupData.externalId ? '| External ID: ' + groupData.externalId : '' }}
+          {{ 'labels.inputs.Account No' | translate }}: {{ groupData.accountNo }}
+          {{ groupData.externalId ? '| External ID: ' + groupData.externalId : '' }}
         </p>
       </mat-card-subtitle>
     </div>
@@ -20,68 +26,81 @@ <h2>
 </mat-card-header>
 
 <mat-card-content>
-    <mat-tab-group>
-      <mat-tab label="Details">
-        <div fxLayout="row wrap" class="content">
-
-          <div fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Activation Date" | translate}}
-          </div>
-
-          <div fxFlex="50%">
-            {{ groupData.activationDate | dateFormat }}
-          </div>
-
-          <div fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Associated Officer" | translate}}
-          </div>
-
-          <div fxFlex="50%">
-            {{ groupData.staffName }}
-          </div>
-
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.centerName">
-            {{"labels.inputs.Associated Center" | translate}}
-          </div>
+  <mat-tab-group>
+    <mat-tab label="Details">
+      <div fxLayout="row wrap" class="content">
+        <div fxFlex="50%" class="mat-body-strong">
+          {{ 'labels.inputs.Activation Date' | translate }}
+        </div>
 
-          <div fxFlex="50%" *ngIf="groupData.centerName">
-            {{ groupData.centerName }}
-          </div>
+        <div fxFlex="50%">
+          {{ groupData.activationDate | dateFormat }}
+        </div>
 
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-            {{"labels.inputs.Next Meeting Date" | translate}}
-          </div>
+        <div fxFlex="50%" class="mat-body-strong">
+          {{ 'labels.inputs.Associated Officer' | translate }}
+        </div>
 
-          <div fxFlex="50%" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-            {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
-          </div>
+        <div fxFlex="50%">
+          {{ groupData.staffName }}
+        </div>
 
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable">
-            {{"labels.inputs.Meeting Frequency" | translate}}
-          </div>
+        <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.centerName">
+          {{ 'labels.inputs.Associated Center' | translate }}
+        </div>
 
-          <div fxFlex="50%" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable">
-            {{ groupData.collectionMeetingCalendar.humanReadable }}
-          </div>
+        <div fxFlex="50%" *ngIf="groupData.centerName">
+          {{ groupData.centerName }}
+        </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
-            {{"labels.inputs.Number of Clients" | translate}}
-          </div>
+        <div
+          fxFlex="50%"
+          class="mat-body-strong"
+          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]"
+        >
+          {{ 'labels.inputs.Next Meeting Date' | translate }}
+        </div>
 
-          <div fxFlex="50%">
-            {{ clientData ? clientData.length : '' }}
-          </div>
+        <div
+          fxFlex="50%"
+          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]"
+        >
+          {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
+        </div>
 
+        <div
+          fxFlex="50%"
+          class="mat-body-strong"
+          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable"
+        >
+          {{ 'labels.inputs.Meeting Frequency' | translate }}
         </div>
-      </mat-tab>
 
-      <mat-tab label="Loan Accounts" *ngIf="groupAccountsData && groupAccountsData.loanAccounts">
-        <mifosx-loan-account-table [loanAccountData]="groupAccountsData.loanAccounts"></mifosx-loan-account-table>
-      </mat-tab>
+        <div
+          fxFlex="50%"
+          *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable"
+        >
+          {{ groupData.collectionMeetingCalendar.humanReadable }}
+        </div>
 
-      <mat-tab label="Savings Accounts" *ngIf="groupAccountsData && groupAccountsData.savingsAccounts">
-        <mifosx-savings-account-table [savingsAccountData]="groupAccountsData.savingsAccounts"></mifosx-savings-account-table>
-      </mat-tab>
+        <div fxFlex="50%" class="mat-body-strong">
+          {{ 'labels.inputs.Number of Clients' | translate }}
+        </div>
 
-    </mat-tab-group>
+        <div fxFlex="50%">
+          {{ clientData ? clientData.length : '' }}
+        </div>
+      </div>
+    </mat-tab>
+
+    <mat-tab label="Loan Accounts" *ngIf="groupAccountsData && groupAccountsData.loanAccounts">
+      <mifosx-loan-account-table [loanAccountData]="groupAccountsData.loanAccounts"></mifosx-loan-account-table>
+    </mat-tab>
+
+    <mat-tab label="Savings Accounts" *ngIf="groupAccountsData && groupAccountsData.savingsAccounts">
+      <mifosx-savings-account-table
+        [savingsAccountData]="groupAccountsData.savingsAccounts"
+      ></mifosx-savings-account-table>
+    </mat-tab>
+  </mat-tab-group>
 </mat-card-content>
diff --git a/src/app/navigation/loan-account-table/loan-account-table.component.html b/src/app/navigation/loan-account-table/loan-account-table.component.html
index 2d1f8c70a7..837ec9cb56 100644
--- a/src/app/navigation/loan-account-table/loan-account-table.component.html
+++ b/src/app/navigation/loan-account-table/loan-account-table.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="space-between center">
   <mat-form-field fxFlex="50%">
-    <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-    <input matInput (keyup)="applyFilter($event.target.value)">
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+    <input matInput (keyup)="applyFilter($event.target.value)" />
   </mat-form-field>
   <button mat-raised-button color="primary" (click)="toggleClosed()">
     {{ showClosed ? 'View Active' : 'View Closed' }}
@@ -9,36 +9,44 @@
 </div>
 
 <table mat-table [dataSource]="dataSource" matSort>
-
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Number' | translate }}</th>
     <td mat-cell *matCellDef="let loanAccount">{{ loanAccount.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="productName">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Loan Account" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Loan Account' | translate }}</th>
     <td mat-cell *matCellDef="let loanAccount">{{ loanAccount.productName }}</td>
   </ng-container>
 
   <ng-container matColumnDef="Type">
-    <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
     <td mat-cell *matCellDef="let loanAccount">
-      <fa-icon matTooltip="{{ loanAccount.loanType.value }}" matTooltipPosition="right" [icon]="(loanAccount.loanType.code === 'accountType.individual') ? 'user' : 'users'" size="lg"></fa-icon>
+      <fa-icon
+        matTooltip="{{ loanAccount.loanType.value }}"
+        matTooltipPosition="right"
+        [icon]="loanAccount.loanType.code === 'accountType.individual' ? 'user' : 'users'"
+        size="lg"
+      ></fa-icon>
     </td>
   </ng-container>
 
   <ng-container matColumnDef="Status">
-    <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
     <td mat-cell *matCellDef="let loanAccount">
-      <span [className]="loanAccount.inArrears?'status-active-overdue' : (loanAccount.status.code | statusLookup)">
-        <fa-icon matTooltip="{{ loanAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
+      <span [className]="loanAccount.inArrears ? 'status-active-overdue' : (loanAccount.status.code | statusLookup)">
+        <fa-icon
+          matTooltip="{{ loanAccount.status.value }}"
+          matTooltipPosition="right"
+          icon="circle"
+          size="md"
+        ></fa-icon>
       </span>
     </td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
 
 <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
diff --git a/src/app/navigation/member-groups/member-groups.component.html b/src/app/navigation/member-groups/member-groups.component.html
index d91bc8b18b..cd1b330e1b 100644
--- a/src/app/navigation/member-groups/member-groups.component.html
+++ b/src/app/navigation/member-groups/member-groups.component.html
@@ -1,25 +1,23 @@
 <div fxLayout="row">
   <mat-form-field fxFlex="50%">
-    <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-    <input matInput (keyup)="applyFilter($event.target.value)">
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+    <input matInput (keyup)="applyFilter($event.target.value)" />
   </mat-form-field>
 </div>
 
 <table mat-table [dataSource]="dataSource" matSort>
-
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number" | translate}} </th>
-    <td mat-cell *matCellDef="let memberGroup"> {{ memberGroup.accountNo }} </td>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Number' | translate }}</th>
+    <td mat-cell *matCellDef="let memberGroup">{{ memberGroup.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Group Name" | translate}} </th>
-    <td mat-cell *matCellDef="let memberGroup"> {{ memberGroup.name }} </td>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Group Name' | translate }}</th>
+    <td mat-cell *matCellDef="let memberGroup">{{ memberGroup.name }}</td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
 
 <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
index 0951d0c748..3d0f347d6e 100644
--- a/src/app/navigation/navigation.component.html
+++ b/src/app/navigation/navigation.component.html
@@ -1,15 +1,10 @@
 <div class="container">
-
   <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="2%">
-
     <div fxFlex="48%">
-
       <mat-card fxLayout="column">
-
         <mat-card-content fxLayout="column">
-
           <mat-form-field *ngIf="!(officeData === undefined || officeData === null)">
-            <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select [formControl]="officeSelector">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
@@ -52,19 +47,17 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </mat-card-content>
-
       </mat-card>
-
     </div>
 
     <div fxFlex="48%">
-
       <mat-card fxLayout="column" *ngIf="selectedItem">
-
         <ng-container *ngIf="selectedItem.itemType === 'office'">
-          <mifosx-office-navigation [officeData]="selectedItem" [employeeData]="employeeData"></mifosx-office-navigation>
+          <mifosx-office-navigation
+            [officeData]="selectedItem"
+            [employeeData]="employeeData"
+          ></mifosx-office-navigation>
         </ng-container>
 
         <ng-container *ngIf="selectedItem.itemType === 'employee'">
@@ -72,21 +65,29 @@
         </ng-container>
 
         <ng-container *ngIf="selectedItem.itemType === 'center'">
-          <mifosx-center-navigation [centerData]="selectedItem" [groupData]="groupData" [centerAccountsData]='selectedItemAccounts' [centerSummaryData]='selectedItemSummary'></mifosx-center-navigation>
+          <mifosx-center-navigation
+            [centerData]="selectedItem"
+            [groupData]="groupData"
+            [centerAccountsData]="selectedItemAccounts"
+            [centerSummaryData]="selectedItemSummary"
+          ></mifosx-center-navigation>
         </ng-container>
 
         <ng-container *ngIf="selectedItem.itemType === 'group'">
-          <mifosx-group-navigation [groupData]="selectedItem" [clientData]="clientData" [groupAccountsData]='selectedItemAccounts'></mifosx-group-navigation>
+          <mifosx-group-navigation
+            [groupData]="selectedItem"
+            [clientData]="clientData"
+            [groupAccountsData]="selectedItemAccounts"
+          ></mifosx-group-navigation>
         </ng-container>
 
         <ng-container *ngIf="selectedItem.itemType === 'client'">
-          <mifosx-client-navigation [clientData]="selectedItem" [clientAccountsData]='selectedItemAccounts'></mifosx-client-navigation>
+          <mifosx-client-navigation
+            [clientData]="selectedItem"
+            [clientAccountsData]="selectedItemAccounts"
+          ></mifosx-client-navigation>
         </ng-container>
-
       </mat-card>
-
     </div>
-
   </div>
-
 </div>
diff --git a/src/app/navigation/office-navigation/office-navigation.component.html b/src/app/navigation/office-navigation/office-navigation.component.html
index 87b860b512..ea86d0ff6b 100644
--- a/src/app/navigation/office-navigation/office-navigation.component.html
+++ b/src/app/navigation/office-navigation/office-navigation.component.html
@@ -9,7 +9,9 @@ <h2>
       </mat-card-title>
       <mat-card-subtitle>
         <p *ngIf="officeData.externalId">
-          {{"labels.inputs.External Id" | translate}}:<mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
+          {{ 'labels.inputs.External Id' | translate }}:<mifosx-external-identifier
+            externalId="{{ officeData.externalId }}"
+          ></mifosx-external-identifier>
         </p>
       </mat-card-subtitle>
     </div>
@@ -18,9 +20,8 @@ <h2>
 
 <mat-card-content>
   <div fxLayout="row wrap" class="content">
-
     <div fxFlex="50%" class="mat-body-strong">
-      {{"labels.inputs.Opened On" | translate}}
+      {{ 'labels.inputs.Opened On' | translate }}
     </div>
 
     <div fxFlex="50%">
@@ -28,7 +29,7 @@ <h2>
     </div>
 
     <div fxFlex="50%" class="mat-body-strong" *ngIf="officeData.parentName">
-      {{"labels.inputs.Parent officeData" | translate}}
+      {{ 'labels.inputs.Parent officeData' | translate }}
     </div>
 
     <div fxFlex="50%" *ngIf="officeData.parentName">
@@ -36,12 +37,11 @@ <h2>
     </div>
 
     <div fxFlex="50%" class="mat-body-strong">
-      {{"labels.inputs.Number of Staff" | translate}}
+      {{ 'labels.inputs.Number of Staff' | translate }}
     </div>
 
     <div fxFlex="50%">
       {{ employeeData ? employeeData.length : '' }}
     </div>
-
   </div>
 </mat-card-content>
diff --git a/src/app/navigation/savings-account-table/savings-account-table.component.html b/src/app/navigation/savings-account-table/savings-account-table.component.html
index 6d31d6814f..35ca772701 100644
--- a/src/app/navigation/savings-account-table/savings-account-table.component.html
+++ b/src/app/navigation/savings-account-table/savings-account-table.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="space-between center">
   <mat-form-field fxFlex="50%">
-    <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-    <input matInput (keyup)="applyFilter($event.target.value)">
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+    <input matInput (keyup)="applyFilter($event.target.value)" />
   </mat-form-field>
   <button mat-raised-button color="primary" (click)="toggleClosed()">
     {{ showClosed ? 'View Active' : 'View Closed' }}
@@ -9,34 +9,37 @@
 </div>
 
 <table mat-table [dataSource]="dataSource" matSort>
-
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Number' | translate }}</th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="productName">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Savings Account" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Savings Account' | translate }}</th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.productName }}</td>
   </ng-container>
 
   <ng-container matColumnDef="accountBalance">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Balance" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Balance' | translate }}</th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.accountBalance }}</td>
   </ng-container>
 
   <ng-container matColumnDef="Status">
-    <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
     <td mat-cell *matCellDef="let savingsAccount">
       <span [className]="savingsAccount.status.code | statusLookup">
-        <fa-icon matTooltip="{{ savingsAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
+        <fa-icon
+          matTooltip="{{ savingsAccount.status.value }}"
+          matTooltipPosition="right"
+          icon="circle"
+          size="md"
+        ></fa-icon>
       </span>
     </td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
 
 <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
diff --git a/src/app/navigation/share-account-table/share-account-table.component.html b/src/app/navigation/share-account-table/share-account-table.component.html
index 32c9736194..2daae165f5 100644
--- a/src/app/navigation/share-account-table/share-account-table.component.html
+++ b/src/app/navigation/share-account-table/share-account-table.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="space-between center">
   <mat-form-field fxFlex="50%">
-    <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-    <input matInput (keyup)="applyFilter($event.target.value)">
+    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+    <input matInput (keyup)="applyFilter($event.target.value)" />
   </mat-form-field>
   <button mat-raised-button color="primary" (click)="toggleClosed()">
     {{ showClosed ? 'View Active' : 'View Closed' }}
@@ -9,36 +9,37 @@
 </div>
 
 <table mat-table [dataSource]="dataSource" matSort>
-
   <ng-container matColumnDef="accountNo">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Account Number" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Number' | translate }}</th>
     <td mat-cell *matCellDef="let shareAccount">{{ shareAccount.accountNo }}</td>
   </ng-container>
 
   <ng-container matColumnDef="productName">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Share Account" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Share Account' | translate }}</th>
     <td mat-cell *matCellDef="let shareAccount">{{ shareAccount.productName }}</td>
   </ng-container>
 
   <ng-container matColumnDef="totalApprovedShares">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Approved Shares" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Approved Shares' | translate }}</th>
     <td mat-cell *matCellDef="let savingsAccount">{{ savingsAccount.totalApprovedShares }}</td>
   </ng-container>
 
   <ng-container matColumnDef="Status">
-    <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Status" | translate}} </th>
+    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
     <td mat-cell *matCellDef="let shareAccount">
       <span [className]="shareAccount.status.code | statusLookup">
-        <fa-icon matTooltip="{{ shareAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
+        <fa-icon
+          matTooltip="{{ shareAccount.status.value }}"
+          matTooltipPosition="right"
+          icon="circle"
+          size="md"
+        ></fa-icon>
       </span>
     </td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
 
 <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
-
-
diff --git a/src/app/navigation/staff-navigation/staff-navigation.component.html b/src/app/navigation/staff-navigation/staff-navigation.component.html
index 0db9a60811..b9bdf909a4 100644
--- a/src/app/navigation/staff-navigation/staff-navigation.component.html
+++ b/src/app/navigation/staff-navigation/staff-navigation.component.html
@@ -6,14 +6,17 @@
         <h2>
           {{ employeeData.displayName }}
           <span [className]="employeeData.isActive === true ? 'true' : 'false'">
-            <fa-icon matTooltip="{{ employeeData.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ employeeData.isActive === true ? 'Active' : 'Inactive' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </span>
         </h2>
       </mat-card-title>
       <mat-card-subtitle>
-        <p>
-          {{"labels.inputs.Associated Office" | translate}}: {{ employeeData.officeName }}
-        </p>
+        <p>{{ 'labels.inputs.Associated Office' | translate }}: {{ employeeData.officeName }}</p>
       </mat-card-subtitle>
     </div>
   </mat-card-title-group>
@@ -21,9 +24,8 @@ <h2>
 
 <mat-card-content>
   <div fxLayout="row wrap" class="content">
-
     <div fxFlex="50%" class="mat-body-strong">
-      {{"labels.inputs.Joined On" | translate}}
+      {{ 'labels.inputs.Joined On' | translate }}
     </div>
 
     <div fxFlex="50%">
@@ -31,7 +33,7 @@ <h2>
     </div>
 
     <div fxFlex="50%" class="mat-body-strong">
-      {{"labels.inputs.Loan Officer" | translate}}
+      {{ 'labels.inputs.Loan Officer' | translate }}
     </div>
 
     <div fxFlex="50%">
@@ -39,7 +41,7 @@ <h2>
     </div>
 
     <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">
-      {{"labels.inputs.Mobile Number" | translate}}
+      {{ 'labels.inputs.Mobile Number' | translate }}
     </div>
 
     <div fxFlex="50%" *ngIf="employeeData.mobileNo">
@@ -47,12 +49,11 @@ <h2>
     </div>
 
     <div fxFlex="50%" class="mat-body-strong">
-      {{"labels.inputs.Number of Centers" | translate}}
+      {{ 'labels.inputs.Number of Centers' | translate }}
     </div>
 
     <div fxFlex="50%">
       {{ centerData ? centerData.length : '' }}
     </div>
-
   </div>
 </mat-card-content>
diff --git a/src/app/not-found/not-found.component.html b/src/app/not-found/not-found.component.html
index 01e6bed8bc..907d71e17b 100644
--- a/src/app/not-found/not-found.component.html
+++ b/src/app/not-found/not-found.component.html
@@ -1,9 +1,10 @@
-  <div class="not-found-container">
-    <div id="title">404</div>
-    <div id="subtitle" class="f30">{{'not_found_subtitle' | translate}}</div>
-    <div class="back-button m-t-20">
-      <button type="button" (click)="goBack()" mat-raised-button>
-        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-        {{'labels.buttons.Back' | translate}}</button>
-    </div>
+<div class="not-found-container">
+  <div id="title">404</div>
+  <div id="subtitle" class="f30">{{ 'not_found_subtitle' | translate }}</div>
+  <div class="back-button m-t-20">
+    <button type="button" (click)="goBack()" mat-raised-button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
   </div>
+</div>
diff --git a/src/app/notifications/notifications-page/notifications-page.component.html b/src/app/notifications/notifications-page/notifications-page.component.html
index 651df298f5..a8849d2bae 100644
--- a/src/app/notifications/notifications-page/notifications-page.component.html
+++ b/src/app/notifications/notifications-page/notifications-page.component.html
@@ -1,26 +1,25 @@
 <div class="container">
-
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="notification">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Notification" | translate}} </th>
-        <td mat-cell *matCellDef="let notification"> {{ notification.content }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Notification' | translate }}</th>
+        <td mat-cell *matCellDef="let notification">{{ notification.content }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdAt">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Created At" | translate}} </th>
-        <td mat-cell *matCellDef="let notification"> {{ notification.createdAt }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created At' | translate }}</th>
+        <td mat-cell *matCellDef="let notification">{{ notification.createdAt }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[routeMap[row.objectType], row.objectId]"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        class="select-row"
+        [routerLink]="[routeMap[row.objectType], row.objectId]"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/adhoc-query/adhoc-query.component.html b/src/app/organization/adhoc-query/adhoc-query.component.html
index 680932c918..0c41cbc6f3 100644
--- a/src/app/organization/adhoc-query/adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/adhoc-query.component.html
@@ -1,69 +1,70 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ADHOC'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Create AdHoc Query" | translate }}
+    {{ 'labels.buttons.Create AdHoc Query' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8 table-container">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-        <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let adhocquery">{{ adhocquery.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="query">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.SQL Query' | translate }} </th>
-        <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.query }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.SQL Query' | translate }}</th>
+        <td mat-cell *matCellDef="let adhocquery">{{ adhocquery.query }}</td>
       </ng-container>
 
       <ng-container matColumnDef="tableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Table Affected' | translate }} </th>
-        <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.tableName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Table Affected' | translate }}</th>
+        <td mat-cell *matCellDef="let adhocquery">{{ adhocquery.tableName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Email' | translate }} </th>
-        <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.email }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Email' | translate }}</th>
+        <td mat-cell *matCellDef="let adhocquery">{{ adhocquery.email }}</td>
       </ng-container>
 
       <ng-container matColumnDef="reportRunFrequency">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Run Frequency' | translate }} </th>
-        <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.reportRunFrequency }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Report Run Frequency' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let adhocquery">{{ adhocquery.reportRunFrequency }}</td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let adhocquery">
           <div [className]="adhocquery.isActive === true ? 'true' : 'false'">
-            <fa-icon matTooltip="{{ adhocquery.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ adhocquery.isActive === true ? 'Active' : 'Inactive' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Created By' | translate }} </th>
-        <td mat-cell *matCellDef="let adhocquery"> {{ adhocquery.createdBy }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
+        <td mat-cell *matCellDef="let adhocquery">{{ adhocquery.createdBy }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html b/src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html
index 6666fae1f2..0d39a40fd0 100644
--- a/src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="adhocQueryForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="adhocQueryForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -20,15 +16,17 @@
             <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
             <mat-error *ngIf="adhocQueryForm.controls.query.hasError('required')">
-              {{ 'labels.inputs.SQL Query' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.SQL Query' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
-            <input matInput required formControlName="tableName">
+            <input matInput required formControlName="tableName" />
             <mat-error *ngIf="adhocQueryForm.controls.tableName.hasError('required')">
-              {{ 'labels.inputs.Insert into table' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Insert into table' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,15 +34,17 @@
             <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
             <mat-error *ngIf="adhocQueryForm.controls.tableFields.hasError('required')">
-              {{ 'labels.inputs.Table Fields' | translate }} {{ "labels.commons.are"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Table Fields' | translate }} {{ 'labels.commons.are' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
-            <input matInput formControlName="email">
+            <input matInput formControlName="email" />
             <mat-error *ngIf="adhocQueryForm.controls.email.hasError('email')">
-              {{ 'labels.inputs.Email' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid"  |translate}}</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.invalid' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -59,30 +59,36 @@
 
           <mat-form-field *ngIf="adhocQueryForm.controls.reportRunFrequency.value === 5">
             <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="reportRunEvery">
+            <input type="number" matInput required formControlName="reportRunEvery" />
             <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('required')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="adhocQueryForm.controls.reportRunEvery.hasError('min')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} <strong>{{ "labels.commons.must be larger than 0"  |translate}}</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }}
+              <strong>{{ 'labels.commons.must be larger than 0' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
             {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!adhocQueryForm.valid" *mifosxHasPermission="'CREATE_ADHOC'">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!adhocQueryForm.valid"
+          *mifosxHasPermission="'CREATE_ADHOC'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html b/src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html
index 7783bc4ab4..a377da2aac 100644
--- a/src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editAdhocQueryForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="editAdhocQueryForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -20,15 +16,17 @@
             <mat-label>{{ 'labels.inputs.SQL Query' | translate }}</mat-label>
             <textarea matInput required formControlName="query"></textarea>
             <mat-error *ngIf="editAdhocQueryForm.controls.query.hasError('required')">
-              {{ 'labels.inputs.SQL Query' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.SQL Query' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Insert into table' | translate }}</mat-label>
-            <input matInput required formControlName="tableName">
+            <input matInput required formControlName="tableName" />
             <mat-error *ngIf="editAdhocQueryForm.controls.tableName.hasError('required')">
-              {{ 'labels.inputs.Insert into table' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Insert into table' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,15 +34,17 @@
             <mat-label>{{ 'labels.inputs.Table Fields' | translate }}</mat-label>
             <textarea matInput required formControlName="tableFields"></textarea>
             <mat-error *ngIf="editAdhocQueryForm.controls.tableFields.hasError('required')">
-              {{ 'labels.inputs.Table Fields' | translate }} {{ "labels.commons.are"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Table Fields' | translate }} {{ 'labels.commons.are' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
-            <input matInput formControlName="email">
+            <input matInput formControlName="email" />
             <mat-error *ngIf="editAdhocQueryForm.controls.email.hasError('email')">
-              {{ 'labels.inputs.Email' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid"  |translate}}</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.invalid' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -59,30 +59,36 @@
 
           <mat-form-field *ngIf="editAdhocQueryForm.controls.reportRunFrequency.value === 5">
             <mat-label>{{ 'labels.inputs.Custom Report Run Frequency (Days)' | translate }}</mat-label>
-            <input type="number" matInput required formControlName="reportRunEvery">
+            <input type="number" matInput required formControlName="reportRunEvery" />
             <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('required')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editAdhocQueryForm.controls.reportRunEvery.hasError('min')">
-              {{ 'labels.inputs.Custom Report Run Frequency' | translate }} <strong>{{ "labels.commons.must be larger than 0"  |translate}}</strong>
+              {{ 'labels.inputs.Custom Report Run Frequency' | translate }}
+              <strong>{{ 'labels.commons.must be larger than 0' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
             {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editAdhocQueryForm.valid" *mifosxHasPermission="'UPDATE_ADHOC'">{{"labels.buttons.Submit" | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!editAdhocQueryForm.valid"
+          *mifosxHasPermission="'UPDATE_ADHOC'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html b/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html
index c38c9f2919..ae9d106daa 100644
--- a/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html
@@ -1,22 +1,18 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ADHOC'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Edit" | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteAdhocQuery()" *mifosxHasPermission="'DELETE_ADHOC'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Delete" | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
           {{ 'labels.inputs.name' | translate }}
         </div>
@@ -64,11 +60,7 @@
         <div fxFlex="50%">
           {{ adhocQueryData.createdBy }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/bulk-import/bulk-import.component.html b/src/app/organization/bulk-import/bulk-import.component.html
index f345ba616f..3359580609 100644
--- a/src/app/organization/bulk-import/bulk-import.component.html
+++ b/src/app/organization/bulk-import/bulk-import.component.html
@@ -1,199 +1,240 @@
 <!-- TODO: Refactor Permissions -->
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Offices']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Offices']">{{'labels.heading.Offices' | translate }}</h4>
+            <h4 matLine [routerLink]="['Offices']">{{ 'labels.heading.Offices' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['Offices']">{{ 'labels.text.Download, Upload Offices Template' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['Offices']">
+              {{ 'labels.text.Download, Upload Offices Template' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Users']">
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Users']">{{'labels.heading.Users' | translate }}</h4>
+            <h4 matLine [routerLink]="['Users']">{{ 'labels.heading.Users' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['Users']">{{ 'labels.text.Download offices template and Upload office excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['Users']">
+              {{ 'labels.text.Download offices template and Upload office excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Groups']">
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Groups']">{{'labels.heading.Groups' | translate }}</h4>
+            <h4 matLine [routerLink]="['Groups']">{{ 'labels.heading.Groups' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['Groups']">{{ 'labels.text.Download groups template and Upload group excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['Groups']">
+              {{ 'labels.text.Download groups template and Upload group excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Loan Accounts']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Loan Accounts']">{{'labels.heading.Loan Accounts' | translate }}</h4>
+            <h4 matLine [routerLink]="['Loan Accounts']">{{ 'labels.heading.Loan Accounts' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['Loan Accounts']">{{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['Loan Accounts']">
+              {{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Savings Accounts']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Savings Accounts']">{{'labels.heading.Savings Accounts' | translate }}</h4>
+            <h4 matLine [routerLink]="['Savings Accounts']">{{ 'labels.heading.Savings Accounts' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['Savings Accounts']">{{ 'labels.text.Download savings accounts template and upload savings account excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['Savings Accounts']">
+              {{ 'labels.text.Download savings accounts template and upload savings account excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Fixed Deposit Accounts']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Fixed Deposit Accounts']">{{'labels.heading.Fixed Deposit Accounts' | translate }}</h4>
+            <h4 matLine [routerLink]="['Fixed Deposit Accounts']">
+              {{ 'labels.heading.Fixed Deposit Accounts' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['Fixed Deposit Accounts']">{{ 'labels.text.Download fixed deposit accounts template and upload fixed deposit account excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['Fixed Deposit Accounts']">
+              {{
+                'labels.text.Download fixed deposit accounts template and upload fixed deposit account excel files'
+                  | translate
+              }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Chart of Accounts']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Chart of Accounts']">{{'labels.heading.Chart of Accounts' | translate }}</h4>
+            <h4 matLine [routerLink]="['Chart of Accounts']">{{ 'labels.heading.Chart of Accounts' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['Chart of Accounts']">{{ 'labels.text.Download chart of accounts template and upload chart of account excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['Chart of Accounts']">
+              {{
+                'labels.text.Download chart of accounts template and upload chart of account excel files' | translate
+              }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Share Accounts']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Share Accounts']">{{'labels.heading.Share Accounts' | translate }}</h4>
+            <h4 matLine [routerLink]="['Share Accounts']">{{ 'labels.heading.Share Accounts' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['Share Accounts']">{{ 'labels.text.Download share accounts template and upload share account excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['Share Accounts']">
+              {{ 'labels.text.Download share accounts template and upload share account excel files' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Employees']">
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Employees']">{{'labels.heading.Employees' | translate }}</h4>
+            <h4 matLine [routerLink]="['Employees']">{{ 'labels.heading.Employees' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['Employees']">{{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['Employees']">
+              {{ 'labels.text.Download loan accounts template and upload loan account excel files' | translate }}
+            </p>
           </mat-list-item>
 
-
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Clients']">
               <fa-icon icon="user" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Clients']">{{'labels.heading.Clients' | translate }}</h4>
+            <h4 matLine [routerLink]="['Clients']">{{ 'labels.heading.Clients' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['Clients']">{{ 'labels.text.Download clients template and upload clients excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['Clients']">
+              {{ 'labels.text.Download clients template and upload clients excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Centers']">
               <fa-icon icon="users" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Centers']">{{'labels.heading.Centers' | translate }}</h4>
+            <h4 matLine [routerLink]="['Centers']">{{ 'labels.heading.Centers' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['Centers']">{{ 'labels.text.Download centers template and upload centers excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['Centers']">
+              {{ 'labels.text.Download centers template and upload centers excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Loan Repayments']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Loan Repayments']">{{'labels.heading.Loan Repayments' | translate }}</h4>
+            <h4 matLine [routerLink]="['Loan Repayments']">{{ 'labels.heading.Loan Repayments' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="!arrowBooleans[11]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="arrowBooleans[11]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['Loan Repayments']">{{ 'labels.text.Download loan repayments template and upload loan repayment excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['Loan Repayments']">
+              {{ 'labels.text.Download loan repayments template and upload loan repayment excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Savings Transactions']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Savings Transactions']">{{'labels.heading.Savings Transactions' | translate }}</h4>
+            <h4 matLine [routerLink]="['Savings Transactions']">
+              {{ 'labels.heading.Savings Transactions' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="!arrowBooleans[12]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="arrowBooleans[12]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['Savings Transactions']">{{ 'labels.text.Download savings transactions template and upload savings transaction excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['Savings Transactions']">
+              {{
+                'labels.text.Download savings transactions template and upload savings transaction excel files'
+                  | translate
+              }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Fixed Deposit Transactions']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Fixed Deposit Transactions']">{{'labels.heading.Fixed Deposit Transactions' | translate }}</h4>
+            <h4 matLine [routerLink]="['Fixed Deposit Transactions']">
+              {{ 'labels.heading.Fixed Deposit Transactions' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="!arrowBooleans[13]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="arrowBooleans[13]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['Fixed Deposit Transactions']">{{ 'labels.text.Download fixed deposit transactions template and upload fixed deposit transaction excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['Fixed Deposit Transactions']">
+              {{
+                'labels.text.Download fixed deposit transactions template and upload fixed deposit transaction excel files'
+                  | translate
+              }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Recurring Deposit Transactions']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Recurring Deposit Transactions']">{{'labels.heading.Recurring Deposit Transactions' | translate }}</h4>
+            <h4 matLine [routerLink]="['Recurring Deposit Transactions']">
+              {{ 'labels.heading.Recurring Deposit Transactions' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="!arrowBooleans[14]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="arrowBooleans[14]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[14]" [routerLink]="['Recurring Deposit Transactions']">{{ 'labels.text.Download recurring deposit transactions template and upload recurring deposit transaction excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[14]" [routerLink]="['Recurring Deposit Transactions']">
+              {{
+                'labels.text.Download recurring deposit transactions template and upload recurring deposit transaction excel files'
+                  | translate
+              }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Journal Entries']">
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Journal Entries']">{{'labels.heading.Journal Entries' | translate }}</h4>
+            <h4 matLine [routerLink]="['Journal Entries']">{{ 'labels.heading.Journal Entries' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(15)" *ngIf="!arrowBooleans[15]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(15)" *ngIf="arrowBooleans[15]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[15]" [routerLink]="['Journal Entries']">{{ 'labels.text.Download journal entries template and upload journal entries excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[15]" [routerLink]="['Journal Entries']">
+              {{ 'labels.text.Download journal entries template and upload journal entries excel files' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Guarantors']">
               <fa-icon icon="chevron-right" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['Guarantors']">{{'labels.heading.Guarantors' | translate }}</h4>
+            <h4 matLine [routerLink]="['Guarantors']">{{ 'labels.heading.Guarantors' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(16)" *ngIf="!arrowBooleans[16]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(16)" *ngIf="arrowBooleans[16]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[16]" [routerLink]="['Guarantors']">{{ 'labels.text.Download guarantors template and upload guarantor excel files' | translate }}</p>
+            <p matLine *ngIf="arrowBooleans[16]" [routerLink]="['Guarantors']">
+              {{ 'labels.text.Download guarantors template and upload guarantor excel files' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html b/src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html
index 1dda2ac33d..5eaf01ae4b 100644
--- a/src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html
+++ b/src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html
@@ -1,21 +1,18 @@
 <div class="container">
-
   <div fxLayoutGap="2%" class="m-b-20">
-
     <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
-
-      <h3><strong>{{bulkImport.name}} {{ 'labels.heading.Template' | translate }}</strong></h3>
+      <h3>
+        <strong>{{ bulkImport.name }} {{ 'labels.heading.Template' | translate }}</strong>
+      </h3>
 
       <form [formGroup]="bulkImportForm">
-
         <mat-card-content>
-
           <div *ngIf="bulkImport.formFields >= 1">
             <mat-form-field fxFlex>
               <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
-                {{ office.name }}
+                  {{ office.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
@@ -26,7 +23,7 @@ <h3><strong>{{bulkImport.name}} {{ 'labels.heading.Template' | translate }}</str
               <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-                {{ staff.displayName }}
+                  {{ staff.displayName }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
@@ -41,110 +38,112 @@ <h3><strong>{{bulkImport.name}} {{ 'labels.heading.Template' | translate }}</str
               </mat-select>
             </mat-form-field>
           </div>
-
         </mat-card-content>
-
       </form>
 
       <div fxFlex="13%">
-        <button mat-raised-button color="primary" (click)="downloadTemplate()" *mifosxHasPermission="bulkImport.permission">
-          <i class="fa fa-download"></i>&nbsp;&nbsp;{{'labels.buttons.Download' | translate }}
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="downloadTemplate()"
+          *mifosxHasPermission="bulkImport.permission"
+        >
+          <i class="fa fa-download"></i>&nbsp;&nbsp;{{ 'labels.buttons.Download' | translate }}
         </button>
       </div>
-
     </mat-card>
 
     <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
+      <h3>
+        <strong>{{ bulkImport.name }}</strong>
+      </h3>
 
-      <h3><strong>{{bulkImport.name}}</strong></h3>
-
-      <h4>{{'labels.heading.Select Excel File' | translate }}</h4>
+      <h4>{{ 'labels.heading.Select Excel File' | translate }}</h4>
 
       <mifosx-file-upload flex="75%" (change)="onFileSelect($event)" acceptFilter=".xls,.xlsx"></mifosx-file-upload>
 
-      <mat-hint *ngIf="bulkImport.name === 'Clients'">{{ 'labels.text.Please retain the value Entity/Person in the filename.' | translate }}</mat-hint>
+      <mat-hint *ngIf="bulkImport.name === 'Clients'">{{
+        'labels.text.Please retain the value Entity/Person in the filename.' | translate
+      }}</mat-hint>
 
       <div fxFlex="13%">
         <button mat-raised-button color="primary" [disabled]="!template" (click)="uploadTemplate()">
-          <i class="fa fa-upload"></i>&nbsp;&nbsp;{{'labels.buttons.Upload' | translate }}
+          <i class="fa fa-upload"></i>&nbsp;&nbsp;{{ 'labels.buttons.Upload' | translate }}
         </button>
       </div>
 
       <div *ngIf="bulkImport.formFields >= 2" fxFlex class="cover"></div>
-
     </mat-card>
-
   </div>
 
   <mat-card>
-
     <div>
-      <h3 class="documents"><strong>{{ 'labels.heading.Documents' | translate }}</strong></h3>
+      <h3 class="documents">
+        <strong>{{ 'labels.heading.Documents' | translate }}</strong>
+      </h3>
     </div>
 
     <div class="m-b-10" fxLayoutAlign="end">
-      <button  mat-raised-button color="primary" (click)="refreshDocuments()">
-        <i class="fa fa-repeat"></i>&nbsp;&nbsp;{{'labels.buttons.Refresh' | translate }}
+      <button mat-raised-button color="primary" (click)="refreshDocuments()">
+        <i class="fa fa-repeat"></i>&nbsp;&nbsp;{{ 'labels.buttons.Refresh' | translate }}
       </button>
     </div>
 
     <div class="imports-table mat-elevation-z1">
-
       <table #importsTable mat-table [dataSource]="dataSource" matSort>
-
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.name }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.name }}</td>
         </ng-container>
 
         <ng-container matColumnDef="importTime">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Import Time' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.importTime  | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Import Time' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.importTime | dateFormat }}</td>
         </ng-container>
 
         <ng-container matColumnDef="endTime">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.End Time' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.endTime  | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.End Time' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.endTime | dateFormat }}</td>
         </ng-container>
 
         <ng-container matColumnDef="completed">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Completed' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.completed }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Completed' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.completed }}</td>
         </ng-container>
 
         <ng-container matColumnDef="totalRecords">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Records' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.totalRecords }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Total Records' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.totalRecords }}</td>
         </ng-container>
 
         <ng-container matColumnDef="successCount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Success Count' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.successCount }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Success Count' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.successCount }}</td>
         </ng-container>
 
         <ng-container matColumnDef="failureCount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Failure Count' | translate }} </th>
-          <td mat-cell *matCellDef="let import"> {{ import.failureCount }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Failure Count' | translate }}</th>
+          <td mat-cell *matCellDef="let import">{{ import.failureCount }}</td>
         </ng-container>
 
         <ng-container matColumnDef="download">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Download' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Download' | translate }}</th>
           <td mat-cell *matCellDef="let import">
-            <button mat-icon-button (click)="downloadDocument(import.name, import.importId)" *mifosxHasPermission="'READ_DOCUMENT'">
+            <button
+              mat-icon-button
+              (click)="downloadDocument(import.name, import.importId)"
+              *mifosxHasPermission="'READ_DOCUMENT'"
+            >
               <fa-icon icon="cloud-download-alt"></fa-icon>
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
       </table>
-
     </div>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html b/src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html
index 4f53688dd1..ced3e3305e 100644
--- a/src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html
+++ b/src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html
@@ -1,159 +1,134 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="bulkLoanForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required (selectionChange)="getOffice($event.value)">
               <mat-option *ngFor="let office of offices" [value]="office.id">
-                {{ office.name }} 
+                {{ office.name }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-        
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%" (click)="assignmentDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Assignment Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignmentDatePicker" required formControlName="assignmentDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="assignmentDatePicker"
+              required
+              formControlName="assignmentDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
             <mat-error *ngIf="bulkLoanForm.controls.assignmentDate.hasError('required')">
-              {{ 'labels.inputs.Assignment Date' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%" *ngIf="fromLoanOfficers !== undefined">
             <mat-label>{{ 'labels.inputs.From loan officer' | translate }}</mat-label>
             <mat-select required formControlName="fromLoanOfficerId" (selectionChange)="getFromOfficers($event.value)">
               <mat-option *ngFor="let fromOfficers of fromLoanOfficers" [value]="fromOfficers.id">
-                {{ fromOfficers.displayName }} 
+                {{ fromOfficers.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="bulkLoanForm.controls.fromLoanOfficerId.hasError('required')">
-              {{ 'labels.inputs.From Loan Officer' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.From Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.To loan officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
               <mat-option *ngFor="let toOfficers of toLoanOfficers" [value]="toOfficers.id">
-                {{ toOfficers.displayName }} 
+                {{ toOfficers.displayName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="bulkLoanForm.controls.toLoanOfficerId.hasError('required')">
-              {{ 'labels.inputs.To Loan Officer' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{ 'labels.inputs.To Loan Officer' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <table *ngIf="officerTemplate !== undefined" fxFlex="48%">
-
             <thead>
-
-              <th> {{ 'labels.inputs.Clients' | translate }} </th>
-
+              <th>{{ 'labels.inputs.Clients' | translate }}</th>
             </thead>
 
             <tbody>
-
               <tr *ngFor="let clients of officerTemplate.accountSummaryCollection.clients">
-
                 <table>
-  
                   <tr>
-  
-                    <td> <strong> {{ clients.displayName }} </strong></td>
-  
+                    <td>
+                      <strong> {{ clients.displayName }} </strong>
+                    </td>
                   </tr>
 
                   <tr *ngFor="let loans of clients.loans">
-
-                    <td> 
-
-                      <mat-checkbox (change)="getLoans($event,loans.id)">{{ loans.productName}}({{ loans.accountNo }})</mat-checkbox>
-
+                    <td>
+                      <mat-checkbox (change)="getLoans($event, loans.id)"
+                        >{{ loans.productName }}({{ loans.accountNo }})</mat-checkbox
+                      >
                     </td>
-
                   </tr>
-  
                 </table>
-  
               </tr>
-
             </tbody>
-
           </table>
 
           <table *ngIf="officerTemplate !== undefined" fxFlex="48%">
-
             <thead>
-
-              <th> {{ 'labels.inputs.Groups' | translate }} </th>
-
+              <th>{{ 'labels.inputs.Groups' | translate }}</th>
             </thead>
 
             <tbody>
-
               <tr *ngFor="let groups of officerTemplate.accountSummaryCollection.groups">
-
                 <table>
-  
                   <tr>
-  
-                    <td> <strong> {{ groups.displayName }} </strong></td>
-  
+                    <td>
+                      <strong> {{ groups.displayName }} </strong>
+                    </td>
                   </tr>
 
                   <tr *ngFor="let loans of groups.loans">
-
-                    <td> 
-
-                      <mat-checkbox>{{ loans.productName}}({{ loans.accountNo }})</mat-checkbox>
-
+                    <td>
+                      <mat-checkbox>{{ loans.productName }}({{ loans.accountNo }})</mat-checkbox>
                     </td>
-
                   </tr>
-  
                 </table>
-  
               </tr>
-
             </tbody>
-
           </table>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!bulkLoanForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!bulkLoanForm.valid"
+          *mifosxHasPermission="'BULKREASSIGN_LOAN'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/currencies/currencies.component.html b/src/app/organization/currencies/currencies.component.html
index 14453273da..0aed5e6e30 100644
--- a/src/app/organization/currencies/currencies.component.html
+++ b/src/app/organization/currencies/currencies.component.html
@@ -1,70 +1,98 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-<div #buttonAddEdit class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Add/Edit' | translate }}
-  </button>
+  <div #buttonAddEdit class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Add/Edit' | translate }}
+    </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label >{{ 'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #tableCurrencies class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Currency Name' | translate }} </th>
-        <td mat-cell *matCellDef="let currency"> {{ currency.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency Name' | translate }}</th>
+        <td mat-cell *matCellDef="let currency">{{ currency.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="code">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Currency Code' | translate }} </th>
-        <td mat-cell *matCellDef="let currency"> {{ currency.code }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency Code' | translate }}</th>
+        <td mat-cell *matCellDef="let currency">{{ currency.code }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonAddEdit let-popover="popover">
   <h2>{{ 'labels.heading.Add/Edit Currency' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.List of all currencies currently in use' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter currencies.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonAddEdit, buttonAddEdit, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateTableCurrencies, tableCurrencies, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateTableCurrencies let-popover="popover">
   <h4>{{ 'labels.heading.List of currencies available.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/currencies/manage-currencies/manage-currencies.component.html b/src/app/organization/currencies/manage-currencies/manage-currencies.component.html
index 2a739d92f5..461707eead 100644
--- a/src/app/organization/currencies/manage-currencies/manage-currencies.component.html
+++ b/src/app/organization/currencies/manage-currencies/manage-currencies.component.html
@@ -1,63 +1,82 @@
 <div class="container">
-
   <mat-card>
-
     <div #currencyFormRef>
-
-      <form #formRef="ngForm" [formGroup]="currencyForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-        fxFlex="48%" (ngSubmit)="addCurrency()">
-
+      <form
+        #formRef="ngForm"
+        [formGroup]="currencyForm"
+        fxLayout="row"
+        fxLayoutAlign="start baseline"
+        fxLayoutGap="20px"
+        fxFlex="48%"
+        (ngSubmit)="addCurrency()"
+      >
         <mat-form-field fxFlex="calc(90%-20px)">
-            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
-            <mat-select required formControlName="currency">
-              <mat-option>
-                <ngx-mat-select-search [formControl]="filterFormCtrl"></ngx-mat-select-search>
-              </mat-option>
-              <mat-option *ngFor="let currency of currencyData | async" [value]="currency">
-                ({{currency.code}}) {{ currency.name }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="currencyForm.controls.currency.hasError('required')">
-              {{ 'labels.inputs.Currency' | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
-            </mat-error>
+          <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+          <mat-select required formControlName="currency">
+            <mat-option>
+              <ngx-mat-select-search [formControl]="filterFormCtrl"></ngx-mat-select-search>
+            </mat-option>
+            <mat-option *ngFor="let currency of currencyData | async" [value]="currency">
+              ({{ currency.code }}) {{ currency.name }}
+            </mat-option>
+          </mat-select>
+          <mat-error *ngIf="currencyForm.controls.currency.hasError('required')">
+            {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
         </mat-form-field>
 
-        <button mat-raised-button fxFlex color="primary" 
-          [disabled]="!currencyForm.valid" *mifosxHasPermission="'UPDATE_CURRENCY'">
+        <button
+          mat-raised-button
+          fxFlex
+          color="primary"
+          [disabled]="!currencyForm.valid"
+          *mifosxHasPermission="'UPDATE_CURRENCY'"
+        >
           <fa-icon icon="plus"></fa-icon>
         </button>
-
       </form>
-
     </div>
 
     <mat-grid-list cols="2" rowHeight="50px">
-
       <mat-grid-tile *ngFor="let currency of selectedCurrencies; index as i">
-
-        <input matInput [value]="currency.name">
+        <input matInput [value]="currency.name" />
 
         <div fxLayout="row" fxLayoutAlign="flex-start">
-          <button mat-button color="warn" (click)="deleteCurrency(currency.code, i)" *mifosxHasPermission="'UPDATE_CURRENCY'">
+          <button
+            mat-button
+            color="warn"
+            (click)="deleteCurrency(currency.code, i)"
+            *mifosxHasPermission="'UPDATE_CURRENCY'"
+          >
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
-
       </mat-grid-tile>
-
     </mat-grid-list>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCurrencyFormRef let-popover="popover">
-  <h4>{{'labels.heading.Add Currency Form' | translate }}</h4>
-  <p class="mw400">{{ 'labels.text.Used to add currency' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">{{ 'labels.inputs.Currency Configuration' | translate }}</a></p>
+  <h4>{{ 'labels.heading.Add Currency Form' | translate }}</h4>
+  <p class="mw400">
+    {{ 'labels.text.Used to add currency' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">{{
+      'labels.inputs.Currency Configuration' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{"labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();">{{"labels.buttons.Add Currency' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{"labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{"labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{"labels.buttons.Add Currency' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{"labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{"labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/employees/create-employee/create-employee.component.html b/src/app/organization/employees/create-employee/create-employee.component.html
index 9cca2e3471..39e070d862 100644
--- a/src/app/organization/employees/create-employee/create-employee.component.html
+++ b/src/app/organization/employees/create-employee/create-employee.component.html
@@ -1,13 +1,8 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="employeeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #createEmployeeFormRef fxLayout="column">
-          
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
@@ -16,73 +11,104 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="employeeForm.controls.officeId.hasError('required')">
-              {{'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-          
+
           <mat-form-field>
-            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
-            <input matInput required formControlName="firstname">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('required')">
-              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('pattern')">
-              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
+              {{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
-            <input matInput required formControlName="lastname">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('required')">
-              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('pattern')">
-              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
+              {{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="loan-officer">
-            {{'labels.inputs.Is Loan Officer' | translate }}
+            {{ 'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
-            <input matInput formControlName="mobileNo">
+            <mat-label>{{ 'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
+            <input matInput formControlName="mobileNo" />
           </mat-form-field>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
+            <mat-label>{{ 'labels.inputs.Joining Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="joiningDatePicker"
+              required
+              formControlName="joiningDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="employeeForm.controls.joiningDate.hasError('required')">
-              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Joining Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!employeeForm.valid"
+          *mifosxHasPermission="'CREATE_STAFF'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCreateEmployeeForm let-popover="popover">
   <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
-  <p class="mw400">{{'labels.text.Start filling the details' | translate }} <br> {{'labels.text.For more details click' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">{{'labels.inputs.Manage Employees' | translate }}</a></p>
+  <p class="mw400">
+    {{ 'labels.text.Start filling the details' | translate }} <br />
+    {{ 'labels.text.For more details click' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">{{
+      'labels.inputs.Manage Employees' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create Employee' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button> 
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create Employee' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/employees/edit-employee/edit-employee.component.html b/src/app/organization/employees/edit-employee/edit-employee.component.html
index aefa856209..9d69845cff 100644
--- a/src/app/organization/employees/edit-employee/edit-employee.component.html
+++ b/src/app/organization/employees/edit-employee/edit-employee.component.html
@@ -1,13 +1,8 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editEmployeeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
@@ -16,66 +11,83 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editEmployeeForm.controls.officeId.hasError('required')">
-              {{'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
-            <input matInput required formControlName="firstname">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('required')">
-              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('pattern')">
-              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
+              {{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
-            <input matInput required formControlName="lastname">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('required')">
-              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('pattern')">
-              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
+              {{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+              {{ 'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="m-b-10">
-            {{'labels.inputs.Is Loan Officer' | translate }}
+            {{ 'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
-            <input matInput formControlName="mobileNo">
+            <mat-label>{{ 'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
+            <input matInput formControlName="mobileNo" />
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            {{'labels.inputs.Active' | translate }}
+            {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
+            <mat-label>{{ 'labels.inputs.Joining Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="joiningDatePicker"
+              required
+              formControlName="joiningDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="editEmployeeForm.controls.joiningDate.hasError('required')">
-              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Joining Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!editEmployeeForm.valid"
+          *mifosxHasPermission="'UPDATE_STAFF'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/employees/employees.component.html b/src/app/organization/employees/employees.component.html
index 0b2c8fb14a..d1f024c667 100644
--- a/src/app/organization/employees/employees.component.html
+++ b/src/app/organization/employees/employees.component.html
@@ -1,107 +1,169 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <div #buttonImportEmployees>
-    <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
-    <fa-icon icon="upload" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Import Employees' | translate }}
-  </button>
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'CREATE_STAFF'"
+      [routerLink]="['/', 'organization', 'bulk-import', 'Employees']"
+    >
+      <fa-icon icon="upload" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Import Employees' | translate }}
+    </button>
   </div>
   <div #buttonCreateEmployee>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Employee' | translate }}
-  </button>
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Employee' | translate }}
+    </button>
   </div>
-
 </div>
 
 <div class="container">
+  <div #filter fxLayout="row" fxLayoutGap="20px">
+    <mat-form-field fxFlex>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
+    </mat-form-field>
+  </div>
 
-    <div #filter fxLayout="row" fxLayoutGap="20px">
-        <mat-form-field fxFlex>
-            <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-            <input matInput (keyup)="applyFilter($event.target.value)">
-        </mat-form-field>
-    </div>
-
-    <div #tableEmployees class="mat-elevation-z8">
-
-        <table mat-table [dataSource]="dataSource" matSort>
-
-            <ng-container matColumnDef="displayName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate }} </th>
-                <td mat-cell *matCellDef="let employee"> {{ employee.displayName }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="isLoanOfficer">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Loan Officer' | translate }} </th>
-                <td mat-cell *matCellDef="let employee">
-                    <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
-                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
-                    </div>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="officeName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate }} </th>
-                <td mat-cell *matCellDef="let employees"> {{ employees.officeName }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="isActive">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate }} </th>
-                <td mat-cell *matCellDef="let employee">
-                    <div [className]="employee.isActive === true ? 'true' : 'false'">
-                        <fa-icon matTooltip="{{ employee.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
-                    </div>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
-        </table>
-
-        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-    </div>
-
+  <div #tableEmployees class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="displayName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let employee">{{ employee.displayName }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="isLoanOfficer">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Loan Officer' | translate }}</th>
+        <td mat-cell *matCellDef="let employee">
+          <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
+            <fa-icon
+              *ngIf="employee.isLoanOfficer"
+              icon="check-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.Yes' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!employee.isLoanOfficer"
+              icon="times-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.No' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+          </div>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="officeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let employees">{{ employees.officeName }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="isActive">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let employee">
+          <div [className]="employee.isActive === true ? 'true' : 'false'">
+            <fa-icon
+              matTooltip="{{ employee.isActive === true ? 'Active' : 'Inactive' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  </div>
 </div>
 
 <ng-template #templateButtonImportEmployees let-data let-popover="popover">
   <h2>{{ 'labels.heading.Import Employees' | translate }}</h2>
-  <p class="mw300">{{'labels.text.Import employee details from your local device' | translate }}</p>
+  <p class="mw300">{{ 'labels.text.Import employee details from your local device' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateEmployee, buttonCreateEmployee, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonCreateEmployee let-popover="popover">
   <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
-  <p class="mw300">{{'labels.text.Create new employees in your organization' | translate }}</p>
+  <p class="mw300">{{ 'labels.text.Create new employees in your organization' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonImportEmployees, buttonImportEmployees, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter employees.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateEmployee, buttonCreateEmployee, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateTableEmployees, tableEmployees, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateTableEmployees let-popover="popover">
   <h4>{{ 'labels.heading.List of employees in the organization.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/employees/view-employee/view-employee.component.html b/src/app/organization/employees/view-employee/view-employee.component.html
index d1626ac163..99bd5815d0 100644
--- a/src/app/organization/employees/view-employee/view-employee.component.html
+++ b/src/app/organization/employees/view-employee/view-employee.component.html
@@ -1,20 +1,16 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.First Name' | translate }}
+          {{ 'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -22,7 +18,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Last Name' | translate }}
+          {{ 'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -30,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Office' | translate }}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -38,7 +34,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Is Loan Officer' | translate }}
+          {{ 'labels.inputs.Is Loan Officer' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +42,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">
-          {{'labels.inputs.Mobile Number for SMS' | translate }}
+          {{ 'labels.inputs.Mobile Number for SMS' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="employeeData.mobileNo">
@@ -54,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Status' | translate }}
+          {{ 'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -62,17 +58,13 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Joining Date' | translate }}
+          {{ 'labels.inputs.Joining Date' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ employeeData.joiningDate | dateFormat }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/entity-data-table-checks/create-enity-data-table-checks/create-enity-data-table-checks.component.html b/src/app/organization/entity-data-table-checks/create-enity-data-table-checks/create-enity-data-table-checks.component.html
index 7f3c17788d..68d6ba27ec 100644
--- a/src/app/organization/entity-data-table-checks/create-enity-data-table-checks/create-enity-data-table-checks.component.html
+++ b/src/app/organization/entity-data-table-checks/create-enity-data-table-checks/create-enity-data-table-checks.component.html
@@ -1,22 +1,18 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="createEntityForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
               <mat-option *ngFor="let entity of entityTypes" [value]="entity.value">
-                {{ entity.name }} 
+                {{ entity.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.entity.hasError('required')">
-              {{ 'labels.inputs.Entity' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,11 +20,12 @@
             <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let status of statusList" [value]="status.code">
-                {{ status.name }} 
+                {{ status.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.status.hasError('required')">
-              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -36,11 +33,12 @@
             <mat-label>{{ 'labels.inputs.Data Table' | translate }}</mat-label>
             <mat-select required formControlName="datatableName">
               <mat-option *ngFor="let dataTable of dataTableList" [value]="dataTable.dataTableName">
-                {{ dataTable.dataTableName }} 
+                {{ dataTable.dataTableName }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.datatableName.hasError('required')">
-              {{ 'labels.inputs.Data Table' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Data Table' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -48,37 +46,41 @@
             <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
             <mat-select required formControlName="productId">
               <mat-option *ngFor="let loanProducts of createEntityData.loanProductDatas" [value]="loanProducts.id">
-                {{ loanProducts.name }} 
+                {{ loanProducts.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              {{ 'labels.inputs.Loan Product' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Loan Product' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="entityType === 'm_savings_account'">
             <mat-label>{{ 'labels.inputs.Products' | translate }}</mat-label>
             <mat-select required formControlName="productId">
-              <mat-option *ngFor="let savingsProducts of createEntityData.savingsProductDatas" [value]="savingsProducts.id">
-                {{ savingsProducts.name }} 
+              <mat-option
+                *ngFor="let savingsProducts of createEntityData.savingsProductDatas"
+                [value]="savingsProducts.id"
+              >
+                {{ savingsProducts.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createEntityForm.controls.productId.hasError('required')">
-              {{ 'labels.inputs.Loan Product' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Loan Product' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!createEntityForm.valid">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!createEntityForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html b/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html
index 4e9108763e..7d1b241735 100644
--- a/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html
+++ b/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html
@@ -1,71 +1,85 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['create']"
+    *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'"
+  >
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create' | translate }}
+    {{ 'labels.buttons.Create' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="entity">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entity' | translate }} </th>
-        <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.entity }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
+        <td mat-cell *matCellDef="let entityDataTableCheck">{{ entityDataTableCheck.entity }}</td>
       </ng-container>
 
       <ng-container matColumnDef="productName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Product Name' | translate }} </th>
-        <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.productName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+        <td mat-cell *matCellDef="let entityDataTableCheck">{{ entityDataTableCheck.productName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="datatableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Data Table' | translate }} </th>
-        <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.datatableName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Data Table' | translate }}</th>
+        <td mat-cell *matCellDef="let entityDataTableCheck">{{ entityDataTableCheck.datatableName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
-        <td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.status.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let entityDataTableCheck">{{ entityDataTableCheck.status.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.System Defined' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.System Defined' | translate }}</th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <div [className]="entityDataTableCheck.systemDefined === true ? 'true' : 'false'">
-            <fa-icon *ngIf="entityDataTableCheck.systemDefined" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!entityDataTableCheck.systemDefined" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+            <fa-icon
+              *ngIf="entityDataTableCheck.systemDefined"
+              icon="check-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.Yes' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!entityDataTableCheck.systemDefined"
+              icon="times-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.No' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
-          <button mat-button (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)" color="warn" *mifosxHasPermission="'DELETE_ENTITY_DATATABLE_CHECK'">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
+          <button
+            mat-button
+            (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)"
+            color="warn"
+            *mifosxHasPermission="'DELETE_ENTITY_DATATABLE_CHECK'"
+          >
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/fund-mapping/fund-mapping.component.html b/src/app/organization/fund-mapping/fund-mapping.component.html
index 0b6763bbf2..581e7b1a12 100644
--- a/src/app/organization/fund-mapping/fund-mapping.component.html
+++ b/src/app/organization/fund-mapping/fund-mapping.component.html
@@ -1,9 +1,6 @@
 <mat-card class="container" *ngIf="!isCollapsed">
-
   <form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
-
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-  
       <mat-form-field fxFlex="48%">
         <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
         <mat-select formControlName="loanStatus" multiple>
@@ -25,7 +22,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-  
+
       <mat-form-field fxFlex="48%">
         <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
         <mat-select formControlName="offices" multiple>
@@ -46,32 +43,58 @@
 
       <mat-form-field fxFlex="31%" (click)="fromDatePicker.open()">
         <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" 
-          required formControlName="loanFromDate" required>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="fromDatePicker"
+          required
+          formControlName="loanFromDate"
+          required
+        />
         <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #fromDatePicker></mat-datepicker>
         <mat-error *ngIf="fundMappingForm.controls.loanFromDate.hasError('required')">
-          {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%" (click)="toDatePicker.open()">
         <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" 
-          required formControlName="loanToDate" required>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="toDatePicker"
+          required
+          formControlName="loanToDate"
+          required
+        />
         <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #toDatePicker></mat-datepicker>
         <mat-error *ngIf="fundMappingForm.controls.loanToDate.hasError('required')">
-          {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-  
-      <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutStandingAmountPercentage" class="margin-b">
+
+      <mat-checkbox
+        fxFlex="73%"
+        labelPosition="before"
+        formControlName="includeOutStandingAmountPercentage"
+        class="margin-b"
+      >
         {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
       </mat-checkbox>
-  
-      <div *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
+      <div
+        *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
         <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outStandingAmountPercentageCondition">
@@ -83,42 +106,50 @@
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
-            {{ 'labels.inputs.Comparison Condition' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-  
+
         <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="minOutStandingAmountPercentage">
+          <input type="number" matInput required formControlName="minOutStandingAmountPercentage" />
           <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
-            {{ 'labels.inputs.Minimum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="outStandingAmountPercentage">
+          <input type="number" matInput required formControlName="outStandingAmountPercentage" />
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
-            {{ 'labels.inputs.Comparison Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-  
+
         <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="maxOutStandingAmountPercentage">
+          <input type="number" matInput required formControlName="maxOutStandingAmountPercentage" />
           <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
-            {{ 'labels.inputs.Maximum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-  
       </div>
-  
+
       <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutstandingAmount" class="margin-b">
         {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
       </mat-checkbox>
-  
-      <div *ngIf="fundMappingForm.value.includeOutstandingAmount" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  
+
+      <div
+        *ngIf="fundMappingForm.value.includeOutstandingAmount"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
         <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outstandingAmountCondition">
@@ -130,94 +161,87 @@
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">
-            {{ 'labels.inputs.Comparison Condition' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Comparison Condition' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-  
+
         <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="minOutstandingAmount">
+          <input type="number" matInput required formControlName="minOutstandingAmount" />
           <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
-            {{ 'labels.inputs.Minimum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Minimum Value' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="outstandingAmount">
+          <input type="number" matInput required formControlName="outstandingAmount" />
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
-            {{ 'labels.inputs.Comparison Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Comparison Value' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-  
+
         <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" fxFlex="31%">
           <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
-          <input type="number" matInput required formControlName="maxOutstandingAmount">
+          <input type="number" matInput required formControlName="maxOutstandingAmount" />
           <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
-            {{ 'labels.inputs.Maximum Value' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+            {{ 'labels.inputs.Maximum Value' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-  
       </div>
-
     </div>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
       <button mat-raised-button color="primary" [disabled]="!fundMappingForm.valid">
-        <fa-icon icon="search"></fa-icon>&nbsp; {{'labels.buttons.Summary' | translate }}
+        <fa-icon icon="search"></fa-icon>&nbsp; {{ 'labels.buttons.Summary' | translate }}
       </button>
     </mat-card-actions>
-  
-  </form>  
-
+  </form>
 </mat-card>
 
-
 <div class="container" *ngIf="isCollapsed">
-
   <mat-card>
-
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        {{'labels.buttons.Parameters' | translate }}
+        {{ 'labels.buttons.Parameters' | translate }}
       </button>
     </div>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Office Name' | translate }} </th>
-        <td mat-cell *matCellDef="let loan"> {{ loan.officeName }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
+        <td mat-cell *matCellDef="let loan">{{ loan.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="productName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Product Name' | translate }} </th>
-        <td mat-cell *matCellDef="let loan"> {{ loan.loanProductName }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+        <td mat-cell *matCellDef="let loan">{{ loan.loanProductName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="count">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Count' | translate }} </th>
-        <td mat-cell *matCellDef="let loan"> {{ loan.count }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Count' | translate }}</th>
+        <td mat-cell *matCellDef="let loan">{{ loan.count }}</td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Outstanding' | translate }} </th>
-        <td mat-cell *matCellDef="let loan"> {{ loan.loanOutStanding }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let loan">{{ loan.loanOutStanding }}</td>
       </ng-container>
 
       <ng-container matColumnDef="percentage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Percentage' | translate }} </th>
-        <td mat-cell *matCellDef="let loan"> {{ loan.percentage }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Percentage' | translate }}</th>
+        <td mat-cell *matCellDef="let loan">{{ loan.percentage }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/holidays/create-holiday/create-holiday.component.html b/src/app/organization/holidays/create-holiday/create-holiday.component.html
index bd68b2c0e3..dcf04508db 100644
--- a/src/app/organization/holidays/create-holiday/create-holiday.component.html
+++ b/src/app/organization/holidays/create-holiday/create-holiday.component.html
@@ -1,38 +1,50 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="holidayForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required autofocus formControlName="name">
+            <input matInput required autofocus formControlName="name" />
             <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="fromDatePicker"
+              required
+              formControlName="fromDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="toDatePicker"
+              required
+              formControlName="toDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -40,62 +52,78 @@
             <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
             <mat-select required formControlName="reschedulingType">
               <mat-option *ngFor="let repayments of repaymentSchedulingTypes" [value]="repayments.id">
-                {{ repayments.value }} 
+                {{ repayments.value }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="holidayForm.contains('repaymentsRescheduledTo')" (click)="repaymentDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="repaymentDatePicker"
+              required
+              formControlName="repaymentsRescheduledTo"
+            />
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #repaymentDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-            <input matInput formControlName="description">
-          </mat-form-field>   
-          
+            <input matInput formControlName="description" />
+          </mat-form-field>
+
           <label>{{ 'labels.inputs.Select applicable offices' | translate }}</label>
 
           <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
             <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
               <button mat-icon-button disabled></button>
-              <mat-checkbox class="checklist-leaf-node"
-                            [checked]="checklistSelection.isSelected(node)"
-                            (change)="officeLeafItemSelectionToggle(node);">{{officesDict[node.item].name}}</mat-checkbox>
+              <mat-checkbox
+                class="checklist-leaf-node"
+                [checked]="checklistSelection.isSelected(node)"
+                (change)="officeLeafItemSelectionToggle(node)"
+                >{{ officesDict[node.item].name }}</mat-checkbox
+              >
             </mat-tree-node>
 
             <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
-              <button type="button" mat-icon-button matTreeNodeToggle
-                      [attr.aria-label]="'toggle ' + node.filename">
+              <button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename">
                 <mat-icon class="mat-icon-rtl-mirror">
-                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                  {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
                 </mat-icon>
               </button>
-              <mat-checkbox [checked]="descendantsAllSelected(node)"
-                            (change)="officeItemSelectionToggle(node)">{{ officesDict[node.item].name }}</mat-checkbox>
+              <mat-checkbox [checked]="descendantsAllSelected(node)" (change)="officeItemSelectionToggle(node)">{{
+                officesDict[node.item].name
+              }}</mat-checkbox>
             </mat-tree-node>
           </mat-tree>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'CREATE_HOLIDAY'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!holidayForm.valid"
+          *mifosxHasPermission="'CREATE_HOLIDAY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/holidays/edit-holiday/edit-holiday.component.html b/src/app/organization/holidays/edit-holiday/edit-holiday.component.html
index 8bd7429e12..830cf21c6c 100644
--- a/src/app/organization/holidays/edit-holiday/edit-holiday.component.html
+++ b/src/app/organization/holidays/edit-holiday/edit-holiday.component.html
@@ -1,38 +1,50 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="holidayForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required autofocus formControlName="name">
+            <input matInput required autofocus formControlName="name" />
             <mat-error *ngIf="holidayForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday" (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="fromDatePicker"
+              required
+              formControlName="fromDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.fromDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday" (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="toDatePicker"
+              required
+              formControlName="toDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.toDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -44,36 +56,49 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
-              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2" (click)="repaymentDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="repaymentDatePicker"
+              required
+              formControlName="repaymentsRescheduledTo"
+            />
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #repaymentDatePicker></mat-datepicker>
             <mat-error *ngIf="holidayForm.controls.repaymentsRescheduledTo.hasError('required')">
-              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-            <input matInput formControlName="description">
+            <input matInput formControlName="description" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!holidayForm.valid" *mifosxHasPermission="'UPDATE_HOLIDAY'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!holidayForm.valid"
+          *mifosxHasPermission="'UPDATE_HOLIDAY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/holidays/holidays.component.html b/src/app/organization/holidays/holidays.component.html
index 796e80c5cb..952f535a9b 100644
--- a/src/app/organization/holidays/holidays.component.html
+++ b/src/app/organization/holidays/holidays.component.html
@@ -1,21 +1,17 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <div #buttonCreateHoliday class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Holiday' | translate }}
-  </button>
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Holiday' | translate }}
+    </button>
   </div>
-
 </div>
 
 <div class="container">
-
   <div #filterRef fxLayout="row" fxLayoutGap="20px">
-
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
     <mat-form-field>
       <mat-label> {{ 'labels.inputs.Select Office' | translate }} </mat-label>
@@ -25,64 +21,84 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-
   </div>
 
   <div class="mat-elevation-z8" [hidden]="!officeSelector.value">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Holiday Name' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Holiday Name' | translate }}</th>
+        <td mat-cell *matCellDef="let holidays">{{ holidays.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="fromDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Start Date' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Start Date' | translate }}</th>
+        <td mat-cell *matCellDef="let holidays">{{ holidays.fromDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="toDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.End Date' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.End Date' | translate }}</th>
+        <td mat-cell *matCellDef="let holidays">{{ holidays.toDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsRescheduledTo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Repayments Scheduled To' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Repayments Scheduled To' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let holidays">
+          {{
+            holidays.reschedulingType === 1 ? 'Next Repayment Date' : (holidays.repaymentsRescheduledTo | dateFormat)
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.status.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let holidays">{{ holidays.status.value }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateHoliday let-popover="popover">
-  <h2>{{'labels.heading.Create Holiday' | translate }}</h2>
-  <p class="mw300">{{'labels.text.Create holidays for different offices' | translate }}</p>
+  <h2>{{ 'labels.heading.Create Holiday' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Create holidays for different offices' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilterRef,filterRef,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilterRef, filterRef, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilterRef let-popover="popover">
-  <h4>{{'labels.heading.Filter holidays' | translate }}</h4>
+  <h4>{{ 'labels.heading.Filter holidays' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateHoliday, buttonCreateHoliday, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/holidays/view-holidays/view-holidays.component.html b/src/app/organization/holidays/view-holidays/view-holidays.component.html
index c0b2341dea..b0f31ac86a 100644
--- a/src/app/organization/holidays/view-holidays/view-holidays.component.html
+++ b/src/app/organization/holidays/view-holidays/view-holidays.component.html
@@ -1,68 +1,66 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
+  <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
     <button mat-raised-button color="accent" (click)="activateHoliday()" *ngIf="holidayData.status.value !== 'Active'">
       <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Activate' | translate }}
+      {{ 'labels.buttons.Activate' | translate }}
     </button>
   </span>
-    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-    <button mat-raised-button color="warn" (click)="deleteHoliday()" *mifosxHasPermission="'DELETE_HOLIDAY'">
+  <button mat-raised-button color="warn" (click)="deleteHoliday()" *mifosxHasPermission="'DELETE_HOLIDAY'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
-    <mat-card>
-
-        <mat-card-content>
-
-            <div fxLayout="row wrap" class="content">
-
-                <div fxFlex="50%" class="header">
-                    {{ 'labels.inputs.Name' | translate }}
-                </div>
-
-                <div fxFlex="50%">
-                    {{ holidayData.name }}
-                </div>
-
-                <div fxFlex="50%" class="header">
-                    {{ 'labels.inputs.From Date' | translate }}
-                </div>
-
-                <div fxFlex="50%">
-                    {{ holidayData.fromDate | dateFormat }}
-                </div>
-
-                <div fxFlex="50%" class="header">
-                    {{ 'labels.inputs.To Date' | translate }}
-                </div>
-
-                <div fxFlex="50%">
-                    {{ holidayData.toDate | dateFormat }}
-                </div>
-
-                <div fxFlex="50%" class="header">
-                    {{ 'labels.inputs.Repayments Scheduled To' | translate }}
-                </div>
-
-                <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null">
-                    {{ holidayData.repaymentsRescheduledTo | dateFormat }}
-                </div>
-
-                <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null">
-                    {{ 'labels.inputs.Next Repayment Date' | translate }}
-                </div>
-
-            </div>
-
-        </mat-card-content>
-
-    </mat-card>
-
+  <mat-card>
+    <mat-card-content>
+      <div fxLayout="row wrap" class="content">
+        <div fxFlex="50%" class="header">
+          {{ 'labels.inputs.Name' | translate }}
+        </div>
+
+        <div fxFlex="50%">
+          {{ holidayData.name }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          {{ 'labels.inputs.From Date' | translate }}
+        </div>
+
+        <div fxFlex="50%">
+          {{ holidayData.fromDate | dateFormat }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          {{ 'labels.inputs.To Date' | translate }}
+        </div>
+
+        <div fxFlex="50%">
+          {{ holidayData.toDate | dateFormat }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          {{ 'labels.inputs.Repayments Scheduled To' | translate }}
+        </div>
+
+        <div
+          fxFlex="50%"
+          *ngIf="holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null"
+        >
+          {{ holidayData.repaymentsRescheduledTo | dateFormat }}
+        </div>
+
+        <div
+          fxFlex="50%"
+          *ngIf="holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null"
+        >
+          {{ 'labels.inputs.Next Repayment Date' | translate }}
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/organization/investors/investors.component.html b/src/app/organization/investors/investors.component.html
index e2abfabc01..50e4fc2ed2 100644
--- a/src/app/organization/investors/investors.component.html
+++ b/src/app/organization/investors/investors.component.html
@@ -1,47 +1,65 @@
 <mat-card class="container">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="18%">
-      <mat-label>{{'labels.text.Search by Text' | translate}}</mat-label>
-      <input matInput [formControl]="searchText">
+      <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
+      <input matInput [formControl]="searchText" />
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="effectiveFromDatePicker.open()">
-      <mat-label>{{'labels.text.Effective Date From' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveFromDatePicker"
-        [formControl]="effectiveFromDate">
+      <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="effectiveFromDatePicker"
+        [formControl]="effectiveFromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="effectiveToDatePicker.open()">
-      <mat-label>{{'labels.text.Effective Date To' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveToDatePicker"
-        [formControl]="effectiveToDate">
+      <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="effectiveToDatePicker"
+        [formControl]="effectiveToDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #effectiveToDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="settlementFromDatePicker.open()">
-      <mat-label>{{'labels.text.Settlement Date From' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementFromDatePicker"
-        [formControl]="settlementFromDate">
+      <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="settlementFromDatePicker"
+        [formControl]="settlementFromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #settlementFromDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="18%" (click)="settlementToDatePicker.open()">
-      <mat-label>{{'labels.text.Settlement Date To' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementToDatePicker"
-        [formControl]="settlementToDate">
+      <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="settlementToDatePicker"
+        [formControl]="settlementToDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #settlementToDatePicker></mat-datepicker>
     </mat-form-field>
 
     <div fxFlex="98%" class="center m-t-15">
       <button mat-raised-button color="primary" (click)="searchEAO()">
-        <fa-icon icon="search" class="m-r-10"></fa-icon> {{'labels.buttons.Search' | translate}}
+        <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
       </button>
     </div>
   </div>
@@ -51,7 +69,7 @@
       <div class="loading"></div>
     </div>
     <mat-accordion *ngIf="existsDataToFilter">
-      <mat-expansion-panel *ngFor="let record of searchResults;index as i" class="record">
+      <mat-expansion-panel *ngFor="let record of searchResults; index as i" class="record">
         <mat-expansion-panel-header>
           <mat-panel-title>
             <table>
@@ -59,23 +77,22 @@
                 <td>
                   <div [ngClass]="itemStatus(record.status)" class="m-r-20">
                     <fa-icon icon="stop"></fa-icon>
-                    <span class="m-l-10 status">{{record.status}}</span>
+                    <span class="m-l-10 status">{{ record.status }}</span>
                   </div>
                 </td>
-                <td class="field-name"> {{'labels.inputs.Owner External Id' | translate}} </td>
+                <td class="field-name">{{ 'labels.inputs.Owner External Id' | translate }}</td>
                 <td>
-                  <mifosx-external-identifier externalId="{{record.owner.externalId}}"></mifosx-external-identifier>
+                  <mifosx-external-identifier externalId="{{ record.owner.externalId }}"></mifosx-external-identifier>
                 </td>
-                <td class="field-name"> {{'labels.inputs.Transfer External Id' | translate}} </td>
+                <td class="field-name">{{ 'labels.inputs.Transfer External Id' | translate }}</td>
                 <td>
-                  <mifosx-external-identifier externalId="{{record.transferExternalId}}"></mifosx-external-identifier>
+                  <mifosx-external-identifier externalId="{{ record.transferExternalId }}"></mifosx-external-identifier>
                 </td>
-                <td class="field-name"> {{'labels.inputs.Effective From' | translate}} </td>
-                <td> {{ record.effectiveFrom | dateFormat }} </td>
+                <td class="field-name">{{ 'labels.inputs.Effective From' | translate }}</td>
+                <td>{{ record.effectiveFrom | dateFormat }}</td>
               </tr>
             </table>
           </mat-panel-title>
-
         </mat-expansion-panel-header>
 
         <div class="external-asset-transfer">
@@ -83,65 +100,88 @@
             <tbody>
               <tr>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>{{'labels.inputs.Status' | translate}} :</b>
+                  <b>{{ 'labels.inputs.Status' | translate }} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5 left">
                   <div [ngClass]="itemStatus(record.status)">
                     <fa-icon icon="stop"></fa-icon>
-                    <span class="m-l-5 status">{{record.status}}</span>
+                    <span class="m-l-5 status">{{ record.status }}</span>
                   </div>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>{{'labels.inputs.Owner External Id' | translate}} :</b>
+                  <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5 left">
-                  <mifosx-external-identifier externalId="{{record.owner.externalId}}" completed="true"></mifosx-external-identifier>
+                  <mifosx-external-identifier
+                    externalId="{{ record.owner.externalId }}"
+                    completed="true"
+                  ></mifosx-external-identifier>
                 </td>
               </tr>
               <tr>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>{{'labels.inputs.Settlement Date' | translate}} :</b>
+                  <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  {{record.settlementDate | dateFormat}}
+                  {{ record.settlementDate | dateFormat }}
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  <b>{{'labels.inputs.Effective Date' | translate}} :</b>
+                  <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
                 </td>
                 <td fxFlex="25%" class="m-l-5">
-                  {{record.effectiveFrom | dateFormat}}
+                  {{ record.effectiveFrom | dateFormat }}
                 </td>
               </tr>
               <tr *ngIf="record.details">
                 <td fxFlex="25%" class="m-l-5">
-                  <b>{{'labels.inputs.Details' | translate}} :</b>
+                  <b>{{ 'labels.inputs.Details' | translate }} :</b>
                 </td>
                 <td fxFlex="75%" class="left">
                   <table>
                     <tbody>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Principal Outstanding' | translate}} :</b></td>
-                        <td fxFlex="50%" class="r-amount">{{record.details.totalPrincipalOutstanding | formatNumber}}</td>
+                        <td fxFlex="50%" class="m-l-5">
+                          <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
+                        </td>
+                        <td fxFlex="50%" class="r-amount">
+                          {{ record.details.totalPrincipalOutstanding | formatNumber }}
+                        </td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Interest Outstanding' | translate}} :</b></td>
-                        <td fxFlex="50%" class="r-amount">{{record.details.totalInterestOutstanding | formatNumber}}</td>
+                        <td fxFlex="50%" class="m-l-5">
+                          <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
+                        </td>
+                        <td fxFlex="50%" class="r-amount">
+                          {{ record.details.totalInterestOutstanding | formatNumber }}
+                        </td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Fees Outstanding' | translate}} :</b></td>
-                        <td fxFlex="50%" class="r-amount">{{record.details.totalFeeChargesOutstanding | formatNumber}}</td>
+                        <td fxFlex="50%" class="m-l-5">
+                          <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
+                        </td>
+                        <td fxFlex="50%" class="r-amount">
+                          {{ record.details.totalFeeChargesOutstanding | formatNumber }}
+                        </td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Penalties Outstanding' | translate}} :</b></td>
-                        <td fxFlex="50%" class="r-amount">{{record.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
+                        <td fxFlex="50%" class="m-l-5">
+                          <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
+                        </td>
+                        <td fxFlex="50%" class="r-amount">
+                          {{ record.details.totalPenaltyChargesOutstanding | formatNumber }}
+                        </td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Outstanding' | translate}} :</b></td>
-                        <td fxFlex="50%" class="r-amount">{{record.details.totalOutstanding | formatNumber}}</td>
+                        <td fxFlex="50%" class="m-l-5">
+                          <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
+                        </td>
+                        <td fxFlex="50%" class="r-amount">{{ record.details.totalOutstanding | formatNumber }}</td>
                       </tr>
                       <tr>
-                        <td fxFlex="50%" class="m-l-5"><b>{{'labels.inputs.Overpaid' | translate}} :</b></td>
-                        <td fxFlex="50%" class="r-amount">{{record.details.totalOverpaid | formatNumber}}</td>
+                        <td fxFlex="50%" class="m-l-5">
+                          <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
+                        </td>
+                        <td fxFlex="50%" class="r-amount">{{ record.details.totalOverpaid | formatNumber }}</td>
                       </tr>
                     </tbody>
                   </table>
@@ -154,23 +194,32 @@
         <mat-divider [inset]="true"></mat-divider>
 
         <div class="record-actions" fxLayout="row" fxLayoutAlign="flex-end" *ngIf="canBeCancelled(record)">
-          <button mat-button color="warn" (click)="cancelPendingSale(record)" matTooltip="{{'labels.text.Cancel Pending Sale' | translate}}">
+          <button
+            mat-button
+            color="warn"
+            (click)="cancelPendingSale(record)"
+            matTooltip="{{ 'labels.text.Cancel Pending Sale' | translate }}"
+          >
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
-
       </mat-expansion-panel>
     </mat-accordion>
 
-    <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[50, 100, 200]" [length]="totalRows" (page)="pageChanged($event)"
-      showFirstLastButtons *ngIf="existsDataToFilter"></mat-paginator>
+    <mat-paginator
+      [pageSize]="pageSize"
+      [pageSizeOptions]="[50, 100, 200]"
+      [length]="totalRows"
+      (page)="pageChanged($event)"
+      showFirstLastButtons
+      *ngIf="existsDataToFilter"
+    ></mat-paginator>
   </div>
 
   <div class="alert" *ngIf="!existsDataToFilter">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{'labels.text.No data found' | translate}}
+      {{ 'labels.text.No data found' | translate }}
     </div>
   </div>
-
 </mat-card>
diff --git a/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html
index 14f125821f..97476faadd 100644
--- a/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <div>
-
       <form [formGroup]="provisioningCriteriaForm">
-
         <div fxLayout="row" fxLayoutGap="2%">
-
           <mat-form-field fxFlex>
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
-            <input required matInput formControlName="criteriaName">
+            <input required matInput formControlName="criteriaName" />
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,72 +20,78 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
-
       </form>
-
     </div>
 
     <div class="mat-elevation-z1">
-
       <mat-hint *ngIf="!provisioningCriteriaFormValid">
-        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
+        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint
+      >
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
-
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.categoryName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.minAge || '0' }}</td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.maxAge || '0' }}</td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }} (%)</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.provisioningPercentage || '0' }}</td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">
+            {{
+              (definition.liabilityAccount | find: loanProvisioningCriteriaTemplate.glAccounts : 'id' : 'name') || '-'
+            }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">
+            {{ (definition.expenseAccount | find: loanProvisioningCriteriaTemplate.glAccounts : 'id' : 'name') || '-' }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Edit' | translate }}
+              {{ 'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
-
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="!provisioningCriteriaFormValid"
+        (click)="submit()"
+        *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'"
+      >
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html
index ffbd0f34cb..8b7361f107 100644
--- a/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <div>
-
       <form [formGroup]="provisioningCriteriaForm">
-
         <div fxLayout="row" fxLayoutGap="2%">
-
           <mat-form-field fxFlex>
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
-            <input required matInput formControlName="criteriaName">
+            <input required matInput formControlName="criteriaName" />
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,71 +20,81 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
-
       </form>
-
     </div>
 
     <div class="mat-elevation-z1">
-
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{
+        'labels.text.Provisioning criteria definitions' | translate
+      }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
-
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.categoryName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.minAge || '0' }}</td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.maxAge || '0' }}</td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
-          <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }} (%)</th>
+          <td mat-cell *matCellDef="let definition">{{ definition.provisioningPercentage || '0' }}</td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">
+            {{
+              (definition.liabilityAccount | find: loanProvisioningCriteriaAndTemplate.glAccounts : 'id' : 'name') ||
+                '-'
+            }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
-          <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
+          <td mat-cell *matCellDef="let definition">
+            {{
+              (definition.expenseAccount | find: loanProvisioningCriteriaAndTemplate.glAccounts : 'id' : 'name') || '-'
+            }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Edit' | translate }}
+              {{ 'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
-
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="!provisioningCriteriaFormValid"
+        (click)="submit()"
+        *mifosxHasPermission="'UPDATE_CRITERIA'"
+      >
+        {{ 'labels.buttons.Submit' | translate }}
+      </button>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html
index e86b01725b..c267fbb63c 100644
--- a/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html
@@ -1,40 +1,44 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['create']"
+    *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'"
+  >
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Provisioning Criteria' | translate }}
+    {{ 'labels.buttons.Create Provisioning Criteria' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="criteriaName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-        <td mat-cell *matCellDef="let loanProvisioningCriteria"> {{ loanProvisioningCriteria.criteriaName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let loanProvisioningCriteria">{{ loanProvisioningCriteria.criteriaName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Created By' | translate }} </th>
-        <td mat-cell *matCellDef="let loanProvisioningCriteria"> {{ loanProvisioningCriteria.createdBy }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
+        <td mat-cell *matCellDef="let loanProvisioningCriteria">{{ loanProvisioningCriteria.createdBy }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.criteriaId]" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="[row.criteriaId]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html
index dbf7c05c03..06ecb87bd8 100644
--- a/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html
@@ -1,74 +1,63 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CRITERIA'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCriteria()" *mifosxHasPermission="'DELETE_CRITERIA'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
-        <h2 class="mat-h2" fxFlexFill>{{provisioningData.criteriaName}}</h2>
+        <h2 class="mat-h2" fxFlexFill>{{ provisioningData.criteriaName }}</h2>
         <mat-divider [inset]="true"></mat-divider>
 
-         <div fxFlexFill class="loanProduct">
+        <div fxFlexFill class="loanProduct">
           <span fxFlex="40%">{{ 'labels.inputs.Loan Product' | translate }}:</span>
           <span fxFlex="60%">{{ loanProducts }}</span>
         </div>
-
       </div>
 
       <div>
-
         <table mat-table class="mat-elevation-z1" [dataSource]="dataSource">
-
           <ng-container matColumnDef="category">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
-            <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.categoryName}} </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
+            <td mat-cell *matCellDef="let provisioningData">{{ provisioningData.categoryName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="minAge">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
-            <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.minAge}} </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
+            <td mat-cell *matCellDef="let provisioningData">{{ provisioningData.minAge }}</td>
           </ng-container>
 
           <ng-container matColumnDef="maxAge">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
-            <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.maxAge}} </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
+            <td mat-cell *matCellDef="let provisioningData">{{ provisioningData.maxAge }}</td>
           </ng-container>
 
           <ng-container matColumnDef="percentage">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} </th>
-            <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.provisioningPercentage}} </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }}</th>
+            <td mat-cell *matCellDef="let provisioningData">{{ provisioningData.provisioningPercentage }}</td>
           </ng-container>
 
           <ng-container matColumnDef="liabilityAccount">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
-            <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.liabilityName}} </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
+            <td mat-cell *matCellDef="let provisioningData">{{ provisioningData.liabilityName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="expenseAccount">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
-            <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.expenseName}} </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
+            <td mat-cell *matCellDef="let provisioningData">{{ provisioningData.expenseName }}</td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/manage-funds/create-fund/create-fund.component.html b/src/app/organization/manage-funds/create-fund/create-fund.component.html
index d1dbfc8e3b..3dfa891137 100644
--- a/src/app/organization/manage-funds/create-fund/create-fund.component.html
+++ b/src/app/organization/manage-funds/create-fund/create-fund.component.html
@@ -1,37 +1,32 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="fundForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required autofocus formControlName="name">
+            <input matInput required autofocus formControlName="name" />
             <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
-            <input matInput autofocus formControlName="externalId">
+            <input matInput autofocus formControlName="externalId" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'CREATE_FUND'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'CREATE_FUND'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/manage-funds/edit-fund/edit-fund.component.html b/src/app/organization/manage-funds/edit-fund/edit-fund.component.html
index ecce21e0c6..d203727da2 100644
--- a/src/app/organization/manage-funds/edit-fund/edit-fund.component.html
+++ b/src/app/organization/manage-funds/edit-fund/edit-fund.component.html
@@ -1,37 +1,32 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="fundForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
-            <input matInput required autofocus formControlName="name">
+            <input matInput required autofocus formControlName="name" />
             <mat-error *ngIf="fundForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
-            <input matInput autofocus formControlName="externalId">
+            <input matInput autofocus formControlName="externalId" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'UPDATE_FUND'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!fundForm.valid" *mifosxHasPermission="'UPDATE_FUND'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/manage-funds/manage-funds.component.html b/src/app/organization/manage-funds/manage-funds.component.html
index 9c7ca9f659..05b500df04 100644
--- a/src/app/organization/manage-funds/manage-funds.component.html
+++ b/src/app/organization/manage-funds/manage-funds.component.html
@@ -2,55 +2,61 @@
   <div #buttonCreateCharge class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FUND'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Create Fund' | translate }}
+      {{ 'labels.buttons.Create Fund' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #chargesTable class="mat-elevation-z8 table-container">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.External Id' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.External Id' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          <mifosx-external-identifier externalId="{{charge.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier externalId="{{ charge.externalId }}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
   </div>
-
 </div>
 
-
 <ng-template #templateFundFormRef let-popover="popover">
   <h2>{{ 'labels.heading.Manage Funds' | translate }}</h2>
-  <p class="mw300">{{ 'labels.text.Used Add Fund' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141736/Manage+Funds" target="_blank">{{ 'labels.inputs.Manage Funds' | translate }}</a></p>
+  <p class="mw300">
+    {{ 'labels.text.Used Add Fund' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141736/Manage+Funds" target="_blank">{{
+      'labels.inputs.Manage Funds' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();">{{'labels.buttons.Add Funds' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      Close
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Add Funds' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
-
diff --git a/src/app/organization/manage-funds/view-fund/view-fund.component.html b/src/app/organization/manage-funds/view-fund/view-fund.component.html
index 5d4d56a91c..41a5acdd17 100644
--- a/src/app/organization/manage-funds/view-fund/view-fund.component.html
+++ b/src/app/organization/manage-funds/view-fund/view-fund.component.html
@@ -1,20 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FUND'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-         {{ 'labels.inputs.name' | translate }}
+          {{ 'labels.inputs.name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,16 +22,18 @@
         </div>
 
         <div fxFlex="50%">
-          <mifosx-external-identifier externalId="{{fundData.externalId}}" completed="true"></mifosx-external-identifier>
+          <mifosx-external-identifier
+            externalId="{{ fundData.externalId }}"
+            completed="true"
+          ></mifosx-external-identifier>
         </div>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/offices/create-office/create-office.component.html b/src/app/organization/offices/create-office/create-office.component.html
index 719496b0f1..2e9fe29147 100644
--- a/src/app/organization/offices/create-office/create-office.component.html
+++ b/src/app/organization/offices/create-office/create-office.component.html
@@ -1,70 +1,87 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="officeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #createOfficeFormRef fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input required matInput formControlName="name">
+            <input required matInput formControlName="name" />
             <mat-error *ngIf="officeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
             <mat-select required formControlName="parentId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id" >
+              <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="officeForm.controls.parentId.hasError('required')">
-              {{ 'labels.inputs.Parent Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Parent Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="openedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" formControlName="openingDate" required [matDatepicker]="openedOnDatePicker">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              formControlName="openingDate"
+              required
+              [matDatepicker]="openedOnDatePicker"
+            />
             <mat-datepicker-toggle matSuffix [for]="openedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="officeForm.controls.openingDate.hasError('required')">
-              {{ 'labels.inputs.Opening Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Opening Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <input matInput formControlName="externalId" />
           </mat-form-field>
-          
         </div>
-        
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'CREATE_OFFICE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'CREATE_OFFICE'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCreateOfficeForm let-popover="popover">
-  <h2>{{'labels.heading.Create Office' | translate }}</h2>
-  <p class="mw400">{{'labels.text.Filling Details' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141727/Manage+Offices" target="_blank">{{ 'labels.inputs.Manage Offices' | translate }}</a></p>
+  <h2>{{ 'labels.heading.Create Office' | translate }}</h2>
+  <p class="mw400">
+    {{ 'labels.text.Filling Details' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141727/Manage+Offices" target="_blank">{{
+      'labels.inputs.Manage Offices' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create Office' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next Step' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create Office' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next Step' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/offices/edit-office/edit-office.component.html b/src/app/organization/offices/edit-office/edit-office.component.html
index be9f2163ff..84fd2c96ef 100644
--- a/src/app/organization/offices/edit-office/edit-office.component.html
+++ b/src/app/organization/offices/edit-office/edit-office.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="officeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="officeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -24,36 +20,44 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="officeForm.controls.parentId.hasError('required')">
-              {{ 'labels.inputs.Parent Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Parent Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="openingDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingDatePicker" required formControlName="openingDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="openingDatePicker"
+              required
+              formControlName="openingDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="openingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #openingDatePicker></mat-datepicker>
             <mat-error *ngIf="officeForm.controls.openingDate.hasError('required')">
-              {{ 'labels.inputs.Opening Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Opening Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
-            <input matInput formControlName="externalId">
+            <input matInput formControlName="externalId" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'UPDATE_OFFICE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../general']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'UPDATE_OFFICE'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/offices/offices.component.html b/src/app/organization/offices/offices.component.html
index f4c21f8a98..b7ae05cd2f 100644
--- a/src/app/organization/offices/offices.component.html
+++ b/src/app/organization/offices/offices.component.html
@@ -1,5 +1,4 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <mat-button-toggle-group [formControl]="viewGroup">
     <mat-button-toggle value="listView">
       <fa-icon icon="list"></fa-icon>
@@ -12,84 +11,80 @@
   <div #buttonCreateOffice class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Create Office' | translate }}
+      {{ 'labels.buttons.Create Office' | translate }}
     </button>
   </div>
 
   <div #buttonImportOffices class="in-block">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'"
-      [routerLink]="['/organization', 'bulk-import', 'Offices']">
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'CREATE_OFFICE'"
+      [routerLink]="['/organization', 'bulk-import', 'Offices']"
+    >
       <fa-icon icon="upload" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Import Offices' | translate }}
+      {{ 'labels.buttons.Import Offices' | translate }}
     </button>
   </div>
-
 </div>
 
 <div class="container" [hidden]="viewGroup.value !== 'listView'">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'Filter'| translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <!-- List View -->
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{' Office Name '|translate}}</th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Office Name ' | translate }}</th>
+        <td mat-cell *matCellDef="let offices">{{ offices.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{' External ID '|translate}}</th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.externalId }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' External ID ' | translate }}</th>
+        <td mat-cell *matCellDef="let offices">{{ offices.externalId }}</td>
       </ng-container>
 
       <ng-container matColumnDef="parentName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{' Parent Office '|translate}}</th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.parentName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Parent Office ' | translate }}</th>
+        <td mat-cell *matCellDef="let offices">{{ offices.parentName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="openingDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{' Opened On '|translate}}</th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Opened On ' | translate }}</th>
+        <td mat-cell *matCellDef="let offices">{{ offices.openingDate | dateFormat }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"
-        [routerLink]="[row.id, 'general']"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        class="select-row"
+        [routerLink]="[row.id, 'general']"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
 </div>
 
 <!-- Tree View -->
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
-
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
     <button mat-raised-button (click)="toggleExpandCollapse()">
-      {{ (isTreeExpanded ? "labels.buttons.Collapse All" : "labels.buttons.Expand All") | translate }}
+      {{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
     </button>
   </div>
 
   <div fxLayout="row" fxLayoutGap="4%" fxLayout.lt-md="column">
-
     <div fxFlex>
-
       <mat-card>
-
         <mat-card-content>
-
           <mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="office-tree">
-
             <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
               <li class="mat-tree-node">
                 <button mat-icon-button disabled></button>
@@ -103,8 +98,10 @@
               <li>
                 <div class="mat-tree-node">
                   <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-                    <fa-icon class="mat-icon-rtl-mirror"
-                      icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"></fa-icon>
+                    <fa-icon
+                      class="mat-icon-rtl-mirror"
+                      icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"
+                    ></fa-icon>
                   </button>
                   <span (click)="viewOfficeNode(node)" class="m-r-10">
                     {{ node.name }}
@@ -115,23 +112,15 @@
                 </ul>
               </li>
             </mat-nested-tree-node>
-
           </mat-tree>
-
         </mat-card-content>
-
       </mat-card>
-
     </div>
 
     <div fxFlex="48%" *ngIf="office">
-
       <mat-card>
-
         <mat-card-content>
-
           <div fxLayout="row">
-
             <mat-card-title>
               {{ office.name }}
             </mat-card-title>
@@ -141,17 +130,13 @@
                 <fa-icon icon="times"></fa-icon>
               </button>
             </div>
-
           </div>
 
           <mat-tab-group>
-
             <mat-tab label="General">
-
               <div fxLayout="row wrap" class="content">
-
                 <div fxFlex="50%" class="mat-body-strong" *ngIf="office.parentId">
-                  {{'Parent Office'|translate}}
+                  {{ 'Parent Office' | translate }}
                 </div>
 
                 <div fxFlex="50%" *ngIf="office.parentId">
@@ -159,7 +144,7 @@
                 </div>
 
                 <div fxFlex="50%" class="mat-body-strong">
-                 {{' Opened On'|translate}}
+                  {{ ' Opened On' | translate }}
                 </div>
 
                 <div fxFlex="50%">
@@ -167,88 +152,129 @@
                 </div>
 
                 <div fxFlex="50%" class="mat-body-strong" *ngIf="office.externalId">
-                  {{'External Id'|translate}}
+                  {{ 'External Id' | translate }}
                 </div>
 
                 <div fxFlex="50%" *ngIf="office.externalId">
-                  <mifosx-external-identifier externalId="{{office.externalId}}"></mifosx-external-identifier>
+                  <mifosx-external-identifier externalId="{{ office.externalId }}"></mifosx-external-identifier>
                 </div>
-
               </div>
-
             </mat-tab>
 
             <mat-tab *ngFor="let dataTable of dataTablesData" label="{{ dataTable.registeredTableName }}"></mat-tab>
-
           </mat-tab-group>
-
         </mat-card-content>
-
       </mat-card>
-
     </div>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonTreeView let-popover="popover">
-  <h2>{{'labels.heading.Tree View' | translate }}</h2>
+  <h2>{{ 'labels.heading.Tree View' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Launch an alternative view for office hierarchy' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateOffice, buttonCreateOffice, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonCreateOffice let-popover="popover">
-  <h2>{{'labels.heading.Create Office' | translate }}</h2>
+  <h2>{{ 'labels.heading.Create Office' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create new offices' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonTreeView, buttonTreeView, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonImportOffices, buttonImportOffices, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonImportOffices let-popover="popover">
-  <h2>{{'labels.heading.Import Offices' | translate }}</h2>
+  <h2>{{ 'labels.heading.Import Offices' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Launch the Bulk import/Offices' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateOffice, buttonCreateOffice, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter offices.' | translate }}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter offices.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonImportOffices, buttonImportOffices, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateTableOffices, tableOffices, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateTableOffices let-popover="popover">
-  <h4>{{'labels.heading.List of offices in the organization.' | translate }}</h4>
+  <h4>{{ 'labels.heading.List of offices in the organization.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">{{'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/offices/view-office/general-tab/general-tab.component.html b/src/app/organization/offices/view-office/general-tab/general-tab.component.html
index 702ae5b6af..cad78f5604 100644
--- a/src/app/organization/offices/view-office/general-tab/general-tab.component.html
+++ b/src/app/organization/offices/view-office/general-tab/general-tab.component.html
@@ -1,15 +1,13 @@
-
 <div class="tab-container mat-typography">
   <div fxLayoutAlign="flex-end" class="action-button m-b-20">
     <span *mifosxHasPermission="'UPDATE_OFFICE'">
       <button mat-raised-button color="primary" [routerLink]="['../edit']">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate }}
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
       </button>
     </span>
   </div>
 
   <div fxLayout="row wrap" fxLayout.lt-md="column">
-
     <div fxFlex="45%" class="mat-body-strong left">
       {{ 'labels.inputs.Parent Office' | translate }}
     </div>
@@ -35,11 +33,10 @@
       {{ 'labels.inputs.External Id' | translate }}
     </div>
     <div fxFlex="50%" class="right" *ngIf="officeData.externalId">
-      <mifosx-external-identifier externalId="{{officeData.externalId}}"></mifosx-external-identifier>
+      <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
     </div>
     <div fxFlex="50%" class="right" *ngIf="!officeData.externalId">
       {{ 'labels.inputs.Unassigned' | translate }}
     </div>
   </div>
-
 </div>
diff --git a/src/app/organization/offices/view-office/view-office.component.html b/src/app/organization/offices/view-office/view-office.component.html
index 72a269b1c8..fc3d5fc33c 100644
--- a/src/app/organization/offices/view-office/view-office.component.html
+++ b/src/app/organization/offices/view-office/view-office.component.html
@@ -1,27 +1,31 @@
 <div class="container">
-
   <mat-card class="office-card">
-
     <mat-card-content>
-
       <nav mat-tab-nav-bar class="navigation-tabs">
-        <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{ 'labels.inputs.General' | translate }}
+        <a
+          mat-tab-link
+          [routerLink]="['./general']"
+          routerLinkActive
+          #general="routerLinkActive"
+          [active]="general.isActive"
+        >
+          {{ 'labels.inputs.General' | translate }}
         </a>
         <span *ngFor="let officeDatatable of officeDatatables">
-          <a mat-tab-link *mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"
-            [routerLink]="['./datatables',officeDatatable.registeredTableName]"
-            routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
-            {{officeDatatable.registeredTableName}}
+          <a
+            mat-tab-link
+            *mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"
+            [routerLink]="['./datatables', officeDatatable.registeredTableName]"
+            routerLinkActive
+            #datatable="routerLinkActive"
+            [active]="datatable.isActive"
+          >
+            {{ officeDatatable.registeredTableName }}
           </a>
         </span>
       </nav>
 
       <router-outlet></router-outlet>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/organization.component.html b/src/app/organization/organization.component.html
index 91ef5e1dec..83f2ce9f44 100644
--- a/src/app/organization/organization.component.html
+++ b/src/app/organization/organization.component.html
@@ -1,13 +1,8 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <div #office>
             <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
               <mat-icon matListIcon [routerLink]="['offices']">
@@ -16,7 +11,9 @@
               <h4 matLine [routerLink]="['offices']">{{ 'labels.heading.Manage Offices' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['offices']">{{ 'labels.text.Add new office or modify or deactivate office' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['offices']">
+                {{ 'labels.text.Add new office or modify or deactivate office' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -28,7 +25,9 @@ <h4 matLine [routerLink]="['offices']">{{ 'labels.heading.Manage Offices' | tran
               <h4 matLine [routerLink]="['holidays']">{{ 'labels.heading.Manage Holidays' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['holidays']">{{ 'labels.text.Define holidays for office' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['holidays']">
+                {{ 'labels.text.Define holidays for office' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -40,20 +39,25 @@ <h4 matLine [routerLink]="['holidays']">{{ 'labels.heading.Manage Holidays' | tr
               <h4 matLine [routerLink]="['employees']">{{ 'labels.heading.Manage Employees' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['employees']">{{ 'labels.text.Employee represents loan officers' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['employees']">
+                {{ 'labels.text.Employee represents loan officers' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #standinginstructions>
-            <mat-list-item
-              *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
+            <mat-list-item *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
               <mat-icon matListIcon [routerLink]="['standing-instructions-history']">
                 <fa-icon icon="book" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['standing-instructions-history']">{{ 'labels.heading.Standing Instructions History' | translate }}</h4>
+              <h4 matLine [routerLink]="['standing-instructions-history']">
+                {{ 'labels.heading.Standing Instructions History' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['standing-instructions-history']">{{ 'labels.text.View logged history' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['standing-instructions-history']">
+                {{ 'labels.text.View logged history' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -65,7 +69,9 @@ <h4 matLine [routerLink]="['standing-instructions-history']">{{ 'labels.heading.
               <h4 matLine [routerLink]="['investors']">{{ 'labels.text.Investors' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['investors']">{{ 'labels.text.View the loan account details associated with the investors' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['investors']">
+                {{ 'labels.text.View the loan account details associated with the investors' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -77,20 +83,25 @@ <h4 matLine [routerLink]="['investors']">{{ 'labels.text.Investors' | translate
               <h4 matLine [routerLink]="['fund-mapping']">{{ 'labels.heading.Fund Mapping' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['fund-mapping']">{{ 'labels.text.Bulk entry screen for mapping' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['fund-mapping']">
+                {{ 'labels.text.Bulk entry screen for mapping' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #passwordpreferences>
-            <mat-list-item
-              *mifosxHasPermission="'READ_PASSWORD_VALIDATION_POLICY'">
+            <mat-list-item *mifosxHasPermission="'READ_PASSWORD_VALIDATION_POLICY'">
               <mat-icon matListIcon [routerLink]="['password-preferences']">
                 <fa-icon icon="lock" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['password-preferences']">{{ 'labels.heading.Password Preferences' | translate }}</h4>
+              <h4 matLine [routerLink]="['password-preferences']">
+                {{ 'labels.heading.Password Preferences' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['password-preferences']">{{ 'labels.text.The usage of stronger passwords' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['password-preferences']">
+                {{ 'labels.text.The usage of stronger passwords' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -99,34 +110,37 @@ <h4 matLine [routerLink]="['password-preferences']">{{ 'labels.heading.Password
               <mat-icon matListIcon [routerLink]="['provisioning-criteria']">
                 <fa-icon icon="edit" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['provisioning-criteria']">{{ 'labels.heading.Loan Provisioning Criteria' | translate }}</h4>
+              <h4 matLine [routerLink]="['provisioning-criteria']">
+                {{ 'labels.heading.Loan Provisioning Criteria' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['provisioning-criteria']">{{ 'labels.text.Loan Provisioning Criteria Organization' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['provisioning-criteria']">
+                {{ 'labels.text.Loan Provisioning Criteria Organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
           <div #entitydatatable>
-            <mat-list-item
-              *mifosxHasPermission="'READ_ENTITY_DATATABLE_CHECK'">
+            <mat-list-item *mifosxHasPermission="'READ_ENTITY_DATATABLE_CHECK'">
               <mat-icon matListIcon [routerLink]="['entity-data-table-checks']">
                 <fa-icon icon="check" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['entity-data-table-checks']">{{ 'labels.heading.Entity Data Table Checks' | translate }}</h4>
+              <h4 matLine [routerLink]="['entity-data-table-checks']">
+                {{ 'labels.heading.Entity Data Table Checks' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['entity-data-table-checks']">{{ 'labels.text.Entity Data Table Checks Organization' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['entity-data-table-checks']">
+                {{ 'labels.text.Entity Data Table Checks Organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <div #addEditCurrency>
             <mat-list-item *mifosxHasPermission="'READ_CURRENCY'">
               <mat-icon matListIcon [routerLink]="['currencies']">
@@ -135,7 +149,9 @@ <h4 matLine [routerLink]="['entity-data-table-checks']">{{ 'labels.heading.Entit
               <h4 matLine [routerLink]="['currencies']">{{ 'labels.heading.Currency Configuration' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['currencies']">{{ 'labels.text.Currencies available across organization' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['currencies']">
+                {{ 'labels.text.Currencies available across organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -145,9 +161,16 @@ <h4 matLine [routerLink]="['currencies']">{{ 'labels.heading.Currency Configurat
                 <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['manage-funds']">{{ 'labels.heading.Manage Funds' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(10)"
+                *ngIf="!arrowBooleans[10]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-funds']">{{ 'labels.text.Funds are associated with loans' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-funds']">
+                {{ 'labels.text.Funds are associated with loans' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -157,9 +180,16 @@ <h4 matLine [routerLink]="['manage-funds']">{{ 'labels.heading.Manage Funds' | t
                 <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['bulkloan']">{{ 'labels.heading.Bulk Loan Reassignment' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="!arrowBooleans[11]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(11)"
+                *ngIf="!arrowBooleans[11]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="arrowBooleans[11]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['bulkloan']">{{ 'labels.text.Easy way to reassign all the loan' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['bulkloan']">
+                {{ 'labels.text.Easy way to reassign all the loan' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -169,9 +199,16 @@ <h4 matLine [routerLink]="['bulkloan']">{{ 'labels.heading.Bulk Loan Reassignmen
                 <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['tellers']">{{ 'labels.heading.Teller / Cashier Management' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="!arrowBooleans[12]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(12)"
+                *ngIf="!arrowBooleans[12]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="arrowBooleans[12]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['tellers']">{{ 'labels.text.Manage Tellers / Cashiers' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['tellers']">
+                {{ 'labels.text.Manage Tellers / Cashiers' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -181,9 +218,16 @@ <h4 matLine [routerLink]="['tellers']">{{ 'labels.heading.Teller / Cashier Manag
                 <fa-icon icon="calendar-alt" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['working-days']">{{ 'labels.heading.Working Days' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="!arrowBooleans[13]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(13)"
+                *ngIf="!arrowBooleans[13]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="arrowBooleans[13]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['working-days']">{{ 'labels.text.Working days and configure behaviour of payments' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['working-days']">
+                {{ 'labels.text.Working days and configure behaviour of payments' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -193,9 +237,16 @@ <h4 matLine [routerLink]="['working-days']">{{ 'labels.heading.Working Days' | t
                 <fa-icon icon="dollar-sign" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['payment-types']">{{ 'labels.heading.Payment Type' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="!arrowBooleans[14]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(14)"
+                *ngIf="!arrowBooleans[14]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="arrowBooleans[14]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[14]" [routerLink]="['payment-types']">{{ 'labels.text.Manage payment types' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[14]" [routerLink]="['payment-types']">
+                {{ 'labels.text.Manage payment types' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -205,9 +256,16 @@ <h4 matLine [routerLink]="['payment-types']">{{ 'labels.heading.Payment Type' |
                 <fa-icon icon="envelope" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['sms-campaigns']">{{ 'labels.heading.SMS Campaigns' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(15)" *ngIf="!arrowBooleans[15]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(15)"
+                *ngIf="!arrowBooleans[15]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(15)" *ngIf="arrowBooleans[15]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[15]" [routerLink]="['sms-campaigns']">{{ 'labels.text.Define SMS Campaigns for Organization' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[15]" [routerLink]="['sms-campaigns']">
+                {{ 'labels.text.Define SMS Campaigns for Organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -217,9 +275,16 @@ <h4 matLine [routerLink]="['sms-campaigns']">{{ 'labels.heading.SMS Campaigns' |
                 <fa-icon icon="chevron-right" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['adhoc-query']">{{ 'labels.heading.AdHocQuery' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(16)" *ngIf="!arrowBooleans[16]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(16)"
+                *ngIf="!arrowBooleans[16]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(16)" *ngIf="arrowBooleans[16]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[16]" [routerLink]="['adhoc-query']">{{ 'labels.text.Define AdHocQuery for Organization' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[16]" [routerLink]="['adhoc-query']">
+                {{ 'labels.text.Define AdHocQuery for Organization' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -229,32 +294,37 @@ <h4 matLine [routerLink]="['adhoc-query']">{{ 'labels.heading.AdHocQuery' | tran
                 <fa-icon icon="upload" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['bulk-import']">{{ 'labels.heading.Bulk Import' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(17)" *ngIf="!arrowBooleans[17]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(17)"
+                *ngIf="!arrowBooleans[17]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(17)" *ngIf="arrowBooleans[17]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[17]" [routerLink]="['bulk-import']">{{ 'labels.text.Bulk data import using excel spreadsheet templates' | translate }}</p>
+              <p matLine *ngIf="arrowBooleans[17]" [routerLink]="['bulk-import']">
+                {{ 'labels.text.Bulk data import using excel spreadsheet templates' | translate }}
+              </p>
             </mat-list-item>
           </div>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateOffice let-popover="popover">
   <h2>{{ 'labels.heading.Manage Offices' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Manage Offices page allows you to create, edit' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{
-      'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepOffice()">{{ 'labels.buttons.Back' |
-      translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepOffice()">{{ 'labels.buttons.Next' |
-      translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepOffice()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepOffice()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
@@ -262,12 +332,15 @@ <h2>{{ 'labels.heading.Manage Offices' | translate }}</h2>
   <h2>{{ 'labels.heading.Currency Configuration' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Define what currencies interactions within the Mifos X system' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{
-      'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepAddEditCurrency()">{{
-      'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepAddEditCurrency()">{{
-      'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepAddEditCurrency()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepAddEditCurrency()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
@@ -275,12 +348,15 @@ <h2>{{ 'labels.heading.Currency Configuration' | translate }}</h2>
   <h2>{{ 'labels.heading.Manage Holidays' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Ability to manage holidays for individual offices' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{
-      'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepHolidays()">{{ 'labels.buttons.Back'
-      | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepHolidays()">{{ 'labels.buttons.Next' |
-      translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepHolidays()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepHolidays()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
@@ -288,12 +364,15 @@ <h2>{{ 'labels.heading.Manage Holidays' | translate }}</h2>
   <h2>{{ 'labels.heading.Manage Employees' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.View, edit and/or delete your organization's employees' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{
-      'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepEmployee()">{{ 'labels.buttons.Back'
-      | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepEmployee()">{{ 'labels.buttons.Next' |
-      translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepEmployee()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepEmployee()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
@@ -301,12 +380,15 @@ <h2>{{ 'labels.heading.Manage Employees' | translate }}</h2>
   <h2>{{ 'labels.heading.Working Days' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Working days page allows you to define which days' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{
-      'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepWorkingDays()">{{
-      'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepWorkingDays()">{{ 'labels.buttons.Next' |
-      translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepWorkingDays()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepWorkingDays()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
@@ -314,11 +396,14 @@ <h2>{{ 'labels.heading.Working Days' | translate }}</h2>
   <h2>{{ 'labels.heading.Manage Funds' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.This allows you to manage funds associated with loans.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{
-      'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepManageFunds()">{{
-      'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageFunds()">{{ 'labels.buttons.Next' |
-      translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepManageFunds()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepManageFunds()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/organization/password-preferences/password-preferences.component.html b/src/app/organization/password-preferences/password-preferences.component.html
index 26f88f3921..5f70590159 100644
--- a/src/app/organization/password-preferences/password-preferences.component.html
+++ b/src/app/organization/password-preferences/password-preferences.component.html
@@ -1,26 +1,27 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="passwordPreferencesForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-radio-group fxLayout="column" formControlName="validationPolicyId" fxLayoutGap="10px">
           <mat-radio-button *ngFor="let passwordPreference of passwordPreferencesData" [value]="passwordPreference.id">
             <span class="description-wrap">{{ passwordPreference.description }}</span>
           </mat-radio-button>
         </mat-radio-group>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="passwordPreferencesForm.pristine" *mifosxHasPermission="'UPDATE_PASSWORD_VALIDATION_POLICY'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="passwordPreferencesForm.pristine"
+          *mifosxHasPermission="'UPDATE_PASSWORD_VALIDATION_POLICY'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/payment-types/create-payment-type/create-payment-type.component.html b/src/app/organization/payment-types/create-payment-type/create-payment-type.component.html
index 1fb38ed002..e1f72a9e67 100644
--- a/src/app/organization/payment-types/create-payment-type/create-payment-type.component.html
+++ b/src/app/organization/payment-types/create-payment-type/create-payment-type.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="paymentTypeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
-            <input required matInput formControlName="name">
+            <input required matInput formControlName="name" />
             <mat-error *ngIf="paymentTypeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Payment Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -27,23 +23,28 @@
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
-            <input required matInput formControlName="position">
+            <input required matInput formControlName="position" />
             <mat-error *ngIf="paymentTypeForm.controls.position.hasError('required')">
-              {{ 'labels.inputs.Position' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!paymentTypeForm.valid" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!paymentTypeForm.valid"
+          *mifosxHasPermission="'CREATE_PAYMENTTYPE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.html b/src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.html
index a992e96d98..1bb0ff28f8 100644
--- a/src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.html
+++ b/src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="paymentTypeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
-            <input required matInput formControlName="name">
+            <input required matInput formControlName="name" />
             <mat-error *ngIf="paymentTypeForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Payment Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -27,23 +23,28 @@
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
-            <input required matInput formControlName="position">
+            <input required matInput formControlName="position" />
             <mat-error *ngIf="paymentTypeForm.controls.position.hasError('required')">
-              {{ 'labels.inputs.Position' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!paymentTypeForm.valid" *mifosxHasPermission="'UPDATE_PAYMENTTYPE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!paymentTypeForm.valid"
+          *mifosxHasPermission="'UPDATE_PAYMENTTYPE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/payment-types/payment-types.component.html b/src/app/organization/payment-types/payment-types.component.html
index f1a8d2d9ea..ca5783fd1b 100644
--- a/src/app/organization/payment-types/payment-types.component.html
+++ b/src/app/organization/payment-types/payment-types.component.html
@@ -1,84 +1,110 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Payment Type' | translate }}
+    {{ 'labels.buttons.Create Payment Type' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8 table-container">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let paymentType">{{ paymentType.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
-        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.description }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let paymentType">{{ paymentType.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="codeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Code' | translate }} </th>
-        <td mat-cell *matCellDef="let paymentType"> {{ paymentType.codeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Code' | translate }}</th>
+        <td mat-cell *matCellDef="let paymentType">{{ paymentType.codeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="isSystemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.System Defined' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.System Defined' | translate }}</th>
         <td mat-cell *matCellDef="let paymentType">
           <div [className]="paymentType.isSystemDefined === true ? 'true text-center' : 'false text-center'">
-            <fa-icon *ngIf="paymentType.isSystemDefined" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!paymentType.isSystemDefined" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+            <fa-icon
+              *ngIf="paymentType.isSystemDefined"
+              icon="check-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.Yes' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!paymentType.isSystemDefined"
+              icon="times-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.No' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="isCashPayment">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash Payment' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Cash Payment' | translate }}</th>
         <td mat-cell *matCellDef="let paymentType">
           <div [className]="paymentType.isCashPayment === true ? 'true text-center' : 'false text-center'">
-            <fa-icon *ngIf="paymentType.isCashPayment" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!paymentType.isCashPayment" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+            <fa-icon
+              *ngIf="paymentType.isCashPayment"
+              icon="check-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.Yes' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!paymentType.isCashPayment"
+              icon="times-circle"
+              size="lg"
+              matTooltip="{{ 'tooltips.No' | translate }}"
+              matTooltipPosition="right"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="position">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Position' | translate }} </th>
-        <td mat-cell *matCellDef="let paymentType" class="text-center"> {{ paymentType.position }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Position' | translate }}</th>
+        <td mat-cell *matCellDef="let paymentType" class="text-center">{{ paymentType.position }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let paymentType">
-          <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate }}
+          <button
+            mat-button
+            [routerLink]="[paymentType.id, 'edit']"
+            color="primary"
+            *ngIf="!paymentType.isSystemDefined"
+          >
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
           </button>
-          <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
+          <button
+            mat-button
+            (click)="deletePaymentType(paymentType.id)"
+            color="warn"
+            *ngIf="!paymentType.isSystemDefined"
+          >
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html b/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html
index 5b8d132b8e..4e7413e70e 100644
--- a/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html
+++ b/src/app/organization/sms-campaigns/create-campaign/create-campaign.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #smsCampaignStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,19 +21,16 @@
     </ng-template>
 
     <mat-step [stepControl]="smsCampaignForm">
-
       <ng-template matStepLabel>{{ 'labels.inputs.CAMPAIGN' | translate }}</ng-template>
 
-      <mifosx-sms-campaign-step 
+      <mifosx-sms-campaign-step
         [smsCampaignTemplate]="smsCampaignTemplate"
         (templateParameters)="setParameters($event)"
       >
       </mifosx-sms-campaign-step>
-
     </mat-step>
 
     <mat-step>
-
       <ng-template matStepLabel>{{ 'labels.inputs.MESSAGE' | translate }}</ng-template>
 
       <mifosx-campaign-message-step
@@ -43,21 +38,17 @@
         [smsCampaignFormValid]="smsCampaignForm.valid"
       >
       </mifosx-campaign-message-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="smsCampaignForm.valid" completed>
-
       <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
-      <mifosx-campaign-preview-step 
+      <mifosx-campaign-preview-step
         [smsCampaignTemplate]="smsCampaignTemplate"
-        [campaign]="smsCampaign" (submitEvent)="submit()"
+        [campaign]="smsCampaign"
+        (submitEvent)="submit()"
       >
       </mifosx-campaign-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html b/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html
index 5c5d459a3e..8c81e58408 100644
--- a/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html
+++ b/src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #smsCampaignStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,43 +21,36 @@
     </ng-template>
 
     <mat-step completed>
-
       <ng-template matStepLabel>{{ 'labels.inputs.CAMPAIGN' | translate }}</ng-template>
 
-      <mifosx-edit-sms-campaign-step 
+      <mifosx-edit-sms-campaign-step
         [smsCampaign]="smsCampaign"
         [smsCampaignTemplate]="smsCampaignTemplate"
         (templateParameters)="setParameters($event)"
       >
       </mifosx-edit-sms-campaign-step>
-
     </mat-step>
 
     <mat-step>
-
       <ng-template matStepLabel>{{ 'labels.inputs.MESSAGE' | translate }}</ng-template>
 
-      <mifosx-campaign-message-step 
+      <mifosx-campaign-message-step
         [templateParameters]="templateParameters"
         [editCampaignMessage]="smsCampaign.campaignMessage"
       >
       </mifosx-campaign-message-step>
-
     </mat-step>
 
     <mat-step state="preview" completed>
-
       <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-campaign-preview-step
         [campaign]="smsCampaign"
         [editedCampaignMessage]="campaignMessage"
-        [smsCampaignTemplate]="smsCampaignTemplate" (submitEvent)="submit()"
+        [smsCampaignTemplate]="smsCampaignTemplate"
+        (submitEvent)="submit()"
       >
       </mifosx-campaign-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html
index f349fa9bc9..597d1a6a1d 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html
@@ -1,15 +1,19 @@
 <div fxLayout="column">
-
   <mat-form-field fxFlex="98%">
-    <mat-label>{{'labels.inputs.Campaign Message' | translate }}</mat-label>
+    <mat-label>{{ 'labels.inputs.Campaign Message' | translate }}</mat-label>
     <textarea matInput [formControl]="message"></textarea>
   </mat-form-field>
 
-  <h3 fxFlex="98%" class="mat-h3">{{'labels.heading.Template Parameters' | translate }}</h3>
+  <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Template Parameters' | translate }}</h3>
 
   <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-    <button mat-stroked-button color="primary" class="parameter"
-      *ngFor="let label of parameterLabels" (click)="addText(label)">
+    <button
+      mat-stroked-button
+      color="primary"
+      class="parameter"
+      *ngFor="let label of parameterLabels"
+      (click)="addText(label)"
+    >
       {{ label }}
     </button>
   </div>
@@ -17,12 +21,11 @@ <h3 fxFlex="98%" class="mat-h3">{{'labels.heading.Template Parameters' | transla
   <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>
-      {{'labels.buttons.Previous' | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!smsCampaignFormValid">
-      {{'labels.buttons.Next' | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </div>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-preview-step/campaign-preview-step.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-preview-step/campaign-preview-step.component.html
index 6e2fdb2a26..0bfd0bbd3f 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-preview-step/campaign-preview-step.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-preview-step/campaign-preview-step.component.html
@@ -1,37 +1,34 @@
 <div class="tab-content mat-typography">
-
   <mat-list>
+    <mat-list-item> {{ 'labels.inputs.Campaign Name' | translate }} : {{ campaign.campaignName }} </mat-list-item>
 
     <mat-list-item>
-      {{ 'labels.inputs.Campaign Name' | translate }} : {{ campaign.campaignName }}
-    </mat-list-item>
-
-    <mat-list-item>
-      {{ 'labels.inputs.SMS Provider' | translate }} : {{ (campaign.providerId | find:smsProviders:'id':'name') || "Unassigned" }}
+      {{ 'labels.inputs.SMS Provider' | translate }} :
+      {{ (campaign.providerId | find: smsProviders : 'id' : 'name') || 'Unassigned' }}
     </mat-list-item>
 
     <mat-list-item>
-      {{ 'labels.inputs.Trigger Type' | translate }} : {{ (campaign.editFlag ? campaign.triggerType.id : campaign.triggerType) | find:triggerTypes:'id':'value' }}
+      {{ 'labels.inputs.Trigger Type' | translate }} :
+      {{ (campaign.editFlag ? campaign.triggerType.id : campaign.triggerType) | find: triggerTypes : 'id' : 'value' }}
     </mat-list-item>
 
     <mat-list-item>
-      {{ 'labels.inputs.Bussiness Rule' | translate }} : {{ campaign.editFlag ? campaign.reportName : campaign.paramValue?.reportName }}
+      {{ 'labels.inputs.Bussiness Rule' | translate }} :
+      {{ campaign.editFlag ? campaign.reportName : campaign.paramValue?.reportName }}
     </mat-list-item>
 
     <div fxLayout="column" fxLayoutGap="10px" class="template-message">
       <h3>{{ 'labels.heading.Campaign Message' | translate }} :</h3>
       <textarea matInput disabled>{{ campaign.editFlag ? editedCampaignMessage : campaign.message }}</textarea>
     </div>
-
   </mat-list>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button [routerLink]="['../']">
-      {{'labels.buttons.Cancel' | translate }}
+      {{ 'labels.buttons.Cancel' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-      {{'labels.buttons.Submit' | translate }}
+      {{ 'labels.buttons.Submit' | translate }}
     </button>
   </div>
-
 </div>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html
index 7c85e836b8..47e877bbf0 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html
@@ -1,65 +1,64 @@
 <div fxLayout="column">
-
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h3 fxFlex="98%" class="mat-h3">{{'labels.heading.Business Rule Parameters' | translate }}</h3>
+  <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
 
   <form [formGroup]="ReportForm">
-
     <div fxLayout="row wrap" fxLayoutGap="2%">
-
-      <ng-container  *ngFor="let param of paramData" [ngSwitch]="param.displayType">
-
+      <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
         <ng-container *ngIf="ReportForm.controls[param.name]">
-
           <mat-form-field fxFlex="48%" *ngSwitchCase="'text'">
-            <mat-label>{{param.label}}</mat-label>
-            <input matInput required [formControlName]="param.name">
+            <mat-label>{{ param.label }}</mat-label>
+            <input matInput required [formControlName]="param.name" />
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ param.label }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
-            <mat-label>{{param.label}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
-              [formControlName]="param.name">
+            <mat-label>{{ param.label }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="runReportDatePicker"
+              required
+              [formControlName]="param.name"
+            />
             <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #runReportDatePicker></mat-datepicker>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ param.label }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngSwitchCase="'select'">
-            <mat-label>{{param.label}}</mat-label>
+            <mat-label>{{ param.label }}</mat-label>
             <mat-select required [formControlName]="param.name" [compareWith]="compareOptions">
               <mat-option *ngFor="let option of param.selectOptions" [value]="option">
-                {{option.name}}
+                {{ option.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ param.label }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </ng-container>
-
       </ng-container>
-
     </div>
-
   </form>
-
 </div>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious disabled>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Previous' | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate }}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html
index 184907b9ab..7b127076a7 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html
@@ -1,12 +1,11 @@
 <form [formGroup]="smsCampaignDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="48%">
       <mat-label>{{ 'labels.inputs.Campaign Name' | translate }}</mat-label>
-      <input matInput formControlName="campaignName" required>
+      <input matInput formControlName="campaignName" required />
       <mat-error>
-        {{ 'labels.inputs.Campaign Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Campaign Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -27,7 +26,8 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Trigger Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Trigger Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -35,14 +35,25 @@
       {{ 'labels.inputs.Is Notification' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate" (click)="recurrenceStartDatePicker.open()">
+    <mat-form-field
+      fxFlex="48%"
+      *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate"
+      (click)="recurrenceStartDatePicker.open()"
+    >
       <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker"
-        formControlName="recurrenceStartDate" required>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="recurrenceStartDatePicker"
+        formControlName="recurrenceStartDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.Schedule Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Schedule Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -54,14 +65,16 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Business Rule' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Business Rule' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
-  <mifosx-edit-business-rule-parameters [paramData]="paramData" [smsCampaign]="smsCampaign"
-    (templateParameters)="passParameters($event)">
+  <mifosx-edit-business-rule-parameters
+    [paramData]="paramData"
+    [smsCampaign]="smsCampaign"
+    (templateParameters)="passParameters($event)"
+  >
   </mifosx-edit-business-rule-parameters>
-
 </form>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html
index 8364c2e9de..704c832597 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html
@@ -1,61 +1,65 @@
 <div fxLayout="column">
-
   <mat-divider fxFlex="98%"></mat-divider>
 
   <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
 
   <form [formGroup]="ReportForm">
-
     <div fxLayout="row wrap" fxLayoutGap="2%">
-
-      <ng-container  *ngFor="let param of paramData" [ngSwitch]="param.displayType">
-
+      <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
         <ng-container *ngIf="ReportForm.contains(param.name)">
-
           <mat-form-field fxFlex="48%" *ngSwitchCase="'text'">
-            <mat-label>{{param.label}}</mat-label>
-            <input matInput required [formControlName]="param.name">
+            <mat-label>{{ param.label }}</mat-label>
+            <input matInput required [formControlName]="param.name" />
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ param.label }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
-            <mat-label>{{param.label}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
-              [formControlName]="param.name">
+            <mat-label>{{ param.label }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="runReportDatePicker"
+              required
+              [formControlName]="param.name"
+            />
             <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #runReportDatePicker></mat-datepicker>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ param.label }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex="48%" *ngSwitchCase="'select'">
-            <mat-label>{{param.label}}</mat-label>
+            <mat-label>{{ param.label }}</mat-label>
             <mat-select required [formControlName]="param.name">
               <mat-option *ngFor="let option of param.selectOptions" [value]="option">
-                {{option.name}}
+                {{ option.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
-              {{param.label}} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ param.label }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </ng-container>
-
       </ng-container>
-
     </div>
-
   </form>
-
 </div>
 
 <div class="margin-t" fxLayoutAlign="center">
-  <button mat-raised-button matStepperNext color="primary" (click)="getResponseHeaders()"
-    [disabled]="!this.ReportForm.valid">
+  <button
+    mat-raised-button
+    matStepperNext
+    color="primary"
+    (click)="getResponseHeaders()"
+    [disabled]="!this.ReportForm.valid"
+  >
     {{ 'labels.buttons.Get Parameters' | translate }}
   </button>
 </div>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html
index d62ba0ca48..006290918b 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html
@@ -1,17 +1,15 @@
 <form [formGroup]="smsCampaignDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="48%">
       <mat-label>{{ 'labels.inputs.Campaign Name' | translate }}</mat-label>
-      <input matInput formControlName="campaignName" required>
+      <input matInput formControlName="campaignName" required />
       <mat-error>
-        {{ 'labels.inputs.Campaign Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Campaign Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%"
-      *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
+    <mat-form-field fxFlex="48%" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
       <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
       <mat-select formControlName="providerId">
         <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
@@ -28,7 +26,8 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Trigger Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Trigger Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -36,20 +35,29 @@
       {{ 'labels.inputs.Is Notification' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field fxFlex="48%"
-      *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')" (click)="recurrenceStartDatePicker.open()">
+    <mat-form-field
+      fxFlex="48%"
+      *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')"
+      (click)="recurrenceStartDatePicker.open()"
+    >
       <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker"
-        formControlName="recurrenceStartDate" required>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="recurrenceStartDatePicker"
+        formControlName="recurrenceStartDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.Schedule Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Schedule Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%"
-      *ngIf="smsCampaignDetailsForm.contains('frequency')">
+    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.contains('frequency')">
       <mat-label>{{ 'labels.inputs.Repeats' | translate }}</mat-label>
       <mat-select formControlName="frequency" required>
         <mat-option [value]="1">{{ 'labels.inputs.Daily' | translate }}</mat-option>
@@ -58,12 +66,12 @@
         <mat-option [value]="4">{{ 'labels.inputs.Yearly' | translate }}</mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Repetition Frequency' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%"
-      *ngIf="smsCampaignDetailsForm.contains('interval')">
+    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.contains('interval')">
       <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
       <mat-select formControlName="interval" required>
         <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
@@ -71,12 +79,12 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Repetition Interval' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%"
-      *ngIf="smsCampaignDetailsForm.contains('repeatsOnDay')">
+    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.contains('repeatsOnDay')">
       <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
       <mat-select formControlName="repeatsOnDay" required>
         <mat-option value="1">{{ 'labels.inputs.Monday' | translate }}</mat-option>
@@ -88,8 +96,8 @@
         <mat-option value="7">{{ 'labels.inputs.Sunday' | translate }}</mat-option>
       </mat-select>
       <mat-error>
-        {{"labels.inputs.At least" |translate}} <strong>{{"labels.inputs.one" |translate}}</strong> {{"labels.inputs.day must be selected" |translate}}
-
+        {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+        {{ 'labels.inputs.day must be selected' | translate }}
       </mat-error>
     </mat-form-field>
 
@@ -101,14 +109,20 @@
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Business Rule' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ 'labels.inputs.Business Rule' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%"
-    *ngIf="!smsCampaignDetailsForm.controls.runReportId.value">
+  <div
+    fxLayout="row"
+    class="margin-t"
+    fxLayout.xs="column"
+    fxLayoutAlign="center"
+    fxLayoutGap="2%"
+    *ngIf="!smsCampaignDetailsForm.controls.runReportId.value"
+  >
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}
@@ -125,5 +139,4 @@
     (templateParameters)="passParameters($event)"
   >
   </mifosx-business-rule-parameters>
-
 </form>
diff --git a/src/app/organization/sms-campaigns/sms-campaigns.component.html b/src/app/organization/sms-campaigns/sms-campaigns.component.html
index abc38a6f42..f8546b1d1e 100644
--- a/src/app/organization/sms-campaigns/sms-campaigns.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaigns.component.html
@@ -1,66 +1,63 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SMSCAMPAIGN'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Create SMS Campaign' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8 table-container">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="campaignName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-        <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.campaignName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let smsCampaign">{{ smsCampaign.campaignName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="campaignMessage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Template Message' | translate }} </th>
-        <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.campaignMessage }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Template Message' | translate }}</th>
+        <td mat-cell *matCellDef="let smsCampaign">{{ smsCampaign.campaignMessage }}</td>
       </ng-container>
 
       <ng-container matColumnDef="campaignType.value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Campaign Type' | translate }} </th>
-        <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.campaignType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Campaign Type' | translate }}</th>
+        <td mat-cell *matCellDef="let smsCampaign">{{ smsCampaign.campaignType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="triggerType.value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Trigger Type' | translate }} </th>
-        <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.triggerType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trigger Type' | translate }}</th>
+        <td mat-cell *matCellDef="let smsCampaign">{{ smsCampaign.triggerType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="campaignStatus.value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let smsCampaign">
           <div [className]="smsCampaign.campaignStatus.code | statusLookup">
-            <fa-icon matTooltip="{{ smsCampaign.campaignStatus.value | titlecase }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ smsCampaign.campaignStatus.value | titlecase }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="smsCampaignTimeLine.submittedByUsername">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Approved By' | translate }} </th>
-        <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.smsCampaignTimeLine.submittedByUsername }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Approved By' | translate }}</th>
+        <td mat-cell *matCellDef="let smsCampaign">{{ smsCampaign.smsCampaignTimeLine.submittedByUsername }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html b/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html
index 7e7645054b..9b4ba7641e 100644
--- a/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html
+++ b/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html
@@ -1,51 +1,54 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="flex-end" class="action-buttons m-b-20">
-
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate }}
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
-      <button mat-raised-button color="accent" *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'" (click)="activateCampaign()">
-        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{'labels.buttons.Activate' | translate }}
+      <button
+        mat-raised-button
+        color="accent"
+        *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'"
+        (click)="activateCampaign()"
+      >
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Activate' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'" (click)="closeCampaign()">
-        <fa-icon icon="times" class="m-r-10"></fa-icon>{{'labels.buttons.Close' | translate }}
+        <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Close' | translate }}
       </button>
     </span>
 
-    <span *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'">
-      <button mat-raised-button color="accent" *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'" (click)="reactivateCampaign()">
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{'labels.buttons.Reactivate' | translate }}
+    <span
+      *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'"
+    >
+      <button
+        mat-raised-button
+        color="accent"
+        *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'"
+        (click)="reactivateCampaign()"
+      >
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reactivate' | translate }}
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'" (click)="deleteCampaign()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate }}
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
       </button>
     </span>
-
   </div>
 
   <mat-card class="sms-card">
-
     <mat-card-content>
-
       <mat-tab-group (selectedTabChange)="onTabChange($event)">
-
         <mat-tab label="Campaign">
-
           <div class="tab-content mat-typography">
-
             <mat-list>
-
               <mat-list-item>
                 {{ 'labels.inputs.Campaign Name' | translate }} : {{ smsCampaignData.campaignName }}
               </mat-list-item>
@@ -63,7 +66,8 @@
               </mat-list-item>
 
               <mat-list-item>
-                {{ 'labels.inputs.Submitted on' | translate }} : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate  | dateFormat }}
+                {{ 'labels.inputs.Submitted on' | translate }} :
+                {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate | dateFormat }}
               </mat-list-item>
 
               <mat-list-item *ngIf="smsCampaignData.recurrence">
@@ -71,81 +75,78 @@
               </mat-list-item>
 
               <div fxLayout="column" fxLayoutGap="10px" class="template-message">
-                <h3>{{'labels.heading.Template Message' | translate }} :</h3>
-                <textarea matInput disabled>{{ smsCampaignData.campaignMessage}}</textarea>
+                <h3>{{ 'labels.heading.Template Message' | translate }} :</h3>
+                <textarea matInput disabled>{{ smsCampaignData.campaignMessage }}</textarea>
               </div>
-
             </mat-list>
-
           </div>
-
         </mat-tab>
 
-        <mat-tab *ngFor = "let tab of smsTabs" [label]="tab.label">
-
+        <mat-tab *ngFor="let tab of smsTabs" [label]="tab.label">
           <div class="tab-content mat-typography">
-
             <form [formGroup]="smsForm" (ngSubmit)="search()">
-
               <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-
                 <mat-form-field (click)="fromDatePicker.open()">
                   <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-                  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" formControlName="fromDate">
+                  <input
+                    matInput
+                    [min]="minDate"
+                    [max]="maxDate"
+                    [matDatepicker]="fromDatePicker"
+                    formControlName="fromDate"
+                  />
                   <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
                   <mat-datepicker #fromDatePicker></mat-datepicker>
                 </mat-form-field>
 
                 <mat-form-field (click)="toDatePicker.open()">
                   <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-                  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" formControlName="toDate">
+                  <input
+                    matInput
+                    [min]="minDate"
+                    [max]="maxDate"
+                    [matDatepicker]="toDatePicker"
+                    formControlName="toDate"
+                  />
                   <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
                   <mat-datepicker #toDatePicker></mat-datepicker>
                 </mat-form-field>
 
-                <div class="search-button" >
+                <div class="search-button">
                   <button mat-raised-button color="primary">
-                  <fa-icon icon="search" class="m-r-10"></fa-icon>{{'labels.buttons.Search' | translate }}</button>
+                    <fa-icon icon="search" class="m-r-10"></fa-icon>{{ 'labels.buttons.Search' | translate }}
+                  </button>
                 </div>
               </div>
-
             </form>
 
             <table #messageTable mat-table [dataSource]="dataSource" class="mat-elevation-z1 m-b-25">
-
               <ng-container matColumnDef="Message">
-                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Message' | translate }} </th>
-                <td mat-cell *matCellDef="let sms">{{sms.message}}</td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Message' | translate }}</th>
+                <td mat-cell *matCellDef="let sms">{{ sms.message }}</td>
               </ng-container>
 
               <ng-container matColumnDef="Status">
-                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status' | translate }} </th>
-                <td mat-cell *matCellDef="let sms">{{sms.status.value}}</td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+                <td mat-cell *matCellDef="let sms">{{ sms.status.value }}</td>
               </ng-container>
 
               <ng-container matColumnDef="Mobile No.">
-                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Mobile No' | translate }}. </th>
-                <td mat-cell *matCellDef="let sms">{{sms.mobileNo}} </td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Mobile No' | translate }}.</th>
+                <td mat-cell *matCellDef="let sms">{{ sms.mobileNo }}</td>
               </ng-container>
 
               <ng-container matColumnDef="Campaign Name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Campaign Name' | translate }} </th>
-                <td mat-cell *matCellDef="let sms">{{sms.campaignName}}</td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Campaign Name' | translate }}</th>
+                <td mat-cell *matCellDef="let sms">{{ sms.campaignName }}</td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
-
           </div>
-
         </mat-tab>
-
       </mat-tab-group>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/standing-instructions-history/standing-instructions-history.component.html b/src/app/organization/standing-instructions-history/standing-instructions-history.component.html
index 5eb8480ffb..ceef91489e 100644
--- a/src/app/organization/standing-instructions-history/standing-instructions-history.component.html
+++ b/src/app/organization/standing-instructions-history/standing-instructions-history.component.html
@@ -1,27 +1,25 @@
 <div class="container input">
-
   <mat-card *ngIf="!isCollapsed">
-
     <form [formGroup]="instructionForm" (ngSubmit)="search()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Client Name' | translate }}</mat-label>
-            <input matInput formControlName="clientName">
+            <input matInput formControlName="clientName" />
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Client Id' | translate }}</mat-label>
-            <input matInput formControlName="clientId">
+            <input matInput formControlName="clientId" />
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Transfer Type' | translate }}</mat-label>
             <mat-select formControlName="transferType">
-              <mat-option *ngFor="let transferType of standingInstructionsTemplate.transferTypeOptions" [value]="transferType.id">
+              <mat-option
+                *ngFor="let transferType of standingInstructionsTemplate.transferTypeOptions"
+                [value]="transferType.id"
+              >
                 {{ transferType.value }}
               </mat-option>
             </mat-select>
@@ -30,7 +28,10 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select formControlName="fromAccountType">
-              <mat-option *ngFor="let accountType of standingInstructionsTemplate.fromAccountTypeOptions" [value]="accountType.id">
+              <mat-option
+                *ngFor="let accountType of standingInstructionsTemplate.fromAccountTypeOptions"
+                [value]="accountType.id"
+              >
                 {{ accountType.value }}
               </mat-option>
             </mat-select>
@@ -38,45 +39,46 @@
 
           <mat-form-field *ngIf="instructionForm.contains('fromAccountId')">
             <mat-label>{{ 'labels.inputs.From Account ID' | translate }}</mat-label>
-            <input matInput formControlName="fromAccountId">
+            <input matInput formControlName="fromAccountId" />
           </mat-form-field>
 
           <mat-form-field (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" formControlName="fromDate" [matDatepicker]="fromDatePicker">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              formControlName="fromDate"
+              [matDatepicker]="fromDatePicker"
+            />
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" formControlName="toDate" [matDatepicker]="toDatePicker">
+            <input matInput [min]="minDate" [max]="maxDate" formControlName="toDate" [matDatepicker]="toDatePicker" />
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
         <button mat-raised-button color="primary" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
           <fa-icon icon="search"></fa-icon>
           &nbsp; {{ 'labels.buttons.Search Instructions' | translate }}
         </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <div class="container output" *ngIf="isCollapsed">
-
   <mat-card>
-
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
         {{ 'labels.buttons.Parameters' | translate }}
@@ -84,58 +86,68 @@
     </div>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="fromClient">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.From Client' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.fromClient.displayName }}({{ instruction.fromClient.id }}) </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.From Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromClient.displayName }}({{ instruction.fromClient.id }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.From Account' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.fromAccount.productName }}({{ instruction.fromAccount.id }}) </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.From Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromAccount.productName }}({{ instruction.fromAccount.id }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="toClient">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.To Client' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.toClient.displayName }}({{ instruction.toClient.id }}) </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.To Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toClient.displayName }}({{ instruction.toClient.id }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.To Account' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.toAccount.productName }}({{ instruction.toAccount.id }}) </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.To Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toAccount.productName }}({{ instruction.toAccount.id }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="executionTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Execution Time' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.executionTime }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Execution Time' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.executionTime }}</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Amount' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.amount | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.amount | formatNumber }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.status }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.status }}</td>
       </ng-container>
 
       <ng-container matColumnDef="errorLog">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Error Log' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Error Log' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <button *ngIf="instruction.status === 'failed'" class="error-log" mat-raised-button color="warn" [matTooltip]="instruction.errorLog">
+          <button
+            *ngIf="instruction.status === 'failed'"
+            class="error-log"
+            mat-raised-button
+            color="warn"
+            [matTooltip]="instruction.errorLog"
+          >
             <i class="fa fa-exclamation"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html b/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html
index 5796ae89da..996f921c72 100644
--- a/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html
+++ b/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html
@@ -1,40 +1,43 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="allocateCashForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input matInput required formControlName="office">
+            <input matInput required formControlName="office" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required formControlName="tellerName">
+            <input matInput required formControlName="tellerName" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
-            <input matInput required formControlName="cashier">
+            <input matInput required formControlName="cashier" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
-            <input matInput formControlName="assignmentPeriod">
+            <input matInput formControlName="assignmentPeriod" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="cashDatePicker"
+              required
+              formControlName="txnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #cashDatePicker></mat-datepicker>
             <mat-error *ngIf="allocateCashForm.controls.txnDate.hasError('required')">
-              {{ 'labels.inputs.Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -46,37 +49,44 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="allocateCashForm.controls.currencyCode.hasError('required')">
-              {{ 'labels.inputs.Currency' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input matInput required formControlName="txnAmount">
+            <input matInput required formControlName="txnAmount" />
             <mat-error *ngIf="allocateCashForm.controls.txnAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
-            <input matInput required formControlName="txnNote">
+            <input matInput required formControlName="txnNote" />
             <mat-error *ngIf="allocateCashForm.controls.txnNote.hasError('required')">
-              {{ 'labels.inputs.Notes/Comments' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Notes/Comments' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!allocateCashForm.valid" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!allocateCashForm.valid"
+          *mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/cashiers.component.html b/src/app/organization/tellers/cashiers/cashiers.component.html
index d71480248f..85a25f55c8 100644
--- a/src/app/organization/tellers/cashiers/cashiers.component.html
+++ b/src/app/organization/tellers/cashiers/cashiers.component.html
@@ -1,65 +1,85 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['create']"
+    *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'"
+  >
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.New Cashier' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Period' | translate }} </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate | dateFormat }} - {{ cashier.endDate | dateFormat }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Period' | translate }}</th>
+        <td mat-cell *matCellDef="let cashier">
+          {{ cashier.startDate | dateFormat }} - {{ cashier.endDate | dateFormat }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="staffName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cashier/Staff' | translate }} </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.staffName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Cashier/Staff' | translate }}</th>
+        <td mat-cell *matCellDef="let cashier">{{ cashier.staffName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="isFullDay">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Full Day/Time' | translate }} </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay | yesNo }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Full Day/Time' | translate }}</th>
+        <td mat-cell *matCellDef="let cashier">{{ cashier.isFullDay | yesNo }}</td>
       </ng-container>
 
       <ng-container matColumnDef="vaultActions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Vault Actions' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Vault Actions' | translate }}</th>
         <td mat-cell *matCellDef="let cashier">
-          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Allocate Cash' | translate }}"
-            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
+          <button
+            class="cashier-action-button"
+            mat-raised-button
+            color="accent"
+            matTooltip="{{ 'tooltips.Allocate Cash' | translate }}"
+            (click)="routeEdit($event)"
+            [routerLink]="[cashier.id, 'allocate']"
+            *mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
+          >
             <i class="fa fa-arrow-up"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Settle Cash' | translate }}"
-            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'settle']" *mifosxHasPermission="'SETTLECASHIER_TELLER'">
+          <button
+            class="cashier-action-button"
+            mat-raised-button
+            color="warn"
+            matTooltip="{{ 'tooltips.Settle Cash' | translate }}"
+            (click)="routeEdit($event)"
+            [routerLink]="[cashier.id, 'settle']"
+            *mifosxHasPermission="'SETTLECASHIER_TELLER'"
+          >
             <i class="fa fa-arrow-down"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Transactions' | translate }}"
-            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'transactions']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
+          <button
+            class="cashier-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.View Transactions' | translate }}"
+            (click)="routeEdit($event)"
+            [routerLink]="[cashier.id, 'transactions']"
+            *mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
+          >
             <i class="fa fa-eye"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html b/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html
index 38a47cace9..f42dc23db8 100644
--- a/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html
+++ b/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html
@@ -1,21 +1,16 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="createCashierForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input matInput required autofocus [value]="cashierTemplate.officeName" disabled>
+            <input matInput required autofocus [value]="cashierTemplate.officeName" disabled />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled>
+            <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
@@ -26,32 +21,49 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="createCashierForm.controls.staffId.hasError('required')">
-              {{ 'labels.inputs.Cashier' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Cashier' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
-            <input matInput autofocus formControlName="description">
+            <input matInput autofocus formControlName="description" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="fromDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="createCashierForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
-            <input matInput [min]="createCashierForm.value.startDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">            
+            <input
+              matInput
+              [min]="createCashierForm.value.startDate"
+              [max]="maxDate"
+              [matDatepicker]="toDatePicker"
+              required
+              formControlName="endDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="createCashierForm.controls.endDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -60,18 +72,22 @@
               {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!createCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!createCashierForm.valid"
+          *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html b/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html
index 2ee4c07592..545cd6a8dd 100644
--- a/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html
+++ b/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html
@@ -1,21 +1,16 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editCashierForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input matInput required autofocus [value]="cashierData.template.officeName" disabled>
+            <input matInput required autofocus [value]="cashierData.template.officeName" disabled />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required autofocus [value]="cashierData.data.tellerName" disabled>
+            <input matInput required autofocus [value]="cashierData.data.tellerName" disabled />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="isStaffId">
@@ -38,25 +33,42 @@
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
-            <input matInput autofocus formControlName="description">
+            <input matInput autofocus formControlName="description" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="fromDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
             <mat-error *ngIf="editCashierForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
-            <input matInput [min]="editCashierForm.value.startDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <input
+              matInput
+              [min]="editCashierForm.value.startDate"
+              [max]="maxDate"
+              [matDatepicker]="toDatePicker"
+              required
+              formControlName="endDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
             <mat-error *ngIf="editCashierForm.controls.endDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -65,18 +77,22 @@
               {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!editCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!editCashierForm.valid"
+          *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html b/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html
index 87a0d5c220..4b1405b7fd 100644
--- a/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html
+++ b/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html
@@ -1,40 +1,43 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="settleCashForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input matInput required formControlName="office">
+            <input matInput required formControlName="office" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required formControlName="tellerName">
+            <input matInput required formControlName="tellerName" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
-            <input matInput required formControlName="cashier">
+            <input matInput required formControlName="cashier" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
-            <input matInput formControlName="assignmentPeriod">
+            <input matInput formControlName="assignmentPeriod" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="cashDatePicker"
+              required
+              formControlName="txnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #cashDatePicker></mat-datepicker>
             <mat-error *ngIf="settleCashForm.controls.txnDate.hasError('required')">
-              {{ 'labels.inputs.Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -46,37 +49,44 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="settleCashForm.controls.currencyCode.hasError('required')">
-              {{ 'labels.inputs.Currency' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
-            <input matInput required formControlName="txnAmount">
+            <input matInput required formControlName="txnAmount" />
             <mat-error *ngIf="settleCashForm.controls.txnAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
-            <input matInput required formControlName="txnNote">
+            <input matInput required formControlName="txnNote" />
             <mat-error *ngIf="settleCashForm.controls.txnNote.hasError('required')">
-              {{ 'labels.inputs.Notes/Comments' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Notes/Comments' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!settleCashForm.valid" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">{{ 'labels.buttons.Settle Cash' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!settleCashForm.valid"
+          *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'"
+        >
+          {{ 'labels.buttons.Settle Cash' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/transactions/transactions.component.html b/src/app/organization/tellers/cashiers/transactions/transactions.component.html
index 1a5bdac1f2..99dfa58c17 100644
--- a/src/app/organization/tellers/cashiers/transactions/transactions.component.html
+++ b/src/app/organization/tellers/cashiers/transactions/transactions.component.html
@@ -1,71 +1,70 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['../allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
-      <fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Allocate Cash' | translate }}
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['../allocate']"
+    *mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
+  >
+    <fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Allocate Cash' | translate }}
   </button>
-  <button mat-raised-button color="warn" [routerLink]="['../settle']" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">
-      <fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Settle Cash' | translate }}
+  <button
+    mat-raised-button
+    color="warn"
+    [routerLink]="['../settle']"
+    *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'"
+  >
+    <fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Settle Cash' | translate }}
   </button>
 </div>
 
 <div class="container m-b-20" *ngIf="cashierData">
+  <mat-card class="mat-elevation-z8">
+    <mat-card-content>
+      <div fxLayout="row wrap" class="content">
+        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          {{ 'labels.inputs.Branch' | translate }}
+        </div>
 
-    <mat-card class="mat-elevation-z8">
-
-      <mat-card-content>
-
-        <div fxLayout="row wrap" class="content">
-
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            {{ 'labels.inputs.Branch' | translate }}
-          </div>
-
-          <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ cashierData.officeName }}
-          </div>
-
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            {{ 'labels.inputs.Teller' | translate }}
-          </div>
-
-          <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ cashierData.tellerName }}
-          </div>
-
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            {{ 'labels.inputs.Cashier' | translate }}
-          </div>
-
-          <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ cashierData.cashierName }}
-          </div>
+        <div fxFlex="25%" fxFlex.lt-md="50%">
+          {{ cashierData.officeName }}
+        </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            {{ 'labels.inputs.Net Cash' | translate }}
-          </div>
+        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          {{ 'labels.inputs.Teller' | translate }}
+        </div>
 
-          <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ cashierData.netCash | formatNumber }} [{{currencySelector.value}}]
-          </div>
+        <div fxFlex="25%" fxFlex.lt-md="50%">
+          {{ cashierData.tellerName }}
+        </div>
 
+        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          {{ 'labels.inputs.Cashier' | translate }}
         </div>
 
-      </mat-card-content>
+        <div fxFlex="25%" fxFlex.lt-md="50%">
+          {{ cashierData.cashierName }}
+        </div>
 
-    </mat-card>
+        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+          {{ 'labels.inputs.Net Cash' | translate }}
+        </div>
 
+        <div fxFlex="25%" fxFlex.lt-md="50%">
+          {{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>
 
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="2%" class="mat-elevation-z8">
-
     <div fxLayout="row" fxLayoutGap="2%">
-
       <mat-form-field fxFlex>
-        <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-        <input matInput (keyup)="applyFilter($event.target.value)">
+        <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+        <input matInput (keyup)="applyFilter($event.target.value)" />
       </mat-form-field>
 
       <mat-form-field>
@@ -76,52 +75,61 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-
     </div>
 
     <div *ngIf="cashierData">
-
       <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
-
         <ng-container matColumnDef="date">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Date' | translate }} </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate  | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Date' | translate }}</th>
+          <td mat-cell *matCellDef="let transaction">{{ transaction.txnDate | dateFormat }}</td>
         </ng-container>
 
         <ng-container matColumnDef="transactions">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Transactions' | translate }} </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transactions' | translate }}</th>
+          <td mat-cell *matCellDef="let transaction">{{ transaction.txnType.value }}</td>
         </ng-container>
 
         <ng-container matColumnDef="allocation">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Allocation' | translate }} ({{cashierData.sumCashAllocation | formatNumber}}) </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Allocation' | translate }} ({{ cashierData.sumCashAllocation | formatNumber }})
+          </th>
+          <td mat-cell *matCellDef="let transaction">
+            {{ transaction.txnType.value === 'Allocate Cash' ? (transaction.txnAmount | formatNumber) : '-' }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="cashIn">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash In' | translate }} ({{cashierData.sumInwardCash | formatNumber}})  </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Cash In' | translate }} ({{ cashierData.sumInwardCash | formatNumber }})
+          </th>
+          <td mat-cell *matCellDef="let transaction">
+            {{ transaction.txnType.value === 'Cash In' ? (transaction.txnAmount | formatNumber) : '-' }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="cashOut">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash Out' | translate }} ({{cashierData.sumOutwardCash | formatNumber}}) </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Cash Out' | translate }} ({{ cashierData.sumOutwardCash | formatNumber }})
+          </th>
+          <td mat-cell *matCellDef="let transaction">
+            {{ transaction.txnType.value === 'Cash Out' ? (transaction.txnAmount | formatNumber) : '-' }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="settlement">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Settlement' | translate }} ({{cashierData.sumCashSettlement | formatNumber}})</th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+            {{ 'labels.inputs.Settlement' | translate }} ({{ cashierData.sumCashSettlement | formatNumber }})
+          </th>
+          <td mat-cell *matCellDef="let transaction">
+            {{ transaction.txnType.value === 'Settle Cash' ? (transaction.txnAmount | formatNumber) : '-' }}
+          </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
 
       <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
index e2d96f997a..3f9327818c 100644
--- a/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
+++ b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
@@ -1,33 +1,28 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CASHIER'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCashier()" *mifosxHasPermission="'DELETECASHIER_TELLER'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
-
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Name' | translate}}
+          {{ 'labels.inputs.Name' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ cashierData.staffName}}
+          {{ cashierData.staffName }}
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Teller' | translate}}
+          {{ 'labels.inputs.Teller' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -35,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="cashierData.description !== ''">
-          {{'labels.inputs.Description' | translate}}
+          {{ 'labels.inputs.Description' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="cashierData.description !== ''">
@@ -43,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Start Date' | translate}}
+          {{ 'labels.inputs.Start Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -51,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.End Date' | translate}}
+          {{ 'labels.inputs.End Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -59,20 +54,19 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Full Day/Time' | translate}}
+          {{ 'labels.inputs.Full Day/Time' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ cashierData.isFullDay }}
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['..']">{{  "labels.buttons.Back" | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['..']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/create-teller/create-teller.component.html b/src/app/organization/tellers/create-teller/create-teller.component.html
index 3c19b12011..0e1a0b901a 100644
--- a/src/app/organization/tellers/create-teller/create-teller.component.html
+++ b/src/app/organization/tellers/create-teller/create-teller.component.html
@@ -1,21 +1,18 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="tellerForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="tellerForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Teller Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Teller Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="tellerForm.controls.name.hasError('pattern')">
-              {{ 'labels.inputs.Teller Name' | translate }} <strong>{{'labels.commons.cannot' | translate }}</strong> {{'labels.commons.begin with a special character or number' | translate }}
+              {{ 'labels.inputs.Teller Name' | translate }} <strong>{{ 'labels.commons.cannot' | translate }}</strong>
+              {{ 'labels.commons.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
@@ -27,7 +24,8 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="tellerForm.controls.officeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -38,17 +36,31 @@
 
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="tellerForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.Start Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="endDatePicker.open()">
             <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
-            <input matInput [min]="tellerForm.value.startDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+            <input
+              matInput
+              [min]="tellerForm.value.startDate"
+              [max]="maxDate"
+              [matDatepicker]="endDatePicker"
+              formControlName="endDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #endDatePicker></mat-datepicker>
           </mat-form-field>
@@ -61,21 +73,21 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="tellerForm.controls.status.hasError('required')">
-              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!tellerForm.valid" *mifosxHasPermission="'CREATE_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!tellerForm.valid" *mifosxHasPermission="'CREATE_TELLER'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/edit-teller/edit-teller.component.html b/src/app/organization/tellers/edit-teller/edit-teller.component.html
index 55882741f6..960767681d 100644
--- a/src/app/organization/tellers/edit-teller/edit-teller.component.html
+++ b/src/app/organization/tellers/edit-teller/edit-teller.component.html
@@ -1,21 +1,18 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="tellerForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="tellerForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Teller Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Teller Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="tellerForm.controls.name.hasError('pattern')">
-              {{ 'labels.inputs.Teller Name' | translate }} <strong>{{'labels.commons.cannot' | translate }}</strong> {{'labels.commons.begin with a special character or number' | translate }}
+              {{ 'labels.inputs.Teller Name' | translate }} <strong>{{ 'labels.commons.cannot' | translate }}</strong>
+              {{ 'labels.commons.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
@@ -30,23 +27,36 @@
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-            <input matInput formControlName="description">
+            <input matInput formControlName="description" />
           </mat-form-field>
 
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required
-              formControlName="startDate">
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="tellerForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.Start Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="endDatePicker.open()">
             <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
-            <input matInput [min]="tellerForm.value.startDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+            <input
+              matInput
+              [min]="tellerForm.value.startDate"
+              [max]="maxDate"
+              [matDatepicker]="endDatePicker"
+              formControlName="endDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #endDatePicker></mat-datepicker>
           </mat-form-field>
@@ -59,22 +69,21 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="tellerForm.controls.status.hasError('required')">
-              {{ 'labels.inputs.Status' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!tellerForm.valid"
-          *mifosxHasPermission="'UPDATE_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!tellerForm.valid" *mifosxHasPermission="'UPDATE_TELLER'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/tellers/tellers.component.html b/src/app/organization/tellers/tellers.component.html
index 6354ff14f9..f08d6c81de 100644
--- a/src/app/organization/tellers/tellers.component.html
+++ b/src/app/organization/tellers/tellers.component.html
@@ -1,65 +1,66 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TELLER'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Create Teller' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Branch' | translate }} </th>
-        <td mat-cell *matCellDef="let teller"> {{ teller.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Branch' | translate }}</th>
+        <td mat-cell *matCellDef="let teller">{{ teller.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Teller Name' | translate }} </th>
-        <td mat-cell *matCellDef="let teller"> {{ teller.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Teller Name' | translate }}</th>
+        <td mat-cell *matCellDef="let teller">{{ teller.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let teller">
           <div [className]="teller.status === 'ACTIVE' ? 'true' : 'false'">
-            <fa-icon matTooltip="{{ teller.status === 'ACTIVE' ? ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{
+                teller.status === 'ACTIVE'
+                  ? ('labels.inputs.Active' | translate)
+                  : ('labels.catalogs.Inactive' | translate)
+              }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="startDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Started On' | translate }} </th>
-        <td mat-cell *matCellDef="let teller"> {{ teller.startDate  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Started On' | translate }}</th>
+        <td mat-cell *matCellDef="let teller">{{ teller.startDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let teller" (click)="$event.stopPropagation()">
-          <button mat-button color="primary" [routerLink]="[teller.id,'cashiers']">
+          <button mat-button color="primary" [routerLink]="[teller.id, 'cashiers']">
             <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View Cashiers' | translate }}
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/organization/tellers/view-teller/view-teller.component.html b/src/app/organization/tellers/view-teller/view-teller.component.html
index 2557a911fe..596bd12198 100644
--- a/src/app/organization/tellers/view-teller/view-teller.component.html
+++ b/src/app/organization/tellers/view-teller/view-teller.component.html
@@ -10,13 +10,9 @@
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
           {{ 'labels.inputs.Teller Name' | translate }}
         </div>
@@ -64,11 +60,7 @@
         <div fxFlex="50%">
           {{ tellerData.status | titlecase }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/organization/working-days/working-days.component.html b/src/app/organization/working-days/working-days.component.html
index 09d679af52..4a1b6c8098 100644
--- a/src/app/organization/working-days/working-days.component.html
+++ b/src/app/organization/working-days/working-days.component.html
@@ -1,17 +1,12 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="workingDaysForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #workingDaysFormRef fxLayout="column">
-
           <div fxLayout="row" fxLayout.lt-md="column">
             <mat-label fxFlex="50%" class="mat-h4">{{ 'labels.inputs.Working Days' | translate }}</mat-label>
             <div fxFlex="50%" fxLayout="column" formArrayName="recurrence">
-              <div *ngFor="let day of recurrence.controls; let i = index;">
+              <div *ngFor="let day of recurrence.controls; let i = index">
                 <mat-checkbox labelPosition="after" [formControlName]="i">
                   {{ weekDays[i].name }}
                 </mat-checkbox>
@@ -22,7 +17,10 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Payments due on non working days' | translate }}</mat-label>
             <mat-select formControlName="repaymentRescheduleType">
-              <mat-option *ngFor="let repaymentRescheduleType of repaymentRescheduleTypeData" [value]="repaymentRescheduleType.id">
+              <mat-option
+                *ngFor="let repaymentRescheduleType of repaymentRescheduleTypeData"
+                [value]="repaymentRescheduleType.id"
+              >
                 {{ repaymentRescheduleType.value }}
               </mat-option>
             </mat-select>
@@ -31,29 +29,44 @@
           <mat-checkbox labelPosition="before" formControlName="extendTermForDailyRepayments">
             {{ 'labels.inputs.Loans daily repayment schedule' | translate }}
           </mat-checkbox>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="workingDaysForm.pristine" *mifosxHasPermission="'UPDATE_WORKINGDAYS'">{{ 'labels.buttons.Submit' | translate }}</button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="workingDaysForm.pristine"
+          *mifosxHasPermission="'UPDATE_WORKINGDAYS'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateWorkingDaysFormRef let-data let-popover="popover">
   <h2>{{ 'labels.heading.Working Days' | translate }}</h2>
-  <p class="mw400">{{ 'labels.text.Click (Define Working Days)' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243212/Working+Days" target="_blank">{{ 'labels.inputs.Working Days' | translate }}</a></p>
+  <p class="mw400">
+    {{ 'labels.text.Click (Define Working Days)' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243212/Working+Days" target="_blank">{{
+      'labels.inputs.Working Days' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{ 'labels.buttons.Define Working Days' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{ 'labels.buttons.Next Step' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Define Working Days' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next Step' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/charges/charges.component.html b/src/app/products/charges/charges.component.html
index e2d42339c3..0aec8986c8 100644
--- a/src/app/products/charges/charges.component.html
+++ b/src/app/products/charges/charges.component.html
@@ -2,121 +2,169 @@
   <div #buttonCreateCharge class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{"labels.text.Create Charge" | translate}}
+      {{ 'labels.text.Create Charge' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex fxFlex="68%">
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
     <mat-form-field fxFlex fxFlex="28%">
-      <mat-select placeholder="{{'labels.inputs.Filter' | translate}}" (selectionChange)="filterByAppliesTo($event.value)">
+      <mat-select
+        placeholder="{{ 'labels.inputs.Filter' | translate }}"
+        (selectionChange)="filterByAppliesTo($event.value)"
+      >
         <mat-option *ngFor="let chargeAppliesTo of chargeAppliesToOptions" [value]="chargeAppliesTo.id">
-          {{ chargeAppliesTo.value | translateKey:'catalogs' }}
+          {{ chargeAppliesTo.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
 
   <div #chargesTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Name" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="chargeAppliesTo">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Applies To" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeAppliesTo.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Applies To' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeAppliesTo.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Time" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Time' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Calculation" | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Calculation' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Amount" | translate}} </th>
-        <td mat-cell *matCellDef="let charge" class="r-amount"> {{ charge.amount | formatNumber }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let charge" class="r-amount">{{ charge.amount | formatNumber }}</td>
       </ng-container>
 
       <ng-container matColumnDef="penalty">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.commons.Is" | translate}}
-          {{"labels.inputs.Penalty" | translate}}? </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.commons.Is' | translate }} {{ 'labels.inputs.Penalty' | translate }}?
+        </th>
         <td mat-cell *matCellDef="let charge" class="center">
-          <fa-icon *ngIf="charge.penalty" icon="check-circle" size="lg" class="ispenalty" matTooltip="{{ 'tooltips.Yes' | translate }}"
-            matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!charge.penalty" icon="times-circle" size="lg" class="nopenalty" matTooltip="{{ 'tooltips.No' | translate }}"
-            matTooltipPosition="right"></fa-icon>
+          <fa-icon
+            *ngIf="charge.penalty"
+            icon="check-circle"
+            size="lg"
+            class="ispenalty"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!charge.penalty"
+            icon="times-circle"
+            size="lg"
+            class="nopenalty"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="active">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.commons.Is" | translate}}
-          {{"labels.status.Active" | translate}}? </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.commons.Is' | translate }} {{ 'labels.status.Active' | translate }}?
+        </th>
         <td mat-cell *matCellDef="let charge" class="center">
           <div [className]="charge.active === true ? 'true' : 'false'">
-            <fa-icon matTooltip="{{ charge.active === true ? ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}" matTooltipPosition="right"
-              icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{
+                charge.active === true ? ('labels.inputs.Active' | translate) : ('labels.catalogs.Inactive' | translate)
+              }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateCharge let-popover="popover">
-  <h2>{{"labels.text.Create Charge" | translate}}</h2>
-  <p class="mw300">{{"labels.text.Supports Loan charges, Savings & deposits" | translate}}</p>
+  <h2>{{ 'labels.text.Create Charge' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Supports Loan charges, Savings & deposits' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{"labels.heading.Search bar to filter charges." | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter charges.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateButtonCreateCharge,buttonCreateCharge , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateChargesTable,chargesTable, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateCharge, buttonCreateCharge, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateChargesTable, chargesTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateChargesTable let-popover="popover">
-  <h4 class="mw300">{{"labels.heading.List of charges in the organization. For more details click" | translate}}: <a
-      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/72908813/Charges" target="_blank">{{'labels.heading.Charges' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of charges in the organization. For more details click' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/72908813/Charges" target="_blank">{{
+      'labels.heading.Charges' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/charges/create-charge/create-charge.component.html b/src/app/products/charges/create-charge/create-charge.component.html
index b9dfcb516d..de19c1ae28 100644
--- a/src/app/products/charges/create-charge/create-charge.component.html
+++ b/src/app/products/charges/create-charge/create-charge.component.html
@@ -1,164 +1,207 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="chargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Charge Applies To" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Applies To' | translate }}</mat-label>
             <mat-select required formControlName="chargeAppliesTo">
-              <mat-option *ngFor="let chargeAppliesTo of chargesTemplateData.chargeAppliesToOptions"
-                [value]="chargeAppliesTo.id">
-                {{ chargeAppliesTo.value | translateKey:'catalogs' }}
+              <mat-option
+                *ngFor="let chargeAppliesTo of chargesTemplateData.chargeAppliesToOptions"
+                [value]="chargeAppliesTo.id"
+              >
+                {{ chargeAppliesTo.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeForm.controls.chargeAppliesTo.hasError('required')">
-              {{"labels.inputs.Charge Applies To" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge Applies To' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <div *ngIf="chargeForm.controls.chargeAppliesTo.value" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%"
-            fxLayout.lt-md="column">
-
+          <div
+            *ngIf="chargeForm.controls.chargeAppliesTo.value"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayoutGap="2%"
+            fxLayout.lt-md="column"
+          >
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Charge Name" | translate}}</mat-label>
-              <input matInput required formControlName="name">
+              <mat-label>{{ 'labels.inputs.Charge Name' | translate }}</mat-label>
+              <input matInput required formControlName="name" />
               <mat-error *ngIf="chargeForm.controls.name.hasError('required')">
-                {{"labels.inputs.Charge Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Charge Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
               <mat-select required formControlName="currencyCode">
                 <mat-option *ngFor="let currency of chargesTemplateData.currencyOptions" [value]="currency.code">
                   {{ currency.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="chargeForm.controls.currencyCode.hasError('required')">
-                {{"labels.inputs.Currency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Charge Time Type" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Time Type' | translate }}</mat-label>
               <mat-select required formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTimeType of chargeTimeTypeData" [value]="chargeTimeType.id">
-                  {{ chargeTimeType.value | translateKey:'catalogs' }}
+                  {{ chargeTimeType.value | translateKey: 'catalogs' }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="chargeForm.controls.chargeTimeType.hasError('required')">
-                {{"labels.inputs.Charge Time Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Charge Time Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Charge Calculation Type" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Calculation Type' | translate }}</mat-label>
               <mat-select required formControlName="chargeCalculationType">
-                <mat-option *ngFor="let chargeCalculationType of filteredChargeCalculationType()"
-                  [value]="chargeCalculationType.id">
-                  {{ chargeCalculationType.value | translateKey:'catalogs' }}
+                <mat-option
+                  *ngFor="let chargeCalculationType of filteredChargeCalculationType()"
+                  [value]="chargeCalculationType.id"
+                >
+                  {{ chargeCalculationType.value | translateKey: 'catalogs' }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="chargeForm.controls.chargeCalculationType.hasError('required')">
-                {{"labels.inputs.Charge Calculation Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Charge Calculation Type' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="chargeForm.controls.chargeAppliesTo.value === 1" fxFlex="48%">
-              <mat-label>{{"labels.inputs.Charge Payment Mode" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Payment Mode' | translate }}</mat-label>
               <mat-select required formControlName="chargePaymentMode">
-                <mat-option *ngFor="let chargePaymentMode of chargesTemplateData.chargePaymetModeOptions"
-                  [value]="chargePaymentMode.id">
-                  {{ chargePaymentMode.value | translateKey:'catalogs' }}
+                <mat-option
+                  *ngFor="let chargePaymentMode of chargesTemplateData.chargePaymetModeOptions"
+                  [value]="chargePaymentMode.id"
+                >
+                  {{ chargePaymentMode.value | translateKey: 'catalogs' }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="chargeForm.controls.chargePaymentMode.hasError('required')">
-                {{"labels.inputs.Charge Payment Mode" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Charge Payment Mode' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <div fxFlex="48%" *ngIf="chargeForm.controls.chargeTimeType.value === 9" class="add-fee-frequency-wrapper">
               <mat-checkbox labelPosition="before" formControlName="addFeeFrequency">
-                {{"labels.inputs.Add Fee Frequency" | translate}}
+                {{ 'labels.inputs.Add Fee Frequency' | translate }}
               </mat-checkbox>
             </div>
 
             <mat-form-field
               *ngIf="chargeForm.controls.chargeTimeType.value === 9 && chargeForm.controls.addFeeFrequency.value"
-              fxFlex="48%">
-              <mat-label>{{"labels.inputs.Frequency Interval" | translate}}</mat-label>
-              <input matInput required formControlName="feeInterval">
+              fxFlex="48%"
+            >
+              <mat-label>{{ 'labels.inputs.Frequency Interval' | translate }}</mat-label>
+              <input matInput required formControlName="feeInterval" />
               <mat-error *ngIf="chargeForm.controls.feeInterval.hasError('required')">
-                {{"labels.inputs.Frequency Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Frequency Interval' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
               <mat-error *ngIf="chargeForm.controls.feeInterval.hasError('pattern')">
-                {{"labels.inputs.Frequency Interval" | translate}} <strong>{{"labels.commons.must be a positive integer" | translate}}</strong>
+                {{ 'labels.inputs.Frequency Interval' | translate }}
+                <strong>{{ 'labels.commons.must be a positive integer' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field
               *ngIf="chargeForm.controls.chargeTimeType.value === 9 && chargeForm.controls.addFeeFrequency.value"
-              fxFlex="48%">
-              <mat-label>{{"labels.inputs.Charge Frequency" | translate}}</mat-label>
+              fxFlex="48%"
+            >
+              <mat-label>{{ 'labels.inputs.Charge Frequency' | translate }}</mat-label>
               <mat-select required formControlName="feeFrequency">
-                <mat-option *ngFor="let feeFrequency of chargesTemplateData.feeFrequencyOptions"
-                  [value]="feeFrequency.id">
-                  {{ feeFrequency.value | translateKey:'catalogs' }}
+                <mat-option
+                  *ngFor="let feeFrequency of chargesTemplateData.feeFrequencyOptions"
+                  [value]="feeFrequency.id"
+                >
+                  {{ feeFrequency.value | translateKey: 'catalogs' }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="chargeForm.controls.feeFrequency.hasError('required')">
-                {{"labels.inputs.Charge Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Charge Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field (click)="dueDatePicker.open()"
+            <mat-form-field
+              (click)="dueDatePicker.open()"
               *ngIf="chargeForm.controls.chargeTimeType.value === 6 || chargeForm.controls.chargeTimeType.value === 7"
-              fxFlex="48%">
-              <mat-label>{{"labels.inputs.Due Date" | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-                formControlName="feeOnMonthDay">
+              fxFlex="48%"
+            >
+              <mat-label>{{ 'labels.inputs.Due Date' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="dueDatePicker"
+                required
+                formControlName="feeOnMonthDay"
+              />
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="chargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{"labels.inputs.Due Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex="48%"
-              *ngIf="chargeForm.controls.chargeTimeType.value === 7 || chargeForm.controls.chargeTimeType.value === 11">
-              <mat-label>{{"labels.inputs.Repeat Every" | translate}} ({{ repeatEveryLabel }})</mat-label>
-              <input matInput required formControlName="feeInterval">
+            <mat-form-field
+              fxFlex="48%"
+              *ngIf="chargeForm.controls.chargeTimeType.value === 7 || chargeForm.controls.chargeTimeType.value === 11"
+            >
+              <mat-label>{{ 'labels.inputs.Repeat Every' | translate }} ({{ repeatEveryLabel }})</mat-label>
+              <input matInput required formControlName="feeInterval" />
               <mat-error *ngIf="chargeForm.controls.feeInterval.hasError('required')">
-                {{"labels.inputs.Repeat Every" | translate}} ({{ repeatEveryLabel }}) {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Repeat Every' | translate }} ({{ repeatEveryLabel }})
+                {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
               <mat-error
-                *ngIf="(chargeForm.controls.feeInterval.hasError('min') || chargeForm.controls.feeInterval.hasError('max')) && !chargeForm.controls.feeInterval.hasError('pattern')">
-                {{"labels.inputs.Repeat Every" | translate}} ({{ repeatEveryLabel }}) <strong>{{"labels.commons.must be between 1 and 12" | translate}}</strong>
+                *ngIf="
+                  (chargeForm.controls.feeInterval.hasError('min') ||
+                    chargeForm.controls.feeInterval.hasError('max')) &&
+                  !chargeForm.controls.feeInterval.hasError('pattern')
+                "
+              >
+                {{ 'labels.inputs.Repeat Every' | translate }} ({{ repeatEveryLabel }})
+                <strong>{{ 'labels.commons.must be between 1 and 12' | translate }}</strong>
               </mat-error>
               <mat-error *ngIf="chargeForm.controls.feeInterval.hasError('pattern')">
-                {{"labels.inputs.Repeat Every" | translate}} ({{ repeatEveryLabel }}) <strong>{{"labels.commons.must be a positive integer" | translate}}</strong>
+                {{ 'labels.inputs.Repeat Every' | translate }} ({{ repeatEveryLabel }})
+                <strong>{{ 'labels.commons.must be a positive integer' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-              <input matInput required formControlName="amount">
+              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+              <input matInput required formControlName="amount" />
               <mat-error *ngIf="chargeForm.controls.amount.hasError('required')">
-                {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
               <mat-error *ngIf="chargeForm.controls.amount.hasError('pattern') && currencyDecimalPlaces !== undefined">
-                {{"labels.inputs.Amount" | translate}} {{"labels.commons.must be" | translate}}  <strong>{{"labels.commons.a positive number with" | translate}} {{ currencyDecimalPlaces ? 'up to ' +
-                  currencyDecimalPlaces : 'no' }} {{"labels.inputs.decimal places" | translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.must be' | translate }}
+                <strong
+                  >{{ 'labels.commons.a positive number with' | translate }}
+                  {{ currencyDecimalPlaces ? 'up to ' + currencyDecimalPlaces : 'no' }}
+                  {{ 'labels.inputs.decimal places' | translate }}</strong
+                >
               </mat-error>
               <mat-error *ngIf="chargeForm.controls.amount.hasError('pattern') && currencyDecimalPlaces === undefined">
-                {{"labels.inputs.Amount" | translate}} {{"labels.commons.must be" | translate}}  <strong>{{"labels.commons.a positive number" | translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.must be' | translate }}
+                <strong>{{ 'labels.commons.a positive number' | translate }}</strong>
               </mat-error>
             </mat-form-field>
             <!--
@@ -168,57 +211,58 @@
    * In shares case: Only for charge time type: SHARE_PURCHASE and SHARE_REDEEM and with charge calculation type as % amount only
   -->
             <mat-form-field fxFlex="48%" *ngIf="showMinMaxCap()">
-              <mat-label>{{"labels.inputs.Minimum Charge Cap" | translate}}</mat-label>
-              <input matInput formControlName="minCap">
+              <mat-label>{{ 'labels.inputs.Minimum Charge Cap' | translate }}</mat-label>
+              <input matInput formControlName="minCap" />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" *ngIf="showMinMaxCap()">
-              <mat-label>{{"labels.inputs.Maximum Charge Cap" | translate}}</mat-label>
-              <input matInput formControlName="maxCap">
+              <mat-label>{{ 'labels.inputs.Maximum Charge Cap' | translate }}</mat-label>
+              <input matInput formControlName="maxCap" />
             </mat-form-field>
 
             <div fxFlex="48%" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column">
               <div fxFlex="50%" class="active-wrapper">
                 <mat-checkbox labelPosition="before" formControlName="active">
-                  {{"labels.status.Active" | translate}}
+                  {{ 'labels.status.Active' | translate }}
                 </mat-checkbox>
               </div>
 
               <div fxFlex="50%" class="penalty-wrapper">
                 <mat-checkbox labelPosition="before" formControlName="penalty">
-                  {{"labels.commons.Is" | translate}} {{"labels.inputs.Penalty" | translate}}
+                  {{ 'labels.commons.Is' | translate }} {{ 'labels.inputs.Penalty' | translate }}
                 </mat-checkbox>
               </div>
             </div>
 
-            <mifosx-gl-account-selector fxFlex="48%" *ngIf="chargeForm.controls.chargeAppliesTo.value === 3"
+            <mifosx-gl-account-selector
+              fxFlex="48%"
+              *ngIf="chargeForm.controls.chargeAppliesTo.value === 3"
               [inputFormControl]="chargeForm.controls.incomeAccountId"
-              [glAccountList]="incomeAndLiabilityAccountData" [inputLabel]="'Income from Charge'">
+              [glAccountList]="incomeAndLiabilityAccountData"
+              [inputLabel]="'Income from Charge'"
+            >
             </mifosx-gl-account-selector>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{"labels.inputs.Tax Group" | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
               <mat-select formControlName="taxGroupId">
                 <mat-option *ngFor="let taxGroup of chargesTemplateData.taxGroupOptions" [value]="taxGroup.id">
                   {{ taxGroup.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-
           </div>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!chargeForm.valid"
-          *mifosxHasPermission="'CREATE_CHARGE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!chargeForm.valid" *mifosxHasPermission="'CREATE_CHARGE'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/charges/edit-charge/edit-charge.component.html b/src/app/products/charges/edit-charge/edit-charge.component.html
index 726ae25c43..39a48ea43d 100644
--- a/src/app/products/charges/edit-charge/edit-charge.component.html
+++ b/src/app/products/charges/edit-charge/edit-charge.component.html
@@ -1,91 +1,92 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="chargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Charge Applies To" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Applies To' | translate }}</mat-label>
             <mat-select required formControlName="chargeAppliesTo">
-              <mat-option *ngFor="let chargeAppliesTo of chargeData.chargeAppliesToOptions"
-                [value]="chargeAppliesTo.id">
-                {{ chargeAppliesTo.value | translateKey:'catalogs' }}
+              <mat-option
+                *ngFor="let chargeAppliesTo of chargeData.chargeAppliesToOptions"
+                [value]="chargeAppliesTo.id"
+              >
+                {{ chargeAppliesTo.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
 
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" style="margin-top:10px;">
-
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" style="margin-top: 10px">
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
-            <input matInput required autofocus formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required autofocus formControlName="name" />
             <mat-error *ngIf="chargeForm.controls.name.hasError('required')">
-              {{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of chargeData.currencyOptions" [value]="currency.code">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeForm.controls.currencyCode.hasError('required')">
-              {{"labels.inputs.Currency" | translate}} {{"labels.inputs.Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.inputs.Type' | translate }}
+              {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
-
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Charge Time Type" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Time Type' | translate }}</mat-label>
             <mat-select required formControlName="chargeTimeType">
               <mat-option *ngFor="let chargeTime of chargeTimeTypeOptions" [value]="chargeTime.id">
-                {{ chargeTime.value | translateKey:'catalogs' }}
+                {{ chargeTime.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeForm.controls.chargeTimeType.hasError('required')">
-              {{"labels.inputs.Charge Time Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge Time Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
-
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Charge Calculation" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
             <mat-select required formControlName="chargeCalculationType">
               <mat-option *ngFor="let chargeCalculation of chargeCalculationTypeOptions" [value]="chargeCalculation.id">
-                {{ chargeCalculation.value | translateKey:'catalogs' }}
+                {{ chargeCalculation.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeForm.controls.chargeCalculationType.hasError('required')">
-              {{"labels.inputs.Charge Calculation Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge Calculation Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="chargePaymentMode">
-            <mat-label>{{"labels.inputs.Charge Payment By" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Payment By' | translate }}</mat-label>
             <mat-select required formControlName="chargePaymentMode">
-              <mat-option *ngFor="let chargePaymentMode of chargeData.chargePaymetModeOptions"
-                [value]="chargePaymentMode.id">
-                {{ chargePaymentMode.value | translateKey:'catalogs' }}
+              <mat-option
+                *ngFor="let chargePaymentMode of chargeData.chargePaymetModeOptions"
+                [value]="chargePaymentMode.id"
+              >
+                {{ chargePaymentMode.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeForm.controls.chargePaymentMode.hasError('required')">
-              {{"labels.inputs.Charge Payment Mode" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge Payment Mode' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Amount" | translate}}</mat-label>
-            <input matInput required autofocus type="text" formControlName="amount">
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
+            <input matInput required autofocus type="text" formControlName="amount" />
             <mat-error *ngIf="chargeForm.controls.amount.hasError('required')">
-              {{"labels.inputs.Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           <!--
@@ -94,24 +95,57 @@
    * In saving case: Only for 1. charge time type is "withdrawlfee" or "savings no activity fee" with charge calculation type as "% amount"
    * In shares case: Only for charge time type: SHARE_PURCHASE and SHARE_REDEEM and with charge calculation type as % amount only
   -->
-          <mat-form-field fxFlex="48%"
-            *ngIf="(chargeForm.controls.chargeAppliesTo.value === 1 && (chargeForm.controls.chargeCalculationType.value === 2 || chargeForm.controls.chargeCalculationType.value === 3 || chargeForm.controls.chargeCalculationType.value === 4 || chargeForm.controls.chargeCalculationType.value===5)) || (chargeForm.controls.chargeAppliesTo.value === 2 && (chargeForm.controls.chargeTimeType.value === 16 || chargeForm.controls.chargeTimeType.value === 5)&&(chargeForm.controls.chargeCalculationType.value === 2)) || (chargeForm.controls.chargeAppliesTo.value === 4 && (chargeForm.controls.chargeTimeType.value===14 || chargeForm.controls.chargeTimeType.value===15) && chargeForm.controls.chargeCalculationType.value === 2)">
-            <mat-label>{{"labels.inputs.Minimum Charge Cap" | translate}}</mat-label>
-            <input matInput autofocus formControlName="minCap">
+          <mat-form-field
+            fxFlex="48%"
+            *ngIf="
+              (chargeForm.controls.chargeAppliesTo.value === 1 &&
+                (chargeForm.controls.chargeCalculationType.value === 2 ||
+                  chargeForm.controls.chargeCalculationType.value === 3 ||
+                  chargeForm.controls.chargeCalculationType.value === 4 ||
+                  chargeForm.controls.chargeCalculationType.value === 5)) ||
+              (chargeForm.controls.chargeAppliesTo.value === 2 &&
+                (chargeForm.controls.chargeTimeType.value === 16 || chargeForm.controls.chargeTimeType.value === 5) &&
+                chargeForm.controls.chargeCalculationType.value === 2) ||
+              (chargeForm.controls.chargeAppliesTo.value === 4 &&
+                (chargeForm.controls.chargeTimeType.value === 14 || chargeForm.controls.chargeTimeType.value === 15) &&
+                chargeForm.controls.chargeCalculationType.value === 2)
+            "
+          >
+            <mat-label>{{ 'labels.inputs.Minimum Charge Cap' | translate }}</mat-label>
+            <input matInput autofocus formControlName="minCap" />
           </mat-form-field>
-          <mat-form-field fxFlex="48%"
-            *ngIf="(chargeForm.controls.chargeAppliesTo.value === 1 && (chargeForm.controls.chargeCalculationType.value === 2 || chargeForm.controls.chargeCalculationType.value === 3 || chargeForm.controls.chargeCalculationType.value === 4 || chargeForm.controls.chargeCalculationType.value===5)) || (chargeForm.controls.chargeAppliesTo.value === 2 && (chargeForm.controls.chargeTimeType.value === 16 || chargeForm.controls.chargeTimeType.value === 5)&&(chargeForm.controls.chargeCalculationType.value === 2)) || (chargeForm.controls.chargeAppliesTo.value === 4 && (chargeForm.controls.chargeTimeType.value===14 || chargeForm.controls.chargeTimeType.value===15) && chargeForm.controls.chargeCalculationType.value === 2)">
-            <mat-label>{{"labels.inputs.Maximum Charge Cap" | translate}}</mat-label>
-            <input matInput autofocus formControlName="maxCap">
+          <mat-form-field
+            fxFlex="48%"
+            *ngIf="
+              (chargeForm.controls.chargeAppliesTo.value === 1 &&
+                (chargeForm.controls.chargeCalculationType.value === 2 ||
+                  chargeForm.controls.chargeCalculationType.value === 3 ||
+                  chargeForm.controls.chargeCalculationType.value === 4 ||
+                  chargeForm.controls.chargeCalculationType.value === 5)) ||
+              (chargeForm.controls.chargeAppliesTo.value === 2 &&
+                (chargeForm.controls.chargeTimeType.value === 16 || chargeForm.controls.chargeTimeType.value === 5) &&
+                chargeForm.controls.chargeCalculationType.value === 2) ||
+              (chargeForm.controls.chargeAppliesTo.value === 4 &&
+                (chargeForm.controls.chargeTimeType.value === 14 || chargeForm.controls.chargeTimeType.value === 15) &&
+                chargeForm.controls.chargeCalculationType.value === 2)
+            "
+          >
+            <mat-label>{{ 'labels.inputs.Maximum Charge Cap' | translate }}</mat-label>
+            <input matInput autofocus formControlName="maxCap" />
           </mat-form-field>
 
-          <mifosx-gl-account-selector fxFlex="48%" *ngIf="showGLAccount"
+          <mifosx-gl-account-selector
+            fxFlex="48%"
+            *ngIf="showGLAccount"
             [inputFormControl]="chargeForm.controls.incomeAccountId"
-            [glAccountList]="chargeData.incomeOrLiabilityAccountOptions.incomeAccountOptions" [required]="true" [inputLabel]="'Income from Charge'">
+            [glAccountList]="chargeData.incomeOrLiabilityAccountOptions.incomeAccountOptions"
+            [required]="true"
+            [inputLabel]="'Income from Charge'"
+          >
           </mifosx-gl-account-selector>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Tax Group" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
             <mat-select *ngIf="chargeData.taxGroup" formControlName="taxGroupId">
               <mat-option *ngFor="let taxGroup of chargeData.taxGroupOptions" [value]="taxGroup.id">
                 {{ taxGroup.name }}
@@ -126,59 +160,61 @@
           </mat-form-field>
 
           <div fxFlex="48%" class="password-never-expires-wrapper checkbox" *ngIf="addFeeFrequency">
-            <mat-checkbox labelPosition="before" [checked]="addFeeFrequency && showFeeOptions"
-              (change)="getFeeFrequency($event.checked)">
-              {{"labels.inputs.Add Fee Frequency" | translate}}
+            <mat-checkbox
+              labelPosition="before"
+              [checked]="addFeeFrequency && showFeeOptions"
+              (change)="getFeeFrequency($event.checked)"
+            >
+              {{ 'labels.inputs.Add Fee Frequency' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="addFeeFrequency && showFeeOptions">
-            <mat-label>{{"labels.inputs.Frequency Interval" | translate}}</mat-label>
-            <input matInput required autofocus type="text" formControlName="feeInterval">
+            <mat-label>{{ 'labels.inputs.Frequency Interval' | translate }}</mat-label>
+            <input matInput required autofocus type="text" formControlName="feeInterval" />
             <mat-error *ngIf="chargeForm.controls.feeInterval.hasError('required')">
-              {{"labels.inputs.Frequency Interval" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Frequency Interval' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="addFeeFrequency && showFeeOptions">
-            <mat-label>{{"labels.inputs.Charge Frequency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge Frequency' | translate }}</mat-label>
             <mat-select required formControlName="feeFrequency">
               <mat-option *ngFor="let chargeFrequency of chargeData.feeFrequencyOptions" [value]="chargeFrequency.id">
-                {{ chargeFrequency.value | translateKey:'catalogs' }}
+                {{ chargeFrequency.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="chargeForm.controls.feeFrequency.hasError('required')">
-              {{"labels.inputs.Add Fee Frequency" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Add Fee Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" style="margin-top:10px;">
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" style="margin-top: 10px">
           <div fxFlex="48%" class="password-never-expires-wrapper">
             <mat-checkbox labelPosition="before" formControlName="active">
-              {{"labels.status.Active" | translate}}
+              {{ 'labels.status.Active' | translate }}
             </mat-checkbox>
           </div>
 
           <div fxFlex="48%" class="send-password-to-email-wrapper" *ngIf="showPenalty">
             <mat-checkbox labelPosition="before" formControlName="penalty">
-              {{"labels.commons.Is" | translate}} {{"labels.inputs.Penalty" | translate}}
+              {{ 'labels.commons.Is' | translate }} {{ 'labels.inputs.Penalty' | translate }}
             </mat-checkbox>
           </div>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!chargeForm.valid"
-          *mifosxHasPermission="'UPDATE_CHARGE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!chargeForm.valid" *mifosxHasPermission="'UPDATE_CHARGE'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/charges/view-charge/view-charge.component.html b/src/app/products/charges/view-charge/view-charge.component.html
index b5bd56c97a..3be4cb1dd5 100644
--- a/src/app/products/charges/view-charge/view-charge.component.html
+++ b/src/app/products/charges/view-charge/view-charge.component.html
@@ -1,24 +1,20 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{"labels.heading.Edit" | translate}}
+    {{ 'labels.heading.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCharge()" *mifosxHasPermission="'DELETE_CHARGE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{"labels.heading.Delete" | translate}}
+    {{ 'labels.heading.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Charge Name" | translate}}
+          {{ 'labels.inputs.Charge Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,15 +22,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Charge Applies To" | translate}}
+          {{ 'labels.inputs.Charge Applies To' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeAppliesTo.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeAppliesTo.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Penalty" | translate}}
+          {{ 'labels.inputs.Penalty' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -42,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate}}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -50,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate}}
+          {{ 'labels.inputs.Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -58,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="minCap">
-          {{"labels.inputs.Minimum Charge Cap" | translate}}
+          {{ 'labels.inputs.Minimum Charge Cap' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="minCap">
@@ -66,7 +62,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="maxCap">
-          {{"labels.inputs.Maximum Charge Cap" | translate}}
+          {{ 'labels.inputs.Maximum Charge Cap' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="maxCap">
@@ -74,31 +70,31 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Charge Time Type" | translate}}
+          {{ 'labels.inputs.Charge Time Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeTimeType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Charge Calculation Type" | translate}}
+          {{ 'labels.inputs.Charge Calculation Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeCalculationType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Charge Payment Mode" | translate}}
+          {{ 'labels.inputs.Charge Payment Mode' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargePaymentMode.value | translateKey:'catalogs' }}
+          {{ chargeData.chargePaymentMode.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.status.Active" | translate}}
+          {{ 'labels.status.Active' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -106,41 +102,47 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="chargeData.chargeTimeType.id === 9 && chargeData.feeFrequency">
-          {{"labels.inputs.Add Fee Frequency" | translate}}
+          {{ 'labels.inputs.Add Fee Frequency' | translate }}
         </div>
 
-        <div fxFlex="50%"
-          *ngIf="chargeData.chargeTimeType.id === 9 && chargeData.feeFrequency && chargeData.feeFrequency">
-          {{ chargeData.feeFrequency.value | translateKey:'catalogs' }}
+        <div
+          fxFlex="50%"
+          *ngIf="chargeData.chargeTimeType.id === 9 && chargeData.feeFrequency && chargeData.feeFrequency"
+        >
+          {{ chargeData.feeFrequency.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="chargeData.chargeTimeType.id === 9 && chargeData.feeInterval">
-          {{"labels.inputs.Frequency Interval" | translate}}
+          {{ 'labels.inputs.Frequency Interval' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="chargeData.chargeTimeType.id === 9 && chargeData.feeInterval">
           {{ chargeData.feeInterval }}
         </div>
 
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income From Charges'" *ngIf="chargeData.incomeOrLiabilityAccount"
-            [glAccount]="chargeData.incomeOrLiabilityAccount" [withTitle]="'50%'">
+        <mifosx-gl-account-display
+          fxFlex="100%"
+          [accountTitle]="'Income From Charges'"
+          *ngIf="chargeData.incomeOrLiabilityAccount"
+          [glAccount]="chargeData.incomeOrLiabilityAccount"
+          [withTitle]="'50%'"
+        >
         </mifosx-gl-account-display>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="chargeData.taxGroup">
-          {{"labels.inputs.Tax Group" | translate}}
+          {{ 'labels.inputs.Tax Group' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="chargeData.taxGroup">
           {{ chargeData.taxGroup.name }}
         </div>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/collaterals/collaterals.component.html b/src/app/products/collaterals/collaterals.component.html
index ec415c4c49..c997c7ef42 100644
--- a/src/app/products/collaterals/collaterals.component.html
+++ b/src/app/products/collaterals/collaterals.component.html
@@ -1,52 +1,48 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.text.Create Collateral" | translate}}
+    {{ 'labels.text.Create Collateral' | translate }}
   </button>
 </div>
 
 <div class="container">
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
   <div class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Name" | translate}} </th>
-        <td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let collateral">{{ collateral.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="quality">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type/Quality" | translate}} </th>
-        <td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type/Quality' | translate }}</th>
+        <td mat-cell *matCellDef="let collateral">{{ collateral.quality }}</td>
       </ng-container>
 
       <ng-container matColumnDef="basePrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Base Price" | translate}} </th>
-        <td mat-cell *matCellDef="let collateral"> {{ collateral.basePrice }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Base Price' | translate }}</th>
+        <td mat-cell *matCellDef="let collateral">{{ collateral.basePrice }}</td>
       </ng-container>
 
       <ng-container matColumnDef="basePercentage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Base Percentage" | translate}} </th>
-        <td mat-cell *matCellDef="let collateral"> {{ collateral.pctToBase }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Base Percentage' | translate }}</th>
+        <td mat-cell *matCellDef="let collateral">{{ collateral.pctToBase }}</td>
       </ng-container>
 
       <ng-container matColumnDef="unitType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Unit Type" | translate}} </th>
-        <td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Unit Type' | translate }}</th>
+        <td mat-cell *matCellDef="let collateral">{{ collateral.unitType }}</td>
       </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
-      </table>
-
-      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-    </div>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+    </table>
 
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
   </div>
+</div>
diff --git a/src/app/products/collaterals/create-collateral/create-collateral.component.html b/src/app/products/collaterals/create-collateral/create-collateral.component.html
index 638e786dcb..eb2fd0a925 100644
--- a/src/app/products/collaterals/create-collateral/create-collateral.component.html
+++ b/src/app/products/collaterals/create-collateral/create-collateral.component.html
@@ -3,71 +3,74 @@
     <form [formGroup]="collateralForm" (ngSubmit)="submit()">
       <mat-card-content>
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="collateralForm.controls.name.hasError('required')">
-              {{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
-            <input matInput required formControlName="quality">
+            <mat-label>{{ 'labels.inputs.Type/Quality' | translate }}</mat-label>
+            <input matInput required formControlName="quality" />
             <mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
-              {{"labels.inputs.Type/Quality" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Type/Quality' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
-            <input matInput required formControlName="unitType">
+            <mat-label>{{ 'labels.inputs.Unit Type' | translate }}</mat-label>
+            <input matInput required formControlName="unitType" />
             <mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
-              {{"labels.inputs.Unit Type" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Unit Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
-            <input matInput required formControlName="basePrice">
+            <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
+            <input matInput required formControlName="basePrice" />
             <mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
-              {{"labels.inputs.Base Price" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Base Price' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Percentage to Base" | translate}}</mat-label>
-            <input matInput required formControlName="pctToBase">
+            <mat-label>{{ 'labels.inputs.Percentage to Base' | translate }}</mat-label>
+            <input matInput required formControlName="pctToBase" />
             <mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
-              {{"labels.inputs.Percentage to Base" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Percentage to Base' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.heading.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.heading.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currency">
               <mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
-              {{"labels.heading.Currency" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.heading.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
-          *mifosxHasPermission="'CREATE_CHARGE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!collateralForm.valid"
+          *mifosxHasPermission="'CREATE_CHARGE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/collaterals/edit-collateral/edit-collateral.component.html b/src/app/products/collaterals/edit-collateral/edit-collateral.component.html
index 3844735acd..8e9d62f059 100644
--- a/src/app/products/collaterals/edit-collateral/edit-collateral.component.html
+++ b/src/app/products/collaterals/edit-collateral/edit-collateral.component.html
@@ -3,77 +3,79 @@
     <form [formGroup]="collateralForm" (ngSubmit)="submit()">
       <mat-card-content>
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
-            <input matInput required autoFocus formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required autoFocus formControlName="name" />
             <mat-error *ngIf="collateralForm.controls.name.hasError('required')">
-              {{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" |translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
-            <input matInput required autoFocus formControlName="quality">
+            <mat-label>{{ 'labels.inputs.Type/Quality' | translate }}</mat-label>
+            <input matInput required autoFocus formControlName="quality" />
             <mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
-              {{"labels.inputs.Type/Quality" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Type/Quality' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
-            <input matInput required autoFocus formControlName="unitType">
+            <mat-label>{{ 'labels.inputs.Unit Type' | translate }}</mat-label>
+            <input matInput required autoFocus formControlName="unitType" />
             <mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
-              {{"labels.inputs.Unit Type" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Unit Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
-            <input matInput required autoFocus formControlName="basePrice">
+            <mat-label>{{ 'labels.inputs.Base Price' | translate }}</mat-label>
+            <input matInput required autoFocus formControlName="basePrice" />
             <mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
-              {{"labels.inputs.Base Price" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Base Price' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.inputs.Percentage to Base" | translate}}</mat-label>
-            <input matInput required autoFocus formControlName="pctToBase">
+            <mat-label>{{ 'labels.inputs.Percentage to Base' | translate }}</mat-label>
+            <input matInput required autoFocus formControlName="pctToBase" />
             <mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
-              {{"labels.inputs.Percentage to Base" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Percentage to Base' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{"labels.heading.Currency" | translate}}</mat-label>
+            <mat-label>{{ 'labels.heading.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currency">
               <mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
                 {{ currency.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
-              {{"labels.heading.Currency" | translate}} {{"labels.commons.is" | translate}}
-              <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.heading.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
-          *mifosxHasPermission="'UPDATE_CHARGE'">{{"labels.buttons.Submit" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!collateralForm.valid"
+          *mifosxHasPermission="'UPDATE_CHARGE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/collaterals/view-collateral/view-collateral.component.html b/src/app/products/collaterals/view-collateral/view-collateral.component.html
index 1609832492..cf20de46b1 100644
--- a/src/app/products/collaterals/view-collateral/view-collateral.component.html
+++ b/src/app/products/collaterals/view-collateral/view-collateral.component.html
@@ -1,21 +1,20 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <button mat-raised-button color="primary" [routerLink]="['edit']" >
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>
-        {{"labels.heading.Edit" | translate}}
-    </button>
-    <button mat-raised-button color="warn" (click)="deleteCollateral()" >
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>
-        {{"labels.heading.Delete" | translate}}
-    </button>
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    {{ 'labels.heading.Edit' | translate }}
+  </button>
+  <button mat-raised-button color="warn" (click)="deleteCollateral()">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    {{ 'labels.heading.Delete' | translate }}
+  </button>
 </div>
 
 <div class="container">
   <mat-card>
     <mat-card-content>
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Collateral Name" | translate}}
+          {{ 'labels.inputs.Collateral Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -23,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Type/Quality" | translate}}
+          {{ 'labels.inputs.Type/Quality' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -31,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Base Price" | translate}}
+          {{ 'labels.inputs.Base Price' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -39,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Base Percentage" | translate}}
+          {{ 'labels.inputs.Base Percentage' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -47,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Unit Type" | translate}}
+          {{ 'labels.inputs.Unit Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -55,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.heading.Currency" | translate}}
+          {{ 'labels.heading.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
diff --git a/src/app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component.html b/src/app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component.html
index 770b39c615..432fdacc90 100644
--- a/src/app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component.html
+++ b/src/app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component.html
@@ -1,69 +1,83 @@
 <h1 mat-dialog-title>{{ title }}</h1>
 
 <div mat-dialog-content [formGroup]="depositProductIncentiveForm" fxLayout="column">
-
   <mat-form-field>
-    <mat-label>{{'labels.inputs.Attribute' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Attribute' | translate }}</mat-label>
     <mat-select formControlName="attributeName" required>
       <mat-option *ngFor="let attributeName of attributeNameData" [value]="attributeName.id">
         {{ attributeName.value }}
       </mat-option>
     </mat-select>
     <mat-error>
-      {{'labels.inputs.Attribute' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+      {{ 'labels.inputs.Attribute' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{'labels.inputs.Condition' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Condition' | translate }}</mat-label>
     <mat-select formControlName="conditionType" required>
       <mat-option *ngFor="let conditionType of conditionTypeData" [value]="conditionType.id">
         {{ conditionType.value }}
       </mat-option>
     </mat-select>
     <mat-error>
-      {{'labels.inputs.Condition' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+      {{ 'labels.inputs.Condition' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field *ngIf="depositProductIncentiveForm.value.attributeName">
-    <mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
     <mat-select formControlName="attributeValue" *ngIf="depositProductIncentiveForm.value.attributeName !== 3" required>
       <mat-option *ngFor="let attributeValue of attributeValueData" [value]="attributeValue.id">
         {{ attributeValue.name }}
       </mat-option>
     </mat-select>
-    <input type="number" matInput formControlName="attributeValue" *ngIf="depositProductIncentiveForm.value.attributeName === 3" required>
+    <input
+      type="number"
+      matInput
+      formControlName="attributeValue"
+      *ngIf="depositProductIncentiveForm.value.attributeName === 3"
+      required
+    />
     <mat-error>
-      {{'labels.inputs.Value' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+      {{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
     <mat-select formControlName="incentiveType" required>
       <mat-option *ngFor="let incentiveType of incentiveTypeData" [value]="incentiveType.id">
         {{ incentiveType.value }}
       </mat-option>
     </mat-select>
     <mat-error>
-      {{'labels.inputs.Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+      {{ 'labels.inputs.Type' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>{{'labels.inputs.Interest' | translate}}</mat-label>
-    <input type="number" matInput formControlName="amount" required>
+    <mat-label>{{ 'labels.inputs.Interest' | translate }}</mat-label>
+    <input type="number" matInput formControlName="amount" required />
     <mat-error>
-      {{'labels.inputs.Interest' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+      {{ 'labels.inputs.Interest' | translate }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
-
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> {{'labels.buttons.Cancel' | translate}} </button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: depositProductIncentiveForm }" [disabled]="!depositProductIncentiveForm.valid || depositProductIncentiveForm.pristine">
-    {{'labels.buttons.' + layout.addButtonText | translate }}
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [mat-dialog-close]="{ data: depositProductIncentiveForm }"
+    [disabled]="!depositProductIncentiveForm.valid || depositProductIncentiveForm.pristine"
+  >
+    {{ 'labels.buttons.' + layout.addButtonText | translate }}
   </button>
 </mat-dialog-actions>
diff --git a/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html b/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html
index 4cc060fab8..4603a7b42b 100644
--- a/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html
+++ b/src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,60 +21,55 @@
     </ng-template>
 
     <mat-step [stepControl]="fixedDepositProductDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-details-step></mifosx-fixed-deposit-product-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductCurrencyForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-currency-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-currency-step>
-
+      <mifosx-fixed-deposit-product-currency-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+      ></mifosx-fixed-deposit-product-currency-step>
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-terms-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-terms-step>
-
+      <mifosx-fixed-deposit-product-terms-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+      ></mifosx-fixed-deposit-product-terms-step>
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductSettingsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-settings-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-settings-step>
-
+      <mifosx-fixed-deposit-product-settings-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+      ></mifosx-fixed-deposit-product-settings-step>
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductInterestRateChartForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-interest-rate-chart-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-interest-rate-chart-step>
-
+      <mifosx-fixed-deposit-product-interest-rate-chart-step
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+      ></mifosx-fixed-deposit-product-interest-rate-chart-step>
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-charges-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
         [currencyCode]="fixedDepositProductCurrencyForm.get('currencyCode')"
       >
       </mifosx-fixed-deposit-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-accounting-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
@@ -84,12 +77,10 @@
         [fixedDepositProductFormValid]="fixedDepositProductFormValid"
       >
       </mifosx-fixed-deposit-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="fixedDepositProductFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-preview-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
@@ -99,9 +90,6 @@
         (submitEvent)="submit()"
       >
       </mifosx-fixed-deposit-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html b/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html
index 6c102510ec..2c1af0dc5e 100644
--- a/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html
+++ b/src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #fixedDepositProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,90 +21,74 @@
     </ng-template>
 
     <mat-step [stepControl]="fixedDepositProductDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-details-step
-        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      <mifosx-fixed-deposit-product-details-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
       </mifosx-fixed-deposit-product-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductCurrencyForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-currency-step
-        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      <mifosx-fixed-deposit-product-currency-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
       </mifosx-fixed-deposit-product-currency-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-terms-step
-        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      <mifosx-fixed-deposit-product-terms-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
       </mifosx-fixed-deposit-product-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductSettingsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-      <mifosx-fixed-deposit-product-settings-step
-        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+      <mifosx-fixed-deposit-product-settings-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
       </mifosx-fixed-deposit-product-settings-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductInterestRateChartForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-interest-rate-chart-step
-        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+      >
       </mifosx-fixed-deposit-product-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-charges-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
-        [currencyCode]="fixedDepositProductCurrencyForm.get('currencyCode')">
+        [currencyCode]="fixedDepositProductCurrencyForm.get('currencyCode')"
+      >
       </mifosx-fixed-deposit-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="fixedDepositProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-accounting-step
-        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
-        [fixedDepositProductFormValid]="fixedDepositProductFormValidAndNotPrinstine">
+        [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
+        [accountingRuleData]="accountingRuleData"
+        [fixedDepositProductFormValid]="fixedDepositProductFormValidAndNotPrinstine"
+      >
       </mifosx-fixed-deposit-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="fixedDepositProductFormValidAndNotPrinstine" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-fixed-deposit-product-preview-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
         [chartSlabsDisplayedColumns]="fixedDepositProductInterestRateChartStep.chartSlabsDisplayedColumns"
-        [accountingRuleData]="accountingRuleData" [fixedDepositProduct]="fixedDepositProduct"
-        (submitEvent)="submit()">
+        [accountingRuleData]="accountingRuleData"
+        [fixedDepositProduct]="fixedDepositProduct"
+        (submitEvent)="submit()"
+      >
       </mifosx-fixed-deposit-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html
index 888722d544..4711be7cf2 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html
@@ -1,10 +1,13 @@
 <form [formGroup]="fixedDepositProductAccountingForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column"
-      formControlName="accountingRule">
-      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
+    <mat-radio-group
+      fxFlex="98%"
+      fxLayout="row"
+      fxLayoutGap="5%"
+      fxLayout.lt-md="column"
+      formControlName="accountingRule"
+    >
+      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i = index" [value]="i + 1">
         {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
@@ -12,109 +15,163 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div *ngIf="isCashOrAccrualAccounting()" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
-
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.savingsReferenceAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Saving reference'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Saving reference'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.feesReceivableAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Fees Receivable'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Fees Receivable'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.penaltiesReceivableAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Penalties Receivable'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Penalties Receivable'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.savingsControlAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Saving control'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Saving control'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.transfersInSuspenseAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Savings transfers in suspense'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Savings transfers in suspense'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.interestPayableAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Interest Payable'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Interest Payable'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.interestOnSavingsAccountId"
-        [glAccountList]="expenseAccountData" [required]="true" [inputLabel]="'Interest on savings'">
+        [glAccountList]="expenseAccountData"
+        [required]="true"
+        [inputLabel]="'Interest on savings'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from fees'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.incomeFromPenaltyAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from penalties'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from penalties'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h3 fxFlex="23%" class="mat-h3">{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
+      <h3 fxFlex="23%" class="mat-h3">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
       <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules"></mat-checkbox>
 
-      <div *ngIf="fixedDepositProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap"
-        fxLayoutGap="2%" fxLayout.lt-md="column">
-
+      <div
+        *ngIf="fixedDepositProductAccountingForm.value.advancedAccountingRules"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
         <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}
+          <h4 fxFlex="63%" class="mat-h4">
+            {{ 'labels.heading.Configure Fund Sources for Payment Channels' | translate }}
           </h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value"
-            *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="paymentChannelToFundSourceMappings.value"
+            *ngIf="paymentChannelToFundSourceMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="paymentTypeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.heading.Payment Type' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Payment Type' | translate }}</th>
               <td mat-cell *matCellDef="let paymentFundSource">
-                {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
+                {{ paymentFundSource.paymentTypeId | find: paymentTypeData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="fundSourceAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
               <td mat-cell *matCellDef="let paymentFundSource">
-                {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
+                {{ paymentFundSource.fundSourceAccountId | find: assetAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.buttons.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let paymentFundSource; let i = index">
-                <button mat-icon-button color="primary"
-                  (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
                 <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
@@ -124,41 +181,47 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Pay
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
           </table>
         </div>
         <div fxFlex="100%" *ngIf="existCharges()">
-
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
+          <h4 fxFlex="63%" class="mat-h4">{{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}</h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('FeesIncome', feeToIncomeAccountMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('FeesIncome', feeToIncomeAccountMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value"
-            *ngIf="feeToIncomeAccountMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="feeToIncomeAccountMappings.value"
+            *ngIf="feeToIncomeAccountMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="chargeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.catalogs.Fees' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.catalogs.Fees' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome">
-                {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
+                {{ feesIncome.chargeId | find: chargeData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="incomeAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome">
-                {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+                {{ feesIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.buttons.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome; let i = index">
                 <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
                   <fa-icon icon="edit"></fa-icon>
@@ -170,47 +233,56 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Ac
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
           </table>
         </div>
 
         <div fxFlex="100%" *ngIf="existCharges()">
-
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}
+          <h4 fxFlex="63%" class="mat-h4">
+            {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
           </h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
-            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="penaltyToIncomeAccountMappings.value"
+            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="chargeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome">
-                {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
+                {{ penaltyIncome.chargeId | find: penaltyData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="incomeAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome">
-                {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+                {{ penaltyIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.buttons.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome; let i = index">
-                <button mat-icon-button color="primary"
-                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
                 <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
@@ -220,26 +292,21 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Inco
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
           </table>
-
         </div>
-
       </div>
-
     </div>
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!fixedDepositProductFormValid">
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html
index f159479438..07ff36e1ec 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html
@@ -1,9 +1,11 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -12,42 +14,47 @@
   <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>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </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> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </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="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </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>
@@ -56,19 +63,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html
index f050539be2..c3d4ff1fb9 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html
@@ -1,46 +1,45 @@
 <form [formGroup]="fixedDepositProductCurrencyForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
       <mat-select formControlName="currencyCode" required>
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matInput formControlName="digitsAfterDecimal" required>
+      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <input type="number" matInput formControlName="digitsAfterDecimal" required />
       <mat-error>
-        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Decimal Places' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOf">
+      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+      <input type="number" matInput formControlName="inMultiplesOf" />
       <mat-error>
-        {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html
index 72d2b6f090..96fc8def23 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html
@@ -1,42 +1,41 @@
 <form [formGroup]="fixedDepositProductDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
-      <input matInput formControlName="name" required>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <input matInput formControlName="name" required />
       <mat-error *ngIf="fixedDepositProductDetailsForm.controls.name.hasError('required')">
-        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
-      <input matInput formControlName="shortName" maxlength="4" required>
+      <mat-label>{{ 'labels.inputs.Short Name' | translate }}</mat-label>
+      <input matInput formControlName="shortName" maxlength="4" required />
       <mat-error *ngIf="fixedDepositProductDetailsForm.controls.shortName.hasError('required')">
-        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Short Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
       <textarea matInput formControlName="description" required></textarea>
       <mat-error *ngIf="fixedDepositProductDetailsForm.controls.description.hasError('required')">
-        {{'labels.inputs.Description' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Description' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
index d13ee082f1..beea62e7af 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
@@ -1,248 +1,295 @@
 <form [formGroup]="fixedDepositProductInterestRateChartForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="83%" class="mat-h3">{{ 'labels.inputs.Interest Rate Chart' | translate}} <i class='fas fa-question'
-        matTooltip="{{ 'tooltips.The interest rate chart' | translate}}"></i>
+    <h4 fxFlex="83%" class="mat-h3">
+      {{ 'labels.inputs.Interest Rate Chart' | translate }}
+      <i class="fas fa-question" matTooltip="{{ 'tooltips.The interest rate chart' | translate }}"></i>
     </h4>
 
     <div fxFlex="13%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        {{'labels.buttons.Add' | translate}}
+        {{ 'labels.buttons.Add' | translate }}
       </button>
     </div>
 
-    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="charts"
-      *ngFor="let chart of charts.controls; let chartIndex = index">
-
+    <div
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+      formArrayName="charts"
+      *ngFor="let chart of charts.controls; let chartIndex = index"
+    >
       <mat-divider fxFlex="98%"></mat-divider>
 
       <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="chartIndex">
-
         <div fxFlex="98%" fxLayout="row" fxLayoutAlign="end center">
-          <button type="button" mat-icon-button color="warn" (click)="delete(charts, chartIndex)"
-            matTooltip="{{ 'tooltips.Delete Interest Rate Chart' | translate}}" matTooltipPosition="left">
+          <button
+            type="button"
+            mat-icon-button
+            color="warn"
+            (click)="delete(charts, chartIndex)"
+            matTooltip="{{ 'tooltips.Delete Interest Rate Chart' | translate }}"
+            matTooltipPosition="left"
+          >
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
 
         <mat-form-field fxFlex="32%">
-          <mat-label>{{ 'labels.inputs.Name' | translate}}</mat-label>
-          <input matInput formControlName="name" required>
+          <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+          <input matInput formControlName="name" required />
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="validFromDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.From Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker"
-            formControlName="fromDate" required>
+          <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="validFromDatePicker"
+            formControlName="fromDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #validFromDatePicker></mat-datepicker>
           <mat-error>
-            {{'labels.inputs.Valid from Date' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+            {{ 'labels.inputs.Valid from Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="endDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.End Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+          <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex="65%">
-          <mat-label>{{ 'labels.inputs.Description' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
           <textarea matInput formControlName="description" required></textarea>
         </mat-form-field>
 
         <div fxFlex="31%" fxLayout="row" fxLayoutAlign="space-between center">
           <mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
-            {{ 'labels.inputs.Is primary grouping by amount?' | translate}}
+            {{ 'labels.inputs.Is primary grouping by amount?' | translate }}
           </mat-checkbox>
         </div>
 
         <div fxFlex="100%" class="center">
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Add Slab' | translate}}
+            {{ 'labels.buttons.Add Slab' | translate }}
           </button>
         </div>
 
         <div fxFlex="100%" *ngIf="chart.value.chartSlabs.length === 0">
-          <h3 class="mat-h3">{{ 'labels.heading.It is required to add at least one Slab' | translate}}</h3>
+          <h3 class="mat-h3">{{ 'labels.heading.It is required to add at least one Slab' | translate }}</h3>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs"
-          *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
-
+        <table
+          fxFlex="98%"
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="chart.value.chartSlabs"
+          *ngIf="chart.value.chartSlabs.length !== 0"
+          multiTemplateDataRows
+        >
           <ng-container matColumnDef="period">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Period' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
-              {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType |
-              find:periodTypeData:'id':'value') }}
+              {{
+                chartSlab.fromPeriod +
+                  ' - ' +
+                  chartSlab.toPeriod +
+                  ' ' +
+                  (chartSlab.periodType | find: periodTypeData : 'id' : 'value')
+              }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="amountRange">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount Range' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.amountRangeFrom + ' - ' + chartSlab.amountRangeTo }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="annualInterestRate">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Interest' | translate}} </th>
-            <td mat-cell *matCellDef="let chartSlab">
-              {{ chartSlab.annualInterestRate }} %
-            </td>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+            <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate }} %</td>
           </ng-container>
 
           <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Description' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.description }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-              <button mat-icon-button color="primary"
-                (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)">
+              <button
+                mat-icon-button
+                color="primary"
+                (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)"
+              >
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(chart.controls.chartSlabs, chartSlabIndex)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <button mat-button color="primary"
-                (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
+              <button
+                mat-button
+                color="primary"
+                (click)="
+                  expandChartSlabIndex[chartIndex] =
+                    expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex
+                "
+              >
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                   <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                  {{ 'labels.buttons.View Incentives' | translate}}
+                  {{ 'labels.buttons.View Incentives' | translate }}
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
                   <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                  {{ 'labels.buttons.Hide Incentives' | translate}}
+                  {{ 'labels.buttons.Hide Incentives' | translate }}
                 </span>
               </button>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incentives">
-            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-              [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
-
-              <div fxLayout="row wrap" fxFlexFill class="incentives"
-                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
-
+            <td
+              mat-cell
+              *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+              [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length"
+            >
+              <div
+                fxLayout="row wrap"
+                fxFlexFill
+                class="incentives"
+                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'"
+              >
                 <mat-card fxLayout="row wrap" fxFlexFill>
-
                   <h4 class="mat-h4" fxFlex="63%">
-                    {{ 'labels.heading.Incentives' | translate}}
+                    {{ 'labels.heading.Incentives' | translate }}
                   </h4>
 
                   <div fxFlex="13%">
-                    <button mat-raised-button color="primary"
-                      (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
+                    <button
+                      mat-raised-button
+                      color="primary"
+                      (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))"
+                    >
                       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                      {{ 'labels.buttons.Add' | translate}}
+                      {{ 'labels.buttons.Add' | translate }}
                     </button>
                   </div>
 
-                  <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
-                    *ngIf="chartSlab.incentives.length">
-
+                  <table
+                    fxFlexFill
+                    class="mat-elevation-z1"
+                    mat-table
+                    [dataSource]="chartSlab.incentives"
+                    *ngIf="chartSlab.incentives.length"
+                  >
                     <ng-container matColumnDef="entityType">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Entity Type' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.entityType | find:entityTypeData:'id':'value' }}
+                        {{ incentive.entityType | find: entityTypeData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="attributeName">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Attribute Name' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.attributeName | find:attributeNameData:'id':'value' }}
+                        {{ incentive.attributeName | find: attributeNameData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="conditionType">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Condition Type' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.conditionType | find:conditionTypeData:'id':'value' }}
+                        {{ incentive.conditionType | find: conditionTypeData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="attributeValue">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Attribute Value' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                        <span *ngSwitchCase="2">{{ incentive.attributeValue | find:genderData:'id':'name' }}</span>
+                        <span *ngSwitchCase="2">{{ incentive.attributeValue | find: genderData : 'id' : 'name' }}</span>
                         <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                        <span *ngSwitchCase="4">{{ incentive.attributeValue | find:clientTypeData:'id':'name' }}</span>
-                        <span *ngSwitchCase="5">{{ incentive.attributeValue | find:clientClassificationData:'id':'name'
-                          }}</span>
+                        <span *ngSwitchCase="4">{{
+                          incentive.attributeValue | find: clientTypeData : 'id' : 'name'
+                        }}</span>
+                        <span *ngSwitchCase="5">{{
+                          incentive.attributeValue | find: clientClassificationData : 'id' : 'name'
+                        }}</span>
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="incentiveType">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Incentive Type' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.incentiveType | find:incentiveTypeData:'id':'value'}}
+                        {{ incentive.incentiveType | find: incentiveTypeData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="amount">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Interest' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.amount }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="actions">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive; let incentiveIndex = index">
-                        <button mat-icon-button color="primary"
-                          (click)="editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button
+                          mat-icon-button
+                          color="primary"
+                          (click)="
+                            editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)
+                          "
+                        >
                           <fa-icon icon="edit"></fa-icon>
                         </button>
-                        <button mat-icon-button color="warn"
-                          (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button
+                          mat-icon-button
+                          color="warn"
+                          (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)"
+                        >
                           <fa-icon icon="trash"></fa-icon>
                         </button>
                       </td>
                     </ng-container>
 
                     <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                    <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                   </table>
-
                 </mat-card>
               </div>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns[chartIndex]"></tr>
-          <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex];"></tr>
-          <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex]"></tr>
+          <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
         </table>
-
       </div>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html
index 07e2736c5f..c7211f6742 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html
@@ -1,466 +1,556 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
   <h2 class="mat-h2" fxFlexFill>{{ fixedDepositProduct.name }}</h2>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.description">
-    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.currencyCode |
-      find:fixedDepositProductsTemplate.currencyOptions:'code':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.currencyCode | find: fixedDepositProductsTemplate.currencyOptions : 'code' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.digitsAfterDecimal }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Deposit Amount' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.depositAmount + ' (Min: ' + (fixedDepositProduct.minDepositAmount ?
-      fixedDepositProduct.minDepositAmount : fixedDepositProduct.depositAmount) + ', Max: ' +
-      (fixedDepositProduct.maxDepositAmount ? fixedDepositProduct.maxDepositAmount : fixedDepositProduct.depositAmount)
-      + ')' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.depositAmount +
+        ' (Min: ' +
+        (fixedDepositProduct.minDepositAmount
+          ? fixedDepositProduct.minDepositAmount
+          : fixedDepositProduct.depositAmount) +
+        ', Max: ' +
+        (fixedDepositProduct.maxDepositAmount
+          ? fixedDepositProduct.maxDepositAmount
+          : fixedDepositProduct.depositAmount) +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestCompoundingPeriodType |
-      find:fixedDepositProductsTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.interestCompoundingPeriodType
+        | find: fixedDepositProductsTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestPostingPeriodType |
-      find:fixedDepositProductsTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.interestPostingPeriodType
+        | find: fixedDepositProductsTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestCalculationType |
-      find:fixedDepositProductsTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.interestCalculationType
+        | find: fixedDepositProductsTemplate.interestCalculationTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestCalculationDaysInYearType |
-      find:fixedDepositProductsTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.interestCalculationDaysInYearType
+        | find: fixedDepositProductsTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.lockinPeriodFrequency + ' ' +
-      (fixedDepositProduct.lockinPeriodFrequencyType |
-      find:fixedDepositProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.lockinPeriodFrequency +
+        ' ' +
+        (fixedDepositProduct.lockinPeriodFrequencyType
+          | find: fixedDepositProductsTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.minDepositTerm + ' ' + (fixedDepositProduct.minDepositTermTypeId |
-      find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.minDepositTerm +
+        ' ' +
+        (fixedDepositProduct.minDepositTermTypeId
+          | find: fixedDepositProductsTemplate.periodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.inMultiplesOfDepositTerm">
-    <span fxFlex="40%">{{'labels.inputs.And thereafter, in Multiples of' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.inMultiplesOfDepositTerm + ' ' +
-      (fixedDepositProduct.inMultiplesOfDepositTermTypeId |
-      find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.And thereafter, in Multiples of' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.inMultiplesOfDepositTerm +
+        ' ' +
+        (fixedDepositProduct.inMultiplesOfDepositTermTypeId
+          | find: fixedDepositProductsTemplate.periodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.maxDepositTerm">
-    <span fxFlex="40%">{{'labels.inputs.Maximum Deposit Term' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.maxDepositTerm + ' ' + (fixedDepositProduct.maxDepositTermTypeId |
-      find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.maxDepositTerm +
+        ' ' +
+        (fixedDepositProduct.maxDepositTermTypeId
+          | find: fixedDepositProductsTemplate.periodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
   <!-- For Pre-mature closure -->
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Apply Penal Interest (less)' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.preClosurePenalApplicable">
-    <span fxFlex="40%">{{'labels.inputs.Penal Interest' | translate}} (%):</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.preClosurePenalInterest + '% (' +
-      (fixedDepositProduct.preClosurePenalInterestOnTypeId |
-      find:fixedDepositProductsTemplate.preClosurePenalInterestOnTypeOptions:'id':'value') + ')' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.preClosurePenalInterest +
+        '% (' +
+        (fixedDepositProduct.preClosurePenalInterestOnTypeId
+          | find: fixedDepositProductsTemplate.preClosurePenalInterestOnTypeOptions : 'id' : 'value') +
+        ')'
+    }}</span>
   </div>
   <!--  -->
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.withHoldTax">
-    <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.taxGroupId | find:fixedDepositProductsTemplate.taxGroupOptions:'id':'name'
-      }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Tax Group' | translate }}:</span>
+    <span fxFlex="60%">{{
+      fixedDepositProduct.taxGroupId | find: fixedDepositProductsTemplate.taxGroupOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" *ngIf="fixedDepositProduct.charts.length !== 0">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Charts' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <div fxFlexFill *ngFor="let chart of fixedDepositProduct.charts; let chartIndex = index" fxLayout="row wrap"
-      fxLayout.lt-md="column">
-
+    <div
+      fxFlexFill
+      *ngFor="let chart of fixedDepositProduct.charts; let chartIndex = index"
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
       <div fxFlexFill *ngIf="chart.name">
-        <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Name' | translate }}:</span>
         <span fxFlex="60%">{{ chart.name }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.description">
-        <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
         <span fxFlex="60%">{{ chart.description }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{'labels.inputs.From Date' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.From Date' | translate }}:</span>
         <span fxFlex="60%">{{ chart.fromDate | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.endDate">
-        <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
         <span fxFlex="60%">{{ chart.endDate | dateFormat }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
         <span fxFlex="60%">{{ fixedDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chart.chartSlabs"
-        *ngIf="chart.chartSlabs.length !== 0" multiTemplateDataRows>
-
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="chart.chartSlabs"
+        *ngIf="chart.chartSlabs.length !== 0"
+        multiTemplateDataRows
+      >
         <ng-container matColumnDef="period">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Period' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
-            {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType |
-            find:fixedDepositProductsTemplate.chartTemplate.periodTypes:'id':'value') }}
+            {{
+              chartSlab.fromPeriod +
+                ' - ' +
+                chartSlab.toPeriod +
+                ' ' +
+                (chartSlab.periodType | find: fixedDepositProductsTemplate.chartTemplate.periodTypes : 'id' : 'value')
+            }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="amountRange">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Range' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.amountRangeFrom + ' - ' + chartSlab.amountRangeTo }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="annualInterestRate">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Interest' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.annualInterestRate }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Description' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.description }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-            <button mat-button color="primary"
-              (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex"
-              [disabled]="chartSlab.incentives.length === 0">
+            <button
+              mat-button
+              color="primary"
+              (click)="
+                expandChartSlabIndex[chartIndex] =
+                  expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex
+              "
+              [disabled]="chartSlab.incentives.length === 0"
+            >
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                 <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                {{'labels.buttons.View Incentives' | translate}}
+                {{ 'labels.buttons.View Incentives' | translate }}
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
                 <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                {{'labels.buttons.Hide Incentives' | translate}}
+                {{ 'labels.buttons.Hide Incentives' | translate }}
               </span>
             </button>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incentives">
-          <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-            [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
-            <div fxLayout="row wrap" fxFlexFill class="incentives"
-              [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
+          <td
+            mat-cell
+            *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+            [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length"
+          >
+            <div
+              fxLayout="row wrap"
+              fxFlexFill
+              class="incentives"
+              [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'"
+            >
               <mat-card fxLayout="row wrap" fxFlexFill>
-
                 <h4 class="mat-h4" fxFlex="23%">
-                  {{'labels.heading.Incentives' | translate}}
+                  {{ 'labels.heading.Incentives' | translate }}
                 </h4>
 
                 <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
-
                   <ng-container matColumnDef="entityType">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.entityType |
-                      find:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
+                      {{
+                        incentive.entityType
+                          | find: fixedDepositProductsTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeName">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Name' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.attributeName |
-                      find:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
+                      {{
+                        incentive.attributeName
+                          | find: fixedDepositProductsTemplate.chartTemplate.attributeNameOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="conditionType">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition Type' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.conditionType |
-                      find:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
+                      {{
+                        incentive.conditionType
+                          | find: fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeValue">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Value' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                      <span *ngSwitchCase="2">{{ incentive.attributeValue |
-                        find:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
+                      <span *ngSwitchCase="2">{{
+                        incentive.attributeValue
+                          | find: fixedDepositProductsTemplate.chartTemplate.genderOptions : 'id' : 'name'
+                      }}</span>
                       <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                      <span *ngSwitchCase="4">{{ incentive.attributeValue |
-                        find:fixedDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
-                      <span *ngSwitchCase="5">{{ incentive.attributeValue |
-                        find:fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name'
-                        }}</span>
+                      <span *ngSwitchCase="4">{{
+                        incentive.attributeValue
+                          | find: fixedDepositProductsTemplate.chartTemplate.clientTypeOptions : 'id' : 'name'
+                      }}</span>
+                      <span *ngSwitchCase="5">{{
+                        incentive.attributeValue
+                          | find: fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions : 'id' : 'name'
+                      }}</span>
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="incentiveType">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Incentive Type' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.incentiveType |
-                      find:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
+                      {{
+                        incentive.incentiveType
+                          | find: fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="amount">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.amount | formatNumber}}
+                      {{ incentive.amount | formatNumber }}
                     </td>
                   </ng-container>
 
                   <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                  <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                  <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                 </table>
-
               </mat-card>
             </div>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns[chartIndex]"></tr>
-        <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex];"></tr>
-        <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex]"></tr>
+        <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
       </table>
 
       <mat-divider fxFlexFill></mat-divider>
-
     </div>
-
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProduct.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </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> {{'labels.inputs.Amount' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <mifosx-view-savings-accounting-details *ngIf="!isNoneAccounting()" [accountingRule]="accountingRule"
-    [accountingMappings]="accountingMappings">
+  <mifosx-view-savings-accounting-details
+    *ngIf="!isNoneAccounting()"
+    [accountingRule]="accountingRule"
+    [accountingMappings]="accountingMappings"
+  >
   </mifosx-view-savings-accounting-details>
 
   <div
-    *ngIf="fixedDepositProduct.advancedAccountingRules && (fixedDepositProduct.paymentChannelToFundSourceMappings?.length || fixedDepositProduct.feeToIncomeAccountMappings?.length || fixedDepositProduct.penaltyToIncomeAccountMappings?.length)"
-    fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
+    *ngIf="
+      fixedDepositProduct.advancedAccountingRules &&
+      (fixedDepositProduct.paymentChannelToFundSourceMappings?.length ||
+        fixedDepositProduct.feeToIncomeAccountMappings?.length ||
+        fixedDepositProduct.penaltyToIncomeAccountMappings?.length)
+    "
+    fxFlexFill
+    fxLayout="row wrap"
+    fxLayout.lt-md="column"
+  >
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <div *ngIf="fixedDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
-      fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fund Sources for Payment Channels' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table
-        [dataSource]="fixedDepositProduct.paymentChannelToFundSourceMappings">
-
+    <div
+      *ngIf="fixedDepositProduct.paymentChannelToFundSourceMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="fixedDepositProduct.paymentChannelToFundSourceMappings"
+      >
         <ng-container matColumnDef="paymentTypeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
           <td mat-cell *matCellDef="let paymentFundSource">
-            {{ paymentFundSource.paymentTypeId | find:fixedDepositProductsTemplate.paymentTypeOptions:'id':'name' }}
+            {{
+              paymentFundSource.paymentTypeId | find: fixedDepositProductsTemplate.paymentTypeOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="fundSourceAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
           <td mat-cell *matCellDef="let paymentFundSource">
-            {{ paymentFundSource.fundSourceAccountId |
-            find:fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
+            {{
+              paymentFundSource.fundSourceAccountId
+                | find: fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <div *ngIf="fixedDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-      fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fees to Specific Income Accounts' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table
-        [dataSource]="fixedDepositProduct.feeToIncomeAccountMappings">
-
+    <div
+      *ngIf="fixedDepositProduct.feeToIncomeAccountMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="fixedDepositProduct.feeToIncomeAccountMappings"
+      >
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
-            {{ feesIncome.chargeId | find:fixedDepositProductsTemplate.chargeOptions:'id':'name' }}
+            {{ feesIncome.chargeId | find: fixedDepositProductsTemplate.chargeOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
-            {{ feesIncome.incomeAccountId |
-            find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+            {{
+              feesIncome.incomeAccountId
+                | find: fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <div *ngIf="fixedDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-      fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Penalties to Specific Income Accounts' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table
-        [dataSource]="fixedDepositProduct.penaltyToIncomeAccountMappings">
-
+    <div
+      *ngIf="fixedDepositProduct.penaltyToIncomeAccountMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="fixedDepositProduct.penaltyToIncomeAccountMappings"
+      >
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
-            {{ penaltyIncome.chargeId | find:fixedDepositProductsTemplate.penaltyOptions:'id':'name' }}
+            {{ penaltyIncome.chargeId | find: fixedDepositProductsTemplate.penaltyOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
-            {{ penaltyIncome.incomeAccountId |
-            find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+            {{
+              penaltyIncome.incomeAccountId
+                | find: fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
       </table>
-
     </div>
-
   </div>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{'labels.buttons.Submit' | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
index f9b5573ae2..acf0c22c7c 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
@@ -1,54 +1,72 @@
 <form [formGroup]="fixedDepositProductSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}} <i class='fas fa-question' matTooltip="{{ 'tooltips.A period of time during which a fixed deposit account' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Lock-in Period' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.A period of time during which a fixed deposit account' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
           {{ lockinPeriodFrequencyType.value }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Minimum Deposit Term' | translate}} <i class='fas fa-question' matTooltip="{{ 'tooltips.The minimum length of time' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Minimum Deposit Term' | translate }}
+      <i class="fas fa-question" matTooltip="{{ 'tooltips.The minimum length of time' | translate }}"></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minDepositTerm" required>
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minDepositTerm" required />
       <mat-error>
-        {{'labels.inputs.Minimum Deposit Term Frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Minimum Deposit Term Frequency Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.And thereafter, in Multiples of' | translate}} <i class='fas fa-question-circle' matTooltip="{{ 'tooltips.After the minimum deposit term has passed' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.heading.And thereafter, in Multiples of' | translate }}
+      <i
+        class="fas fa-question-circle"
+        matTooltip="{{ 'tooltips.After the minimum deposit term has passed' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOfDepositTerm">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="inMultiplesOfDepositTerm" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -56,15 +74,18 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.And thereafter, in Multiples o
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Maximum Deposit Term' | translate}} <i class='fas fa-question-circle' matTooltip="{{ 'tooltips.The maximum length of time funds' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Maximum Deposit Term' | translate }}
+      <i class="fas fa-question-circle" matTooltip="{{ 'tooltips.The maximum length of time funds' | translate }}"></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="maxDepositTerm">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maxDepositTerm" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -74,21 +95,30 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Maximum Deposit Term' | transla
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">{{'labels.heading.For Pre-mature closure' | translate}} <i class='fas fa-question-circle' matTooltip="{{ 'tooltips.This sections defines an interest penalty' | translate}}"></i></h4>
+    <h4 fxFlex="23%" class="mat-h4">
+      {{ 'labels.heading.For Pre-mature closure' | translate }}
+      <i
+        class="fas fa-question-circle"
+        matTooltip="{{ 'tooltips.This sections defines an interest penalty' | translate }}"
+      ></i>
+    </h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      {{'labels.inputs.Apply Penal Interest (less)' | translate}}
+      {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Penal Interest' | translate}} (%)</mat-label>
-      <input type="number" matInput formControlName="preClosurePenalInterest">
+      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Period' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
-        <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData" [value]="preClosurePenalInterestOnType.id">
+        <mat-option
+          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
+          [value]="preClosurePenalInterestOnType.id"
+        >
           {{ preClosurePenalInterestOnType.value }}
         </mat-option>
       </mat-select>
@@ -96,33 +126,38 @@ <h4 fxFlex="23%" class="mat-h4">{{'labels.heading.For Pre-mature closure' | tran
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v" matTooltip="{{ 'tooltips.An boolean flag to attach' | translate}}">
-      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="withHoldTax"
+      class="margin-v"
+      matTooltip="{{ 'tooltips.An boolean flag to attach' | translate }}"
+    >
+      {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="fixedDepositProductSettingsForm.value.withHoldTax">
-      <mat-label>{{'labels.inputs.Tax Group' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
       <mat-select formControlName="taxGroupId" required>
         <mat-option *ngFor="let taxGroup of taxGroupData" [value]="taxGroup.id">
           {{ taxGroup.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Tax Group' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Tax Group' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
index fc0557b2e0..d5c575d934 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
@@ -1,89 +1,134 @@
 <form [formGroup]="fixedDepositProductTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Deposit Amount' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Deposit Amount' | translate }}</h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minDepositAmount" matTooltip="{{ 'tooltips.The minimum deposit amount required to open a fixed deposit' | translate}}">
+      <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="minDepositAmount"
+        matTooltip="{{ 'tooltips.The minimum deposit amount required to open a fixed deposit' | translate }}"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-      <input type="number" matInput formControlName="depositAmount" matTooltip="{{ 'tooltips.The default deposit amount expected' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="depositAmount"
+        matTooltip="{{ 'tooltips.The default deposit amount expected' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Default Deposit Amount' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Default Deposit Amount' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
 
-      <input type="number" matInput   formControlName="maxDepositAmount" matTooltip="{{ 'tooltips.The maximum deposit amount allowed when a fixed deposit' | translate}}">
+      <input
+        type="number"
+        matInput
+        formControlName="maxDepositAmount"
+        matTooltip="{{ 'tooltips.The maximum deposit amount allowed when a fixed deposit' | translate }}"
+      />
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
-      <mat-select formControlName="interestCompoundingPeriodType" matTooltip="{{ 'tooltips.The period at which interest rate' | translate}}" required>
-        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
+      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCompoundingPeriodType"
+        matTooltip="{{ 'tooltips.The period at which interest rate' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id"
+        >
           {{ interestCompoundingPeriodType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Compounding Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Posting Period' | translate}}</mat-label>
-      <mat-select formControlName="interestPostingPeriodType" matTooltip="{{ 'tooltips.The period at which interest rate is posted or credited' | translate}}" required>
-        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
+      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestPostingPeriodType"
+        matTooltip="{{ 'tooltips.The period at which interest rate is posted or credited' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id"
+        >
           {{ interestPostingPeriodType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Posting Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Calculated using' | translate}}</mat-label>
-      <mat-select formControlName="interestCalculationType" matTooltip="{{ 'tooltips.The method used to calculate interest' | translate}}" required>
-        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
+      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCalculationType"
+        matTooltip="{{ 'tooltips.The method used to calculate interest' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id"
+        >
           {{ interestCalculationType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Calculated using' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Days in Year' | translate}}</mat-label>
-      <mat-select formControlName="interestCalculationDaysInYearType" matTooltip="{{ 'tooltips.The setting for number of days' | translate}}" required>
-        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
+      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCalculationDaysInYearType"
+        matTooltip="{{ 'tooltips.The setting for number of days' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id"
+        >
           {{ interestCalculationDaysInYearType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Days in Year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
index 419aaf87b1..199272d1d5 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
@@ -1,70 +1,108 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-<div #buttonCreateFixedProduct class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FIXEDDEPOSITPRODUCT'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Fixed Deposit Product' | translate}}
-  </button>
-</div>
+  <div #buttonCreateFixedProduct class="in-block">
+    <button
+      mat-raised-button
+      color="primary"
+      [routerLink]="['create']"
+      *mifosxHasPermission="'CREATE_FIXEDDEPOSITPRODUCT'"
+    >
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Fixed Deposit Product' | translate }}
+    </button>
+  </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #fixedProductsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let fixedDepositProduct"> {{ fixedDepositProduct.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let fixedDepositProduct">{{ fixedDepositProduct.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
-        <td mat-cell *matCellDef="let fixedDepositProduct"> {{ fixedDepositProduct.shortName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Short Name' | translate }}</th>
+        <td mat-cell *matCellDef="let fixedDepositProduct">{{ fixedDepositProduct.shortName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateFixedProduct let-popover="popover">
-  <h2>{{'labels.buttons.Create Fixed Deposit Product' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Allows you to create new fixed deposit product' | translate}}</p>
+  <h2>{{ 'labels.buttons.Create Fixed Deposit Product' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Allows you to create new fixed deposit product' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.text.Search bar to filter fixed deposit products.' | translate}}</h4>
+  <h4>{{ 'labels.text.Search bar to filter fixed deposit products.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateFixedProduct,buttonCreateFixedProduct , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFixedProductsTable,fixedProductsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateFixedProduct, buttonCreateFixedProduct, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFixedProductsTable, fixedProductsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFixedProductsTable let-popover="popover">
-  <h4 class="mw300">{{'labels.text.List of fixed deposit products in the organization' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629544/Fixed+Deposit+Products" target="_blank">{{'labels.inputs.Fixed Deposit Products' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.text.List of fixed deposit products in the organization' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629544/Fixed+Deposit+Products" target="_blank">{{
+      'labels.inputs.Fixed Deposit Products' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html
index 6323a22ee3..1aa52090f3 100644
--- a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html
+++ b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html
@@ -1,310 +1,340 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <h2 class="mat-h2" fxFlexFill>{{ fixedDepositProductData.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.shortName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.description">
-          <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.description }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.heading.Currency' | translate}}:</span>
-          <span fxFlex="60%">({{ fixedDepositProductData.currency.code }}) {{ fixedDepositProductData.currency.name }}</span>
+          <span fxFlex="40%">{{ 'labels.heading.Currency' | translate }}:</span>
+          <span fxFlex="60%"
+            >({{ fixedDepositProductData.currency.code }}) {{ fixedDepositProductData.currency.name }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.currency.decimalPlaces }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.currency.inMultiplesOf | formatNumber}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+          <span fxFlex="60%">{{ fixedDepositProductData.currency.inMultiplesOf | formatNumber }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Deposit Amount' | translate}}:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.depositAmount + ' (Min: ' +
-            (fixedDepositProductData.minDepositAmount ? fixedDepositProductData.minDepositAmount :
-            fixedDepositProductData.depositAmount) + ', Max: ' + (fixedDepositProductData.maxDepositAmount ?
-            fixedDepositProductData.maxDepositAmount : fixedDepositProductData.depositAmount) + ')' }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
+          <span fxFlex="60%">{{
+            fixedDepositProductData.depositAmount +
+              ' (Min: ' +
+              (fixedDepositProductData.minDepositAmount
+                ? fixedDepositProductData.minDepositAmount
+                : fixedDepositProductData.depositAmount) +
+              ', Max: ' +
+              (fixedDepositProductData.maxDepositAmount
+                ? fixedDepositProductData.maxDepositAmount
+                : fixedDepositProductData.depositAmount) +
+              ')'
+          }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.interestCompoundingPeriodType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.interestPostingPeriodType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Interest Calculated Using' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated Using' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.interestCalculationType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.interestCalculationDaysInYearType.value }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.lockinPeriodFrequency">
-          <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
           <span fxFlex="60%">
-            {{ fixedDepositProductData.lockinPeriodFrequency }} {{
-            fixedDepositProductData.lockinPeriodFrequencyType.value }}</span>
+            {{ fixedDepositProductData.lockinPeriodFrequency }}
+            {{ fixedDepositProductData.lockinPeriodFrequencyType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.minDepositTerm">
-          <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
-          <span fxFlex="60%" *ngIf="fixedDepositProductData.minDepositTerm !== undefined">{{
-            fixedDepositProductData.minDepositTerm }}
+          <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+          <span fxFlex="60%" *ngIf="fixedDepositProductData.minDepositTerm !== undefined"
+            >{{ fixedDepositProductData.minDepositTerm }}
             &nbsp;
-            {{ fixedDepositProductData.minDepositTermType.value }}</span>
+            {{ fixedDepositProductData.minDepositTermType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.maxDepositTerm">
-          <span fxFlex="40%">{{'labels.inputs.Maximum Deposit Term' | translate}}:</span>
-          <span fxFlex="60%" *ngIf="fixedDepositProductData.maxDepositTerm !== undefined">{{
-            fixedDepositProductData.maxDepositTerm }}
+          <span fxFlex="40%">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
+          <span fxFlex="60%" *ngIf="fixedDepositProductData.maxDepositTerm !== undefined"
+            >{{ fixedDepositProductData.maxDepositTerm }}
             &nbsp;
-            {{ fixedDepositProductData.maxDepositTermType.value }}</span>
+            {{ fixedDepositProductData.maxDepositTermType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.inMultiplesOfDepositTerm">
-          <span fxFlex="40%">{{'labels.inputs.Deposit Term In multiple of' | translate}}:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
+          <span fxFlex="40%">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
             -
-            {{ fixedDepositProductData.inMultiplesOfDepositTermType.value }}</span>
+            {{ fixedDepositProductData.inMultiplesOfDepositTermType.value }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Apply Penal Interest (less)' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.preClosurePenalApplicable | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.preClosurePenalApplicable">
-          <span fxFlex="40%">{{'labels.inputs.Penal Interest' | translate}} (%):</span>
-          <span fxFlex="60%">{{fixedDepositProductData.preClosurePenalInterest}} &nbsp; &nbsp; % &nbsp; &nbsp; On
-            &nbsp;&nbsp;
-            {{fixedDepositProductData.preClosurePenalInterestOnType.value}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
+          <span fxFlex="60%"
+            >{{ fixedDepositProductData.preClosurePenalInterest }} &nbsp; &nbsp; % &nbsp; &nbsp; On &nbsp;&nbsp;
+            {{ fixedDepositProductData.preClosurePenalInterestOnType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.minBalanceForInterestCalculation">
-          <span fxFlex="40%">{{'labels.inputs.Balance Required for Interest Calculation' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.minBalanceForInterestCalculation | formatNumber }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.withHoldTax | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.withHoldTax">
-          <span fxFlex="40%">{{'labels.inputs.Withhold Tax group' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax group' | translate }}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.taxGroup.name }}</span>
         </div>
 
         <div *ngIf="fixedDepositProductData.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Chart' | translate}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.name">
-              <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Name' | translate }}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.name }}</span>
             </div>
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.description">
-              <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.description }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">{{'labels.inputs.From Date' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.From Date' | translate }}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.fromDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.endDate">
-              <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.endDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="fixedDepositProductData.activeChart.chartSlabs" multiTemplateDataRows>
-
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="fixedDepositProductData.activeChart.chartSlabs"
+              multiTemplateDataRows
+            >
               <ng-container matColumnDef="period">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Period' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   <div *ngIf="chartSlab.fromPeriod !== undefined">
                     {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{ chartSlab.periodType.value }}
                   </div>
-                  <div *ngIf="chartSlab.fromPeriod === undefined">
-                    &nbsp;
-                  </div>
+                  <div *ngIf="chartSlab.fromPeriod === undefined">&nbsp;</div>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="amountRange">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Range' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   <div *ngIf="chartSlab.amountRangeFrom !== undefined">
                     {{ chartSlab.amountRangeFrom }} - {{ chartSlab.amountRangeTo }}
                   </div>
 
-                  <div *ngIf="chartSlab.amountRangeFrom === undefined">
-                    &nbsp;
-                  </div>
+                  <div *ngIf="chartSlab.amountRangeFrom === undefined">&nbsp;</div>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="annualInterestRate">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Interest' | translate}} </th>
-                <td mat-cell *matCellDef="let chartSlab">
-                  {{ chartSlab.annualInterestRate }} %
-                </td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+                <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate }} %</td>
               </ng-container>
 
               <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Description' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   {{ chartSlab.description }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-                  <button mat-button color="primary"
-                    (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+                  <button
+                    mat-button
+                    color="primary"
+                    (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+                  >
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
                       <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                      {{'labels.buttons.View Incentives' | translate}}
+                      {{ 'labels.buttons.View Incentives' | translate }}
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
                       <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                      {{'labels.buttons.Hide Incentives' | translate}}
+                      {{ 'labels.buttons.Hide Incentives' | translate }}
                     </span>
                   </button>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incentives">
-                <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-                  [attr.colspan]="chartSlabsDisplayedColumns.length">
-                  <div fxLayout="row wrap" fxFlexFill class="incentives"
-                    [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex? 'expanded' : 'collapsed'">
+                <td
+                  mat-cell
+                  *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+                  [attr.colspan]="chartSlabsDisplayedColumns.length"
+                >
+                  <div
+                    fxLayout="row wrap"
+                    fxFlexFill
+                    class="incentives"
+                    [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+                  >
                     <mat-card fxLayout="row wrap" fxFlexFill>
-
                       <h4 class="mat-h4" fxFlex="23%">
-                        {{'labels.heading.Incentives' | translate}}
+                        {{ 'labels.heading.Incentives' | translate }}
                       </h4>
 
                       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
-
                         <ng-container matColumnDef="entityType">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.entityType |
-                            find:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
+                            {{
+                              incentive.entityType
+                                | find: fixedDepositProductsTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeName">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Name' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.attributeName |
-                            find:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
+                            {{
+                              incentive.attributeName
+                                | find: fixedDepositProductsTemplate.chartTemplate.attributeNameOptions : 'id' : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="conditionType">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition Type' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.conditionType |
-                            find:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
+                            {{
+                              incentive.conditionType
+                                | find: fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions : 'id' : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeValue">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Value' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                            <span *ngSwitchCase="2">{{ incentive.attributeValue |
-                              find:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
+                            <span *ngSwitchCase="2">{{
+                              incentive.attributeValue
+                                | find: fixedDepositProductsTemplate.chartTemplate.genderOptions : 'id' : 'name'
+                            }}</span>
                             <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                            <span *ngSwitchCase="4">{{ incentive.attributeValue |
-                              find:fixedDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
-                            <span *ngSwitchCase="5">{{ incentive.attributeValue |
-                              find:fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name'
-                              }}</span>
+                            <span *ngSwitchCase="4">{{
+                              incentive.attributeValue
+                                | find: fixedDepositProductsTemplate.chartTemplate.clientTypeOptions : 'id' : 'name'
+                            }}</span>
+                            <span *ngSwitchCase="5">{{
+                              incentive.attributeValue
+                                | find
+                                  : fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions
+                                  : 'id'
+                                  : 'name'
+                            }}</span>
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="incentiveType">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Incentive Type' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.incentiveType |
-                            find:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
+                            {{
+                              incentive.incentiveType
+                                | find: fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions : 'id' : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="amount">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.amount | formatNumber }}
                           </td>
                         </ng-container>
 
                         <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                        <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                        <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                       </table>
-
                     </mat-card>
                   </div>
                 </td>
@@ -312,170 +342,184 @@ <h4 class="mat-h4" fxFlex="23%">
 
               <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
               <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row">
-              </tr>
-
+              <tr
+                mat-row
+                *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns"
+                class="incentives-row"
+              ></tr>
             </table>
-
           </div>
-
         </div>
 
         <div *ngIf="fixedDepositProductData.charges.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Charges' | translate }}</h3>
 
           <mat-divider fxFlexFill></mat-divider>
 
           <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProductData.charges">
-
             <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.name }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="type">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </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> {{'labels.inputs.Amount' | translate}} </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> {{'labels.inputs.Collected On' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.chargeTimeType.value }}
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
           </table>
-
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <mifosx-view-savings-accounting-details class="container"
+        <mifosx-view-savings-accounting-details
+          class="container"
           [accountingRule]="fixedDepositProductData.accountingRule"
-          [accountingMappings]="fixedDepositProductData.accountingMappings">
+          [accountingMappings]="fixedDepositProductData.accountingMappings"
+        >
         </mifosx-view-savings-accounting-details>
 
-        <div fxFlexFill
-          *ngIf="fixedDepositProductData.advancedAccountingRules && (fixedDepositProductData.paymentChannelToFundSourceMappings?.length || fixedDepositProductData.feeToIncomeAccountMappings?.length || fixedDepositProductData.penaltyToIncomeAccountMappings?.length)"
-          fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
+        <div
+          fxFlexFill
+          *ngIf="
+            fixedDepositProductData.advancedAccountingRules &&
+            (fixedDepositProductData.paymentChannelToFundSourceMappings?.length ||
+              fixedDepositProductData.feeToIncomeAccountMappings?.length ||
+              fixedDepositProductData.penaltyToIncomeAccountMappings?.length)
+          "
+          fxLayout="row wrap"
+          fxLayout.lt-md="column"
+        >
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <hr>
+          <hr />
 
-          <div *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout.lt-md="column">
-            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Configure Fund Sources for Payment Channels' | translate}}
+          <div
+            *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+          >
+            <h4 class="mat-h4" fxFlexFill>
+              {{ 'labels.inputs.Configure Fund Sources for Payment Channels' | translate }}
             </h4>
 
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="fixedDepositProductData.paymentChannelToFundSourceMappings">
-
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="fixedDepositProductData.paymentChannelToFundSourceMappings"
+            >
               <ng-container matColumnDef="paymentTypeId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
                 <td mat-cell *matCellDef="let paymentFundSource">
                   {{ paymentFundSource.paymentType.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="fundSourceAccountId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
                 <td mat-cell *matCellDef="let paymentFundSource">
                   {{ paymentFundSource.fundSourceAccount.name }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
             </table>
-
           </div>
 
-          <div *ngIf="fixedDepositProductData.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout.lt-md="column">
-
-            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fees to Specific Income Accounts' | translate}}</h4>
-
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="fixedDepositProductData.feeToIncomeAccountMappings">
-
+          <div
+            *ngIf="fixedDepositProductData.feeToIncomeAccountMappings?.length"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+          >
+            <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
+
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="fixedDepositProductData.feeToIncomeAccountMappings"
+            >
               <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
                 <td mat-cell *matCellDef="let feesIncome">
                   {{ feesIncome.charge.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                 <td mat-cell *matCellDef="let feesIncome">
                   {{ feesIncome.incomeAccount.name }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
             </table>
-
           </div>
 
-          <div *ngIf="fixedDepositProductData.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout.lt-md="column">
-
-            <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Penalties to Specific Income Accounts' | translate}}</h4>
-
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="fixedDepositProductData.penaltyToIncomeAccountMappings">
-
+          <div
+            *ngIf="fixedDepositProductData.penaltyToIncomeAccountMappings?.length"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+          >
+            <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="fixedDepositProductData.penaltyToIncomeAccountMappings"
+            >
               <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
                 <td mat-cell *matCellDef="let penaltyIncome">
                   {{ penaltyIncome.charge.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                 <td mat-cell *matCellDef="let penaltyIncome">
                   {{ penaltyIncome.incomeAccount.name }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
             </table>
-
           </div>
-
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html
index 898228d27e..0ddd96497b 100644
--- a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html
+++ b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html
@@ -1,23 +1,29 @@
 <mat-card class="product-card">
-
   <mat-card-content>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.heading.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.heading.General' | translate }}
       </a>
       <ng-container *ngFor="let fixedDepositDatatable of fixedDepositDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',fixedDepositDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive"
-          *mifosxHasPermission="'READ_' + fixedDepositDatatable.registeredTableName">
-          {{fixedDepositDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          [routerLink]="['./datatables', fixedDepositDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + fixedDepositDatatable.registeredTableName"
+        >
+          {{ fixedDepositDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html b/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html
index 912309402b..ebe2770fd7 100644
--- a/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html
+++ b/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html
@@ -1,99 +1,166 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="floatingRateForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.Floating Rate Name' | translate}}</mat-label>
-            <input matInput required matTooltip="{{ 'tooltips.Unique name for the floating rate scheme' | translate}}" formControlName="name">
+            <mat-label>{{ 'labels.inputs.Floating Rate Name' | translate }}</mat-label>
+            <input
+              matInput
+              required
+              matTooltip="{{ 'tooltips.Unique name for the floating rate scheme' | translate }}"
+              formControlName="name"
+            />
             <mat-error *ngIf="floatingRateForm.controls.name.hasError('required')">
-              {{'labels.inputs.Floating Rate Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Floating Rate Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="checkbox-wrapper" fxFlex="30%">
-            <mat-checkbox formControlName="isBaseLendingRate" matTooltip="{{ 'tooltips.Base lending rate for the organisation' | translate}}" class="checkbox" labelPosition="before">{{'labels.inputs.Is Base Lending Rate' | translate}}?</mat-checkbox>
+            <mat-checkbox
+              formControlName="isBaseLendingRate"
+              matTooltip="{{ 'tooltips.Base lending rate for the organisation' | translate }}"
+              class="checkbox"
+              labelPosition="before"
+              >{{ 'labels.inputs.Is Base Lending Rate' | translate }}?</mat-checkbox
+            >
           </div>
 
           <div class="checkbox-wrapper" fxFlex="30%">
-            <mat-checkbox formControlName="isActive" matTooltip="{{ 'tooltips.Floating rate scheme to be activated' | translate}}" class="checkbox" labelPosition="before">{{'labels.inputs.Active' | translate}}</mat-checkbox>
+            <mat-checkbox
+              formControlName="isActive"
+              matTooltip="{{ 'tooltips.Floating rate scheme to be activated' | translate }}"
+              class="checkbox"
+              labelPosition="before"
+              >{{ 'labels.inputs.Active' | translate }}</mat-checkbox
+            >
           </div>
-
         </div>
 
-        <br>
+        <br />
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="70%" fxLayoutGap.lt-md="0px" class="m-b-10" fxLayout.lt-md="column">
-
-          <p fxFlex="25%" class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Floating interest rate and start date' | translate}}"></i></p>
+          <p fxFlex="25%" class="mat-title">
+            {{ 'labels.inputs.Floating Rate Periods' | translate }}
+            <i
+              class="fas fa-question"
+              matTooltip="{{ 'tooltips.Floating interest rate and start date' | translate }}"
+            ></i>
+          </p>
 
           <button mat-mini-fab type="button" color="primary" (click)="addFloatingRatePeriod()">
             <fa-icon icon="plus"></fa-icon>
           </button>
-
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="fromDate">
-            <th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest effective from date' | translate}}" mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate | dateFormat }} </td>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              matTooltip="{{ 'tooltips.Interest effective from date' | translate }}"
+              mat-sort-header
+            >
+              {{ 'labels.inputs.From Date' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let floatingRatePeriod">{{ floatingRatePeriod.fromDate | dateFormat }}</td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">
-            <th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Annualised Interest rate' | translate}}" mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate | formatNumber }} </td>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              matTooltip="{{ 'tooltips.Annualised Interest rate' | translate }}"
+              mat-sort-header
+            >
+              {{ 'labels.inputs.Interest Rate' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let floatingRatePeriod">{{ floatingRatePeriod.interestRate | formatNumber }}</td>
           </ng-container>
 
           <ng-container matColumnDef="isDifferential">
-            <th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest rate mentioned is added to base lending rate' | translate}}" mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              matTooltip="{{ 'tooltips.Interest rate mentioned is added to base lending rate' | translate }}"
+              mat-sort-header
+            >
+              {{ 'labels.inputs.Is Differential' | translate }}?
+            </th>
             <td mat-cell *matCellDef="let floatingRate">
-              <fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
-                class="is-differential" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!floatingRate.isDifferentialToBaseLendingRate" icon="times-circle" size="lg"
-                class="not-is-differential" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="floatingRate.isDifferentialToBaseLendingRate"
+                icon="check-circle"
+                size="lg"
+                class="is-differential"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!floatingRate.isDifferentialToBaseLendingRate"
+                icon="times-circle"
+                size="lg"
+                class="not-is-differential"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let floatingRatePeriod" fxLayoutGap="15%">
-              <button type="button" fxFlex="8%" color="primary" mat-icon-button matTooltip="{{ 'tooltips.Edit Period' | translate}}" matTooltipPosition="left"
-                (click)="editFloatingRatePeriod(floatingRatePeriod)">
+              <button
+                type="button"
+                fxFlex="8%"
+                color="primary"
+                mat-icon-button
+                matTooltip="{{ 'tooltips.Edit Period' | translate }}"
+                matTooltipPosition="left"
+                (click)="editFloatingRatePeriod(floatingRatePeriod)"
+              >
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" fxFlex="8%" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Remove Period' | translate}}" matTooltipPosition="right"
-                (click)="deleteFloatingRatePeriod(floatingRatePeriod)">
+              <button
+                type="button"
+                fxFlex="8%"
+                color="warn"
+                mat-icon-button
+                matTooltip="{{ 'tooltips.Remove Period' | translate }}"
+                matTooltipPosition="right"
+                (click)="deleteFloatingRatePeriod(floatingRatePeriod)"
+              >
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button type="submit" color="primary" [disabled]="!floatingRateForm.valid" *mifosxHasPermission="'CREATE_FLOATINGRATE'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          type="submit"
+          color="primary"
+          [disabled]="!floatingRateForm.valid"
+          *mifosxHasPermission="'CREATE_FLOATINGRATE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html b/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html
index 0206ff2a4f..16a028e592 100644
--- a/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html
+++ b/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html
@@ -1,105 +1,158 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="floatingRateForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="15%">
-
           <mat-form-field fxFlex="25%">
-            <mat-label>{{'labels.inputs.Floating Rate Name' | translate}}</mat-label>
-            <input matInput required matTooltip="{{ 'tooltips.Unique name for the floating rate scheme' | translate}}" formControlName="name">
+            <mat-label>{{ 'labels.inputs.Floating Rate Name' | translate }}</mat-label>
+            <input
+              matInput
+              required
+              matTooltip="{{ 'tooltips.Unique name for the floating rate scheme' | translate }}"
+              formControlName="name"
+            />
             <mat-error *ngIf="floatingRateForm.controls.name.hasError('required')">
-              {{'labels.inputs.Floating Rate Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Floating Rate Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="checkbox-wrapper" fxFlex="25%">
-            <mat-checkbox formControlName="isBaseLendingRate" matTooltip="{{ 'tooltips.Base lending rate for the organisation' | translate}}" class="checkbox" labelPosition="before">
-              {{'labels.inputs.Is Base Lending Rate' | translate}}?
+            <mat-checkbox
+              formControlName="isBaseLendingRate"
+              matTooltip="{{ 'tooltips.Base lending rate for the organisation' | translate }}"
+              class="checkbox"
+              labelPosition="before"
+            >
+              {{ 'labels.inputs.Is Base Lending Rate' | translate }}?
             </mat-checkbox>
           </div>
 
           <div class="checkbox-wrapper" fxFlex="15%">
-            <mat-checkbox formControlName="isActive" matTooltip="{{ 'tooltips.Floating rate scheme to be activated' | translate}}" class="checkbox" labelPosition="before">
-              {{'labels.inputs.Active' | translate}}
+            <mat-checkbox
+              formControlName="isActive"
+              matTooltip="{{ 'tooltips.Floating rate scheme to be activated' | translate }}"
+              class="checkbox"
+              labelPosition="before"
+            >
+              {{ 'labels.inputs.Active' | translate }}
             </mat-checkbox>
           </div>
-
         </div>
 
-        <br>
+        <br />
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="70%" fxLayoutGap.lt-md="0px" class="m-b-10" fxLayout.lt-md="column">
-
-          <p fxFlex="25%" class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Floating interest rate and start date for this floating rate scheme' | translate}}"></i></p>
+          <p fxFlex="25%" class="mat-title">
+            {{ 'labels.inputs.Floating Rate Periods' | translate }}
+            <i
+              class="fas fa-question"
+              matTooltip="{{
+                'tooltips.Floating interest rate and start date for this floating rate scheme' | translate
+              }}"
+            ></i>
+          </p>
 
           <button mat-mini-fab type="button" color="primary" (click)="addFloatingRatePeriod()">
             <fa-icon icon="plus"></fa-icon>
           </button>
-
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="fromDate">
-            <th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest effective from date' | translate}}" mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate | dateFormat }} </td>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              matTooltip="{{ 'tooltips.Interest effective from date' | translate }}"
+              mat-sort-header
+            >
+              {{ 'labels.inputs.From Date' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let floatingRatePeriod">{{ floatingRatePeriod.fromDate | dateFormat }}</td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">
-            <th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Annualised Interest rate' | translate}}" mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate }} </td>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              matTooltip="{{ 'tooltips.Annualised Interest rate' | translate }}"
+              mat-sort-header
+            >
+              {{ 'labels.inputs.Interest Rate' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let floatingRatePeriod">{{ floatingRatePeriod.interestRate }}</td>
           </ng-container>
 
           <ng-container matColumnDef="isDifferential">
-            <th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest rate mentioned is added to base lending rate' | translate}}" mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              matTooltip="{{ 'tooltips.Interest rate mentioned is added to base lending rate' | translate }}"
+              mat-sort-header
+            >
+              {{ 'labels.inputs.Is Differential' | translate }}?
+            </th>
             <td mat-cell *matCellDef="let floatingRate">
-              <fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
-                class="is-differential" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!floatingRate.isDifferentialToBaseLendingRate" icon="times-circle" size="lg"
-                class="not-is-differential" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="floatingRate.isDifferentialToBaseLendingRate"
+                icon="check-circle"
+                size="lg"
+                class="is-differential"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!floatingRate.isDifferentialToBaseLendingRate"
+                icon="times-circle"
+                size="lg"
+                class="not-is-differential"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let floatingRatePeriod">
-              <button type="button" color="primary" mat-icon-button
-                (click)="editFloatingRatePeriod(floatingRatePeriod)">
+              <button
+                type="button"
+                color="primary"
+                mat-icon-button
+                (click)="editFloatingRatePeriod(floatingRatePeriod)"
+              >
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" color="warn" mat-icon-button
-                (click)="deleteFloatingRatePeriod(floatingRatePeriod)">
+              <button type="button" color="warn" mat-icon-button (click)="deleteFloatingRatePeriod(floatingRatePeriod)">
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button type="submit" color="primary" [disabled]="!floatingRateForm.valid || floatingRateForm.pristine && isFloatingRateFormPristine">
-          {{'labels.buttons.Submit' | translate}}
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          type="submit"
+          color="primary"
+          [disabled]="!floatingRateForm.valid || (floatingRateForm.pristine && isFloatingRateFormPristine)"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
         </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/floating-rates/floating-rate-period-dialog/floating-rate-period-dialog.component.html b/src/app/products/floating-rates/floating-rate-period-dialog/floating-rate-period-dialog.component.html
index 7e8cbc7fa1..cce65f7c11 100644
--- a/src/app/products/floating-rates/floating-rate-period-dialog/floating-rate-period-dialog.component.html
+++ b/src/app/products/floating-rates/floating-rate-period-dialog/floating-rate-period-dialog.component.html
@@ -1,41 +1,43 @@
-<h1 mat-dialog-title>{{'labels.inputs.Floating Rate Periods' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.inputs.Floating Rate Periods' | translate }}</h1>
 
 <mat-dialog-content>
-
   <form [formGroup]="floatingRatePeriodForm">
-
     <div fxLayout="column">
-
       <mat-form-field (click)="fromDatePicker.open()">
-        <mat-label>{{'labels.inputs.From Date' | translate}}</mat-label>
-        <input required matInput formControlName="fromDate" [min]="minDate" [matDatepicker]="fromDatePicker">
+        <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+        <input required matInput formControlName="fromDate" [min]="minDate" [matDatepicker]="fromDatePicker" />
         <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #fromDatePicker></mat-datepicker>
         <mat-error *ngIf="floatingRatePeriodForm.controls.fromDate.hasError('required')">
-          {{'labels.inputs.From Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>{{'labels.inputs.Interest Rate' | translate}}</mat-label>
-        <input matInput type="number" required formControlName="interestRate">
+        <mat-label>{{ 'labels.inputs.Interest Rate' | translate }}</mat-label>
+        <input matInput type="number" required formControlName="interestRate" />
         <mat-error *ngIf="floatingRatePeriodForm.controls.interestRate.hasError('required')">
-          {{'labels.inputs.Interest Rate' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+          {{ 'labels.inputs.Interest Rate' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-checkbox class="is-differential" formControlName="isDifferentialToBaseLendingRate" labelPosition="after">
-        {{'labels.inputs.Is Differential' | translate}}?
+        {{ 'labels.inputs.Is Differential' | translate }}?
       </mat-checkbox>
-
     </div>
-
   </form>
-
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary"
-    [disabled]="!floatingRatePeriodForm.valid || floatingRatePeriodForm.pristine" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
+  <button mat-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [disabled]="!floatingRatePeriodForm.valid || floatingRatePeriodForm.pristine"
+    (click)="submit()"
+  >
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/products/floating-rates/floating-rates.component.html b/src/app/products/floating-rates/floating-rates.component.html
index 7117bbed6f..71897e03ec 100644
--- a/src/app/products/floating-rates/floating-rates.component.html
+++ b/src/app/products/floating-rates/floating-rates.component.html
@@ -1,56 +1,80 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FLOATINGRATE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Floating Rate' | translate}}
+    {{ 'labels.buttons.Create Floating Rate' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let floatingRate"> {{ floatingRate.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let floatingRate">{{ floatingRate.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Created By' | translate}} </th>
-        <td mat-cell *matCellDef="let floatingRate"> {{ floatingRate.createdBy }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Created By' | translate }}</th>
+        <td mat-cell *matCellDef="let floatingRate">{{ floatingRate.createdBy }}</td>
       </ng-container>
 
       <ng-container matColumnDef="isBaseLendingRate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Is Base Lending Rate' | translate}}? </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Is Base Lending Rate' | translate }}?
+        </th>
         <td mat-cell *matCellDef="let floatingRate">
-          <fa-icon *ngIf="floatingRate.isBaseLendingRate" icon="check-circle" size="lg" class="is-base-lending-rate-or-active" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!floatingRate.isBaseLendingRate" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+          <fa-icon
+            *ngIf="floatingRate.isBaseLendingRate"
+            icon="check-circle"
+            size="lg"
+            class="is-base-lending-rate-or-active"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!floatingRate.isBaseLendingRate"
+            icon="times-circle"
+            size="lg"
+            class="not-is-base-lending-rate-or-active"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.catalogs.Active' | translate}} </th>
-          <td mat-cell *matCellDef="let floatingRate">
-            <fa-icon *ngIf="floatingRate.isActive" icon="check-circle" size="lg" class="is-base-lending-rate-or-active" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!floatingRate.isActive" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
-          </td>
-        </ng-container>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.catalogs.Active' | translate }}</th>
+        <td mat-cell *matCellDef="let floatingRate">
+          <fa-icon
+            *ngIf="floatingRate.isActive"
+            icon="check-circle"
+            size="lg"
+            class="is-base-lending-rate-or-active"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!floatingRate.isActive"
+            icon="times-circle"
+            size="lg"
+            class="not-is-base-lending-rate-or-active"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+        </td>
+      </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html b/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html
index 0ff0417c78..f2f82aef5d 100644
--- a/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html
+++ b/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html
@@ -1,89 +1,83 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FLOATINGRATE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
-
-        <div fxFlex="18%" class="mat-body-strong">
-          {{'labels.inputs.Floating Rate Name' | translate}}:
-        </div>
+        <div fxFlex="18%" class="mat-body-strong">{{ 'labels.inputs.Floating Rate Name' | translate }}:</div>
 
         <div fxFlex="18%">
           {{ floatingRateData.name }}
         </div>
 
-        <div fxFlex="20%" class="mat-body-strong">
-          {{'labels.inputs.Is Base Lending Rate' | translate}}:
-        </div>
+        <div fxFlex="20%" class="mat-body-strong">{{ 'labels.inputs.Is Base Lending Rate' | translate }}:</div>
 
         <div fxFlex="10%">
           {{ floatingRateData.isBaseLendingRate | yesNo }}
         </div>
 
-        <div fxFlex="14%" class="mat-body-strong">
-          {{'labels.inputs.Is Active' | translate}}:
-        </div>
+        <div fxFlex="14%" class="mat-body-strong">{{ 'labels.inputs.Is Active' | translate }}:</div>
 
         <div fxFlex="10%">
           {{ floatingRateData.isActive | yesNo }}
         </div>
-
       </div>
 
-      <br>
+      <br />
 
       <mat-divider [inset]="true"></mat-divider>
 
-      <br>
+      <br />
 
-      <p class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}}</p>
+      <p class="mat-title">{{ 'labels.inputs.Floating Rate Periods' | translate }}</p>
 
       <div class="mat-elevation-z8">
-
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="fromDate">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
-            <td mat-cell *matCellDef="let floatingRate"> {{ floatingRate.fromDate | dateFormat }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.From Date' | translate }}</th>
+            <td mat-cell *matCellDef="let floatingRate">{{ floatingRate.fromDate | dateFormat }}</td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
-            <td mat-cell *matCellDef="let floatingRate"> {{ floatingRate.interestRate | number }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Interest Rate' | translate }}</th>
+            <td mat-cell *matCellDef="let floatingRate">{{ floatingRate.interestRate | number }}</td>
           </ng-container>
 
           <ng-container matColumnDef="isDifferential">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ 'labels.inputs.Is Differential' | translate }}?
+            </th>
             <td mat-cell *matCellDef="let floatingRate">
-              <fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
-                class="is-differential" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!floatingRate.isDifferentialToBaseLendingRate" icon="times-circle" size="lg"
-                class="not-is-differential" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="floatingRate.isDifferentialToBaseLendingRate"
+                icon="check-circle"
+                size="lg"
+                class="is-differential"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!floatingRate.isDifferentialToBaseLendingRate"
+                icon="times-circle"
+                size="lg"
+                class="not-is-differential"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
index 3ec704ee01..93b49b1380 100644
--- a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
+++ b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
@@ -1,598 +1,690 @@
 <div class="tab-container mat-typography" *ngIf="loanProduct">
-
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Name' | translate}}:</span>
-    <span  fxFlex="53%"><b>{{ loanProduct.name }}</b></span>
+    <span fxFlex="47%">{{ 'labels.inputs.Name' | translate }}:</span>
+    <span fxFlex="53%"
+      ><b>{{ loanProduct.name }}</b></span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Short Name' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.shortName }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Short Name' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.externalId">
-    <span fxFlex="47%">{{ 'labels.inputs.External Id' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.externalId }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.External Id' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.externalId }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.fundId">
-    <span fxFlex="47%">{{ 'labels.inputs.Fund' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.fundName }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Fund' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.fundName }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Include in Customer Loan Counter' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.includeInBorrowerCycle | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Include in Customer Loan Counter' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.includeInBorrowerCycle | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.startDate">
-    <span fxFlex="47%">{{ 'labels.inputs.Start Date' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.startDate | dateFormat }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Start Date' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.startDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.closeDate">
-    <span fxFlex="47%">{{ 'labels.inputs.Close Date' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.closeDate | dateFormat }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Close Date' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.closeDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.description">
-    <span fxFlex="47%">{{ 'labels.inputs.Description' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.description }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Description' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Currency' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.currency.code }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.currency.code }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Currency' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.currency.displayLabel }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.currency.displayLabel }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Decimal Places' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.currency.decimalPlaces }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.currency.decimalPlaces }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Currency in multiples of' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.currency.inMultiplesOf }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.currency.inMultiplesOf }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Installment in multiples of' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Installment in multiples of' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Principal' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.principal | formatNumber }}
-      (Min {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | formatNumber }}
-      : Max {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | formatNumber }})
+    <span fxFlex="47%">{{ 'labels.inputs.Principal' | translate }}:</span>
+    <span fxFlex="53%"
+      >{{ loanProduct.principal | formatNumber }} (Min
+      {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | formatNumber }} : Max
+      {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | formatNumber }})
     </span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Allow Approved / Disbursed Amounts Over Applied' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Allow Approved / Disbursed Amounts Over Applied' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.allowApprovedDisbursedAmountsOverApplied | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.allowApprovedDisbursedAmountsOverApplied">
-    <span fxFlex="47%">{{ 'labels.inputs.Over Amount' | translate}}:</span>
-    <span fxFlex="53%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber
-      | formatNumber:0
-      }} %</span>
-    <span fxFlex="53%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber |
-      formatNumber }} {{ loanProduct.currencyCode }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Over Amount' | translate }}:</span>
+    <span fxFlex="53%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'"
+      >{{ loanProduct.overAppliedNumber | formatNumber: 0 }} %</span
+    >
+    <span fxFlex="53%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'"
+      >{{ loanProduct.overAppliedNumber | formatNumber }} {{ loanProduct.currencyCode }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Installment day calculation from' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.repaymentStartDateType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Installment day calculation from' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.repaymentStartDateType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Number of Repayments' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.numberOfRepayments + ' (Min: ' + (loanProduct.minNumberOfRepayments ?
-      loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) + ', Max: ' +
-      (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) + ')'
-      }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Number of Repayments' | translate }}:</span>
+    <span fxFlex="53%">{{
+      loanProduct.numberOfRepayments +
+        ' (Min: ' +
+        (loanProduct.minNumberOfRepayments ? loanProduct.minNumberOfRepayments : loanProduct.numberOfRepayments) +
+        ', Max: ' +
+        (loanProduct.maxNumberOfRepayments ? loanProduct.maxNumberOfRepayments : loanProduct.numberOfRepayments) +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Linked to floating interest rates' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.isLinkedToFloatingInterestRates | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Linked to floating interest rates' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.isLinkedToFloatingInterestRates | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="!loanProduct.isLinkedToFloatingInterestRates">
-    <span fxFlex="47%">{{ 'labels.inputs.Nominal interest rate' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestRatePerPeriod + ' (Min: ' + (loanProduct.minInterestRatePerPeriod ?
-      loanProduct.minInterestRatePerPeriod : loanProduct.interestRatePerPeriod) + ', Max: ' +
-      (loanProduct.maxInterestRatePerPeriod ? loanProduct.maxInterestRatePerPeriod : loanProduct.interestRatePerPeriod)
-      + ')'}} {{ loanProduct.interestRateFrequencyType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
+    <span fxFlex="53%"
+      >{{
+        loanProduct.interestRatePerPeriod +
+          ' (Min: ' +
+          (loanProduct.minInterestRatePerPeriod
+            ? loanProduct.minInterestRatePerPeriod
+            : loanProduct.interestRatePerPeriod) +
+          ', Max: ' +
+          (loanProduct.maxInterestRatePerPeriod
+            ? loanProduct.maxInterestRatePerPeriod
+            : loanProduct.interestRatePerPeriod) +
+          ')'
+      }}
+      {{ loanProduct.interestRateFrequencyType?.value | translateKey: 'catalogs' }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.isLinkedToFloatingInterestRates" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="47%">{{ 'labels.inputs.Floating Lending Interest Rate' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.floatingRateName }}</span>
-    <span fxFlex="47%">{{ 'labels.inputs.Interest Rate Differential' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestRateDifferential }}</span>
-    <span fxFlex="47%">{{ 'labels.inputs.Floating Interest Rate Calculation Allowed' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.isFloatingInterestRateCalculationAllowed | yesNo }}</span>
-    <span fxFlex="47%">{{ 'labels.inputs.Floating Interest Rate' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.defaultDifferentialLendingRate + ' (Min: ' +
-      (loanProduct.minDifferentialLendingRate ? loanProduct.minDifferentialLendingRate :
-      loanProduct.defaultDifferentialLendingRate) + ', Max: ' + (loanProduct.maxDifferentialLendingRate ?
-      loanProduct.maxDifferentialLendingRate : loanProduct.defaultDifferentialLendingRate) + ')' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Floating Lending Interest Rate' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.floatingRateName }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Interest Rate Differential' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.interestRateDifferential }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Floating Interest Rate Calculation Allowed' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.isFloatingInterestRateCalculationAllowed | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Floating Interest Rate' | translate }}:</span>
+    <span fxFlex="53%">{{
+      loanProduct.defaultDifferentialLendingRate +
+        ' (Min: ' +
+        (loanProduct.minDifferentialLendingRate
+          ? loanProduct.minDifferentialLendingRate
+          : loanProduct.defaultDifferentialLendingRate) +
+        ', Max: ' +
+        (loanProduct.maxDifferentialLendingRate
+          ? loanProduct.maxDifferentialLendingRate
+          : loanProduct.defaultDifferentialLendingRate) +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Terms vary based on loan cycle' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.useBorrowerCycle | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Terms vary based on loan cycle' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.useBorrowerCycle | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.principalVariationsForBorrowerCycle?.length">
-
-    <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Principal by loan cycle' | translate}}</h4>
+    <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Principal by loan cycle' | translate }}</h4>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.principalVariationsForBorrowerCycle">
-
       <ng-container matColumnDef="valueConditionType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Condition' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
-          {{ variation.valueConditionType.value | translateKey:'catalogs' }}
+          {{ variation.valueConditionType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="borrowerCycleNumber">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Loan Cycle' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.borrowerCycleNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="minValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Minimum' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.minValue | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="defaultValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Default' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.defaultValue | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="maxValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Maximum' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.maxValue | formatNumber }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.numberOfRepaymentVariationsForBorrowerCycle?.length">
-
-    <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Number of Repayments by loan cycle' | translate}}</h4>
-
-    <table fxFlexFill class="mat-elevation-z1" mat-table
-      [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle">
-
+    <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Number of Repayments by loan cycle' | translate }}</h4>
+
+    <table
+      fxFlexFill
+      class="mat-elevation-z1"
+      mat-table
+      [dataSource]="loanProduct.numberOfRepaymentVariationsForBorrowerCycle"
+    >
       <ng-container matColumnDef="valueConditionType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Condition' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
-          {{ variation.valueConditionType.value | translateKey:'catalogs' }}
+          {{ variation.valueConditionType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="borrowerCycleNumber">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Loan Cycle' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.borrowerCycleNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="minValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Minimum' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.minValue }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="defaultValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Default' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.defaultValue }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="maxValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Maximum' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.maxValue }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.interestRateVariationsForBorrowerCycle?.length">
-
-    <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Nominal Interest Rate by loan cycle' | translate}}</h4>
-
-    <table fxFlexFill class="mat-elevation-z1" mat-table
-      [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle">
-
+    <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Nominal Interest Rate by loan cycle' | translate }}</h4>
+
+    <table
+      fxFlexFill
+      class="mat-elevation-z1"
+      mat-table
+      [dataSource]="loanProduct.interestRateVariationsForBorrowerCycle"
+    >
       <ng-container matColumnDef="valueConditionType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Condition' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
-          {{ variation.valueConditionType.value | translateKey:'catalogs' }}
+          {{ variation.valueConditionType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="borrowerCycleNumber">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Loan Cycle' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.borrowerCycleNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="minValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Minimum' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.minValue }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="defaultValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Default' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.defaultValue }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="maxValue">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Maximum' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
         <td mat-cell *matCellDef="let variation">
           {{ variation.maxValue }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="variationsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: variationsDisplayedColumns"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Repay Every' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.repaymentEvery }} {{ loanProduct.repaymentFrequencyType.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Repay Every' | translate }}:</span>
+    <span fxFlex="53%"
+      >{{ loanProduct.repaymentEvery }} {{ loanProduct.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.fixedLength">
-    <span fxFlex="47%">{{ 'labels.inputs.Fixed Length' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.fixedLength }} {{ loanProduct.repaymentFrequencyType.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Fixed Length' | translate }}:</span>
+    <span fxFlex="53%"
+      >{{ loanProduct.fixedLength }} {{ loanProduct.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment">
-    <span fxFlex="47%">{{ 'labels.inputs.Minimum days between disbursal and first repayment date' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment | formatNumber }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Minimum days between disbursal and first repayment date' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.minimumDaysBetweenDisbursalAndFirstRepayment | formatNumber }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill *ngIf="loanProduct.amortizationType?.value">
-    <span fxFlex="47%">{{ 'labels.inputs.Amortization' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.amortizationType.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Amortization' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.amortizationType.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Is Equal Amortization' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.isEqualAmortization | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.isEqualAmortization | yesNo }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Interest Method' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Interest Method' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.interestType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Interest Calculation Period' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestCalculationPeriodType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Interest Calculation Period' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.interestCalculationPeriodType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.allowPartialPeriodInterestCalculation">
-    <span fxFlex="47%">{{ 'labels.inputs.Allow Partial Interest Calculation with same as repayment' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowPartialPeriodInterestCalculation | yesNo }}</span>
+    <span fxFlex="47%"
+      >{{ 'labels.inputs.Allow Partial Interest Calculation with same as repayment' | translate }}:</span
+    >
+    <span fxFlex="53%">{{ loanProduct.allowPartialPeriodInterestCalculation | yesNo }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Loan Schedule' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Loan Schedule' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Loan Schedule Type' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.loanScheduleType.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Loan Schedule Type' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.loanScheduleType.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Repayment Strategy' | translate}}:</span>
-    <span  fxFlex="53%" class="repayment-strategy">{{ loanProduct.transactionProcessingStrategyName | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Repayment Strategy' | translate }}:</span>
+    <span fxFlex="53%" class="repayment-strategy">{{
+      loanProduct.transactionProcessingStrategyName | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="isAdvancedPaymentAllocation">
-    <span fxFlex="47%">{{ 'labels.inputs.Loan Schedule Processing Type' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.loanScheduleProcessingType.value }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Loan Schedule Processing Type' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.loanScheduleProcessingType.value }}</span>
   </div>
 
   <div fxFlexFill *ngIf="isAdvancedPaymentAllocation">
-    <span fxFlex="47%">{{ 'labels.inputs.Advanced Payment Allocation Transactions' | translate}}:</span>
-    <span  fxFlex="53%">
+    <span fxFlex="47%">{{ 'labels.inputs.Advanced Payment Allocation Transactions' | translate }}:</span>
+    <span fxFlex="53%">
       <mat-accordion>
-        <mifosx-view-advance-paymeny-allocation *ngFor="let paymentAllocation of paymentAllocations"
+        <mifosx-view-advance-paymeny-allocation
+          *ngFor="let paymentAllocation of paymentAllocations"
           [paymentAllocation]="paymentAllocation"
-          [advancePaymentAllocationData]="advancePaymentAllocationData">
+          [advancePaymentAllocationData]="advancePaymentAllocationData"
+        >
         </mifosx-view-advance-paymeny-allocation>
       </mat-accordion>
     </span>
   </div>
 
   <div fxFlexFill *ngIf="isAdvancedPaymentAllocation && creditAllocations.length > 0">
-    <span fxFlex="47%">{{ 'labels.inputs.Advanced Credit Allocation Transactions' | translate}}:</span>
-    <span  fxFlex="53%">
+    <span fxFlex="47%">{{ 'labels.inputs.Advanced Credit Allocation Transactions' | translate }}:</span>
+    <span fxFlex="53%">
       <mat-accordion>
-        <mifosx-view-advance-paymeny-allocation *ngFor="let creditAllocation of creditAllocations"
+        <mifosx-view-advance-paymeny-allocation
+          *ngFor="let creditAllocation of creditAllocations"
           [creditAllocation]="creditAllocation"
-          [advancePaymentAllocationData]="advancePaymentAllocationData">
+          [advancePaymentAllocationData]="advancePaymentAllocationData"
+        >
         </mifosx-view-advance-paymeny-allocation>
       </mat-accordion>
     </span>
   </div>
 
   <div fxFlexFill *ngIf="isAdvancedPaymentAllocation && supportedInterestRefundTypes?.length > 0">
-    <span fxFlex="47%">{{ 'labels.inputs.Supported Interest Refund Types' | translate}}:</span>
-    <span  fxFlex="53%">
-      {{mapHumanReadableValueStringEnumOptionDataList(supportedInterestRefundTypes)}}
+    <span fxFlex="47%">{{ 'labels.inputs.Supported Interest Refund Types' | translate }}:</span>
+    <span fxFlex="53%">
+      {{ mapHumanReadableValueStringEnumOptionDataList(supportedInterestRefundTypes) }}
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Down Payments' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Down Payments' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Enable Down Payments' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.enableDownPayment | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.enableDownPayment | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.enableDownPayment" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="47%">{{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} (%):</span>
-    <span  fxFlex="53%">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }} (%):</span>
+    <span fxFlex="53%">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.enableDownPayment" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="47%">{{ 'labels.inputs.Enable Auto Repayment for Down Payment' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.enableAutoRepaymentForDownPayment | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Enable Auto Repayment for Down Payment' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.enableAutoRepaymentForDownPayment | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="isAdvancedPaymentAllocation" fxLayout="row wrap" fxLayout.lt-md="column">
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Loan Charge-off behaviour' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="47%">{{ 'labels.inputs.Loan Charge-off behaviour' | translate}}:</span>
-      <span  fxFlex="53%">{{ loanProduct.chargeOffBehaviour.value | translateKey:'catalogs' }}</span>
+      <span fxFlex="47%">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
+      <span fxFlex="53%">{{ loanProduct.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
     </div>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Moratorium' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Moratorium' | translate }}</h3>
 
   <div fxFlexFill *ngIf="loanProduct.delinquencyBucket">
-    <span fxFlex="47%">{{ 'labels.inputs.Delinquency Bucket' | translate}}:</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
     <span fxFlex="53%" *ngIf="loanProduct.delinquencyBucket.name">{{ loanProduct.delinquencyBucket.name }}</span>
     <span fxFlex="53%" *ngIf="!loanProduct.delinquencyBucket.name">{{ 'labels.inputs.Unassigned' | translate }}</span>
   </div>
 
   <div fxFlexFill *ngIf="!loanProduct.delinquencyBucket">
-    <span fxFlex="47%">{{ 'labels.inputs.Delinquency Bucket' | translate}}:</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Delinquency Bucket' | translate }}:</span>
     <span fxFlex="53%">{{ 'labels.inputs.Unassigned' | translate }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.delinquencyBucket">
-    <span fxFlex="47%">{{ 'labels.inputs.Enable installment level Delinquency' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Enable installment level Delinquency' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.graceOnPrincipalPayment">
-    <span fxFlex="47%">{{ 'labels.inputs.Grace on principal payment' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.graceOnPrincipalPayment }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Grace on principal payment' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.graceOnPrincipalPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.graceOnInterestPayment">
-    <span fxFlex="47%">{{ 'labels.inputs.Grace on interest payment' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.graceOnInterestPayment }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Grace on interest payment' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.graceOnInterestPayment }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.graceOnInterestCharged">
-    <span fxFlex="47%">{{ 'labels.inputs.Interest free period' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.graceOnInterestCharged }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Interest free period' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.graceOnInterestCharged }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.inArrearsTolerance">
-    <span fxFlex="47%">{{ 'labels.inputs.Arrears tolerance' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.inArrearsTolerance }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.inArrearsTolerance }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Days in year' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.daysInYearType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Days in year' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.daysInYearType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Days in month' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.daysInMonthType?.value | translateKey:'catalogs' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Days in month' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.daysInMonthType?.value | translateKey: 'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Allow fixing of the installment amount' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.canDefineInstallmentAmount | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Allow fixing of the installment amount' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.canDefineInstallmentAmount | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.graceOnArrearsAgeing">
-    <span fxFlex="47%">{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.graceOnArrearsAgeing }}</span>
+    <span fxFlex="47%"
+      >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
+    >
+    <span fxFlex="53%">{{ loanProduct.graceOnArrearsAgeing }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.overdueDaysForNPA">
-    <span fxFlex="47%">{{ 'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.overdueDaysForNPA }}</span>
+    <span fxFlex="47%"
+      >{{
+        'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)'
+          | translate
+      }}:</span
+    >
+    <span fxFlex="53%">{{ loanProduct.overdueDaysForNPA }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion | yesNo }}</span>
+    <span fxFlex="47%"
+      >{{ 'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate }}:</span
+    >
+    <span fxFlex="53%">{{ loanProduct.accountMovesOutOfNPAOnlyOnArrearsCompletion | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.principalThresholdForLastInstallment">
-    <span fxFlex="47%">{{ 'labels.inputs.Principal Threshold (%) for Last Instalment' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.principalThresholdForLastInstallment }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Principal Threshold (%) for Last Instalment' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.principalThresholdForLastInstallment }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Variable Installments allowed' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowVariableInstallments | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Variable Installments allowed' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.allowVariableInstallments | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.allowVariableInstallments">
-    <span fxFlex="47%">{{ 'labels.inputs.Variable Installments' | translate}}:</span>
-    <span  fxFlex="53%">{{ '(Min: ' + loanProduct.minimumGap + ', Max: ' + (loanProduct.maximumGap ?
-      loanProduct.maximumGap : loanProduct.minimumGap) + ')' }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Variable Installments' | translate }}:</span>
+    <span fxFlex="53%">{{
+      '(Min: ' +
+        loanProduct.minimumGap +
+        ', Max: ' +
+        (loanProduct.maximumGap ? loanProduct.maximumGap : loanProduct.minimumGap) +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Allowed to be used for providing Topup Loans' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.canUseForTopup | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Allowed to be used for providing Topup Loans' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.canUseForTopup | yesNo }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Recalculation' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Recalculation' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Recalculate Interest' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.isInterestRecalculationEnabled | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Recalculate Interest' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.isInterestRecalculationEnabled | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.isInterestRecalculationEnabled" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="47%">{{ 'labels.inputs.Pre-closure interest calculation rule' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value }}</span>
-    <span fxFlex="47%">{{ 'labels.inputs.Advance payments adjustment type' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
-    <span fxFlex="47%">{{ 'labels.inputs.Interest recalculation compounding on' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
-    <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0"
-      fxLayout="row wrap" fxLayout.lt-md="column">
-      <span fxFlex="47%">{{ 'labels.inputs.Frequency for compounding' | translate}}:</span>
-      <span  fxFlex="53%">
+    <span fxFlex="47%">{{ 'labels.inputs.Pre-closure interest calculation rule' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.interestRecalculationData.preClosureInterestCalculationStrategy.value }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Advance payments adjustment type' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.interestRecalculationData.rescheduleStrategyType.value }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.interestRecalculationData.interestRecalculationCompoundingType.value }}</span>
+    <div
+      fxFlexFill
+      *ngIf="loanProduct.interestRecalculationData.interestRecalculationCompoundingType.id !== 0"
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <span fxFlex="47%">{{ 'labels.inputs.Frequency for compounding' | translate }}:</span>
+      <span fxFlex="53%">
         {{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
         <span
-          *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay">&nbsp;&nbsp;{{
-          'on ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay?.value }}</span>
+          *ngIf="
+            loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
+            loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay
+          "
+          >&nbsp;&nbsp;{{
+            'on ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay?.value
+          }}</span
+        >
         <span
-          *ngIf="(loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3">&nbsp;&nbsp;{{
-          loanProduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday?.value }}</span>
+          *ngIf="
+            (loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
+              !loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay) ||
+            loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 3
+          "
+          >&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday?.value }}</span
+        >
         <span
-          *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay">&nbsp;&nbsp;{{
-          'on day ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay }}</span>
+          *ngIf="
+            loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id === 4 &&
+            loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay
+          "
+          >&nbsp;&nbsp;{{
+            'on day ' + loanProduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay
+          }}</span
+        >
       </span>
-      <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1"
-        fxLayout="row wrap" fxLayout.lt-md="column">
-        <span fxFlex="47%">{{ 'labels.inputs.Frequency Interval for compounding' | translate}}:</span>
-        <span  fxFlex="53%">{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval }}</span>
+      <div
+        fxFlexFill
+        *ngIf="loanProduct.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1"
+        fxLayout="row wrap"
+        fxLayout.lt-md="column"
+      >
+        <span fxFlex="47%">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}:</span>
+        <span fxFlex="53%">{{ loanProduct.interestRecalculationData.recalculationCompoundingFrequencyInterval }}</span>
       </div>
     </div>
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      <span fxFlex="47%">{{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate}}:</span>
-      <span  fxFlex="53%">
+      <span fxFlex="47%">{{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}:</span>
+      <span fxFlex="53%">
         {{ loanProduct.interestRecalculationData.recalculationRestFrequencyType.value }}
         <span
-          *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay">&nbsp;&nbsp;{{
-          'on ' + loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay?.value }}</span>
+          *ngIf="
+            loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
+            loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay
+          "
+          >&nbsp;&nbsp;{{ 'on ' + loanProduct.interestRecalculationData.recalculationRestFrequencyNthDay?.value }}</span
+        >
         <span
-          *ngIf="(loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && !loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay) || loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 3">&nbsp;&nbsp;{{
-          loanProduct.interestRecalculationData.recalculationRestFrequencyWeekday?.value }}</span>
+          *ngIf="
+            (loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
+              !loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay) ||
+            loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 3
+          "
+          >&nbsp;&nbsp;{{ loanProduct.interestRecalculationData.recalculationRestFrequencyWeekday?.value }}</span
+        >
         <span
-          *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 && loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay">&nbsp;&nbsp;{{
-          'on day ' + loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay }}</span>
+          *ngIf="
+            loanProduct.interestRecalculationData.recalculationRestFrequencyType.id === 4 &&
+            loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay
+          "
+          >&nbsp;&nbsp;{{ 'on day ' + loanProduct.interestRecalculationData.recalculationRestFrequencyOnDay }}</span
+        >
       </span>
     </div>
-    <div fxFlexFill *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1"
-      fxLayout="row wrap" fxLayout.lt-md="column">
-      <span fxFlex="47%">{{ 'labels.inputs.Frequency Interval for recalculation' | translate}}:</span>
+    <div
+      fxFlexFill
+      *ngIf="loanProduct.interestRecalculationData.recalculationRestFrequencyType.id !== 1"
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <span fxFlex="47%">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}:</span>
       <span fxFlex="53%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
       <div fxFlexFill *ngIf="loanProduct.recalculationRestFrequencyDate">
-        <span fxFlex="47%">{{ 'labels.inputs.Rest Frequency Date' | translate}}:</span>
+        <span fxFlex="47%">{{ 'labels.inputs.Rest Frequency Date' | translate }}:</span>
         <span fxFlex="53%">{{ loanProduct.interestRecalculationData.recalculationRestFrequencyDate }}</span>
       </div>
     </div>
     <div fxFlexFill>
-      <span fxFlex="47%">{{ 'labels.inputs.Is Arrears recognization based on original schedule' | translate}}:</span>
+      <span fxFlex="47%">{{ 'labels.inputs.Is Arrears recognization based on original schedule' | translate }}:</span>
       <span fxFlex="53%">{{ loanProduct.interestRecalculationData.isArrearsBasedOnOriginalSchedule | yesNo }}</span>
     </div>
     <div fxFlexFill *ngIf="loanProduct.loanScheduleType.code === 'PROGRESSIVE'">
-      <span fxFlex="47%">{{ 'labels.inputs.Do not calculate interest on past due principal balances' | translate}}:</span>
+      <span fxFlex="47%"
+        >{{ 'labels.inputs.Do not calculate interest on past due principal balances' | translate }}:</span
+      >
       <span fxFlex="53%">{{ loanProduct.interestRecalculationData.disallowInterestCalculationOnPastDue | yesNo }}</span>
     </div>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Guarantee Requirements' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Guarantee Requirements' | translate }}</h3>
 
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Place Guarantee Funds On-Hold' | translate}}:</span>
-    <span  fxFlex="53%">{{ loanProduct.holdGuaranteeFunds | yesNo }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Place Guarantee Funds On-Hold' | translate }}:</span>
+    <span fxFlex="53%">{{ loanProduct.holdGuaranteeFunds | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.holdGuaranteeFunds" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="47%">{{ 'labels.inputs.Mandatory Guarantee' | translate}} (%):</span>
-    <span  fxFlex="53%">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Mandatory Guarantee' | translate }} (%):</span>
+    <span fxFlex="53%">{{ loanProduct.productGuaranteeData.mandatoryGuarantee }}</span>
     <div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds">
-      <span fxFlex="47%">{{ 'labels.inputs.Minimum Guarantee from Own Funds' | translate}} (%):</span>
-      <span  fxFlex="53%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
+      <span fxFlex="47%">{{ 'labels.inputs.Minimum Guarantee from Own Funds' | translate }} (%):</span>
+      <span fxFlex="53%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromOwnFunds }}</span>
     </div>
     <div fxFlexFill *ngIf="loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor">
-      <span fxFlex="47%">{{ 'labels.inputs.Minimum Guarantee from Guarantor Funds' | translate}} (%):</span>
-      <span  fxFlex="53%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
+      <span fxFlex="47%">{{ 'labels.inputs.Minimum Guarantee from Guarantor Funds' | translate }} (%):</span>
+      <span fxFlex="53%">{{ loanProduct.productGuaranteeData.minimumGuaranteeFromGuarantor }}</span>
     </div>
   </div>
 
@@ -602,37 +694,41 @@ <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Loan Tranche Details' | transla
 
   <div fxFlexFill>
     <span fxFlex="47%">{{ 'labels.inputs.Enable Multiple Disbursals' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.multiDisburseLoan | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.multiDisburseLoan | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.multiDisburseLoan" fxLayout="row wrap" fxLayout.lt-md="column">
     <span fxFlex="47%">{{ 'labels.inputs.Maximum Tranche count' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.maxTrancheCount }}</span>
+    <span fxFlex="53%">{{ loanProduct.maxTrancheCount }}</span>
     <div fxFlexFill *ngIf="loanProduct.outstandingLoanBalance">
       <span fxFlex="47%">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
-      <span  fxFlex="53%">{{ loanProduct.outstandingLoanBalance }}</span>
+      <span fxFlex="53%">{{ loanProduct.outstandingLoanBalance }}</span>
     </div>
     <div fxFlexFill>
       <span fxFlex="47%">{{ 'labels.inputs.Disallow Expected Disbursements' | translate }}:</span>
-      <span  fxFlex="53%">{{ loanProduct.disallowExpectedDisbursements | yesNo }}</span>
+      <span fxFlex="53%">{{ loanProduct.disallowExpectedDisbursements | yesNo }}</span>
     </div>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Event Settings' | translate }}</h3>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate }}:</span>
-    <span  fxFlex="53%">{{ useDueForRepaymentsConfigurations | yesNo }}</span>
+    <span fxFlex="47%"
+      >{{
+        'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate
+      }}:</span
+    >
+    <span fxFlex="53%">{{ useDueForRepaymentsConfigurations | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.dueDaysForRepaymentEvent">
     <span fxFlex="47%">{{ 'labels.inputs.Due days for repayment event' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.dueDaysForRepaymentEvent | number }}</span>
+    <span fxFlex="53%">{{ loanProduct.dueDaysForRepaymentEvent | number }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.overDueDaysForRepaymentEvent">
     <span fxFlex="47%">{{ 'labels.inputs.OverDue days for repayment event' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.overDueDaysForRepaymentEvent | number }}</span>
+    <span fxFlex="53%">{{ loanProduct.overDueDaysForRepaymentEvent | number }}</span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Configurable Terms and Settings' | translate }}</h3>
@@ -640,110 +736,117 @@ <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Configurable Terms and Settings'
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{ 'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeConfiguration | yesNo }}</span>
+    <span fxFlex="47%"
+      >{{ 'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate }}:</span
+    >
+    <span fxFlex="53%">{{ loanProduct.allowAttributeConfiguration | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.allowAttributeConfiguration" fxLayout="row wrap" fxLayout.lt-md="column">
     <span fxFlex="47%">{{ 'labels.inputs.Amortization' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.amortizationType | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.amortizationType | yesNo }}</span>
     <span fxFlex="47%">{{ 'labels.inputs.Interest method' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.interestType | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.interestType | yesNo }}</span>
     <span fxFlex="47%">{{ 'labels.inputs.Repayment strategy' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.transactionProcessingStrategyCode | yesNo }}</span>
     <span fxFlex="47%">{{ 'labels.inputs.Interest calculation period' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.interestCalculationPeriodType | yesNo }}</span>
     <span fxFlex="47%">{{ 'labels.inputs.Arrears tolerance' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.inArrearsTolerance | yesNo }}</span>
     <span fxFlex="47%">{{ 'labels.inputs.Repaid every' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
     <span fxFlex="47%">{{ 'labels.inputs.Moratorium' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo }}</span>
-    <span fxFlex="47%">{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo }}</span>
+    <span fxFlex="47%"
+      >{{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}:</span
+    >
+    <span fxFlex="53%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
     <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <table fxFlexFill class="mat-elevation-z1" mat-table
-      [dataSource]="loanProduct.charges | chargesPenaltyFilter:false">
-
+    <table
+      fxFlexFill
+      class="mat-elevation-z1"
+      mat-table
+      [dataSource]="loanProduct.charges | chargesPenaltyFilter: false"
+    >
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Name' | translate }} </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> {{ 'labels.inputs.Charge Type' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount' | translate }} </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="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Collected On' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
 
     <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Overdue Charges' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loanProduct.charges | chargesPenaltyFilter:true">
-
+    <table
+      fxFlexFill
+      class="mat-elevation-z1"
+      mat-table
+      [dataSource]="loanProduct.charges | chargesPenaltyFilter: true"
+    >
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Name' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let overdueCharge">
           {{ overdueCharge.name + ', ' + overdueCharge.currency.displaySymbol }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Charge Type' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
         <td mat-cell *matCellDef="let overdueCharge">
-          {{ overdueCharge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ overdueCharge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
         <td mat-cell *matCellDef="let overdueCharge">
           {{ overdueCharge.amount | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Collected On' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let overdueCharge">
-          {{ overdueCharge.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ overdueCharge.chargeTimeType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
 
   <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
@@ -751,219 +854,287 @@ <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
   <mat-divider [inset]="true"></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="47%">{{'labels.inputs.Type' | translate}}:</span>
-    <span  fxFlex="53%">{{ 'labels.accounting.' + getAccountingRuleName(accountingRuleData[accountingRule() - 1]) | translate }}</span>
+    <span fxFlex="47%">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span fxFlex="53%">{{
+      'labels.accounting.' + getAccountingRuleName(accountingRuleData[accountingRule() - 1]) | translate
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="isAccountingAccrualBased">
     <span fxFlex="47%">{{ 'labels.inputs.Enable Accrual Activity Posting on Installment Due Date' | translate }}:</span>
-    <span  fxFlex="53%">{{ loanProduct.enableAccrualActivityPosting | yesNo }}</span>
+    <span fxFlex="53%">{{ loanProduct.enableAccrualActivityPosting | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="isAccountingEnabled()" fxLayout="row wrap"
-    fxLayout.lt-md="column">
-
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Assets' | translate}} / {{'labels.heading.Liabilities' | translate}}</h4>
+  <div fxFlexFill *ngIf="isAccountingEnabled()" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h4 fxFlexFill class="mat-h4">
+      {{ 'labels.heading.Assets' | translate }} / {{ 'labels.heading.Liabilities' | translate }}
+    </h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      <mifosx-gl-account-display fxFlex="100%"
-        [accountTitle]="'Fund source'" [glAccount]="accountingMappings.fundSourceAccount" [withTitle]="'47%'">
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        [accountTitle]="'Fund source'"
+        [glAccount]="accountingMappings.fundSourceAccount"
+        [withTitle]="'47%'"
+      >
       </mifosx-gl-account-display>
     </div>
 
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-      <mifosx-gl-account-display fxFlex="100%"
-        [accountTitle]="'Loan portfolio'" [glAccount]="accountingMappings.loanPortfolioAccount" [withTitle]="'47%'">
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        [accountTitle]="'Loan portfolio'"
+        [glAccount]="accountingMappings.loanPortfolioAccount"
+        [withTitle]="'47%'"
+      >
       </mifosx-gl-account-display>
-      <div fxFlexFill *ngIf="loanProduct.accountingRule.id === 3 || loanProduct.accountingRule.id === 4"
-        fxLayout="row wrap" fxLayout.lt-md="column">
-        <mifosx-gl-account-display fxFlex="100%"
-          [accountTitle]="'Interest Receivable'" [glAccount]="accountingMappings.receivableInterestAccount" [withTitle]="'47%'">
+      <div
+        fxFlexFill
+        *ngIf="loanProduct.accountingRule.id === 3 || loanProduct.accountingRule.id === 4"
+        fxLayout="row wrap"
+        fxLayout.lt-md="column"
+      >
+        <mifosx-gl-account-display
+          fxFlex="100%"
+          [accountTitle]="'Interest Receivable'"
+          [glAccount]="accountingMappings.receivableInterestAccount"
+          [withTitle]="'47%'"
+        >
         </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%"
-          [accountTitle]="'Fees Receivable'" [glAccount]="accountingMappings.receivableFeeAccount" [withTitle]="'47%'">
+        <mifosx-gl-account-display
+          fxFlex="100%"
+          [accountTitle]="'Fees Receivable'"
+          [glAccount]="accountingMappings.receivableFeeAccount"
+          [withTitle]="'47%'"
+        >
         </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%"
-          [accountTitle]="'Penalties Receivable'" [glAccount]="accountingMappings.receivablePenaltyAccount" [withTitle]="'47%'">
+        <mifosx-gl-account-display
+          fxFlex="100%"
+          [accountTitle]="'Penalties Receivable'"
+          [glAccount]="accountingMappings.receivablePenaltyAccount"
+          [withTitle]="'47%'"
+        >
         </mifosx-gl-account-display>
       </div>
-      <mifosx-gl-account-display fxFlex="100%"
-        [accountTitle]="'Transfer in suspense'" [glAccount]="accountingMappings.transfersInSuspenseAccount" [withTitle]="'47%'">
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        [accountTitle]="'Transfer in suspense'"
+        [glAccount]="accountingMappings.transfersInSuspenseAccount"
+        [withTitle]="'47%'"
+      >
       </mifosx-gl-account-display>
     </div>
 
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Income from Interest'" [glAccount]="accountingMappings.interestOnLoanAccount" [withTitle]="'47%'">
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from Interest'"
+      [glAccount]="accountingMappings.interestOnLoanAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Income from fees'" [glAccount]="accountingMappings.incomeFromFeeAccount" [withTitle]="'47%'">
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from fees'"
+      [glAccount]="accountingMappings.incomeFromFeeAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Income from penalties'" [glAccount]="accountingMappings.incomeFromPenaltyAccount" [withTitle]="'47%'">
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from penalties'"
+      [glAccount]="accountingMappings.incomeFromPenaltyAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Income from Recovery Repayments'" [glAccount]="accountingMappings.incomeFromRecoveryAccount" [withTitle]="'47%'">
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from Recovery Repayments'"
+      [glAccount]="accountingMappings.incomeFromRecoveryAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
 
-    <mifosx-gl-account-display fxFlex="100%" *ngIf="accountingMappings.incomeFromChargeOffInterestAccount"
-      [accountTitle]="'Income from ChargeOff Interest'" [glAccount]="accountingMappings.incomeFromChargeOffInterestAccount" [withTitle]="'47%'">
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      *ngIf="accountingMappings.incomeFromChargeOffInterestAccount"
+      [accountTitle]="'Income from ChargeOff Interest'"
+      [glAccount]="accountingMappings.incomeFromChargeOffInterestAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%" *ngIf="accountingMappings.incomeFromChargeOffFeesAccount"
-      [accountTitle]="'Income from ChargeOff Fees'" [glAccount]="accountingMappings.incomeFromChargeOffFeesAccount" [withTitle]="'47%'">
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      *ngIf="accountingMappings.incomeFromChargeOffFeesAccount"
+      [accountTitle]="'Income from ChargeOff Fees'"
+      [glAccount]="accountingMappings.incomeFromChargeOffFeesAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%" *ngIf="accountingMappings.incomeFromChargeOffPenaltyAccount"
-      [accountTitle]="'Income from ChargeOff Penalty'" [glAccount]="accountingMappings.incomeFromChargeOffPenaltyAccount" [withTitle]="'47%'">
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      *ngIf="accountingMappings.incomeFromChargeOffPenaltyAccount"
+      [accountTitle]="'Income from ChargeOff Penalty'"
+      [glAccount]="accountingMappings.incomeFromChargeOffPenaltyAccount"
+      [withTitle]="'47%'"
+    >
     </mifosx-gl-account-display>
 
-
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Losses written off'" [glAccount]="accountingMappings.writeOffAccount" [withTitle]="'47%'">
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Expenses from Goodwill Credit'" [glAccount]="accountingMappings.goodwillCreditAccount" [withTitle]="'47%'">
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%" *ngIf="accountingMappings.chargeOffExpenseAccount"
-      [accountTitle]="'ChargeOff Expense'" [glAccount]="accountingMappings.chargeOffExpenseAccount" [withTitle]="'47%'">
-    </mifosx-gl-account-display>
-    <mifosx-gl-account-display fxFlex="100%" *ngIf="accountingMappings.chargeOffFraudExpenseAccount"
-      [accountTitle]="'ChargeOff Fraud Expense'" [glAccount]="accountingMappings.chargeOffFraudExpenseAccount" [withTitle]="'47%'">
-    </mifosx-gl-account-display>
-
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
-    <mifosx-gl-account-display fxFlex="100%"
-      [accountTitle]="'Over payment liability'" [glAccount]="accountingMappings.overpaymentLiabilityAccount" [withTitle]="'47%'">
-    </mifosx-gl-account-display>
-
-    <div
-      *ngIf="isAdvancedAccountingEnabled()"
-      fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
-
-      <mat-divider [inset]="true"></mat-divider>
-
-      <div *ngIf="paymentChannelToFundSourceMappings.length" fxFlexFill fxLayout="row wrap"
-        fxLayout.lt-md="column">
-
-        <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}</h4>
-
-        <table fxFlexFill class="mat-elevation-z1" mat-table
-          [dataSource]="paymentChannelToFundSourceMappings">
-
-          <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.heading.Payment Type' | translate}} </th>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.paymentType.name }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.fundSourceAccount.name }}
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
-        </table>
-
-      </div>
-
-      <div *ngIf="feeToIncomeAccountMappings.length" fxFlexFill fxLayout="row wrap"
-        fxLayout.lt-md="column">
-
-        <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
-
-        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings">
-
-          <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.catalogs.Fees' | translate}} </th>
-            <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.charge.name }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
-            <td mat-cell *matCellDef="let feesIncome">
-              <span *ngIf="feesIncome.incomeAccount">
-                {{ feesIncome.incomeAccount.name }}
-              </span>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
-        </table>
-
-      </div>
-
-      <div *ngIf="penaltyToIncomeAccountMappings.length" fxFlexFill fxLayout="row wrap"
-        fxLayout.lt-md="column">
-
-        <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}</h4>
-
-        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings">
-
-          <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
-            <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.charge.name }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
-            <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.incomeAccount.name }}
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
-        </table>
-
-      </div>
-
-        <div *ngIf="chargeOffReasonToExpenseAccountMappings.length" fxFlexFill fxLayout="row wrap"
-             fxLayout.lt-md="column">
-
-            <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Map Charge-off reasons to Expense accounts' | translate}}</h4>
-
-            <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chargeOffReasonToExpenseAccountMappings">
-
-                <ng-container matColumnDef="chargeOffReasonCodeValueId">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Charge-off reason' | translate}} </th>
-                    <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
-                        {{ chargeOffReasonsToExpenseMapping.chargeOffReasonCodeValue.name }}
-                    </td>
-                </ng-container>
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        [accountTitle]="'Losses written off'"
+        [glAccount]="accountingMappings.writeOffAccount"
+        [withTitle]="'47%'"
+      >
+      </mifosx-gl-account-display>
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        [accountTitle]="'Expenses from Goodwill Credit'"
+        [glAccount]="accountingMappings.goodwillCreditAccount"
+        [withTitle]="'47%'"
+      >
+      </mifosx-gl-account-display>
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        *ngIf="accountingMappings.chargeOffExpenseAccount"
+        [accountTitle]="'ChargeOff Expense'"
+        [glAccount]="accountingMappings.chargeOffExpenseAccount"
+        [withTitle]="'47%'"
+      >
+      </mifosx-gl-account-display>
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        *ngIf="accountingMappings.chargeOffFraudExpenseAccount"
+        [accountTitle]="'ChargeOff Fraud Expense'"
+        [glAccount]="accountingMappings.chargeOffFraudExpenseAccount"
+        [withTitle]="'47%'"
+      >
+      </mifosx-gl-account-display>
 
-                <ng-container matColumnDef="expenseGLAccountId">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Expense Account' | translate}} </th>
-                    <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
-                        ({{ chargeOffReasonsToExpenseMapping.chargeOffExpenseAccount.glCode }}) {{ chargeOffReasonsToExpenseMapping.chargeOffExpenseAccount.name }}
-                    </td>
-                </ng-container>
+      <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
+      <mifosx-gl-account-display
+        fxFlex="100%"
+        [accountTitle]="'Over payment liability'"
+        [glAccount]="accountingMappings.overpaymentLiabilityAccount"
+        [withTitle]="'47%'"
+      >
+      </mifosx-gl-account-display>
 
-                <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns;"></tr>
+      <div *ngIf="isAdvancedAccountingEnabled()" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
+
+        <mat-divider [inset]="true"></mat-divider>
+
+        <div *ngIf="paymentChannelToFundSourceMappings.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+          <h4 class="mat-h4" fxFlexFill>
+            {{ 'labels.heading.Configure Fund Sources for Payment Channels' | translate }}
+          </h4>
+
+          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings">
+            <ng-container matColumnDef="paymentTypeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Payment Type' | translate }}</th>
+              <td mat-cell *matCellDef="let paymentFundSource">
+                {{ paymentFundSource.paymentType.name }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fundSourceAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
+              <td mat-cell *matCellDef="let paymentFundSource">
+                {{ paymentFundSource.fundSourceAccount.name }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
+          </table>
+        </div>
 
-            </table>
+        <div *ngIf="feeToIncomeAccountMappings.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+          <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}</h4>
+
+          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings">
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.catalogs.Fees' | translate }}</th>
+              <td mat-cell *matCellDef="let feesIncome">
+                {{ feesIncome.charge.name }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
+              <td mat-cell *matCellDef="let feesIncome">
+                <span *ngIf="feesIncome.incomeAccount">
+                  {{ feesIncome.incomeAccount.name }}
+                </span>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
+          </table>
+        </div>
 
+        <div *ngIf="penaltyToIncomeAccountMappings.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+          <h4 class="mat-h4" fxFlexFill>
+            {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
+          </h4>
+
+          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings">
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
+              <td mat-cell *matCellDef="let penaltyIncome">
+                {{ penaltyIncome.charge.name }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
+              <td mat-cell *matCellDef="let penaltyIncome">
+                {{ penaltyIncome.incomeAccount.name }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
+          </table>
         </div>
 
+        <div
+          *ngIf="chargeOffReasonToExpenseAccountMappings.length"
+          fxFlexFill
+          fxLayout="row wrap"
+          fxLayout.lt-md="column"
+        >
+          <h4 class="mat-h4" fxFlexFill>
+            {{ 'labels.heading.Map Charge-off reasons to Expense accounts' | translate }}
+          </h4>
+
+          <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chargeOffReasonToExpenseAccountMappings">
+            <ng-container matColumnDef="chargeOffReasonCodeValueId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge-off reason' | translate }}</th>
+              <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
+                {{ chargeOffReasonsToExpenseMapping.chargeOffReasonCodeValue.name }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="expenseGLAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
+              <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
+                ({{ chargeOffReasonsToExpenseMapping.chargeOffExpenseAccount.glCode }})
+                {{ chargeOffReasonsToExpenseMapping.chargeOffExpenseAccount.name }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns"></tr>
+          </table>
+        </div>
+      </div>
     </div>
-
   </div>
-
 </div>
diff --git a/src/app/products/loan-products/create-loan-product/create-loan-product.component.html b/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
index c7c858d677..a8c8db7ec0 100644
--- a/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
+++ b/src/app/products/loan-products/create-loan-product/create-loan-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loanProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,24 +21,23 @@
     </ng-template>
 
     <mat-step [stepControl]="loanProductDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-      <mifosx-loan-product-details-step [loanProductsTemplate]="loanProductsTemplate"></mifosx-loan-product-details-step>
-
+      <mifosx-loan-product-details-step
+        [loanProductsTemplate]="loanProductsTemplate"
+      ></mifosx-loan-product-details-step>
     </mat-step>
 
     <mat-step [stepControl]="loanProductCurrencyForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-loan-product-currency-step [loanProductsTemplate]="loanProductsTemplate"></mifosx-loan-product-currency-step>
-
+      <mifosx-loan-product-currency-step
+        [loanProductsTemplate]="loanProductsTemplate"
+      ></mifosx-loan-product-currency-step>
     </mat-step>
 
     <mat-step [stepControl]="loanProductSettingsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
       <mifosx-loan-product-settings-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -48,11 +45,10 @@
         (advancePaymentStrategy)="advancePaymentStrategy($event)"
       >
       </mifosx-loan-product-settings-step>
-
     </mat-step>
 
     <mat-step *ngIf="isAdvancedPaymentStrategy" [stepControl]="loanProductInterestRefundForm">
-      <ng-template matStepLabel>{{'labels.inputs.INTEREST REFUND' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST REFUND' | translate }}</ng-template>
       <mifosx-loan-product-interest-refund-step
         [loanProductsTemplate]="loanProductsTemplate"
         (supportedInterestRefundTypes)="setSupportedInterestRefundTypes($event)"
@@ -61,36 +57,31 @@
     </mat-step>
 
     <mat-step *ngIf="isAdvancedPaymentStrategy">
-
-      <ng-template matStepLabel>{{'labels.inputs.PAYMENT ALLOCATION' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PAYMENT ALLOCATION' | translate }}</ng-template>
 
       <mifosx-loan-product-payment-strategy-step
-      [advancedPaymentAllocations]="advancedPaymentAllocations"
-      [advancedCreditAllocations]="advancedCreditAllocations"
-      [advancedPaymentAllocationTransactionTypes]="loanProductsTemplate.advancedPaymentAllocationTransactionTypes"
-      [paymentAllocationOrderDefault]="loanProductsTemplate.advancedPaymentAllocationTypes"
-      [advancedCreditAllocationTransactionTypes]="loanProductsTemplate.creditAllocationTransactionTypes"
-      [creditAllocationOrderDefault]="loanProductsTemplate.creditAllocationAllocationTypes"
-      (setPaymentAllocation)="setPaymentAllocation($event)"
-      (setCreditAllocation)="setCreditAllocation($event)"
+        [advancedPaymentAllocations]="advancedPaymentAllocations"
+        [advancedCreditAllocations]="advancedCreditAllocations"
+        [advancedPaymentAllocationTransactionTypes]="loanProductsTemplate.advancedPaymentAllocationTransactionTypes"
+        [paymentAllocationOrderDefault]="loanProductsTemplate.advancedPaymentAllocationTypes"
+        [advancedCreditAllocationTransactionTypes]="loanProductsTemplate.creditAllocationTransactionTypes"
+        [creditAllocationOrderDefault]="loanProductsTemplate.creditAllocationAllocationTypes"
+        (setPaymentAllocation)="setPaymentAllocation($event)"
+        (setCreditAllocation)="setCreditAllocation($event)"
       >
       </mifosx-loan-product-payment-strategy-step>
 
       <mifosx-stepper-buttons></mifosx-stepper-buttons>
-
     </mat-step>
 
     <mat-step [stepControl]="loanProductTermsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-loan-product-terms-step [loanProductsTemplate]="loanProductsTemplate"></mifosx-loan-product-terms-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-loan-product-charges-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -98,12 +89,10 @@
         [multiDisburseLoan]="loanProductSettingsForm.get('multiDisburseLoan')"
       >
       </mifosx-loan-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="loanProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-loan-product-accounting-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -111,12 +100,10 @@
         [loanProductFormValid]="loanProductFormValid"
       >
       </mifosx-loan-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="loanProductFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-loan-product-preview-step
         [loanProductsTemplate]="loanProductsTemplate"
@@ -125,9 +112,6 @@
         (submitEvent)="submit()"
       >
       </mifosx-loan-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html b/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html
index cb74429012..f9cd0e6518 100644
--- a/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html
+++ b/src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html
@@ -1,133 +1,117 @@
 <div class="container">
-
-    <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loanProductStepper>
-
-      <ng-template matStepperIcon="number">
-        <fa-icon icon="pencil-alt" size="sm"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="edit">
-        <fa-icon icon="pencil-alt" size="sm"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="done">
-        <fa-icon icon="check" size="sm"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="error">
-        <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="preview">
-        <fa-icon icon="eye" size="sm"></fa-icon>
-      </ng-template>
-
-      <mat-step [stepControl]="loanProductDetailsForm" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-        <mifosx-loan-product-details-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-details-step>
-
-      </mat-step>
-
-      <mat-step [stepControl]="loanProductCurrencyForm" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-        <mifosx-loan-product-currency-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-currency-step>
-
-      </mat-step>
-
-      <mat-step [stepControl]="loanProductSettingsForm" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-        <mifosx-loan-product-settings-step
-          [loanProductsTemplate]="loanProductAndTemplate"
-          [isLinkedToFloatingInterestRates]="loanProductTermsForm.get('isLinkedToFloatingInterestRates')"
-          (advancePaymentStrategy)="advancePaymentStrategy($event)"
-        >
-        </mifosx-loan-product-settings-step>
-
-      </mat-step>
-
-      <mat-step *ngIf="isAdvancedPaymentStrategy" [stepControl]="loanProductInterestRefundForm" completed>
-        <ng-template matStepLabel>{{'labels.inputs.INTEREST REFUND' | translate}}</ng-template>
-        <mifosx-loan-product-interest-refund-step
-          [loanProductsTemplate]="loanProductAndTemplate"
-          (supportedInterestRefundTypes)="setSupportedInterestRefundTypes($event)"
-        >
-        </mifosx-loan-product-interest-refund-step>
-      </mat-step>
-
-      <mat-step *ngIf="isAdvancedPaymentStrategy" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.PAYMENT ALLOCATION' | translate}}</ng-template>
-
-        <mifosx-loan-product-payment-strategy-step
-          [advancedPaymentAllocations]="advancedPaymentAllocations"
-          [advancedCreditAllocations]="advancedCreditAllocations"
-          [advancedPaymentAllocationTransactionTypes]="loanProductAndTemplate.advancedPaymentAllocationTransactionTypes"
-          [paymentAllocationOrderDefault]="loanProductAndTemplate.advancedPaymentAllocationTypes"
-          [advancedCreditAllocationTransactionTypes]="loanProductAndTemplate.creditAllocationTransactionTypes"
-          [creditAllocationOrderDefault]="loanProductAndTemplate.creditAllocationAllocationTypes"
-          (setPaymentAllocation)="setPaymentAllocation($event)"
-          (setCreditAllocation)="setCreditAllocation($event)"
-        >
-        </mifosx-loan-product-payment-strategy-step>
-
-        <mifosx-stepper-buttons></mifosx-stepper-buttons>
-
-      </mat-step>
-
-      <mat-step [stepControl]="loanProductTermsForm" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-        <mifosx-loan-product-terms-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-terms-step>
-
-      </mat-step>
-
-      <mat-step completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
-
-        <mifosx-loan-product-charges-step
-          [loanProductsTemplate]="loanProductAndTemplate"
-          [currencyCode]="loanProductCurrencyForm.get('currencyCode')"
-          [multiDisburseLoan]="loanProductSettingsForm.get('multiDisburseLoan')"
-        >
-        </mifosx-loan-product-charges-step>
-
-      </mat-step>
-
-      <mat-step [stepControl]="loanProductAccountingForm" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
-
-        <mifosx-loan-product-accounting-step
-          [loanProductsTemplate]="loanProductAndTemplate"
-          [accountingRuleData]="accountingRuleData"
-          [loanProductFormValid]="loanProductFormValidAndNotPristine"
-        >
-        </mifosx-loan-product-accounting-step>
-
-      </mat-step>
-
-      <mat-step state="preview" *ngIf="loanProductFormValidAndNotPristine" completed>
-
-        <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
-
-        <mifosx-loan-product-preview-step
-          [loanProductsTemplate]="loanProductAndTemplate"
-          [accountingRuleData]="accountingRuleData"
-          [loanProduct]="loanProduct"
-          (submitEvent)="submit()"
-        >
-        </mifosx-loan-product-preview-step>
-
-      </mat-step>
-
-    </mat-horizontal-stepper>
-
-  </div>
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #loanProductStepper>
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step [stepControl]="loanProductDetailsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
+
+      <mifosx-loan-product-details-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+      ></mifosx-loan-product-details-step>
+    </mat-step>
+
+    <mat-step [stepControl]="loanProductCurrencyForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
+
+      <mifosx-loan-product-currency-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+      ></mifosx-loan-product-currency-step>
+    </mat-step>
+
+    <mat-step [stepControl]="loanProductSettingsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
+
+      <mifosx-loan-product-settings-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+        [isLinkedToFloatingInterestRates]="loanProductTermsForm.get('isLinkedToFloatingInterestRates')"
+        (advancePaymentStrategy)="advancePaymentStrategy($event)"
+      >
+      </mifosx-loan-product-settings-step>
+    </mat-step>
+
+    <mat-step *ngIf="isAdvancedPaymentStrategy" [stepControl]="loanProductInterestRefundForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST REFUND' | translate }}</ng-template>
+      <mifosx-loan-product-interest-refund-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+        (supportedInterestRefundTypes)="setSupportedInterestRefundTypes($event)"
+      >
+      </mifosx-loan-product-interest-refund-step>
+    </mat-step>
+
+    <mat-step *ngIf="isAdvancedPaymentStrategy" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PAYMENT ALLOCATION' | translate }}</ng-template>
+
+      <mifosx-loan-product-payment-strategy-step
+        [advancedPaymentAllocations]="advancedPaymentAllocations"
+        [advancedCreditAllocations]="advancedCreditAllocations"
+        [advancedPaymentAllocationTransactionTypes]="loanProductAndTemplate.advancedPaymentAllocationTransactionTypes"
+        [paymentAllocationOrderDefault]="loanProductAndTemplate.advancedPaymentAllocationTypes"
+        [advancedCreditAllocationTransactionTypes]="loanProductAndTemplate.creditAllocationTransactionTypes"
+        [creditAllocationOrderDefault]="loanProductAndTemplate.creditAllocationAllocationTypes"
+        (setPaymentAllocation)="setPaymentAllocation($event)"
+        (setCreditAllocation)="setCreditAllocation($event)"
+      >
+      </mifosx-loan-product-payment-strategy-step>
+
+      <mifosx-stepper-buttons></mifosx-stepper-buttons>
+    </mat-step>
+
+    <mat-step [stepControl]="loanProductTermsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
+
+      <mifosx-loan-product-terms-step [loanProductsTemplate]="loanProductAndTemplate"></mifosx-loan-product-terms-step>
+    </mat-step>
+
+    <mat-step completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
+
+      <mifosx-loan-product-charges-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+        [currencyCode]="loanProductCurrencyForm.get('currencyCode')"
+        [multiDisburseLoan]="loanProductSettingsForm.get('multiDisburseLoan')"
+      >
+      </mifosx-loan-product-charges-step>
+    </mat-step>
+
+    <mat-step [stepControl]="loanProductAccountingForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
+
+      <mifosx-loan-product-accounting-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+        [accountingRuleData]="accountingRuleData"
+        [loanProductFormValid]="loanProductFormValidAndNotPristine"
+      >
+      </mifosx-loan-product-accounting-step>
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="loanProductFormValidAndNotPristine" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+
+      <mifosx-loan-product-preview-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+        [accountingRuleData]="accountingRuleData"
+        [loanProduct]="loanProduct"
+        (submitEvent)="submit()"
+      >
+      </mifosx-loan-product-preview-step>
+    </mat-step>
+  </mat-horizontal-stepper>
+</div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
index f3d5507355..c020660cfa 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
@@ -1,21 +1,36 @@
 <form [formGroup]="loanProductAccountingForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" formControlName="accountingRule">
-      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
+    <mat-radio-group
+      fxFlex="98%"
+      fxLayout="row"
+      fxLayoutGap="5%"
+      fxLayout.lt-md="column"
+      formControlName="accountingRule"
+    >
+      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i = index" [value]="i + 1">
         {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <div *ngIf="loanProductAccountingForm.value.accountingRule >= 2 && loanProductAccountingForm.value.accountingRule <= 4" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <mat-checkbox *ngIf="isAccountingAccrualBased" fxFlex="73%" formControlName="enableAccrualActivityPosting">{{'labels.inputs.Enable Accrual Activity Posting on Installment Due Date' | translate}}</mat-checkbox>
-
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}} / {{'labels.heading.Liabilities' | translate}}</h4>
-
-      <mifosx-gl-account-selector fxFlex="48%"
+    <div
+      *ngIf="loanProductAccountingForm.value.accountingRule >= 2 && loanProductAccountingForm.value.accountingRule <= 4"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
+      <mat-checkbox *ngIf="isAccountingAccrualBased" fxFlex="73%" formControlName="enableAccrualActivityPosting">{{
+        'labels.inputs.Enable Accrual Activity Posting on Installment Due Date' | translate
+      }}</mat-checkbox>
+
+      <h4 fxFlex="98%" class="mat-h4">
+        {{ 'labels.heading.Assets' | translate }} / {{ 'labels.heading.Liabilities' | translate }}
+      </h4>
+
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.fundSourceAccountId"
         [glAccountList]="assetAndLiabilityAccountData"
         [required]="true"
@@ -23,9 +38,10 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}} / {{'lab
       >
       </mifosx-gl-account-selector>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.loanPortfolioAccountId"
         [glAccountList]="assetAccountData"
         [required]="true"
@@ -33,7 +49,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.transfersInSuspenseAccountId"
         [glAccountList]="assetAccountData"
         [required]="true"
@@ -41,9 +58,17 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <div *ngIf="loanProductAccountingForm.value.accountingRule === 3 || loanProductAccountingForm.value.accountingRule === 4" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-        <mifosx-gl-account-selector fxFlex="48%"
+      <div
+        *ngIf="
+          loanProductAccountingForm.value.accountingRule === 3 || loanProductAccountingForm.value.accountingRule === 4
+        "
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
+        <mifosx-gl-account-selector
+          fxFlex="48%"
           [inputFormControl]="loanProductAccountingForm.controls.receivableInterestAccountId"
           [glAccountList]="assetAccountData"
           [required]="true"
@@ -51,7 +76,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
         >
         </mifosx-gl-account-selector>
 
-        <mifosx-gl-account-selector fxFlex="48%"
+        <mifosx-gl-account-selector
+          fxFlex="48%"
           [inputFormControl]="loanProductAccountingForm.controls.receivableFeeAccountId"
           [glAccountList]="assetAccountData"
           [required]="true"
@@ -59,21 +85,22 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
         >
         </mifosx-gl-account-selector>
 
-        <mifosx-gl-account-selector fxFlex="48%"
+        <mifosx-gl-account-selector
+          fxFlex="48%"
           [inputFormControl]="loanProductAccountingForm.controls.receivablePenaltyAccountId"
           [glAccountList]="assetAccountData"
           [required]="true"
           [inputLabel]="'Penalties Receivable'"
         >
         </mifosx-gl-account-selector>
-
       </div>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.interestOnLoanAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -81,7 +108,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromFeeAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -89,7 +117,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromPenaltyAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -97,7 +126,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromRecoveryAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -105,7 +135,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromChargeOffInterestAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -113,7 +144,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromChargeOffFeesAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -121,7 +153,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromChargeOffPenaltyAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -129,7 +162,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromGoodwillCreditInterestAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -137,7 +171,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromGoodwillCreditFeesAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -145,7 +180,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.incomeFromGoodwillCreditPenaltyAccountId"
         [glAccountList]="incomeAccountData"
         [required]="true"
@@ -155,9 +191,10 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.writeOffAccountId"
         [glAccountList]="expenseAccountData"
         [required]="true"
@@ -165,7 +202,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.goodwillCreditAccountId"
         [glAccountList]="expenseAccountData"
         [required]="true"
@@ -173,7 +211,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.chargeOffExpenseAccountId"
         [glAccountList]="expenseAccountData"
         [required]="true"
@@ -181,7 +220,8 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
       >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.chargeOffFraudExpenseAccountId"
         [glAccountList]="expenseAccountData"
         [required]="true"
@@ -191,9 +231,10 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="loanProductAccountingForm.controls.overpaymentLiabilityAccountId"
         [glAccountList]="liabilityAccountData"
         [required]="true"
@@ -203,39 +244,62 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{'labels.heading.Advanced Accounting Rules' | translate}}</mat-checkbox>
-
-      <div *ngIf="loanProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{
+        'labels.heading.Advanced Accounting Rules' | translate
+      }}</mat-checkbox>
 
-        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}</h4>
+      <div
+        *ngIf="loanProductAccountingForm.value.advancedAccountingRules"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
+        <h4 fxFlex="33%" class="mat-h4">
+          {{ 'labels.heading.Configure Fund Sources for Payment Channels' | translate }}
+        </h4>
 
         <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
+          <button
+            type="button"
+            mat-raised-button
+            color="primary"
+            (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)"
+          >
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}}
+            {{ 'labels.buttons.Add' | translate }}
           </button>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value" *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
-
+        <table
+          fxFlex="98%"
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="paymentChannelToFundSourceMappings.value"
+          *ngIf="paymentChannelToFundSourceMappings.value.length !== 0"
+        >
           <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
             <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
+              {{ paymentFundSource.paymentTypeId | find: paymentTypeData : 'id' : 'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
             <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
+              {{ paymentFundSource.fundSourceAccountId | find: assetAccountData : 'id' : 'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let paymentFundSource; let i = index">
-              <button mat-icon-button color="primary" (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
+              <button
+                mat-icon-button
+                color="primary"
+                (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)"
+              >
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
@@ -245,37 +309,46 @@ <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Pay
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
         </table>
 
-        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
+        <h4 fxFlex="33%" class="mat-h4">{{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}</h4>
 
         <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
+          <button
+            type="button"
+            mat-raised-button
+            color="primary"
+            (click)="add('FeesIncome', feeToIncomeAccountMappings)"
+          >
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}}
+            {{ 'labels.buttons.Add' | translate }}
           </button>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value" *ngIf="feeToIncomeAccountMappings.value.length !== 0">
-
+        <table
+          fxFlex="98%"
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="feeToIncomeAccountMappings.value"
+          *ngIf="feeToIncomeAccountMappings.value.length !== 0"
+        >
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
             <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
+              {{ feesIncome.chargeId | find: chargeData : 'id' : 'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
             <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.incomeAccountId | find:incomeAndLiabilityAccountData:'id':'name' }}
+              {{ feesIncome.incomeAccountId | find: incomeAndLiabilityAccountData : 'id' : 'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let feesIncome; let i = index">
               <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
@@ -287,40 +360,54 @@ <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Ac
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
         </table>
 
-        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}</h4>
+        <h4 fxFlex="33%" class="mat-h4">
+          {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
+        </h4>
 
         <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
+          <button
+            type="button"
+            mat-raised-button
+            color="primary"
+            (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)"
+          >
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}}
+            {{ 'labels.buttons.Add' | translate }}
           </button>
         </div>
 
-
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value" *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
-
+        <table
+          fxFlex="98%"
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="penaltyToIncomeAccountMappings.value"
+          *ngIf="penaltyToIncomeAccountMappings.value.length !== 0"
+        >
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
             <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
+              {{ penaltyIncome.chargeId | find: penaltyData : 'id' : 'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
             <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+              {{ penaltyIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let penaltyIncome; let i = index">
-              <button mat-icon-button color="primary" (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
+              <button
+                mat-icon-button
+                color="primary"
+                (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)"
+              >
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
@@ -330,64 +417,78 @@ <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Inco
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
         </table>
 
-          <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Charge-off reasons to Expense accounts' | translate}}</h4>
+        <h4 fxFlex="33%" class="mat-h4">
+          {{ 'labels.heading.Map Charge-off reasons to Expense accounts' | translate }}
+        </h4>
 
-          <div fxFlex="63%">
-              <button type="button" mat-raised-button color="primary" (click)="add('ChargeOffReasonExpense', chargeOffReasonToExpenseAccountMappings)">
-                  <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                  {{'labels.buttons.Add' | translate}}
+        <div fxFlex="63%">
+          <button
+            type="button"
+            mat-raised-button
+            color="primary"
+            (click)="add('ChargeOffReasonExpense', chargeOffReasonToExpenseAccountMappings)"
+          >
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Add' | translate }}
+          </button>
+        </div>
+        <table
+          fxFlex="98%"
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="chargeOffReasonToExpenseAccountMappings.value"
+          *ngIf="chargeOffReasonToExpenseAccountMappings.value.length !== 0"
+        >
+          <ng-container matColumnDef="chargeOffReasonCodeValueId">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge-off reason' | translate }}</th>
+            <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
+              {{
+                chargeOffReasonsToExpenseMapping.chargeOffReasonCodeValueId
+                  | find: chargeOffReasonOptions : 'id' : 'name'
+              }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="expenseGLAccountId">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
+            <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
+              {{ chargeOffReasonsToExpenseMapping.expenseGLAccountId | find: expenseAccountData : 'id' : 'name' }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+            <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping; let i = index">
+              <button
+                mat-icon-button
+                color="primary"
+                (click)="edit('ChargeOffReasonExpense', chargeOffReasonToExpenseAccountMappings, i)"
+              >
+                <fa-icon icon="edit"></fa-icon>
               </button>
-          </div>
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargeOffReasonToExpenseAccountMappings.value" *ngIf="chargeOffReasonToExpenseAccountMappings.value.length !== 0">
-
-              <ng-container matColumnDef="chargeOffReasonCodeValueId">
-                  <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Charge-off reason' | translate}} </th>
-                  <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
-                      {{ chargeOffReasonsToExpenseMapping.chargeOffReasonCodeValueId | find:chargeOffReasonOptions:'id':'name' }}
-                  </td>
-              </ng-container>
-
-              <ng-container matColumnDef="expenseGLAccountId">
-                  <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Expense Account' | translate}} </th>
-                  <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping">
-                      {{ chargeOffReasonsToExpenseMapping.expenseGLAccountId | find:expenseAccountData:'id':'name' }}
-                  </td>
-              </ng-container>
-
-              <ng-container matColumnDef="actions">
-                  <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
-                  <td mat-cell *matCellDef="let chargeOffReasonsToExpenseMapping; let i = index">
-                      <button mat-icon-button color="primary" (click)="edit('ChargeOffReasonExpense', chargeOffReasonToExpenseAccountMappings, i)">
-                          <fa-icon icon="edit"></fa-icon>
-                      </button>
-                      <button mat-icon-button color="warn" (click)="delete(chargeOffReasonToExpenseAccountMappings, i)">
-                          <fa-icon icon="trash"></fa-icon>
-                      </button>
-                  </td>
-              </ng-container>
-
-              <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns;"></tr>
-
-          </table>
+              <button mat-icon-button color="warn" (click)="delete(chargeOffReasonToExpenseAccountMappings, i)">
+                <fa-icon icon="trash"></fa-icon>
+              </button>
+            </td>
+          </ng-container>
 
+          <tr mat-header-row *matHeaderRowDef="chargeOffReasonExpenseDisplayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: chargeOffReasonExpenseDisplayedColumns"></tr>
+        </table>
       </div>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!loanProductFormValid">
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html
index 09077901d3..f5091cc0c0 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html
@@ -1,11 +1,13 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
       <mat-option
-        *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value:multiDisburseLoan.value"
-        [value]="charge">
+        *ngFor="
+          let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value : multiDisburseLoan.value
+        "
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -14,43 +16,48 @@
   <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>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource | chargesPenaltyFilter:false"
-    #chargesTable [hidden]="chargesTable.dataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource | chargesPenaltyFilter: false"
+    #chargesTable
+    [hidden]="chargesTable.dataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+        {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </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>
@@ -59,67 +66,78 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-divider fxFlex="98%"></mat-divider>
 
   <div fxFlex="98%">
-    <h3 class="mat-h3">{{'labels.inputs.Overdue Charges' | translate}}</h3>
+    <h3 class="mat-h3">{{ 'labels.inputs.Overdue Charges' | translate }}</h3>
   </div>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Overdue Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Overdue Charge' | translate }}</mat-label>
     <mat-select #overdueCharge>
-      <mat-option *ngFor="let overdueCharge of overdueChargeData | chargesFilter:chargesDataSource:currencyCode.value"
-        [value]="overdueCharge">
+      <mat-option
+        *ngFor="let overdueCharge of overdueChargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="overdueCharge"
+      >
         {{ overdueCharge.name }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
   <div fxFlex="48%" fxFlexAlign="center">
-    <button type="button" mat-raised-button color="primary" (click)="addCharge(overdueCharge)"
-      [disabled]="!overdueCharge.value">
+    <button
+      type="button"
+      mat-raised-button
+      color="primary"
+      (click)="addCharge(overdueCharge)"
+      [disabled]="!overdueCharge.value"
+    >
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource | chargesPenaltyFilter:true"
-    #overdueChargesTable [hidden]="overdueChargesTable.dataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource | chargesPenaltyFilter: true"
+    #overdueChargesTable
+    [hidden]="overdueChargesTable.dataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
       <td mat-cell *matCellDef="let overdueCharge">
         {{ overdueCharge.name + ', ' + overdueCharge.currency.displaySymbol }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let overdueCharge">
-        {{ overdueCharge.chargeCalculationType.value | translateKey:'catalogs' }}
+        {{ overdueCharge.chargeCalculationType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
       <td mat-cell *matCellDef="let overdueCharge">
         {{ overdueCharge.amount | formatNumber }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let overdueCharge">
-        {{ overdueCharge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ overdueCharge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let overdueCharge">
         <button mat-icon-button color="warn" (click)="deleteCharge(overdueCharge)">
           <fa-icon icon="trash"></fa-icon>
@@ -128,19 +146,17 @@ <h3 class="mat-h3">{{'labels.inputs.Overdue Charges' | translate}}</h3>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html
index 37b46d47b1..88e130159c 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html
@@ -1,48 +1,61 @@
 <form [formGroup]="loanProductCurrencyForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
-      <mat-select formControlName="currencyCode" matTooltip="{{ 'tooltips.The currency in which the loan will be disbursed' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <mat-select
+        formControlName="currencyCode"
+        matTooltip="{{ 'tooltips.The currency in which the loan will be disbursed' | translate }}"
+        required
+      >
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matTooltip="{{ 'tooltips.Number of decimal places to be used to track and report' | translate}}" matInput formControlName="digitsAfterDecimal" required>
+      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <input
+        type="number"
+        matTooltip="{{ 'tooltips.Number of decimal places to be used to track and report' | translate }}"
+        matInput
+        formControlName="digitsAfterDecimal"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Decimal Places' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate}}" formControlName="inMultiplesOf">
+      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
+        formControlName="inMultiplesOf"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Installment in multiples of' | translate}}</mat-label>
-      <input type="number" matInput formControlName="installmentAmountInMultiplesOf">
+      <mat-label>{{ 'labels.inputs.Installment in multiples of' | translate }}</mat-label>
+      <input type="number" matInput formControlName="installmentAmountInMultiplesOf" />
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
index e8fb7d989a..9400fb4ebb 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
@@ -1,71 +1,109 @@
 <form [formGroup]="loanProductDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="98%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
-      <input matInput formControlName="name" matTooltip="{{ 'tooltips.Product name is a unique identifier' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="name"
+        matTooltip="{{ 'tooltips.Product name is a unique identifier' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
-      <input matInput formControlName="shortName" maxlength="4" matTooltip="{{ 'tooltips.Short name is a unique identifier' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Short Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="shortName"
+        maxlength="4"
+        matTooltip="{{ 'tooltips.Short name is a unique identifier' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Short Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.External Id' | translate}}</mat-label>
-      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.External Id is a unique identifier' | translate}}">
+      <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="externalId"
+        matTooltip="{{ 'tooltips.External Id is a unique identifier' | translate }}"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Fund' | translate}}</mat-label>
-      <mat-select matTooltip="{{ 'tooltips.Loan products may be assigned' | translate}}" formControlName="fundId">
+      <mat-label>{{ 'labels.inputs.Fund' | translate }}</mat-label>
+      <mat-select matTooltip="{{ 'tooltips.Loan products may be assigned' | translate }}" formControlName="fundId">
         <mat-option *ngFor="let fund of fundData" [value]="fund.id">
           {{ fund.name }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox labelPosition="before" matTooltip="{{ 'tooltips.A borrower loan counter (cycle)' | translate}}" formControlName="includeInBorrowerCycle" fxFlex="48%">
-      {{'labels.inputs.Include in Customer Loan Counter' | translate}}
+    <mat-checkbox
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.A borrower loan counter (cycle)' | translate }}"
+      formControlName="includeInBorrowerCycle"
+      fxFlex="48%"
+    >
+      {{ 'labels.inputs.Include in Customer Loan Counter' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" (click)="startDatePicker.open()">
-      <mat-label>{{'labels.inputs.Start Date' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" matTooltip="{{ 'tooltips.loan product will be active and available to clients' | translate}}" formControlName="startDate">
+      <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="startDatePicker"
+        matTooltip="{{ 'tooltips.loan product will be active and available to clients' | translate }}"
+        formControlName="startDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #startDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="closeDatePicker.open()">
-      <mat-label>{{'labels.inputs.Close Date' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closeDatePicker" matTooltip="{{ 'tooltips.loan product will become inactive and unavailable to clients' | translate}}" formControlName="closeDate">
+      <mat-label>{{ 'labels.inputs.Close Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="closeDatePicker"
+        matTooltip="{{ 'tooltips.loan product will become inactive and unavailable to clients' | translate }}"
+        formControlName="closeDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="closeDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #closeDatePicker></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
-      <textarea matInput matTooltip="{{ 'tooltips.Provide additional information' | translate}}" formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+      <textarea
+        matInput
+        matTooltip="{{ 'tooltips.Provide additional information' | translate }}"
+        formControlName="description"
+        cdkTextareaAutosize
+        cdkAutosizeMinRows="2"
+      ></textarea>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-interest-refund-step/loan-product-interest-refund-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-interest-refund-step/loan-product-interest-refund-step.component.html
index 212510d0c0..955f122b41 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-interest-refund-step/loan-product-interest-refund-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-interest-refund-step/loan-product-interest-refund-step.component.html
@@ -1,12 +1,19 @@
 <form [formGroup]="loanProductInterestRefundForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Supported Interest Refund Types' | translate}}</mat-label>
-      <mat-select multiple formControlName="supportedInterestRefundTypes" matTooltip="{{ 'tooltips.Refund transactions where interest refund will automatically be calculated' | translate}}">
-        <mat-option *ngFor="let supportedTransaction of supportedInterestRefundTypesOptions" [value]="supportedTransaction.id">
-          {{ supportedTransaction.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Supported Interest Refund Types' | translate }}</mat-label>
+      <mat-select
+        multiple
+        formControlName="supportedInterestRefundTypes"
+        matTooltip="{{
+          'tooltips.Refund transactions where interest refund will automatically be calculated' | translate
+        }}"
+      >
+        <mat-option
+          *ngFor="let supportedTransaction of supportedInterestRefundTypesOptions"
+          [value]="supportedTransaction.id"
+        >
+          {{ supportedTransaction.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html
index b27a381c87..c3e4bc9c4d 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html
@@ -1,6 +1,7 @@
 <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-  <h4 class="m-b-15 right" fxFlex="90%">{{'labels.heading.You can drag and drop the rows to set a Payment Allocations order' | translate}}</h4>
+  <h4 class="m-b-15 right" fxFlex="90%">
+    {{ 'labels.heading.You can drag and drop the rows to set a Payment Allocations order' | translate }}
+  </h4>
 
   <div class="right" fxFlex="4%" *ngIf="!isDefault()">
     <button mat-button color="warn" (click)="removeTransaction()">
@@ -9,63 +10,79 @@ <h4 class="m-b-15 right" fxFlex="90%">{{'labels.heading.You can drag and drop th
   </div>
 
   <div class="mat-elevation-z8 container m-t-15" *ngIf="paymentAllocationsData">
-    <table mat-table [dataSource]="paymentAllocationsData" #table cdkDropList
-      [cdkDropListData]="paymentAllocationsData" (cdkDropListDropped)="dropTable($event, false)">
-
+    <table
+      mat-table
+      [dataSource]="paymentAllocationsData"
+      #table
+      cdkDropList
+      [cdkDropListData]="paymentAllocationsData"
+      (cdkDropListDropped)="dropTable($event, false)"
+    >
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> </th>
+        <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let paymentAllocation">
-            <fa-icon icon="bars"></fa-icon>
+          <fa-icon icon="bars"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="order">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Order' | translate }}</th>
-        <td mat-cell *matCellDef="let paymentAllocation; let rowIndex = index"> {{ (rowIndex + 1) }} </td>
+        <td mat-cell *matCellDef="let paymentAllocation; let rowIndex = index">{{ rowIndex + 1 }}</td>
       </ng-container>
 
       <ng-container matColumnDef="allocationRule">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Allocation Rule' | translate }}</th>
-        <td mat-cell *matCellDef="let paymentAllocation"> {{ paymentAllocation.value | translateKey:'catalogs' }} </td>
+        <td mat-cell *matCellDef="let paymentAllocation">{{ paymentAllocation.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
 
   <div class="mat-elevation-z8 container m-t-15 m-b-15" *ngIf="creditAllocationsData">
-    <table mat-table [dataSource]="creditAllocationsData" #table cdkDropList
-      [cdkDropListData]="creditAllocationsData" (cdkDropListDropped)="dropTable($event, true)">
-
+    <table
+      mat-table
+      [dataSource]="creditAllocationsData"
+      #table
+      cdkDropList
+      [cdkDropListData]="creditAllocationsData"
+      (cdkDropListDropped)="dropTable($event, true)"
+    >
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> </th>
+        <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let creditAllocation">
-            <fa-icon icon="bars"></fa-icon>
+          <fa-icon icon="bars"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="order">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Order' | translate }}</th>
-        <td mat-cell *matCellDef="let creditAllocation; let rowIndex = index"> {{ (rowIndex + 1) }} </td>
+        <td mat-cell *matCellDef="let creditAllocation; let rowIndex = index">{{ rowIndex + 1 }}</td>
       </ng-container>
 
       <ng-container matColumnDef="allocationRule">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Credit Allocation Rule' | translate }}</th>
-        <td mat-cell *matCellDef="let creditAllocation"> {{ creditAllocation.value | translateKey:'catalogs' }} </td>
+        <td mat-cell *matCellDef="let creditAllocation">{{ creditAllocation.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
 
-  <mat-form-field fxFlex="33%" class="m-t-20" *ngIf="advancedPaymentAllocation && advancedPaymentAllocation.futureInstallmentAllocationRules">
+  <mat-form-field
+    fxFlex="33%"
+    class="m-t-20"
+    *ngIf="advancedPaymentAllocation && advancedPaymentAllocation.futureInstallmentAllocationRules"
+  >
     <mat-label>{{ 'labels.inputs.Future Installment Allocation Rule' | translate }}</mat-label>
     <mat-select [formControl]="futureInstallmentAllocationRule">
-      <mat-option *ngFor="let futureInstallmentAllocationRule of advancedPaymentAllocation.futureInstallmentAllocationRules"
-        [value]="futureInstallmentAllocationRule.code">
-        {{ futureInstallmentAllocationRule.value | translateKey:'catalogs' }}
+      <mat-option
+        *ngFor="let futureInstallmentAllocationRule of advancedPaymentAllocation.futureInstallmentAllocationRules"
+        [value]="futureInstallmentAllocationRule.code"
+      >
+        {{ futureInstallmentAllocationRule.value | translateKey: 'catalogs' }}
       </mat-option>
     </mat-select>
   </mat-form-field>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.html
index e88d327d6c..28a77f0d64 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/loan-product-payment-strategy-step.component.html
@@ -1,31 +1,33 @@
-<mat-tab-group animationDuration="0ms" fxLayout="row wrap" fxLayoutGap="2%"
-    fxLayout.lt-md="column">
+<mat-tab-group animationDuration="0ms" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <mat-tab *ngFor="let advancedPaymentAllocation of advancedPaymentAllocations">
+    <ng-template mat-tab-label>
+      {{ advancedPaymentAllocation.transaction.value | translateKey: 'catalogs' }}
+    </ng-template>
+    <mifosx-advance-payment-allocation-tab
+      [advancedPaymentAllocation]="advancedPaymentAllocation"
+      (allocationChanged)="allocationChanged($event)"
+      (transactionTypeRemoved)="transactionTypeRemoved($event)"
+    >
+    </mifosx-advance-payment-allocation-tab>
+  </mat-tab>
 
-    <mat-tab *ngFor="let advancedPaymentAllocation of advancedPaymentAllocations">
-        <ng-template mat-tab-label>
-            {{advancedPaymentAllocation.transaction.value | translateKey:'catalogs'}}
-        </ng-template>
-        <mifosx-advance-payment-allocation-tab [advancedPaymentAllocation]="advancedPaymentAllocation"
-            (allocationChanged)="allocationChanged($event)"
-            (transactionTypeRemoved)="transactionTypeRemoved($event)">
-        </mifosx-advance-payment-allocation-tab>
-    </mat-tab>
+  <mat-tab *ngFor="let advancedCreditAllocation of advancedCreditAllocations">
+    <ng-template mat-tab-label>
+      {{ advancedCreditAllocation.transaction.value | translateKey: 'catalogs' }}
+    </ng-template>
+    <mifosx-advance-payment-allocation-tab
+      [advancedCreditAllocation]="advancedCreditAllocation"
+      (allocationChanged)="allocationChanged($event)"
+      (transactionTypeRemoved)="transactionTypeRemoved($event)"
+    >
+    </mifosx-advance-payment-allocation-tab>
+  </mat-tab>
 
-    <mat-tab *ngFor="let advancedCreditAllocation of advancedCreditAllocations">
-        <ng-template mat-tab-label>
-            {{advancedCreditAllocation.transaction.value | translateKey:'catalogs'}}
-        </ng-template>
-        <mifosx-advance-payment-allocation-tab [advancedCreditAllocation]="advancedCreditAllocation"
-            (allocationChanged)="allocationChanged($event)"
-            (transactionTypeRemoved)="transactionTypeRemoved($event)">
-        </mifosx-advance-payment-allocation-tab>
-    </mat-tab>
-
-    <mat-tab disabled>
-        <ng-template mat-tab-label>
-            <button mat-icon-button (click)="addTransaction()">
-                <mat-icon><fa-icon icon="plus" size="sm"></fa-icon></mat-icon>
-            </button>
-        </ng-template>
-    </mat-tab>
+  <mat-tab disabled>
+    <ng-template mat-tab-label>
+      <button mat-icon-button (click)="addTransaction()">
+        <mat-icon><fa-icon icon="plus" size="sm"></fa-icon></mat-icon>
+      </button>
+    </ng-template>
+  </mat-tab>
 </mat-tab-group>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
index 321628ca61..4d3ff25218 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
@@ -1,24 +1,23 @@
-
 <mifosx-loan-product-summary
-[action]="'preview'"
-[loanProduct]="loanProduct"
-[loanProductsTemplate]="loanProductsTemplate"
-[useDueForRepaymentsConfigurations]="loanProduct.useDueForRepaymentsConfigurations"
-[paymentAllocations]="loanProduct.paymentAllocation"
-[creditAllocations]="loanProduct.creditAllocation"
-[supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"
+  [action]="'preview'"
+  [loanProduct]="loanProduct"
+  [loanProductsTemplate]="loanProductsTemplate"
+  [useDueForRepaymentsConfigurations]="loanProduct.useDueForRepaymentsConfigurations"
+  [paymentAllocations]="loanProduct.paymentAllocation"
+  [creditAllocations]="loanProduct.creditAllocation"
+  [supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"
 >
 </mifosx-loan-product-summary>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{'labels.buttons.Submit' | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
index d73d6b9fbf..6f6b6b3ae4 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
@@ -1,133 +1,224 @@
 <form [formGroup]="loanProductSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.products.loan.Amortization' | translate}}</mat-label>
-      <mat-select formControlName="amortizationType" matTooltip="{{ 'tooltips.The Amortization value' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.products.loan.Amortization' | translate }}</mat-label>
+      <mat-select
+        formControlName="amortizationType"
+        matTooltip="{{ 'tooltips.The Amortization value' | translate }}"
+        required
+      >
         <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
-          {{'labels.inputs.products.loan.amortizationType.' + amortizationType.value | translate}}
+          {{ 'labels.inputs.products.loan.amortizationType.' + amortizationType.value | translate }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.products.loan.Amortization' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.products.loan.Amortization' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.Interest Method' | translate}}</mat-label>
-      <mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Interest Method' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestType"
+        matTooltip="{{ 'tooltips.The Interest method value' | translate }}"
+        required
+      >
         <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-          {{ interestType.value | translateKey:'catalogs' }}
+          {{ interestType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Method' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Method' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.Interest calculation period' | translate}}</mat-label>
-      <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}" required>
-        <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData" [value]="interestCalculationPeriodType.id">
-          {{ interestCalculationPeriodType.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Interest calculation period' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCalculationPeriodType"
+        matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
+          [value]="interestCalculationPeriodType.id"
+        >
+          {{ interestCalculationPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest calculation period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest calculation period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="96%" labelPosition="before" formControlName="isEqualAmortization">
-      {{'labels.inputs.products.loan.Is Equal Amortization?' | translate}}
+      {{ 'labels.inputs.products.loan.Is Equal Amortization?' | translate }}
     </mat-checkbox>
 
-    <mat-checkbox *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1" fxFlex="96%" labelPosition="before"
-      matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate}}"
-      formControlName="allowPartialPeriodInterestCalcualtion">
-      {{'labels.inputs.Calculate interest for exact days in partial period' | translate}}
+    <mat-checkbox
+      *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1"
+      fxFlex="96%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate }}"
+      formControlName="allowPartialPeriodInterestCalcualtion"
+    >
+      {{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Loan Schedule' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Loan Schedule' | translate }}</h4>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.Loan Schedule Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Loan Schedule Type' | translate }}</mat-label>
       <mat-select formControlName="loanScheduleType" required>
         <mat-option *ngFor="let loanScheduleType of loanScheduleTypeData" [value]="loanScheduleType.code">
-          {{ loanScheduleType.value | translateKey:'catalogs' }}
+          {{ loanScheduleType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.Repayment strategy' | translate}}</mat-label>
-      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate}}"
-        required [disabled]="advancedTransactionProcessingStrategyDisabled">
-        <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData" [value]="transactionProcessingStrategy.code">
-          {{ transactionProcessingStrategy.name | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Repayment strategy' | translate }}</mat-label>
+      <mat-select
+        formControlName="transactionProcessingStrategyCode"
+        matTooltip="{{ 'tooltips.The repayment strategy' | translate }}"
+        required
+        [disabled]="advancedTransactionProcessingStrategyDisabled"
+      >
+        <mat-option
+          *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData"
+          [value]="transactionProcessingStrategy.code"
+        >
+          {{ transactionProcessingStrategy.name | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Repayment strategy' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Repayment strategy' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%" *ngIf="isAdvancedTransactionProcessingStrategy">
-      <mat-label>{{'labels.inputs.Loan Schedule Processing Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Loan Schedule Processing Type' | translate }}</mat-label>
       <mat-select formControlName="loanScheduleProcessingType" required>
-        <mat-option *ngFor="let loanScheduleProcessingType of loanScheduleProcessingTypeData" [value]="loanScheduleProcessingType.code">
-          {{ loanScheduleProcessingType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let loanScheduleProcessingType of loanScheduleProcessingTypeData"
+          [value]="loanScheduleProcessingType.code"
+        >
+          {{ loanScheduleProcessingType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h3 fxFlex="96%" class="mat-h3">{{'labels.inputs.Loan Tranche Details' | translate}}</h3>
+    <h3 fxFlex="96%" class="mat-h3">{{ 'labels.inputs.Loan Tranche Details' | translate }}</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="multiDisburseLoan" matTooltip="{{ 'tooltips.Leave this checkbox unchecked' | translate}}" class="margin-b">
-      {{'labels.inputs.Enable Multiple Disbursals' | translate}}
+    <mat-checkbox
+      fxFlex="73%"
+      labelPosition="before"
+      formControlName="multiDisburseLoan"
+      matTooltip="{{ 'tooltips.Leave this checkbox unchecked' | translate }}"
+      class="margin-b"
+    >
+      {{ 'labels.inputs.Enable Multiple Disbursals' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductSettingsForm.value.multiDisburseLoan" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <div
+      *ngIf="loanProductSettingsForm.value.multiDisburseLoan"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Maximum Tranche count' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Maximum number of disbursements' | translate}}" formControlName="maxTrancheCount" required>
+        <mat-label>{{ 'labels.inputs.Maximum Tranche count' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Maximum number of disbursements' | translate }}"
+          formControlName="maxTrancheCount"
+          required
+        />
         <mat-error *ngIf="loanProductSettingsForm.controls.maxTrancheCount.hasError('required')">
-          {{'labels.inputs.Maximum Tranche count' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Maximum Tranche count' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Maximum allowed outstanding balance' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate}}" formControlName="outstandingLoanBalance">
+        <mat-label>{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate }}"
+          formControlName="outstandingLoanBalance"
+        />
       </mat-form-field>
 
-      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="disallowExpectedDisbursements" class="margin-v">
-        {{'labels.inputs.Disallow Expected Disbursements' | translate}}
+      <mat-checkbox
+        fxFlex="48%"
+        labelPosition="before"
+        formControlName="disallowExpectedDisbursements"
+        class="margin-v"
+      >
+        {{ 'labels.inputs.Disallow Expected Disbursements' | translate }}
       </mat-checkbox>
     </div>
 
-    <h3 fxFlex="96%" class="mat-h3">{{'labels.heading.Down Payment' | translate}}</h3>
+    <h3 fxFlex="96%" class="mat-h3">{{ 'labels.heading.Down Payment' | translate }}</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="{{ 'tooltips.Leave this checkbox unchecked' | translate}}" class="margin-b">
-      {{'labels.inputs.Enable Down Payment' | translate}}
+    <mat-checkbox
+      fxFlex="73%"
+      labelPosition="before"
+      formControlName="enableDownPayment"
+      matTooltip="{{ 'tooltips.Leave this checkbox unchecked' | translate }}"
+      class="margin-b"
+    >
+      {{ 'labels.inputs.Enable Down Payment' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductSettingsForm.value.enableDownPayment" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <div
+      *ngIf="loanProductSettingsForm.value.enableDownPayment"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} (%)</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.The percentage of disbursements amount for Down Payment' | translate}}" formControlName="disbursedAmountPercentageForDownPayment" required [min]="0" [max]="100">
-        <mat-error *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.hasError('required')">
-          {{'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        <mat-label>{{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }} (%)</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.The percentage of disbursements amount for Down Payment' | translate }}"
+          formControlName="disbursedAmountPercentageForDownPayment"
+          required
+          [min]="0"
+          [max]="100"
+        />
+        <mat-error
+          *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.hasError('required')"
+        >
+          {{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }}
+          {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.errors?.range">
-          {{'labels.inputs.Disbursed Amount Percentage Down Payment' | translate}} {{'labels.commons.is' | translate}} {{'labels.text.out' | translate}} <strong>{{'labels.text.percentage range' | translate}}</strong>
+          {{ 'labels.inputs.Disbursed Amount Percentage Down Payment' | translate }}
+          {{ 'labels.commons.is' | translate }} {{ 'labels.text.out' | translate }}
+          <strong>{{ 'labels.text.percentage range' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enableAutoRepaymentForDownPayment" matTooltip="{{ 'tooltips.Enable or disable the auto repayment of down-payment.' | translate}}" class="margin-b">
-      {{'labels.inputs.Enable Auto Repayment for Down Payment' | translate}}
+      <mat-checkbox
+        fxFlex="48%"
+        labelPosition="before"
+        formControlName="enableAutoRepaymentForDownPayment"
+        matTooltip="{{ 'tooltips.Enable or disable the auto repayment of down-payment.' | translate }}"
+        class="margin-b"
+      >
+        {{ 'labels.inputs.Enable Auto Repayment for Down Payment' | translate }}
       </mat-checkbox>
     </div>
 
@@ -135,430 +226,647 @@ <h3 fxFlex="96%" class="mat-h3">{{'labels.heading.Down Payment' | translate}}</h
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
-    <div *ngIf="isAdvancedTransactionProcessingStrategy" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <h3 fxFlex="98%" class="mat-h4">{{'labels.inputs.Loan Charge-off behaviour' | translate}}</h3>
+    <div
+      *ngIf="isAdvancedTransactionProcessingStrategy"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
+      <h3 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}</h3>
 
       <mat-form-field fxFlex="30%">
-        <mat-label>{{'labels.inputs.Loan Charge-off behaviour' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}</mat-label>
         <mat-select formControlName="chargeOffBehaviour" required>
           <mat-option *ngFor="let chargeOffBehaviour of chargeOffBehaviourData" [value]="chargeOffBehaviour.id">
-            {{ chargeOffBehaviour.value | translateKey:'catalogs' }}
+            {{ chargeOffBehaviour.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
     </div>
 
-    <h4 fxFlex="98%" class="mat-h4 m-r-10">{{'labels.inputs.Moratorium' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4 m-r-10">
+      {{ 'labels.inputs.Moratorium' | translate }}
+      <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate }}"></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Grace on principal payment' | translate}}</mat-label>
-      <input type="number" matInput formControlName="graceOnPrincipalPayment">
+      <mat-label>{{ 'labels.inputs.Grace on principal payment' | translate }}</mat-label>
+      <input type="number" matInput formControlName="graceOnPrincipalPayment" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Grace on interest payment' | translate}}</mat-label>
-      <input type="number" matInput formControlName="graceOnInterestPayment">
+      <mat-label>{{ 'labels.inputs.Grace on interest payment' | translate }}</mat-label>
+      <input type="number" matInput formControlName="graceOnInterestPayment" />
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Delinquency Bucket' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Delinquency Bucket' | translate }}</mat-label>
       <mat-select formControlName="delinquencyBucketId">
         <mat-option *ngFor="let delinquencyBucket of delinquencyBucketData" [value]="delinquencyBucket.id">
           {{ delinquencyBucket.name }}
         </mat-option>
       </mat-select>
-      <button mat-button *ngIf="loanProductSettingsForm.controls.delinquencyBucketId" matSuffix mat-icon-button
-        aria-label="Clear" (click)="clearProperty($event, 'delinquencyBucketId')">
+      <button
+        mat-button
+        *ngIf="loanProductSettingsForm.controls.delinquencyBucketId"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="clearProperty($event, 'delinquencyBucketId')"
+      >
         <i class="fa fa-close"></i>
       </button>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enableInstallmentLevelDelinquency" class="margin-v" *ngIf="loanProductSettingsForm.value.delinquencyBucketId">
-      {{'labels.inputs.Enable installment level Delinquency' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="enableInstallmentLevelDelinquency"
+      class="margin-v"
+      *ngIf="loanProductSettingsForm.value.delinquencyBucketId"
+    >
+      {{ 'labels.inputs.Enable installment level Delinquency' | translate }}
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest free period' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.If the Interest Free Period' | translate}}" formControlName="graceOnInterestCharged">
+      <mat-label>{{ 'labels.inputs.Interest free period' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.If the Interest Free Period' | translate }}"
+        formControlName="graceOnInterestCharged"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Arrears tolerance' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.With Arrears tolerance' | translate}}" formControlName="inArrearsTolerance">
+      <mat-label>{{ 'labels.inputs.Arrears tolerance' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.With Arrears tolerance' | translate }}"
+        formControlName="inArrearsTolerance"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Days in year' | translate}}</mat-label>
-      <mat-select matTooltip="{{ 'tooltips.To calculate interest' | translate}}" formControlName="daysInYearType" required>
+      <mat-label>{{ 'labels.inputs.Days in year' | translate }}</mat-label>
+      <mat-select
+        matTooltip="{{ 'tooltips.To calculate interest' | translate }}"
+        formControlName="daysInYearType"
+        required
+      >
         <mat-option *ngFor="let daysInYearType of daysInYearTypeData" [value]="daysInYearType.id">
-          {{ daysInYearType.value | translateKey:'catalogs' }}
+          {{ daysInYearType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Days in year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Days in year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Days in month' | translate}}</mat-label>
-      <mat-select matTooltip="{{ 'tooltips.Number of days in month' | translate}}." formControlName="daysInMonthType" required>
+      <mat-label>{{ 'labels.inputs.Days in month' | translate }}</mat-label>
+      <mat-select
+        matTooltip="{{ 'tooltips.Number of days in month' | translate }}."
+        formControlName="daysInMonthType"
+        required
+      >
         <mat-option *ngFor="let daysInMonthType of daysInMonthTypeData" [value]="daysInMonthType.id">
-          {{ daysInMonthType.value | translateKey:'catalogs' }}
+          {{ daysInMonthType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Days in month' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Days in month' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="98%" labelPosition="before" formControlName="canDefineInstallmentAmount" class="margin-v">
-      {{'labels.inputs.Allow fixing of the installment amount' | translate}}
+      {{ 'labels.inputs.Allow fixing of the installment amount' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="48%">{{'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate}} <i class="fas fa-question"
-      matTooltip="{{ 'tooltips.A loan is in arrears once the number of days' | translate}}"></i></h4>
+    <h4 fxFlex="48%">
+      {{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.A loan is in arrears once the number of days' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.On arrears ageing' | translate}}</mat-label>
-      <input type="number" matInput formControlName="graceOnArrearsAgeing">
+      <mat-label>{{ 'labels.inputs.On arrears ageing' | translate }}</mat-label>
+      <input type="number" matInput formControlName="graceOnArrearsAgeing" />
     </mat-form-field>
 
-    <h4 fxFlex="48%">{{'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)' | translate}} <i class="fas fa-question"
-      matTooltip="{{ 'tooltips.NPA (non performing asset) once the number of days' | translate}}"></i></h4>
+    <h4 fxFlex="48%">
+      {{
+        'labels.inputs.Maximum number of days a loan may be overdue before becoming a NPA (non performing asset)'
+          | translate
+      }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.NPA (non performing asset) once the number of days' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Overdue days for NPA' | translate}}</mat-label>
-      <input type="number" matInput formControlName="overdueDaysForNPA">
+      <mat-label>{{ 'labels.inputs.Overdue days for NPA' | translate }}</mat-label>
+      <input type="number" matInput formControlName="overdueDaysForNPA" />
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="accountMovesOutOfNPAOnlyOnArrearsCompletion" class="margin-v">
-      {{'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="accountMovesOutOfNPAOnlyOnArrearsCompletion"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Account moves out of NPA only after all arrears have been cleared' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Principal Threshold (%) for Last Instalment' | translate}}</mat-label>
-      <input type="number" matInput formControlName="principalThresholdForLastInstallment">
+      <mat-label>{{ 'labels.inputs.Principal Threshold (%) for Last Instalment' | translate }}</mat-label>
+      <input type="number" matInput formControlName="principalThresholdForLastInstallment" />
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="{{ 'tooltips.Fields are used to define the minimum, maximum gap' | translate}}" formControlName="allowVariableInstallments" class="margin-v">
-      {{'labels.inputs.Are Variable Installments allowed?' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Fields are used to define the minimum, maximum gap' | translate }}"
+      formControlName="allowVariableInstallments"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Are Variable Installments allowed?' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductSettingsForm.value.allowVariableInstallments" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Variable Installments' | translate}}</h4>
+    <div
+      *ngIf="loanProductSettingsForm.value.allowVariableInstallments"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Variable Installments' | translate }}</h4>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Minimum gap between Installments' | translate}}</mat-label>
-        <input type="number" matInput formControlName="minimumGap" required>
+        <mat-label>{{ 'labels.inputs.Minimum gap between Installments' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minimumGap" required />
         <mat-error>
-          {{'labels.inputs.Minimum gap between Installments' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Minimum gap between Installments' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Maximum gap between Installments' | translate}}</mat-label>
-        <input type="number" matInput formControlName="maximumGap" required>
+        <mat-label>{{ 'labels.inputs.Maximum gap between Installments' | translate }}</mat-label>
+        <input type="number" matInput formControlName="maximumGap" required />
         <mat-error>
-          {{'labels.inputs.Maximum gap between Installments' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Maximum gap between Installments' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="{{ 'tooltips.Loan Product can be used to apply for Topup Loans' | translate}}" formControlName="canUseForTopup" class="margin-v">
-      {{'labels.inputs.Allowed to be used for providing Topup Loans' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Loan Product can be used to apply for Topup Loans' | translate }}"
+      formControlName="canUseForTopup"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Allowed to be used for providing Topup Loans' | translate }}
     </mat-checkbox>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="96%" class="mat-h3">{{'labels.heading.Interest Recalculation' | translate}}</h3>
+    <h3 fxFlex="96%" class="mat-h3">{{ 'labels.heading.Interest Recalculation' | translate }}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="isInterestRecalculationEnabled" class="margin-b">
-      {{'labels.inputs.Recalculate Interest' | translate}}
+      {{ 'labels.inputs.Recalculate Interest' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductSettingsForm.value.isInterestRecalculationEnabled" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+    <div
+      *ngIf="loanProductSettingsForm.value.isInterestRecalculationEnabled"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Pre-closure interest calculation rule' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Pre-closure interest calculation rule' | translate }}</mat-label>
         <mat-select formControlName="preClosureInterestCalculationStrategy" required>
-          <mat-option *ngFor="let preClosureInterestCalculationStrategy of preClosureInterestCalculationStrategyData" [value]="preClosureInterestCalculationStrategy.id">
-            {{ preClosureInterestCalculationStrategy.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let preClosureInterestCalculationStrategy of preClosureInterestCalculationStrategyData"
+            [value]="preClosureInterestCalculationStrategy.id"
+          >
+            {{ preClosureInterestCalculationStrategy.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Pre-closure interest calculation rule' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Pre-closure interest calculation rule' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Advance payments adjustment type' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Advance payments adjustment type' | translate }}</mat-label>
         <mat-select formControlName="rescheduleStrategyMethod" required [disabled]="rescheduleStrategyTypeDisabled">
-          <mat-option *ngFor="let rescheduleStrategyType of rescheduleStrategyTypeData" [value]="rescheduleStrategyType.id">
-            {{ rescheduleStrategyType.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let rescheduleStrategyType of rescheduleStrategyTypeData"
+            [value]="rescheduleStrategyType.id"
+          >
+            {{ rescheduleStrategyType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Advance payments adjustment type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Advance payments adjustment type' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Interest recalculation compounding on' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Interest recalculation compounding on' | translate }}</mat-label>
         <mat-select formControlName="interestRecalculationCompoundingMethod" required>
-          <mat-option *ngFor="let interestRecalculationCompoundingType of interestRecalculationCompoundingTypeData" [value]="interestRecalculationCompoundingType.id">
-            {{ interestRecalculationCompoundingType.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let interestRecalculationCompoundingType of interestRecalculationCompoundingTypeData"
+            [value]="interestRecalculationCompoundingType.id"
+          >
+            {{ interestRecalculationCompoundingType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Interest recalculation compounding on' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Interest recalculation compounding on' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <span fxFlex="48%" fxHide.lt-md></span>
 
       <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-        <mat-form-field fxFlex="48%" *ngIf="loanProductSettingsForm.value.interestRecalculationCompoundingMethod !== 0 && loanProductSettingsForm.value.recalculationCompoundingFrequencyType !== 1">
-          <mat-label>{{'labels.inputs.Frequency Interval for compounding' | translate}}</mat-label>
-          <input type="number" matInput formControlName="recalculationCompoundingFrequencyInterval" required>
+        <mat-form-field
+          fxFlex="48%"
+          *ngIf="
+            loanProductSettingsForm.value.interestRecalculationCompoundingMethod !== 0 &&
+            loanProductSettingsForm.value.recalculationCompoundingFrequencyType !== 1
+          "
+        >
+          <mat-label>{{ 'labels.inputs.Frequency Interval for compounding' | translate }}</mat-label>
+          <input type="number" matInput formControlName="recalculationCompoundingFrequencyInterval" required />
           <mat-error>
-            {{'labels.inputs.Frequency Interval for compounding' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+            {{ 'labels.inputs.Frequency Interval for compounding' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex="48%" *ngIf="loanProductSettingsForm.value.recalculationRestFrequencyType !== 1">
-          <mat-label>{{'labels.inputs.Frequency Interval for recalculation' | translate}}</mat-label>
-          <input type="number" matInput formControlName="recalculationRestFrequencyInterval" required>
+          <mat-label>{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</mat-label>
+          <input type="number" matInput formControlName="recalculationRestFrequencyInterval" required />
           <mat-error>
-            {{'labels.inputs.Frequency Interval for recalculation' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+            {{ 'labels.inputs.Frequency Interval for recalculation' | translate }}
+            {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </div>
 
-      <div *ngIf="loanProductSettingsForm.value.interestRecalculationCompoundingMethod !== 0" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+      <div
+        *ngIf="loanProductSettingsForm.value.interestRecalculationCompoundingMethod !== 0"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
         <mat-form-field fxFlex="31%">
-          <mat-label>{{'labels.inputs.Frequency for compounding' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Frequency for compounding' | translate }}</mat-label>
           <mat-select formControlName="recalculationCompoundingFrequencyType" required>
-            <mat-option *ngFor="let interestRecalculationFrequencyType of interestRecalculationFrequencyTypeData" [value]="interestRecalculationFrequencyType.id">
+            <mat-option
+              *ngFor="let interestRecalculationFrequencyType of interestRecalculationFrequencyTypeData"
+              [value]="interestRecalculationFrequencyType.id"
+            >
               {{ interestRecalculationFrequencyType.value }}
             </mat-option>
           </mat-select>
         </mat-form-field>
 
-        <div *ngIf="loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 4" fxFlex="31%" fxLayout="row" fxLayout.lt-md="column">
-
+        <div
+          *ngIf="loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 4"
+          fxFlex="31%"
+          fxLayout="row"
+          fxLayout.lt-md="column"
+        >
           <mat-form-field fxFlexFill>
             <mat-select formControlName="recalculationCompoundingFrequencyNthDayType">
-              <mat-option *ngFor="let interestRecalculationNthDayType of interestRecalculationNthDayTypeData" [value]="interestRecalculationNthDayType.id">
-                {{ interestRecalculationNthDayType.value | translateKey:'catalogs' }}
+              <mat-option
+                *ngFor="let interestRecalculationNthDayType of interestRecalculationNthDayTypeData"
+                [value]="interestRecalculationNthDayType.id"
+              >
+                {{ interestRecalculationNthDayType.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
 
-        <div *ngIf="(loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 4 && loanProductSettingsForm.value.recalculationCompoundingFrequencyNthDayType !== -2) ||
-        loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 3" fxFlex="31%" fxLayout="row" fxLayout.lt-md="column">
-
+        <div
+          *ngIf="
+            (loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 4 &&
+              loanProductSettingsForm.value.recalculationCompoundingFrequencyNthDayType !== -2) ||
+            loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 3
+          "
+          fxFlex="31%"
+          fxLayout="row"
+          fxLayout.lt-md="column"
+        >
           <mat-form-field fxFlexFill>
-              <mat-select formControlName="recalculationCompoundingFrequencyDayOfWeekType">
-                <mat-option *ngFor="let interestRecalculationDayOfWeekType of interestRecalculationDayOfWeekTypeData" [value]="interestRecalculationDayOfWeekType.id">
-                  {{ interestRecalculationDayOfWeekType.value | translateKey:'catalogs' }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-
+            <mat-select formControlName="recalculationCompoundingFrequencyDayOfWeekType">
+              <mat-option
+                *ngFor="let interestRecalculationDayOfWeekType of interestRecalculationDayOfWeekTypeData"
+                [value]="interestRecalculationDayOfWeekType.id"
+              >
+                {{ interestRecalculationDayOfWeekType.value | translateKey: 'catalogs' }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </div>
 
-        <div *ngIf="loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 4 && loanProductSettingsForm.value.recalculationCompoundingFrequencyNthDayType === -2"
-        fxFlex="31%" fxLayout="row" fxLayout.lt-md="column">
-
+        <div
+          *ngIf="
+            loanProductSettingsForm.value.recalculationCompoundingFrequencyType === 4 &&
+            loanProductSettingsForm.value.recalculationCompoundingFrequencyNthDayType === -2
+          "
+          fxFlex="31%"
+          fxLayout="row"
+          fxLayout.lt-md="column"
+        >
           <mat-form-field fxFlexFill>
             <mat-select formControlName="recalculationCompoundingFrequencyOnDayType">
-              <mat-option *ngFor="let interestRecalculationOnDayType of interestRecalculationOnDayTypeData" [value]="interestRecalculationOnDayType">
+              <mat-option
+                *ngFor="let interestRecalculationOnDayType of interestRecalculationOnDayTypeData"
+                [value]="interestRecalculationOnDayType"
+              >
                 {{ interestRecalculationOnDayType }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
-
       </div>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Frequency for recalculate Outstanding Principal' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}</mat-label>
         <mat-select formControlName="recalculationRestFrequencyType" required>
-          <mat-option *ngFor="let interestRecalculationFrequencyType of interestRecalculationFrequencyTypeData" [value]="interestRecalculationFrequencyType.id">
-            {{ interestRecalculationFrequencyType.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let interestRecalculationFrequencyType of interestRecalculationFrequencyTypeData"
+            [value]="interestRecalculationFrequencyType.id"
+          >
+            {{ interestRecalculationFrequencyType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Frequency for recalculate Outstanding Principal' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}
+          {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
-      <div *ngIf="loanProductSettingsForm.value.recalculationRestFrequencyType === 4" fxFlex="31%" fxLayout="row" fxLayout.lt-md="column">
-
+      <div
+        *ngIf="loanProductSettingsForm.value.recalculationRestFrequencyType === 4"
+        fxFlex="31%"
+        fxLayout="row"
+        fxLayout.lt-md="column"
+      >
         <mat-form-field fxFlexFill>
           <mat-select formControlName="recalculationRestFrequencyNthDayType">
-            <mat-option *ngFor="let interestRecalculationNthDayType of interestRecalculationNthDayTypeData" [value]="interestRecalculationNthDayType.id">
-              {{ interestRecalculationNthDayType.value | translateKey:'catalogs' }}
+            <mat-option
+              *ngFor="let interestRecalculationNthDayType of interestRecalculationNthDayTypeData"
+              [value]="interestRecalculationNthDayType.id"
+            >
+              {{ interestRecalculationNthDayType.value | translateKey: 'catalogs' }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
 
-      <div *ngIf="(loanProductSettingsForm.value.recalculationRestFrequencyType === 4 && loanProductSettingsForm.value.recalculationRestFrequencyNthDayType !== -2) ||
-      loanProductSettingsForm.value.recalculationRestFrequencyType === 3" fxFlex="31%" fxLayout="row" fxLayout.lt-md="column">
-
+      <div
+        *ngIf="
+          (loanProductSettingsForm.value.recalculationRestFrequencyType === 4 &&
+            loanProductSettingsForm.value.recalculationRestFrequencyNthDayType !== -2) ||
+          loanProductSettingsForm.value.recalculationRestFrequencyType === 3
+        "
+        fxFlex="31%"
+        fxLayout="row"
+        fxLayout.lt-md="column"
+      >
         <mat-form-field fxFlexFill>
           <mat-select formControlName="recalculationRestFrequencyDayOfWeekType">
-            <mat-option *ngFor="let interestRecalculationDayOfWeekType of interestRecalculationDayOfWeekTypeData" [value]="interestRecalculationDayOfWeekType.id">
-              {{ interestRecalculationDayOfWeekType.value | translateKey:'catalogs' }}
+            <mat-option
+              *ngFor="let interestRecalculationDayOfWeekType of interestRecalculationDayOfWeekTypeData"
+              [value]="interestRecalculationDayOfWeekType.id"
+            >
+              {{ interestRecalculationDayOfWeekType.value | translateKey: 'catalogs' }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
 
-      <div *ngIf="loanProductSettingsForm.value.recalculationRestFrequencyType === 4 && loanProductSettingsForm.value.recalculationRestFrequencyNthDayType === -2" fxFlex="31%" fxLayout="row" fxLayout.lt-md="column">
-
+      <div
+        *ngIf="
+          loanProductSettingsForm.value.recalculationRestFrequencyType === 4 &&
+          loanProductSettingsForm.value.recalculationRestFrequencyNthDayType === -2
+        "
+        fxFlex="31%"
+        fxLayout="row"
+        fxLayout.lt-md="column"
+      >
         <mat-form-field fxFlexFill>
           <mat-select formControlName="recalculationRestFrequencyOnDayType">
-            <mat-option *ngFor="let interestRecalculationOnDayType of interestRecalculationOnDayTypeData" [value]="interestRecalculationOnDayType">
+            <mat-option
+              *ngFor="let interestRecalculationOnDayType of interestRecalculationOnDayTypeData"
+              [value]="interestRecalculationOnDayType"
+            >
               {{ interestRecalculationOnDayType }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
 
-      <mat-checkbox fxFlex="98%" labelPosition="before" formControlName="isArrearsBasedOnOriginalSchedule" class="margin-v">
-        {{'labels.inputs.Is Arrears recognization based on original schedule' | translate}}?
+      <mat-checkbox
+        fxFlex="98%"
+        labelPosition="before"
+        formControlName="isArrearsBasedOnOriginalSchedule"
+        class="margin-v"
+      >
+        {{ 'labels.inputs.Is Arrears recognization based on original schedule' | translate }}?
       </mat-checkbox>
 
-      <mat-checkbox *ngIf="loanProductSettingsForm.value.loanScheduleType === 'PROGRESSIVE'" fxFlex="98%" labelPosition="before" formControlName="disallowInterestCalculationOnPastDue" class="margin-v">
-        {{'labels.inputs.Do not calculate interest on past due principal balances' | translate}}
+      <mat-checkbox
+        *ngIf="loanProductSettingsForm.value.loanScheduleType === 'PROGRESSIVE'"
+        fxFlex="98%"
+        labelPosition="before"
+        formControlName="disallowInterestCalculationOnPastDue"
+        class="margin-v"
+      >
+        {{ 'labels.inputs.Do not calculate interest on past due principal balances' | translate }}
       </mat-checkbox>
-
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{'labels.heading.Guarantee Requirements' | translate}}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.heading.Guarantee Requirements' | translate }}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="holdGuaranteeFunds" class="margin-b">
-      {{'labels.inputs.Place Guarantee Funds On-Hold' | translate}}
+      {{ 'labels.inputs.Place Guarantee Funds On-Hold' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductSettingsForm.value.holdGuaranteeFunds" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+    <div
+      *ngIf="loanProductSettingsForm.value.holdGuaranteeFunds"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Mandatory Guarantee(%)' | translate}}</mat-label>
-        <input type="number" matInput formControlName="mandatoryGuarantee" required>
+        <mat-label>{{ 'labels.inputs.Mandatory Guarantee(%)' | translate }}</mat-label>
+        <input type="number" matInput formControlName="mandatoryGuarantee" required />
         <mat-error>
-          {{'labels.inputs.Mandatory Guarantee' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Mandatory Guarantee' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Minimum Guarantee from Own Funds(%)' | translate}}</mat-label>
-        <input type="number" matInput formControlName="minimumGuaranteeFromOwnFunds">
+        <mat-label>{{ 'labels.inputs.Minimum Guarantee from Own Funds(%)' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minimumGuaranteeFromOwnFunds" />
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Minimum Guarantee from Guarantor Funds(%)' | translate}}</mat-label>
-        <input type="number" matInput formControlName="minimumGuaranteeFromGuarantor">
+        <mat-label>{{ 'labels.inputs.Minimum Guarantee from Guarantor Funds(%)' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minimumGuaranteeFromGuarantor" />
       </mat-form-field>
-
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.heading.Event Settings' | translate }}<i class="fas fa-question"
-      matTooltip="{{ 'tooltips.Setting for event notifications to be sent' | translate}}"></i></h3>
-
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useDueForRepaymentsConfigurations" matTooltip="{{ 'tooltips.Use or not the Global Configurations' | translate}}" class="margin-b">
-      {{'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate}}
+    <h3 fxFlex="23%" class="mat-h3">
+      {{ 'labels.heading.Event Settings' | translate
+      }}<i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.Setting for event notifications to be sent' | translate }}"
+      ></i>
+    </h3>
+
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="useDueForRepaymentsConfigurations"
+      matTooltip="{{ 'tooltips.Use or not the Global Configurations' | translate }}"
+      class="margin-b"
+    >
+      {{ 'labels.inputs.Use the Global Configurations values to the Repayment Event (notifications)' | translate }}
     </mat-checkbox>
 
-    <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="!loanProductSettingsForm.value.useDueForRepaymentsConfigurations">
-
+    <div
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+      *ngIf="!loanProductSettingsForm.value.useDueForRepaymentsConfigurations"
+    >
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.Due days for repayment event' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate}}" formControlName="dueDaysForRepaymentEvent">
+        <mat-label>{{ 'labels.inputs.Due days for repayment event' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate }}"
+          formControlName="dueDaysForRepaymentEvent"
+        />
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label>{{'labels.inputs.OverDue days for repayment event' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate}}" formControlName="overDueDaysForRepaymentEvent">
+        <mat-label>{{ 'labels.inputs.OverDue days for repayment event' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate }}"
+          formControlName="overDueDaysForRepaymentEvent"
+        />
       </mat-form-field>
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="43%" class="mat-h3">{{'labels.inputs.Configurable Terms and Settings' | translate}}</h3>
+    <h3 fxFlex="43%" class="mat-h3">{{ 'labels.inputs.Configurable Terms and Settings' | translate }}</h3>
 
     <mat-checkbox fxFlex="53%" labelPosition="before" formControlName="allowAttributeConfiguration" class="margin-b">
-      {{'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate}}
+      {{ 'labels.inputs.Allow overriding select terms and settings in loan accounts' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductSettingsForm.value.allowAttributeConfiguration" formGroupName="allowAttributeOverrides" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+    <div
+      *ngIf="loanProductSettingsForm.value.allowAttributeConfiguration"
+      formGroupName="allowAttributeOverrides"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="amortizationType" class="margin-v">
-        {{'labels.inputs.Amortization' | translate}}
+        {{ 'labels.inputs.Amortization' | translate }}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="interestType" class="margin-v">
-        {{'labels.inputs.Interest method' | translate}}
+        {{ 'labels.inputs.Interest method' | translate }}
       </mat-checkbox>
 
-      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="transactionProcessingStrategyCode" class="margin-v">
-        {{'labels.inputs.Repayment strategy' | translate}}
+      <mat-checkbox
+        fxFlex="48%"
+        labelPosition="before"
+        formControlName="transactionProcessingStrategyCode"
+        class="margin-v"
+      >
+        {{ 'labels.inputs.Repayment strategy' | translate }}
       </mat-checkbox>
 
-      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="interestCalculationPeriodType" class="margin-v">
-        {{'labels.inputs.Interest calculation period' | translate}}
+      <mat-checkbox
+        fxFlex="48%"
+        labelPosition="before"
+        formControlName="interestCalculationPeriodType"
+        class="margin-v"
+      >
+        {{ 'labels.inputs.Interest calculation period' | translate }}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="inArrearsTolerance" class="margin-v">
-        {{'labels.inputs.Arrears tolerance' | translate}}
+        {{ 'labels.inputs.Arrears tolerance' | translate }}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="repaymentEvery" class="margin-v">
-        {{'labels.inputs.Repaid every' | translate}}
+        {{ 'labels.inputs.Repaid every' | translate }}
       </mat-checkbox>
 
-      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="graceOnPrincipalAndInterestPayment" class="margin-v">
-        {{'labels.inputs.Moratorium' | translate}}
+      <mat-checkbox
+        fxFlex="48%"
+        labelPosition="before"
+        formControlName="graceOnPrincipalAndInterestPayment"
+        class="margin-v"
+      >
+        {{ 'labels.inputs.Moratorium' | translate }}
       </mat-checkbox>
 
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v">
-        {{'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate}}
+        {{ 'labels.inputs.Number of days a loan may be overdue before moving into arrears' | translate }}
       </mat-checkbox>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
index 29027aa787..8ad1a87c53 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
@@ -1,446 +1,622 @@
 <form [formGroup]="loanProductTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Principal' | translate}}<i class="m-l-10 fas fa-question" matTooltip="{{ 'tooltips.Fields are used to define the minimum, default, and maximum principal' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Principal' | translate
+      }}<i
+        class="m-l-10 fas fa-question"
+        matTooltip="{{ 'tooltips.Fields are used to define the minimum, default, and maximum principal' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minPrincipal" [min]="0">
+      <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minPrincipal" [min]="0" />
       <mat-error>
-        {{'labels.commons.Minimum Value must be' | translate}} <strong>{{'labels.commons.greater equal to than 0' | translate}}</strong>
+        {{ 'labels.commons.Minimum Value must be' | translate }}
+        <strong>{{ 'labels.commons.greater equal to than 0' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-      <input type="number" matInput formControlName="principal" required>
+      <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+      <input type="number" matInput formControlName="principal" required />
       <mat-error>
-        {{'labels.inputs.Default Principal' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Default Principal' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="maxPrincipal" [min]="0">
+      <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maxPrincipal" [min]="0" />
       <mat-error>
-        {{'labels.commons.Minimum Value must be' | translate}} <strong>{{'labels.commons.greater equal to than 0' | translate}}</strong> {{'labels.commons.and must be greater than' | translate}} <strong>{{'labels.commons.Minimum Principal' | translate}}</strong>
+        {{ 'labels.commons.Minimum Value must be' | translate }}
+        <strong>{{ 'labels.commons.greater equal to than 0' | translate }}</strong>
+        {{ 'labels.commons.and must be greater than' | translate }}
+        <strong>{{ 'labels.commons.Minimum Principal' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox fxFlex="96%" labelPosition="before" formControlName="allowApprovedDisbursedAmountsOverApplied">
-      {{'labels.inputs.Allow approval / disbursal above loan applied amount' | translate}}
+      {{ 'labels.inputs.Allow approval / disbursal above loan applied amount' | translate }}
     </mat-checkbox>
 
     <div fxFlex="98%" fxLayoutGap="2%" fxLayout="row wrap" fxLayout.lt-md="column">
       <mat-form-field fxFlex="32%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
-        <mat-label>{{'labels.inputs.Over Amount Calculation Type' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Over Amount Calculation Type' | translate }}</mat-label>
         <mat-select formControlName="overAppliedCalculationType" required>
-          <mat-option *ngFor="let overAppliedCalculationType of overAppliedCalculationTypeData" [value]="overAppliedCalculationType.id">
-            {{ overAppliedCalculationType.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let overAppliedCalculationType of overAppliedCalculationTypeData"
+            [value]="overAppliedCalculationType.id"
+          >
+            {{ overAppliedCalculationType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="32%" *ngIf="loanProductTermsForm.value.allowApprovedDisbursedAmountsOverApplied">
-        <mat-label>{{'labels.inputs.Over Amount' | translate}}</mat-label>
-        <input type="number" matInput formControlName="overAppliedNumber" required>
+        <mat-label>{{ 'labels.inputs.Over Amount' | translate }}</mat-label>
+        <input type="number" matInput formControlName="overAppliedNumber" required />
       </mat-form-field>
     </div>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Installment day calculation from' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Repayment schedule will start the installment' | translate}}"></i></mat-label>
+      <mat-label
+        >{{ 'labels.inputs.Installment day calculation from' | translate }}
+        <i
+          class="fas fa-question"
+          matTooltip="{{ 'tooltips.Repayment schedule will start the installment' | translate }}"
+        ></i
+      ></mat-label>
       <mat-select formControlName="repaymentStartDateType" required>
-        <mat-option *ngFor="let repaymentStartDateType of repaymentStartDateTypeOptions" [value]="repaymentStartDateType.id">
-          {{ repaymentStartDateType.value | translateKey:'catalogs'}}
+        <mat-option
+          *ngFor="let repaymentStartDateType of repaymentStartDateTypeOptions"
+          [value]="repaymentStartDateType.id"
+        >
+          {{ repaymentStartDateType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Number of repayments' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Fields are used to define the minimum, default, and maximum number of repayments' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Number of repayments' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{
+          'tooltips.Fields are used to define the minimum, default, and maximum number of repayments' | translate
+        }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minNumberOfRepayments" [min]="1">
+      <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minNumberOfRepayments" [min]="1" />
       <mat-error>
-        {{'labels.commons.Minimum Value must be' | translate}} <strong>{{'labels.commons.greater equal to than 0' | translate}}</strong>
-        </mat-error>
+        {{ 'labels.commons.Minimum Value must be' | translate }}
+        <strong>{{ 'labels.commons.greater equal to than 0' | translate }}</strong>
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-      <input type="number" matInput formControlName="numberOfRepayments" required>
+      <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+      <input type="number" matInput formControlName="numberOfRepayments" required />
       <mat-error>
-        {{'labels.inputs.Default number of repayments' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Default number of repayments' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="maxNumberOfRepayments" [min]="0">
+      <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maxNumberOfRepayments" [min]="0" />
       <mat-error>
-        {{'labels.commons.Maximum Value must be' | translate}} <strong>{{'labels.commons.greater equal to than 0' | translate}}</strong> {{'labels.commons.and must be greater than' | translate}} <strong>{{'labels.commons.Minimum Principal' | translate}}</strong>
+        {{ 'labels.commons.Maximum Value must be' | translate }}
+        <strong>{{ 'labels.commons.greater equal to than 0' | translate }}</strong>
+        {{ 'labels.commons.and must be greater than' | translate }}
+        <strong>{{ 'labels.commons.Minimum Principal' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Interest Rates' | translate}}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Interest Rates' | translate }}</h3>
 
-    <mat-checkbox [formControl]="zeroInterest" fxFlex="23%" labelPosition="before" *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates">
-      {{'labels.inputs.Is Zero Interest Rate?' | translate}}
+    <mat-checkbox
+      [formControl]="zeroInterest"
+      fxFlex="23%"
+      labelPosition="before"
+      *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates"
+    >
+      {{ 'labels.inputs.Is Zero Interest Rate?' | translate }}
     </mat-checkbox>
 
-    <mat-checkbox fxFlex="32%" labelPosition="before" formControlName="isLinkedToFloatingInterestRates" *ngIf="!isZeroInterest()">
-      {{'labels.inputs.Is Linked to floating interest rates?' | translate}}
+    <mat-checkbox
+      fxFlex="32%"
+      labelPosition="before"
+      formControlName="isLinkedToFloatingInterestRates"
+      *ngIf="!isZeroInterest()"
+    >
+      {{ 'labels.inputs.Is Linked to floating interest rates?' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Nominal interest rate' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Define the minimum, default, maximum, and period for the nominal interest rate' | translate}}"></i></h4>
+    <div
+      *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
+      <h4 fxFlex="98%" class="mat-h4">
+        {{ 'labels.inputs.Nominal interest rate' | translate }}
+        <i
+          class="fas fa-question"
+          matTooltip="{{
+            'tooltips.Define the minimum, default, maximum, and period for the nominal interest rate' | translate
+          }}"
+        ></i>
+      </h4>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-        <input type="number" matInput formControlName="minInterestRatePerPeriod" [min]="0" [attr.disabled]="isZeroInterest()">
+        <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          formControlName="minInterestRatePerPeriod"
+          [min]="0"
+          [attr.disabled]="isZeroInterest()"
+        />
         <mat-error>
-          {{'labels.commons.Minimum Value must be' | translate}} <strong>{{'labels.commons.greater equal to than 0' | translate}}</strong>
-          </mat-error>
+          {{ 'labels.commons.Minimum Value must be' | translate }}
+          <strong>{{ 'labels.commons.greater equal to than 0' | translate }}</strong>
+        </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-        <input type="number" matInput formControlName="interestRatePerPeriod" required [attr.disabled]="isZeroInterest()">
+        <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          formControlName="interestRatePerPeriod"
+          required
+          [attr.disabled]="isZeroInterest()"
+        />
         <mat-error>
-          {{'labels.inputs.Default nominal interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Default nominal interest rate' | 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.Maximum' | translate}}</mat-label>
-        <input type="number" matInput formControlName="maxInterestRatePerPeriod" [min]="0" [attr.disabled]="isZeroInterest()">
+        <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          formControlName="maxInterestRatePerPeriod"
+          [min]="0"
+          [attr.disabled]="isZeroInterest()"
+        />
         <mat-error>
-          {{'labels.commons.Maximum Value must be' | translate}} <strong>{{'labels.commons.greater equal to than 0' | translate}}</strong> {{'labels.commons.and must be greater than' | translate}} <strong>{{'labels.commons.Minimum Principal' | translate}}</strong>
+          {{ 'labels.commons.Maximum Value must be' | translate }}
+          <strong>{{ 'labels.commons.greater equal to than 0' | translate }}</strong>
+          {{ 'labels.commons.and must be greater than' | translate }}
+          <strong>{{ 'labels.commons.Minimum Principal' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="23%">
-        <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
         <mat-select formControlName="interestRateFrequencyType" required [disabled]="isZeroInterest()">
-          <mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
-            {{ interestRateFrequencyType.value | translateKey:'catalogs' }}
+          <mat-option
+            *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData"
+            [value]="interestRateFrequencyType.id"
+          >
+            {{ interestRateFrequencyType.value | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Nominal interest rate frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Nominal interest rate frequency' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
-    <div *ngIf="loanProductTermsForm.value.isLinkedToFloatingInterestRates && !isZeroInterest()" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Floating Interest Rate' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Define the minimum, default, maximum, and period for the floating interest rate' | translate}}"></i></h4>
+    <div
+      *ngIf="loanProductTermsForm.value.isLinkedToFloatingInterestRates && !isZeroInterest()"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+      fxLayoutAlign.gt-sm="start center"
+    >
+      <h4 fxFlex="98%" class="mat-h4">
+        {{ 'labels.inputs.Floating Interest Rate' | translate }}
+        <i
+          class="fas fa-question"
+          matTooltip="{{
+            'tooltips.Define the minimum, default, maximum, and period for the floating interest rate' | translate
+          }}"
+        ></i>
+      </h4>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Floating Rate' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Floating Rate' | translate }}</mat-label>
         <mat-select formControlName="floatingRatesId" required>
           <mat-option *ngFor="let floatingRate of floatingRateData" [value]="floatingRate.id">
             {{ floatingRate.name }}
           </mat-option>
         </mat-select>
         <mat-error>
-          {{'labels.inputs.Floating rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Floating rate' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Differential Rate' | translate}}</mat-label>
-        <input type="number" matInput formControlName="interestRateDifferential" required>
+        <mat-label>{{ 'labels.inputs.Differential Rate' | translate }}</mat-label>
+        <input type="number" matInput formControlName="interestRateDifferential" required />
         <mat-error>
-          {{'labels.inputs.Differential rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Differential rate' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-checkbox fxFlex="31%" labelPosition="before" formControlName="isFloatingInterestRateCalculationAllowed">
-        {{'labels.inputs.Is Floating calculation allowed?' | translate}}
+        {{ 'labels.inputs.Is Floating calculation allowed?' | translate }}
       </mat-checkbox>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-        <input type="number" matInput formControlName="minDifferentialLendingRate" [min]="0" required>
+        <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minDifferentialLendingRate" [min]="0" required />
         <mat-error>
-          {{'labels.inputs.Minimum interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Minimum interest rate' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-        <input type="number" matInput formControlName="defaultDifferentialLendingRate" required>
+        <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+        <input type="number" matInput formControlName="defaultDifferentialLendingRate" required />
         <mat-error>
-          {{'labels.inputs.Default interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Default interest rate' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
-        <input type="number" matInput formControlName="maxDifferentialLendingRate" required>
+        <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
+        <input type="number" matInput formControlName="maxDifferentialLendingRate" required />
         <mat-error>
-          {{'labels.inputs.Maximum interest rate' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Maximum interest rate' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Variations' | translate}}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Variations' | translate }}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="useBorrowerCycle">
-      {{'labels.inputs.Terms vary based on loan cycle' | translate}}
+      {{ 'labels.inputs.Terms vary based on loan cycle' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="loanProductTermsForm.value.useBorrowerCycle" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-      <h4 fxFlex="73%" class="mat-h4">{{'labels.inputs.Principal by loan cycle' | translate}}</h4>
+    <div
+      *ngIf="loanProductTermsForm.value.useBorrowerCycle"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
+      <h4 fxFlex="73%" class="mat-h4">{{ 'labels.inputs.Principal by loan cycle' | translate }}</h4>
 
       <div fxFlex="23%">
-        <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle)">
+        <button
+          type="button"
+          mat-raised-button
+          color="primary"
+          (click)="addVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle)"
+        >
           <fa-icon icon="plus" class="m-r-10"></fa-icon>
-          {{'labels.buttons.Add' | translate}}
+          {{ 'labels.buttons.Add' | translate }}
         </button>
       </div>
 
-      <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="principalVariationsForBorrowerCycle.value" *ngIf="principalVariationsForBorrowerCycle.value.length">
-
+      <table
+        fxFlex="98%"
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="principalVariationsForBorrowerCycle.value"
+        *ngIf="principalVariationsForBorrowerCycle.value.length"
+      >
         <ng-container matColumnDef="valueConditionType">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
-            {{ variation.valueConditionType | find:valueConditionTypeData:'id':'value' }}
+            {{ variation.valueConditionType | find: valueConditionTypeData : 'id' : 'value' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="borrowerCycleNumber">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Cycle' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.borrowerCycleNumber }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="minValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Minimum' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
-            {{ variation.minValue  }}
+            {{ variation.minValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="defaultValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Default' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.defaultValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="maxValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Maximum' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.maxValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let variation; let i = index">
-            <button mat-icon-button color="primary" (click)="editVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle, i)">
+            <button
+              mat-icon-button
+              color="primary"
+              (click)="editVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle, i)"
+            >
               <fa-icon icon="edit"></fa-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="deleteVariationsForBorrowerCycle(principalVariationsForBorrowerCycle, i)">
+            <button
+              mat-icon-button
+              color="warn"
+              (click)="deleteVariationsForBorrowerCycle(principalVariationsForBorrowerCycle, i)"
+            >
               <fa-icon icon="trash"></fa-icon>
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
 
-      <h4 fxFlex="73%" class="mat-h4">{{'labels.inputs.Number of repayments by loan cycle' | translate}}</h4>
+      <h4 fxFlex="73%" class="mat-h4">{{ 'labels.inputs.Number of repayments by loan cycle' | translate }}</h4>
 
       <div fxFlex="23%">
-        <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle)">
+        <button
+          type="button"
+          mat-raised-button
+          color="primary"
+          (click)="addVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle)"
+        >
           <fa-icon icon="plus" class="m-r-10"></fa-icon>
-          {{'labels.buttons.Add' | translate}}
+          {{ 'labels.buttons.Add' | translate }}
         </button>
       </div>
 
-      <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="numberOfRepaymentVariationsForBorrowerCycle.value" *ngIf="numberOfRepaymentVariationsForBorrowerCycle.value.length">
-
+      <table
+        fxFlex="98%"
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="numberOfRepaymentVariationsForBorrowerCycle.value"
+        *ngIf="numberOfRepaymentVariationsForBorrowerCycle.value.length"
+      >
         <ng-container matColumnDef="valueConditionType">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
-            {{ variation.valueConditionType | find:valueConditionTypeData:'id':'value' }}
+            {{ variation.valueConditionType | find: valueConditionTypeData : 'id' : 'value' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="borrowerCycleNumber">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Cycle' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.borrowerCycleNumber }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="minValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Minimum' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.minValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="defaultValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Default' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.defaultValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="maxValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Maximum' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.maxValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let variation; let i = index">
-            <button mat-icon-button color="primary" (click)="editVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle, i)">
+            <button
+              mat-icon-button
+              color="primary"
+              (click)="
+                editVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle, i)
+              "
+            >
               <fa-icon icon="edit"></fa-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="deleteVariationsForBorrowerCycle(numberOfRepaymentVariationsForBorrowerCycle, i)">
+            <button
+              mat-icon-button
+              color="warn"
+              (click)="deleteVariationsForBorrowerCycle(numberOfRepaymentVariationsForBorrowerCycle, i)"
+            >
               <fa-icon icon="trash"></fa-icon>
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
 
-      <h4 fxFlex="73%" class="mat-h4">{{'labels.inputs.Nominal interest rate by loan cycle' | translate}}</h4>
+      <h4 fxFlex="73%" class="mat-h4">{{ 'labels.inputs.Nominal interest rate by loan cycle' | translate }}</h4>
 
       <div fxFlex="23%">
-        <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle)">
+        <button
+          type="button"
+          mat-raised-button
+          color="primary"
+          (click)="addVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle)"
+        >
           <fa-icon icon="plus" class="m-r-10"></fa-icon>
-          {{'labels.buttons.Add' | translate}}
+          {{ 'labels.buttons.Add' | translate }}
         </button>
       </div>
 
-      <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="interestRateVariationsForBorrowerCycle.value" *ngIf="interestRateVariationsForBorrowerCycle.value.length">
-
+      <table
+        fxFlex="98%"
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="interestRateVariationsForBorrowerCycle.value"
+        *ngIf="interestRateVariationsForBorrowerCycle.value.length"
+      >
         <ng-container matColumnDef="valueConditionType">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
-            {{ variation.valueConditionType | find:valueConditionTypeData:'id':'value' }}
+            {{ variation.valueConditionType | find: valueConditionTypeData : 'id' : 'value' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="borrowerCycleNumber">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Cycle' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Cycle' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.borrowerCycleNumber }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="minValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Minimum' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Minimum' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.minValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="defaultValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Default' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Default' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.defaultValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="maxValue">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Maximum' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Maximum' | translate }}</th>
           <td mat-cell *matCellDef="let variation">
             {{ variation.maxValue }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let element; let i = index">
-            <button mat-icon-button color="primary" (click)="editVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle, i)">
+            <button
+              mat-icon-button
+              color="primary"
+              (click)="editVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle, i)"
+            >
               <fa-icon icon="edit"></fa-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="deleteVariationsForBorrowerCycle(interestRateVariationsForBorrowerCycle, i)">
+            <button
+              mat-icon-button
+              color="warn"
+              (click)="deleteVariationsForBorrowerCycle(interestRateVariationsForBorrowerCycle, i)"
+            >
               <fa-icon icon="trash"></fa-icon>
             </button>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
-
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="33%" class="mat-h4">{{'labels.inputs.Repaid every' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate}}"></i></h4>
+    <h4 fxFlex="33%" class="mat-h4">
+      {{ 'labels.inputs.Repaid every' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.Fields are input to calculating the repayment schedule' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="repaymentEvery" required>
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="repaymentEvery" required />
       <mat-error>
-        {{'labels.inputs.Repaid every frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Repaid every frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%">
-      <mat-label>{{'labels.inputs.Frequency Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" required>
-        <mat-option *ngFor="let repaymentFrequencyType of repaymentFrequencyTypeData" [value]="repaymentFrequencyType.id">
-          {{ repaymentFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let repaymentFrequencyType of repaymentFrequencyTypeData"
+          [value]="repaymentFrequencyType.id"
+        >
+          {{ repaymentFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Repaid every type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Repaid every type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="33%" class="mat-h4" *ngIf="allowFixedLength()">{{'labels.inputs.Fixed Length' | translate}} <i class="fas fa-question"
-      matTooltip="{{ 'tooltips.Due to regulatory requirements in some countries' | translate}}"></i></h4>
+    <h4 fxFlex="33%" class="mat-h4" *ngIf="allowFixedLength()">
+      {{ 'labels.inputs.Fixed Length' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.Due to regulatory requirements in some countries' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="30%" *ngIf="allowFixedLength()">
-      <mat-label>{{'labels.inputs.Fixed Length' | translate}}</mat-label>
-      <input type="number" matInput formControlName="fixedLength">
+      <mat-label>{{ 'labels.inputs.Fixed Length' | translate }}</mat-label>
+      <input type="number" matInput formControlName="fixedLength" />
     </mat-form-field>
-    <span fxFlex="30%" *ngIf="allowFixedLength()" class="label-field">{{ loanProductTermsForm.value.repaymentFrequencyType | find:repaymentFrequencyTypeData:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="30%" *ngIf="allowFixedLength()" class="label-field">{{
+      loanProductTermsForm.value.repaymentFrequencyType
+        | find: repaymentFrequencyTypeData : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Minimum days between disbursal and first repayment date' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minimumDaysBetweenDisbursalAndFirstRepayment">
+      <mat-label>{{ 'labels.inputs.Minimum days between disbursal and first repayment date' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minimumDaysBetweenDisbursalAndFirstRepayment" />
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/loan-products/loan-products.component.html b/src/app/products/loan-products/loan-products.component.html
index 8d01855bd5..6118ccb509 100644
--- a/src/app/products/loan-products/loan-products.component.html
+++ b/src/app/products/loan-products/loan-products.component.html
@@ -1,84 +1,126 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-<div #buttonCreateLoanProduct class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOANPRODUCT'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Loan Product' | translate}}
-  </button>
+  <div #buttonCreateLoanProduct class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOANPRODUCT'">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Loan Product' | translate }}
+    </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #loanProductsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let loanProduct">{{ loanProduct.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
-        <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.shortName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Short Name' | translate }}</th>
+        <td mat-cell *matCellDef="let loanProduct">{{ loanProduct.shortName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="closeDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Expiry Date' | translate}} </th>
-        <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.closeDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Expiry Date' | translate }}</th>
+        <td mat-cell *matCellDef="let loanProduct">{{ loanProduct.closeDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let loanProduct">
           <div [className]="loanProduct.status | statusLookup">
-            <fa-icon matTooltip="{{ loanProduct.status === 'loanProduct.active' ? ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{
+                loanProduct.status === 'loanProduct.active'
+                  ? ('labels.inputs.Active' | translate)
+                  : ('labels.catalogs.Inactive' | translate)
+              }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateLoanProduct let-popover="popover">
-  <h2>{{'labels.heading.Create Loan Product' | translate}}t</h2>
-  <p class="mw300">{{'labels.text.This option allows you to create new loan product.' | translate}}</p>
+  <h2>{{ 'labels.heading.Create Loan Product' | translate }}t</h2>
+  <p class="mw300">{{ 'labels.text.This option allows you to create new loan product.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter loan products.' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter loan products.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateLoanProduct,buttonCreateLoanProduct, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLoanProductsTable,loanProductsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateLoanProduct, buttonCreateLoanProduct, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateLoanProductsTable, loanProductsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateLoanProductsTable let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.List of loan products in the organization' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102039585/Loan+Products" target="_blank">{{'labels.heading.Loan Products' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of loan products in the organization' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102039585/Loan+Products" target="_blank">{{
+      'labels.heading.Loan Products' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
index dce519fa01..fa0ae1ec99 100644
--- a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
@@ -5,19 +5,19 @@
   </button>
   -->
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_LOANPRODUCT'" (click)="exportDefinition()">
-    <fa-icon icon="download" class="m-r-10"></fa-icon>{{'labels.buttons.Export' | translate}}
+    <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Export' | translate }}
   </button>
   <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate}}
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <mifosx-loan-product-summary
-[action]="'view'"
-[loanProduct]="loanProduct"
-[useDueForRepaymentsConfigurations]="useDueForRepaymentsConfigurations"
-[paymentAllocations]="loanProduct.paymentAllocation"
-[creditAllocations]="loanProduct.creditAllocation"
-[supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"
+  [action]="'view'"
+  [loanProduct]="loanProduct"
+  [useDueForRepaymentsConfigurations]="useDueForRepaymentsConfigurations"
+  [paymentAllocations]="loanProduct.paymentAllocation"
+  [creditAllocations]="loanProduct.creditAllocation"
+  [supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"
 >
 </mifosx-loan-product-summary>
diff --git a/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html b/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html
index 1b48a22461..961f030fa7 100644
--- a/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html
+++ b/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html
@@ -9,10 +9,11 @@
   </mat-expansion-panel-header>
 
   <div fxFlexFill>
-
     <div fxFlexFill>
       <span fxFlex="40%">{{ 'labels.inputs.Future Installment Allocation Rule' | translate }}:</span>
-      <span fxFlex="60%">{{ futureInstallmentRuleValue(paymentAllocation.futureInstallmentAllocationRule) | translateKey:'catalogs' }}</span>
+      <span fxFlex="60%">{{
+        futureInstallmentRuleValue(paymentAllocation.futureInstallmentAllocationRule) | translateKey: 'catalogs'
+      }}</span>
     </div>
 
     <div fxFlexFill>
@@ -26,9 +27,9 @@
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let paymentAllocation of paymentAllocation.paymentAllocationOrder; let idx = index;">
-              <td>{{ (idx + 1) }}</td>
-              <td>{{ allocationRuleValue(paymentAllocation.paymentAllocationRule) | translateKey:'catalogs' }}</td>
+            <tr *ngFor="let paymentAllocation of paymentAllocation.paymentAllocationOrder; let idx = index">
+              <td>{{ idx + 1 }}</td>
+              <td>{{ allocationRuleValue(paymentAllocation.paymentAllocationRule) | translateKey: 'catalogs' }}</td>
             </tr>
           </tbody>
         </table>
@@ -47,7 +48,6 @@
   </mat-expansion-panel-header>
 
   <div fxFlexFill>
-
     <div fxFlexFill>
       <span fxFlex="40%">{{ 'labels.inputs.Credit Allocation Order' | translate }}</span>
       <span fxFlex="60%">
@@ -59,9 +59,9 @@
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let creditAllocation of creditAllocation.creditAllocationOrder; let idx = index;">
-              <td>{{ (idx + 1) }}</td>
-              <td>{{ allocationRuleValue(creditAllocation.creditAllocationRule) | translateKey:'catalogs'}}</td>
+            <tr *ngFor="let creditAllocation of creditAllocation.creditAllocationOrder; let idx = index">
+              <td>{{ idx + 1 }}</td>
+              <td>{{ allocationRuleValue(creditAllocation.creditAllocationRule) | translateKey: 'catalogs' }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/src/app/products/loan-products/view-loan-product/view-loan-product.component.html b/src/app/products/loan-products/view-loan-product/view-loan-product.component.html
index 1374d418f4..73dd134813 100644
--- a/src/app/products/loan-products/view-loan-product/view-loan-product.component.html
+++ b/src/app/products/loan-products/view-loan-product/view-loan-product.component.html
@@ -1,23 +1,29 @@
 <mat-card class="product-card">
-
   <mat-card-content>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.heading.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.heading.General' | translate }}
       </a>
       <ng-container *ngFor="let loanProductDatatable of loanProductDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',loanProductDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive"
-          *mifosxHasPermission="'READ_' + loanProductDatatable.registeredTableName">
-          {{loanProductDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          [routerLink]="['./datatables', loanProductDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + loanProductDatatable.registeredTableName"
+        >
+          {{ loanProductDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html
index 0fdac3fc49..29597e81b5 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html
@@ -1,77 +1,83 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="bucketForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="100%">
-            <mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="bucketForm.controls.name.hasError('required')">
-              {{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <h3 fxFlex="40%" class="mat-h3">{{'labels.heading.Delinquency Ranges' | translate }}</h3>
+          <h3 fxFlex="40%" class="mat-h3">{{ 'labels.heading.Delinquency Ranges' | translate }}</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addDelinquencyRange()">
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Add" | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
           <table mat-table [dataSource]="rangesDataSource" [hidden]="rangesDataSource.length === 0">
-
             <ng-container matColumnDef="classification">
-              <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Classification" | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Classification' | translate }}</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.rangeId | find: delinquencyRangesData:'id':'classification'}} </td>
+                {{ row.rangeId | find: delinquencyRangesData : 'id' : 'classification' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="minimumAgeDays">
-              <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Days From" | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Days From' | translate }}</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.rangeId | find: delinquencyRangesData:'id':'minimumAgeDays'}} </td>
+                {{ row.rangeId | find: delinquencyRangesData : 'id' : 'minimumAgeDays' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="maximumAgeDays">
-              <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Days Till" | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Days Till' | translate }}</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.rangeId | find: delinquencyRangesData:'id':'maximumAgeDays'}} </td>
+                {{ row.rangeId | find: delinquencyRangesData : 'id' : 'maximumAgeDays' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let row; let rowIndex = index">
-                <button type="button" mat-icon-button color="warn"
-                  (click)="deleteDelinquencyRange(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
-                  matTooltipPosition="left">
+                <button
+                  type="button"
+                  mat-icon-button
+                  color="warn"
+                  (click)="deleteDelinquencyRange(rowIndex)"
+                  matTooltip="{{ 'tooltips.Delete' | translate }}"
+                  matTooltipPosition="left"
+                >
                   <fa-icon icon="trash"></fa-icon>
                 </button>
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
           </table>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!bucketForm.valid" *mifosxHasPermission="'CREATE_DELINQUENCY_BUCKET'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!bucketForm.valid"
+          *mifosxHasPermission="'CREATE_DELINQUENCY_BUCKET'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html
index 47bb889617..84e54909ab 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html
@@ -1,35 +1,34 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DELINQUENCY_BUCKET'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['create']"
+    *mifosxHasPermission="'CREATE_DELINQUENCY_BUCKET'"
+  >
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Delinquency Bucket' | translate }}
+    {{ 'labels.buttons.Create Delinquency Bucket' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Name" | translate}} </th>
-        <td mat-cell *matCellDef="let delinquencyBucket"> {{ delinquencyBucket.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let delinquencyBucket">{{ delinquencyBucket.name }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html
index 0ab4fd7c38..8e70edf592 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html
@@ -1,80 +1,86 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="bucketForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="100%">
-            <mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="bucketForm.controls.name.hasError('required')">
-              {{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" |translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <h3 fxFlex="40%" class="mat-h3">{{'labels.heading.Delinquency Ranges' | translate }}</h3>
+          <h3 fxFlex="40%" class="mat-h3">{{ 'labels.heading.Delinquency Ranges' | translate }}</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addDelinquencyRange()">
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{"labels.buttons.Add" | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
           <table mat-table [dataSource]="rangesDataSource" [hidden]="rangesDataSource.length === 0">
-
             <ng-container matColumnDef="classification">
-              <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Classification" | translate}} </th>
-              <td mat-cell *matCellDef="let row"> {{ row.classification }}</td>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Classification' | translate }}</th>
+              <td mat-cell *matCellDef="let row">{{ row.classification }}</td>
               <td mat-cell *matCellDef="let row">
-                {{ row.rangeId | find: delinquencyRangesData:'id':'classification'}} </td>
+                {{ row.rangeId | find: delinquencyRangesData : 'id' : 'classification' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="minimumAgeDays">
-              <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Days From" | translate}}</th>
-              <td mat-cell *matCellDef="let row"> {{ row.minimumAgeDays }}</td>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Days From' | translate }}</th>
+              <td mat-cell *matCellDef="let row">{{ row.minimumAgeDays }}</td>
               <td mat-cell *matCellDef="let row">
-                {{ row.rangeId | find: delinquencyRangesData:'id':'minimumAgeDays'}} </td>
+                {{ row.rangeId | find: delinquencyRangesData : 'id' : 'minimumAgeDays' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="maximumAgeDays">
-              <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Days Till" | translate}} </th>
-              <td mat-cell *matCellDef="let row"> {{ row.maximumAgeDays }}</td>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Days Till' | translate }}</th>
+              <td mat-cell *matCellDef="let row">{{ row.maximumAgeDays }}</td>
               <td mat-cell *matCellDef="let row">
-                {{ row.rangeId | find: delinquencyRangesData:'id':'maximumAgeDays'}} </td>
+                {{ row.rangeId | find: delinquencyRangesData : 'id' : 'maximumAgeDays' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let row; let rowIndex = index">
-                <button type="button" mat-icon-button color="warn"
-                  (click)="deleteDelinquencyRange(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
-                  matTooltipPosition="left">
+                <button
+                  type="button"
+                  mat-icon-button
+                  color="warn"
+                  (click)="deleteDelinquencyRange(rowIndex)"
+                  matTooltip="{{ 'tooltips.Delete' | translate }}"
+                  matTooltipPosition="left"
+                >
                   <fa-icon icon="trash"></fa-icon>
                 </button>
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
           </table>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!dataWasChanged" *mifosxHasPermission="'UPDATE_DELINQUENCY_BUCKET'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!dataWasChanged"
+          *mifosxHasPermission="'UPDATE_DELINQUENCY_BUCKET'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html
index 51355513c8..7aa2add658 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html
@@ -1,24 +1,25 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DELINQUENCY_BUCKET'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="warn" (click)="deleteDelinquencyBucket()" *mifosxHasPermission="'DELETE_DELINQUENCY_BUCKET'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteDelinquencyBucket()"
+    *mifosxHasPermission="'DELETE_DELINQUENCY_BUCKET'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Name" | translate}}
+          {{ 'labels.inputs.Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,21 +27,19 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Classification" | translate}} {{"labels.inputs.Name" | translate}}
+          {{ 'labels.inputs.Classification' | translate }} {{ 'labels.inputs.Name' | translate }}
         </div>
 
         <div fxFlex="25%" class="mat-body-strong">
-          {{"labels.inputs.Days From" | translate}}
+          {{ 'labels.inputs.Days From' | translate }}
         </div>
 
         <div fxFlex="25%" class="mat-body-strong">
-          {{"labels.inputs.Days Till" | translate}}
+          {{ 'labels.inputs.Days Till' | translate }}
         </div>
       </div>
 
-
       <div fxLayout="row wrap" class="content" *ngFor="let range of delinquencyBucketData.ranges">
-
         <div fxFlex="50%">
           {{ range.classification }}
         </div>
@@ -52,11 +51,7 @@
         <div fxFlex="25%">
           {{ range.maximumAgeDays }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-range/create-range/create-range.component.html b/src/app/products/manage-delinquency-buckets/delinquency-range/create-range/create-range.component.html
index 12fc9ac15b..7844696c7c 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-range/create-range/create-range.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-range/create-range/create-range.component.html
@@ -1,45 +1,46 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="delinquencyRangeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Classification" | translate}}</mat-label>
-            <input matInput required formControlName="classification">
+            <mat-label>{{ 'labels.inputs.Classification' | translate }}</mat-label>
+            <input matInput required formControlName="classification" />
             <mat-error *ngIf="delinquencyRangeForm.controls.classification.hasError('required')">
-              {{"labels.inputs.Classification" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Classification' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Days From" | translate}}</mat-label>
-            <input matInput type="number" required formControlName="minimumAgeDays">
+            <mat-label>{{ 'labels.inputs.Days From' | translate }}</mat-label>
+            <input matInput type="number" required formControlName="minimumAgeDays" />
             <mat-error *ngIf="delinquencyRangeForm.controls.minimumAgeDays.hasError('required')">
-              {{"labels.inputs.Days From" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Days From' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Days Till" | translate}}</mat-label>
-            <input matInput type="number" formControlName="maximumAgeDays">
+            <mat-label>{{ 'labels.inputs.Days Till' | translate }}</mat-label>
+            <input matInput type="number" formControlName="maximumAgeDays" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!delinquencyRangeForm.valid" *mifosxHasPermission="'CREATE_DELINQUENCY_RANGE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!delinquencyRangeForm.valid"
+          *mifosxHasPermission="'CREATE_DELINQUENCY_RANGE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html b/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html
index cebabacdfd..f8196f45d0 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html
@@ -1,45 +1,45 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DELINQUENCY_RANGE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.text.Create Delinquency Range' | translate }}
+    {{ 'labels.text.Create Delinquency Range' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="classification">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="classification"> {{"labels.inputs.Classification" | translate}} </th>
-        <td mat-cell *matCellDef="let delinquencyRange"> {{ delinquencyRange.classification }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="classification">
+          {{ 'labels.inputs.Classification' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let delinquencyRange">{{ delinquencyRange.classification }}</td>
       </ng-container>
 
       <ng-container matColumnDef="minimumAgeDays">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="minimumAgeDays">{{"labels.inputs.Days From" | translate}} </th>
-        <td mat-cell *matCellDef="let delinquencyRange"> {{ delinquencyRange.minimumAgeDays }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="minimumAgeDays">
+          {{ 'labels.inputs.Days From' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let delinquencyRange">{{ delinquencyRange.minimumAgeDays }}</td>
       </ng-container>
 
       <ng-container matColumnDef="maximumAgeDays">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="maximumAgeDays"> {{"labels.inputs.Days Till" | translate}} </th>
-        <td mat-cell *matCellDef="let delinquencyRange"> {{ delinquencyRange.maximumAgeDays }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="maximumAgeDays">
+          {{ 'labels.inputs.Days Till' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let delinquencyRange">{{ delinquencyRange.maximumAgeDays }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-range/edit-range/edit-range.component.html b/src/app/products/manage-delinquency-buckets/delinquency-range/edit-range/edit-range.component.html
index 6f262beb54..617fa17f7e 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-range/edit-range/edit-range.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-range/edit-range/edit-range.component.html
@@ -1,45 +1,46 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="delinquencyRangeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Classification" | translate}}</mat-label>
-            <input matInput required formControlName="classification">
+            <mat-label>{{ 'labels.inputs.Classification' | translate }}</mat-label>
+            <input matInput required formControlName="classification" />
             <mat-error *ngIf="delinquencyRangeForm.controls.classification.hasError('required')">
-              {{"labels.inputs.Classification" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Classification' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Days From" | translate}}</mat-label>
-            <input matInput type="number" required formControlName="minimumAgeDays">
+            <mat-label>{{ 'labels.inputs.Days From' | translate }}</mat-label>
+            <input matInput type="number" required formControlName="minimumAgeDays" />
             <mat-error *ngIf="delinquencyRangeForm.controls.minimumAgeDays.hasError('required')">
-              {{"labels.inputs.Days From" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Days From' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Days Till" | translate}}</mat-label>
-            <input matInput type="number" formControlName="maximumAgeDays">
+            <mat-label>{{ 'labels.inputs.Days Till' | translate }}</mat-label>
+            <input matInput type="number" formControlName="maximumAgeDays" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!delinquencyRangeForm.valid" *mifosxHasPermission="'UPDATE_DELINQUENCY_RANGE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!delinquencyRangeForm.valid"
+          *mifosxHasPermission="'UPDATE_DELINQUENCY_RANGE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html b/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html
index 13970c820e..dccb606dff 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html
@@ -1,24 +1,25 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DELINQUENCY_RANGE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="warn" (click)="deleteDelinquencyRange()" *mifosxHasPermission="'DELETE_DELINQUENCY_RANGE'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteDelinquencyRange()"
+    *mifosxHasPermission="'DELETE_DELINQUENCY_RANGE'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Classification" | translate}}
+          {{ 'labels.inputs.Classification' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -26,7 +27,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Days From" | translate}}
+          {{ 'labels.inputs.Days From' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -34,17 +35,13 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Days Till" | translate}}
+          {{ 'labels.inputs.Days Till' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ delinquencyRangeData.maximumAgeDays }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
index 49fbbf15a1..0f76af0f9b 100644
--- a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
+++ b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
@@ -1,47 +1,37 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
             <mat-icon matListIcon [routerLink]="['ranges']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['ranges']">{{'labels.heading.Manage Delinquency Ranges' | translate}}</h4>
+            <h4 matLine [routerLink]="['ranges']">{{ 'labels.heading.Manage Delinquency Ranges' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['ranges']">{{'labels.text.Define delinquency day ranges' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['ranges']">
+              {{ 'labels.text.Define delinquency day ranges' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
             <mat-icon matListIcon [routerLink]="['buckets']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['buckets']">{{'labels.heading.Manage Delinquency Buckets' | translate}}</h4>
+            <h4 matLine [routerLink]="['buckets']">{{ 'labels.heading.Manage Delinquency Buckets' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['buckets']">{{'labels.text.Define delinquency bucket as set of ranges' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['buckets']">
+              {{ 'labels.text.Define delinquency bucket as set of ranges' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-components/create-tax-component/create-tax-component.component.html b/src/app/products/manage-tax-components/create-tax-component/create-tax-component.component.html
index 6af9e652d5..6a576177b4 100644
--- a/src/app/products/manage-tax-components/create-tax-component/create-tax-component.component.html
+++ b/src/app/products/manage-tax-components/create-tax-component/create-tax-component.component.html
@@ -1,87 +1,104 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="taxComponentForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="taxComponentForm.controls.name.hasError('required')">
-              {{'labels.inputs.Name' | translate}} {{'labels.commons.is' | translate}}
-              <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Percentage' | translate}}</mat-label>
-            <input type="number" matInput required formControlName="percentage">
+            <mat-label>{{ 'labels.inputs.Percentage' | translate }}</mat-label>
+            <input type="number" matInput required formControlName="percentage" />
             <mat-error *ngIf="taxComponentForm.controls.percentage.hasError('required')">
-              {{'labels.inputs.Percentage ' | translate}} {{'labels.commons.is' | translate}}
-              <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Percentage ' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
-            <mat-error *ngIf="taxComponentForm.controls.percentage.hasError('pattern') ||
-            taxComponentForm.controls.percentage.hasError('max')">
-              {{'labels.inputs.Percentage' | translate}} <strong>{{'labels.commons.should' | translate}}</strong> {{'labels.commons.be larger than 0 and at most 100' | translate}}
+            <mat-error
+              *ngIf="
+                taxComponentForm.controls.percentage.hasError('pattern') ||
+                taxComponentForm.controls.percentage.hasError('max')
+              "
+            >
+              {{ 'labels.inputs.Percentage' | translate }} <strong>{{ 'labels.commons.should' | translate }}</strong>
+              {{ 'labels.commons.be larger than 0 and at most 100' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Debit Account Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Debit Account Type' | translate }}</mat-label>
             <mat-select formControlName="debitAccountType">
               <mat-option *ngFor="let debitAccountType of debitAccountTypeData" [value]="debitAccountType.id">
-                {{ debitAccountType.value | translateKey:'inputs.accounting' }}
+                {{ debitAccountType.value | translateKey: 'inputs.accounting' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
-          <mifosx-gl-account-selector *ngIf="debitAccountData.length > 0"
+          <mifosx-gl-account-selector
+            *ngIf="debitAccountData.length > 0"
             [inputFormControl]="taxComponentForm.controls.debitAcountId"
-            [glAccountList]="debitAccountData" [required]="false" [inputLabel]="'Credit Account'">
+            [glAccountList]="debitAccountData"
+            [required]="false"
+            [inputLabel]="'Credit Account'"
+          >
           </mifosx-gl-account-selector>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Credit Account Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Credit Account Type' | translate }}</mat-label>
             <mat-select formControlName="creditAccountType">
               <mat-option *ngFor="let creditAccountType of creditAccountTypeData" [value]="creditAccountType.id">
-                {{ creditAccountType.value | translateKey:'inputs.accounting' }}
+                {{ creditAccountType.value | translateKey: 'inputs.accounting' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
-          <mifosx-gl-account-selector *ngIf="creditAccountData.length > 0"
+          <mifosx-gl-account-selector
+            *ngIf="creditAccountData.length > 0"
             [inputFormControl]="taxComponentForm.controls.creditAcountId"
-            [glAccountList]="creditAccountData" [required]="false" [inputLabel]="'Credit Account'">
+            [glAccountList]="creditAccountData"
+            [required]="false"
+            [inputLabel]="'Credit Account'"
+          >
           </mifosx-gl-account-selector>
 
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{'labels.inputs.Start Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required
-              formControlName="startDate">
+            <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="taxComponentForm.controls.startDate.hasError('required')">
-              {{'labels.inputs.Start Date' | translate}} {{'labels.commons.is' | translate}}
-              <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!taxComponentForm.valid"
-          *mifosxHasPermission="'CREATE_TAXCOMPONENT'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!taxComponentForm.valid"
+          *mifosxHasPermission="'CREATE_TAXCOMPONENT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.html b/src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.html
index 502cddaad5..0bf70751e8 100644
--- a/src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.html
+++ b/src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.html
@@ -1,60 +1,69 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="taxComponentForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="taxComponentForm.controls.name.hasError('required')">
-              {{'labels.inputs.Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Percentage' | translate}}</mat-label>
-            <input matInput required formControlName="percentage">
+            <mat-label>{{ 'labels.inputs.Percentage' | translate }}</mat-label>
+            <input matInput required formControlName="percentage" />
             <mat-error *ngIf="taxComponentForm.controls.name.hasError('required')">
-              {{'labels.inputs.Percentage' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Percentage' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="taxComponentData.creditAccountType.value">
-            <mat-label>{{'labels.inputs.Credit Account Type' | translate}}</mat-label>
-            <input matInput formControlName="creditAccountType">
+            <mat-label>{{ 'labels.inputs.Credit Account Type' | translate }}</mat-label>
+            <input matInput formControlName="creditAccountType" />
           </mat-form-field>
 
           <mat-form-field *ngIf="taxComponentData.creditAccount.name">
-            <mat-label>{{'labels.inputs.Credit Account' | translate}}</mat-label>
-            <input matInput formControlName="creditAccount">
+            <mat-label>{{ 'labels.inputs.Credit Account' | translate }}</mat-label>
+            <input matInput formControlName="creditAccount" />
           </mat-form-field>
 
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{'labels.inputs.Start Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
+            <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="startDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="taxComponentForm.controls.startDate.hasError('required')">
-              {{'labels.inputs.Start Date' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!taxComponentForm.valid" *mifosxHasPermission="'UPDATE_TAXCOMPONENT'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!taxComponentForm.valid"
+          *mifosxHasPermission="'UPDATE_TAXCOMPONENT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-components/manage-tax-components.component.html b/src/app/products/manage-tax-components/manage-tax-components.component.html
index 3dfb79c120..df9e008b65 100644
--- a/src/app/products/manage-tax-components/manage-tax-components.component.html
+++ b/src/app/products/manage-tax-components/manage-tax-components.component.html
@@ -1,50 +1,46 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXCOMPONENT'">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Create Tax Component' | translate}}
-    </button>
+  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXCOMPONENT'">
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Create Tax Component' | translate }}
+  </button>
+</div>
+
+<div class="container">
+  <div fxLayout="row">
+    <mat-form-field fxFlex>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
+    </mat-form-field>
   </div>
 
-  <div class="container">
-
-    <div fxLayout="row">
-      <mat-form-field fxFlex>
-        <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-        <input matInput (keyup)="applyFilter($event.target.value)">
-      </mat-form-field>
-    </div>
-
-    <div class="mat-elevation-z8">
-
-      <table mat-table [dataSource]="dataSource" matSort>
-
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-          <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.name }} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Percentage' | translate}} %</th>
-          <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.percentage | formatNumber }} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="startDate">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Start Date' | translate}} </th>
-          <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | dateFormat }} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="glAccount">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Account' | translate}} </th>
-          <td mat-cell *matCellDef="let taxComponent"> ({{ taxComponent.creditAccount.glCode }}) {{ taxComponent.creditAccount.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
-      </table>
-
-      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-    </div>
-
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let taxComponent">{{ taxComponent.name }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="percentage">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Percentage' | translate }} %</th>
+        <td mat-cell *matCellDef="let taxComponent">{{ taxComponent.percentage | formatNumber }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="startDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Start Date' | translate }}</th>
+        <td mat-cell *matCellDef="let taxComponent">{{ taxComponent.startDate | dateFormat }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="glAccount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account' | translate }}</th>
+        <td mat-cell *matCellDef="let taxComponent">
+          ({{ taxComponent.creditAccount.glCode }}) {{ taxComponent.creditAccount.name }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
   </div>
+</div>
diff --git a/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html b/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html
index 3b1e6ab34c..83d42cfc88 100644
--- a/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html
+++ b/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html
@@ -1,20 +1,16 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXCOMPONENT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Name' | translate}}
+          {{ 'labels.inputs.Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -22,15 +18,13 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Percentage' | translate}}
+          {{ 'labels.inputs.Percentage' | translate }}
         </div>
 
-        <div fxFlex="50%">
-          {{ taxComponentData.percentage | formatNumber }} %
-        </div>
+        <div fxFlex="50%">{{ taxComponentData.percentage | formatNumber }} %</div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="taxComponentData.debitAccountType">
-          {{'labels.inputs.Debit Account Type' | translate }}
+          {{ 'labels.inputs.Debit Account Type' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="taxComponentData.debitAccountType">
@@ -42,7 +36,8 @@
         </div>
 
         <div fxFlex="50%" *ngIf="taxComponentData.debitAccount">
-          ({{ 'labels.inputs.accounting.' + taxComponentData.debitAccount.glCode }}) {{ taxComponentData.debitAccount.name | translate }}
+          ({{ 'labels.inputs.accounting.' + taxComponentData.debitAccount.glCode }})
+          {{ taxComponentData.debitAccount.name | translate }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="taxComponentData.creditAccountType">
@@ -50,7 +45,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="taxComponentData.creditAccountType">
-          {{ taxComponentData.creditAccountType.value | translateKey:'catalogs' }}
+          {{ taxComponentData.creditAccountType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="taxComponentData.creditAccount">
@@ -68,14 +63,13 @@
         <div fxFlex="50%">
           {{ taxComponentData.startDate | dateFormat }}
         </div>
-
       </div>
-
     </mat-card-content>
 
     <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Back' | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </div>
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
index df88c44e7e..383d4d01a4 100644
--- a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
+++ b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
@@ -1,47 +1,37 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_TAXCOMPONENT'">
             <mat-icon matListIcon [routerLink]="['tax-components']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['tax-components']">{{'labels.heading.Manage Tax Components' | translate}}</h4>
+            <h4 matLine [routerLink]="['tax-components']">{{ 'labels.heading.Manage Tax Components' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['tax-components']">{{'labels.heading.Define Tax Components' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['tax-components']">
+              {{ 'labels.heading.Define Tax Components' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
             <mat-icon matListIcon [routerLink]="['tax-groups']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['tax-groups']">{{'labels.heading.Manage Tax Groups' | translate}}</h4>
+            <h4 matLine [routerLink]="['tax-groups']">{{ 'labels.heading.Manage Tax Groups' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['tax-groups']">{{'labels.heading.Define Tax Groups' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['tax-groups']">
+              {{ 'labels.heading.Define Tax Groups' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
index 09c32a81a4..565b85cc7e 100644
--- a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
@@ -1,72 +1,81 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="taxGroupForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="100%">
-            <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="taxGroupForm.controls.name.hasError('required')">
-              {{'labels.inputs.Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <h3 fxFlex="40%" class="mat-h3">{{'labels.inputs.Tax Components' | translate}}</h3>
+          <h3 fxFlex="40%" class="mat-h3">{{ 'labels.inputs.Tax Components' | translate }}</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
           <table mat-table [dataSource]="taxComponentsDataSource" [hidden]="taxComponentsDataSource.length === 0">
-
             <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
               <td mat-cell *matCellDef="let taxComponent">
-                {{ taxComponent.taxComponentId | find: taxComponentOptions:'id':'name'}} </td>
+                {{ taxComponent.taxComponentId | find: taxComponentOptions : 'id' : 'name' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="startDate">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Start Date' | translate}} </th>
-              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | dateFormat }}
-              </td>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
+              <td mat-cell *matCellDef="let taxComponent">{{ taxComponent.startDate | dateFormat }}</td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let taxComponent; let taxComponentIndex = index">
-                <button type="button" mat-icon-button color="primary" (click)="editTaxGroup(taxComponent, taxComponentIndex)">
+                <button
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="editTaxGroup(taxComponent, taxComponentIndex)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
-                <button type="button" mat-icon-button color="warn" (click)="delete(taxComponentIndex)" matTooltipPosition="left">
+                <button
+                  type="button"
+                  mat-icon-button
+                  color="warn"
+                  (click)="delete(taxComponentIndex)"
+                  matTooltipPosition="left"
+                >
                   <fa-icon icon="trash"></fa-icon>
                 </button>
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
           </table>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!taxGroupForm.valid" *mifosxHasPermission="'CREATE_TAXGROUP'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!taxGroupForm.valid"
+          *mifosxHasPermission="'CREATE_TAXGROUP'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
index fb59bd5887..8948f51aa0 100644
--- a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
@@ -1,80 +1,90 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="taxGroupForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="100%">
-            <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="taxGroupForm.controls.name.hasError('required')">
-              {{'labels.inputs.Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <h3 fxFlex="40%" class="mat-h3">{{'labels.inputs.Tax Components' | translate}}</h3>
+          <h3 fxFlex="40%" class="mat-h3">{{ 'labels.inputs.Tax Components' | translate }}</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
           <table mat-table [dataSource]="taxComponentsDataSource" [hidden]="taxComponentsDataSource.length === 0">
-
             <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
               <td mat-cell *matCellDef="let taxComponent">
-                {{ taxComponent.taxComponentId | find: taxComponentOptions:'id':'name'}} </td>
+                {{ taxComponent.taxComponentId | find: taxComponentOptions : 'id' : 'name' }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="startDate">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Start Date' | translate}} </th>
-              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | dateFormat }}
-              </td>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
+              <td mat-cell *matCellDef="let taxComponent">{{ taxComponent.startDate | dateFormat }}</td>
             </ng-container>
 
             <ng-container matColumnDef="endDate">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.End Date' | translate}} </th>
-              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.endDate ? (taxComponent.endDate | dateFormat) : '' }}
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.End Date' | translate }}</th>
+              <td mat-cell *matCellDef="let taxComponent">
+                {{ taxComponent.endDate ? (taxComponent.endDate | dateFormat) : '' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let taxComponent; let taxComponentIndex = index">
-                <button type="button" mat-icon-button color="primary" (click)="editTaxGroup(taxComponent, taxComponentIndex)">
+                <button
+                  type="button"
+                  mat-icon-button
+                  color="primary"
+                  (click)="editTaxGroup(taxComponent, taxComponentIndex)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
-                <button type="button" mat-icon-button color="warn" *ngIf="taxComponent.isNew"
-                  (click)="delete(taxComponentIndex)" matTooltip="{{ 'tooltips.Delete Interest Rate Chart' | translate}}"
-                  matTooltipPosition="left">
+                <button
+                  type="button"
+                  mat-icon-button
+                  color="warn"
+                  *ngIf="taxComponent.isNew"
+                  (click)="delete(taxComponentIndex)"
+                  matTooltip="{{ 'tooltips.Delete Interest Rate Chart' | translate }}"
+                  matTooltipPosition="left"
+                >
                   <fa-icon icon="trash"></fa-icon>
                 </button>
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
           </table>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!taxGroupForm.valid" *mifosxHasPermission="'UPDATE_TAXGROUP'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!taxGroupForm.valid"
+          *mifosxHasPermission="'UPDATE_TAXGROUP'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/manage-tax-groups/manage-tax-groups.component.html b/src/app/products/manage-tax-groups/manage-tax-groups.component.html
index 68b329cab3..09bf55d1d0 100644
--- a/src/app/products/manage-tax-groups/manage-tax-groups.component.html
+++ b/src/app/products/manage-tax-groups/manage-tax-groups.component.html
@@ -1,35 +1,29 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXGROUP'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Tax Groups' | translate }}
+    {{ 'labels.buttons.Create Tax Groups' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate }} </th>
-        <td mat-cell *matCellDef="let taxGroups"> {{ taxGroups.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let taxGroups">{{ taxGroups.name }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html b/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
index 90a43cd7ea..e605c6e12e 100644
--- a/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
@@ -1,20 +1,16 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXGROUP'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="33%" class="mat-body-strong">
-          {{'labels.inputs.Name' | translate}}
+          {{ 'labels.inputs.Name' | translate }}
         </div>
 
         <div fxFlex="67%">
@@ -22,37 +18,31 @@
         </div>
 
         <div fxFlex="34%" class="mat-body-strong">
-          {{'labels.inputs.Tax Component' | translate}}
+          {{ 'labels.inputs.Tax Component' | translate }}
         </div>
 
         <div fxFlex="33%" class="mat-body-strong">
-          {{'labels.inputs.Start Date' | translate}}
+          {{ 'labels.inputs.Start Date' | translate }}
         </div>
 
         <div fxFlex="33%" class="mat-body-strong">
-          {{'labels.inputs.End Date' | translate}}
+          {{ 'labels.inputs.End Date' | translate }}
         </div>
-
       </div>
 
-      <div fxLayout="row wrap" class="content"  *ngFor="let taxcomponent of taxGroupData.taxAssociations">
-
-          <div fxFlex="34%">
-            {{ taxcomponent.taxComponent.name }}
-          </div>
-
-          <div fxFlex="33%">
-            {{ taxcomponent.startDate | dateFormat }}
-          </div>
+      <div fxLayout="row wrap" class="content" *ngFor="let taxcomponent of taxGroupData.taxAssociations">
+        <div fxFlex="34%">
+          {{ taxcomponent.taxComponent.name }}
+        </div>
 
-          <div fxFlex="33%" *ngIf="taxcomponent.endDate !== undefined || taxcomponent.endDate !== null">
-            {{ taxcomponent.endDate | dateFormat }}
-          </div>
+        <div fxFlex="33%">
+          {{ taxcomponent.startDate | dateFormat }}
+        </div>
 
+        <div fxFlex="33%" *ngIf="taxcomponent.endDate !== undefined || taxcomponent.endDate !== null">
+          {{ taxcomponent.endDate | dateFormat }}
+        </div>
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/products-mix/create-product-mix/create-product-mix.component.html b/src/app/products/products-mix/create-product-mix/create-product-mix.component.html
index 8a435c83aa..e87620613c 100644
--- a/src/app/products/products-mix/create-product-mix/create-product-mix.component.html
+++ b/src/app/products/products-mix/create-product-mix/create-product-mix.component.html
@@ -1,13 +1,8 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="productMixForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
             <mat-select required formControlName="productId">
@@ -16,7 +11,8 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="productMixForm.controls.productId.hasError('required')">
-              {{ 'labels.inputs.Product' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Product' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -27,21 +23,27 @@
                 {{ product.name }}
               </mat-option>
             </mat-select>
-            <mat-error *ngIf="productMixForm.controls.restrictedProducts.hasError('required')" >
-              {{'labels.commons.At least one restricted product' | translate }} <strong>{{'labels.commons.must be selected' | translate }}</strong>
+            <mat-error *ngIf="productMixForm.controls.restrictedProducts.hasError('required')">
+              {{ 'labels.commons.At least one restricted product' | translate }}
+              <strong>{{ 'labels.commons.must be selected' | translate }}</strong>
             </mat-error>
           </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!productMixForm.valid" *mifosxHasPermission="'CREATE_PRODUCTMIX'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!productMixForm.valid"
+          *mifosxHasPermission="'CREATE_PRODUCTMIX'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/products-mix/edit-product-mix/edit-product-mix.component.html b/src/app/products/products-mix/edit-product-mix/edit-product-mix.component.html
index fc8fa979ae..3df0dfc0ec 100644
--- a/src/app/products/products-mix/edit-product-mix/edit-product-mix.component.html
+++ b/src/app/products/products-mix/edit-product-mix/edit-product-mix.component.html
@@ -1,16 +1,11 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="productMixForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
-            <input matInput formControlName="productId">
+            <input matInput formControlName="productId" />
           </mat-form-field>
 
           <mat-form-field *ngIf="productData">
@@ -21,20 +16,26 @@
               </mat-option>
             </mat-select>
             <mat-error *ngIf="productMixForm.controls.restrictedProducts.hasError('required')">
-              {{'labels.commons.At least one restricted product' | translate }} <strong>{{'labels.commons.must be selected' |translate }}</strong>
+              {{ 'labels.commons.At least one restricted product' | translate }}
+              <strong>{{ 'labels.commons.must be selected' | translate }}</strong>
             </mat-error>
           </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!productMixForm.valid" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!productMixForm.valid"
+          *mifosxHasPermission="'UPDATE_PRODUCTMIX'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/products-mix/products-mix.component.html b/src/app/products/products-mix/products-mix.component.html
index 1061098841..b0ef9ebcbc 100644
--- a/src/app/products/products-mix/products-mix.component.html
+++ b/src/app/products/products-mix/products-mix.component.html
@@ -1,33 +1,33 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PRODUCTMIX'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>{{'labels.buttons.Add' | translate}}
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
   </button>
 </div>
 
 <div class="container">
-
-   <div fxLayout="row" fxLayoutGap="20px">
+  <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="productName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Product Name' | translate }} </th>
-        <td mat-cell *matCellDef="let productMix"> {{ productMix.productName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Product Name' | translate }}</th>
+        <td mat-cell *matCellDef="let productMix">{{ productMix.productName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.productId]"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        class="select-row"
+        [routerLink]="[row.productId]"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
 </div>
diff --git a/src/app/products/products-mix/view-product-mix/view-product-mix.component.html b/src/app/products/products-mix/view-product-mix/view-product-mix.component.html
index eac4786147..deacc39faa 100644
--- a/src/app/products/products-mix/view-product-mix/view-product-mix.component.html
+++ b/src/app/products/products-mix/view-product-mix/view-product-mix.component.html
@@ -1,47 +1,42 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Delete' | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
 <div class="container">
+  <div class="mat-elevation-z8 inline-table">
+    <table mat-table [dataSource]="allowedProductsDatasource" matSort>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'">
+          {{ 'labels.inputs.Allowed Products' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'">{{ product.name }}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: allowedProductsDisplayedColumns"></tr>
+    </table>
+
+    <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  </div>
 
-    <div class="mat-elevation-z8 inline-table">
-
-      <table mat-table [dataSource]="allowedProductsDatasource" matSort>
-
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'">{{ 'labels.inputs.Allowed Products' | translate}}</th>
-          <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'"> {{ product.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: allowedProductsDisplayedColumns;"></tr>
-      </table>
-
-      <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-    </div>
-
-    <div class="mat-elevation-z8 inline-table">
-
-      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
-
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Restricted products' | translate }}</th>
-          <td mat-cell *matCellDef="let product"> {{ product.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns;"></tr>
-      </table>
+  <div class="mat-elevation-z8 inline-table">
+    <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Restricted products' | translate }}</th>
+        <td mat-cell *matCellDef="let product">{{ product.name }}</td>
+      </ng-container>
 
-      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-    </div>
+      <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns"></tr>
+    </table>
 
+    <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
   </div>
+</div>
diff --git a/src/app/products/products.component.html b/src/app/products/products.component.html
index 264d806dab..19c37886e3 100644
--- a/src/app/products/products.component.html
+++ b/src/app/products/products.component.html
@@ -1,209 +1,261 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
+          <div #loanProducts>
+            <mat-list-item *mifosxHasPermission="'READ_LOANPRODUCT'">
+              <mat-icon matListIcon [routerLink]="['loan-products']">
+                <fa-icon icon="briefcase" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine [routerLink]="['loan-products']">{{ 'labels.heading.Loan Products' | translate }}</h4>
+              <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+              <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['loan-products']">
+                {{ 'labels.text.Add new loan product or modify or inactivate loan product' | translate }}
+              </p>
+            </mat-list-item>
+          </div>
 
-        <div #loanProducts>
-          <mat-list-item *mifosxHasPermission="'READ_LOANPRODUCT'">
-            <mat-icon matListIcon [routerLink]="['loan-products']">
-              <fa-icon icon="briefcase" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['loan-products']">{{'labels.heading.Loan Products' | translate}}</h4>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['loan-products']">{{'labels.text.Add new loan product or modify or inactivate loan product' | translate}}</p>
-          </mat-list-item>
-        </div>
-
-        <div #savingsProducts>
-          <mat-list-item *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
-            <mat-icon matListIcon [routerLink]="['saving-products']">
-              <fa-icon icon="briefcase" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['saving-products']">{{'labels.heading.Savings Products' | translate}}</h4>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['saving-products']">{{'labels.text.Add new savings product or modify or inactivate savings product' | translate}}</p>
-          </mat-list-item>
-        </div>
+          <div #savingsProducts>
+            <mat-list-item *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
+              <mat-icon matListIcon [routerLink]="['saving-products']">
+                <fa-icon icon="briefcase" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine [routerLink]="['saving-products']">{{ 'labels.heading.Savings Products' | translate }}</h4>
+              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['saving-products']">
+                {{ 'labels.text.Add new savings product or modify or inactivate savings product' | translate }}
+              </p>
+            </mat-list-item>
+          </div>
 
-        <div #shareProducts>
-          <mat-list-item *mifosxHasPermission="'READ_SHAREPRODUCT'">
-            <mat-icon matListIcon [routerLink]="['share-products']">
-              <fa-icon icon="briefcase" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['share-products']">{{'labels.heading.Share Products' | translate}}</h4>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['share-products']">{{'labels.text.Add new share product or modify or inactivate share product' | translate}}</p>
-          </mat-list-item>
-        </div>
+          <div #shareProducts>
+            <mat-list-item *mifosxHasPermission="'READ_SHAREPRODUCT'">
+              <mat-icon matListIcon [routerLink]="['share-products']">
+                <fa-icon icon="briefcase" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine [routerLink]="['share-products']">{{ 'labels.heading.Share Products' | translate }}</h4>
+              <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+              <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['share-products']">
+                {{ 'labels.text.Add new share product or modify or inactivate share product' | translate }}
+              </p>
+            </mat-list-item>
+          </div>
 
-        <div #charges>
-          <mat-list-item *mifosxHasPermission="'READ_CHARGE'">
-            <mat-icon matListIcon [routerLink]="['charges']">
-              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['charges']">{{'labels.heading.Charges' | translate}}</h4>
-            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['charges']">{{'labels.text.Define charges/penalties for loan products, savings and deposit products' | translate}}</p>
-          </mat-list-item>
-        </div>
+          <div #charges>
+            <mat-list-item *mifosxHasPermission="'READ_CHARGE'">
+              <mat-icon matListIcon [routerLink]="['charges']">
+                <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine [routerLink]="['charges']">{{ 'labels.heading.Charges' | translate }}</h4>
+              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
+              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['charges']">
+                {{ 'labels.text.Define charges/penalties for loan products, savings and deposit products' | translate }}
+              </p>
+            </mat-list-item>
+          </div>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['collaterals']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['collaterals']">{{'labels.heading.Collateral Management' | translate}}</h4>
+            <h4 matLine [routerLink]="['collaterals']">{{ 'labels.heading.Collateral Management' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['collaterals']">{{'labels.text.Define collaterals for Collateral Management' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['collaterals']">
+              {{ 'labels.text.Define collaterals for Collateral Management' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
             <mat-icon matListIcon [routerLink]="['delinquency-bucket-configurations']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['delinquency-bucket-configurations']">{{'labels.heading.Delinquency Buckets' | translate}}</h4>
+            <h4 matLine [routerLink]="['delinquency-bucket-configurations']">
+              {{ 'labels.heading.Delinquency Buckets' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['delinquency-bucket-configurations']">{{'labels.text.Define delinquency day ranges and bucket set for loan products' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['delinquency-bucket-configurations']">
+              {{ 'labels.text.Define delinquency day ranges and bucket set for loan products' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item *mifosxHasPermission="'READ_PRODUCTMIX'">
             <mat-icon matListIcon [routerLink]="['products-mix']">
               <fa-icon icon="random" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['products-mix']">{{'labels.heading.Products Mix' | translate}}</h4>
+            <h4 matLine [routerLink]="['products-mix']">{{ 'labels.heading.Products Mix' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['products-mix']">{{'labels.text.Defines rules for taking multiple rules' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['products-mix']">
+              {{ 'labels.text.Defines rules for taking multiple rules' | translate }}
+            </p>
           </mat-list-item>
 
-        <div #fixedDepositProducts>
-          <mat-list-item *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
-            <mat-icon matListIcon [routerLink]="['fixed-deposit-products']">
-              <fa-icon icon="briefcase" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['fixed-deposit-products']">{{'labels.heading.Fixed Deposit Products' | translate}}</h4>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['fixed-deposit-products']">{{'labels.text.Add, modify or inactivate a Fixed deposit product' | translate}}</p>
-          </mat-list-item>
-        </div>
+          <div #fixedDepositProducts>
+            <mat-list-item *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
+              <mat-icon matListIcon [routerLink]="['fixed-deposit-products']">
+                <fa-icon icon="briefcase" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine [routerLink]="['fixed-deposit-products']">
+                {{ 'labels.heading.Fixed Deposit Products' | translate }}
+              </h4>
+              <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
+              <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['fixed-deposit-products']">
+                {{ 'labels.text.Add, modify or inactivate a Fixed deposit product' | translate }}
+              </p>
+            </mat-list-item>
+          </div>
 
-        <div #recurringDepositProducts>
-          <mat-list-item *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
-            <mat-icon matListIcon [routerLink]="['recurring-deposit-products']">
-              <fa-icon icon="briefcase" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine [routerLink]="['recurring-deposit-products']">{{'labels.heading.Recurring Deposit Products' | translate}}</h4>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['recurring-deposit-products']">{{'labels.text.Add, modify or inactivate a Recurring Deposit product' | translate}}</p>
-          </mat-list-item>
-        </div>
+          <div #recurringDepositProducts>
+            <mat-list-item *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
+              <mat-icon matListIcon [routerLink]="['recurring-deposit-products']">
+                <fa-icon icon="briefcase" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine [routerLink]="['recurring-deposit-products']">
+                {{ 'labels.heading.Recurring Deposit Products' | translate }}
+              </h4>
+              <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
+              <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
+              <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['recurring-deposit-products']">
+                {{ 'labels.text.Add, modify or inactivate a Recurring Deposit product' | translate }}
+              </p>
+            </mat-list-item>
+          </div>
 
           <mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
             <mat-icon matListIcon [routerLink]="['tax-configurations']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['tax-configurations']">{{'labels.heading.Manage Tax Configurations' | translate}}</h4>
+            <h4 matLine [routerLink]="['tax-configurations']">
+              {{ 'labels.heading.Manage Tax Configurations' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['tax-configurations']">{{'labels.text.Define Tax components and Tax groups' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['tax-configurations']">
+              {{ 'labels.text.Define Tax components and Tax groups' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'READ_FLOATINGRATE'">
             <mat-icon matListIcon [routerLink]="['floating-rates']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['floating-rates']">{{'labels.heading.Floating Rates' | translate}}</h4>
+            <h4 matLine [routerLink]="['floating-rates']">{{ 'labels.heading.Floating Rates' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['floating-rates']">{{'labels.text.Define floating rates for loan products' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['floating-rates']">
+              {{ 'labels.text.Define floating rates for loan products' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCharges let-popover="popover">
-  <h2>{{'labels.heading.Charges' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Two types of charges—fees and penalties' | translate}}</p>
+  <h2>{{ 'labels.heading.Charges' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Two types of charges—fees and penalties' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepCharges()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCharges()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      Close
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepCharges()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepCharges()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateLoanProducts let-popover="popover">
-  <h2>{{'labels.heading.Loan Products' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Loan products define the rules, default settings' | translate}}</p>
+  <h2>{{ 'labels.heading.Loan Products' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Loan products define the rules, default settings' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepLoanProducts()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepLoanProducts()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepLoanProducts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepLoanProducts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateSavingsProducts let-popover="popover">
-  <h2>{{'labels.heading.Savings Products' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Savings products define the rules, default settings' | translate}}</p>
+  <h2>{{ 'labels.heading.Savings Products' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Savings products define the rules, default settings' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepSavingsProducts()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepSavingsProducts()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepSavingsProducts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepSavingsProducts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateShareProducts let-popover="popover">
-  <h2>{{'labels.heading.Share Products' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Share products define the rules, default settings' | translate}}</p>
+  <h2>{{ 'labels.heading.Share Products' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Share products define the rules, default settings' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepShareProducts()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepShareProducts()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepShareProducts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepShareProducts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFixedDepositProducts let-popover="popover">
-  <h2>{{'labels.heading.Fixed Deposit Products' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Fixed Deposit Products defines the rules, default settings' | translate}}</p>
+  <h2>{{ 'labels.heading.Fixed Deposit Products' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Fixed Deposit Products defines the rules, default settings' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepFixedDepositProducts()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepFixedDepositProducts()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepFixedDepositProducts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepFixedDepositProducts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateRecurringDepositProducts let-popover="popover">
-  <h2>{{'labels.heading.Recurring Deposit Products' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Recurring Deposit products define the rules, default settings' | translate}}</p>
+  <h2>{{ 'labels.heading.Recurring Deposit Products' | translate }}</h2>
+  <p class="mw400">{{ 'labels.text.Recurring Deposit products define the rules, default settings' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepRecurringDepositProducts()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepRecurringDepositProducts()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepRecurringDepositProducts()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepRecurringDepositProducts()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html
index 03a0626354..f60ca9dad7 100644
--- a/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html
+++ b/src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,90 +21,82 @@
     </ng-template>
 
     <mat-step [stepControl]="recurringDepositProductDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-      <mifosx-recurring-deposit-product-details-step  [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
-        
+      <mifosx-recurring-deposit-product-details-step
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductCurrencyForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-currency-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-currency-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductTermsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-terms-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductSettingsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-settings-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-settings-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductInterestRateChartForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-interest-rate-chart-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-charges-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
-        [currencyCode]="recurringDepositProductCurrencyForm.get('currencyCode')">
+        [currencyCode]="recurringDepositProductCurrencyForm.get('currencyCode')"
+      >
       </mifosx-recurring-deposit-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-accounting-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
-        [recurringDepositProductFormValid]="recurringDepositProductFormValid">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+        [accountingRuleData]="accountingRuleData"
+        [recurringDepositProductFormValid]="recurringDepositProductFormValid"
+      >
       </mifosx-recurring-deposit-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="recurringDepositProductFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-preview-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
         [chartSlabsDisplayedColumns]="recurringDepositProductInterestRateChartStep.chartSlabsDisplayedColumns"
-        [accountingRuleData]="accountingRuleData" [recurringDepositProduct]="recurringDepositProduct"
-        (submitEvent)="submit()">
+        [accountingRuleData]="accountingRuleData"
+        [recurringDepositProduct]="recurringDepositProduct"
+        (submitEvent)="submit()"
+      >
       </mifosx-recurring-deposit-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html
index c4e9daae1a..6ddd0e3a62 100644
--- a/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html
+++ b/src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,90 +21,82 @@
     </ng-template>
 
     <mat-step [stepControl]="recurringDepositProductDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-details-step
-      [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
-    </mifosx-recurring-deposit-product-details-step>
-
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
+      </mifosx-recurring-deposit-product-details-step>
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductCurrencyForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-currency-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-currency-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductTermsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-terms-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductSettingsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-settings-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-settings-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductInterestRateChartForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-interest-rate-chart-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+      >
       </mifosx-recurring-deposit-product-interest-rate-chart-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-charges-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
-        [currencyCode]="recurringDepositProductCurrencyForm.get('currencyCode')">
+        [currencyCode]="recurringDepositProductCurrencyForm.get('currencyCode')"
+      >
       </mifosx-recurring-deposit-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="recurringDepositProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-accounting-step
-        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
-        [recurringDepositProductFormValid]="recurringDepositProductFormValidAndNotPrinstine">
+        [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
+        [accountingRuleData]="accountingRuleData"
+        [recurringDepositProductFormValid]="recurringDepositProductFormValidAndNotPrinstine"
+      >
       </mifosx-recurring-deposit-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="recurringDepositProductFormValidAndNotPrinstine" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-recurring-deposit-product-preview-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
         [chartSlabsDisplayedColumns]="recurringDepositProductInterestRateChartStep.chartSlabsDisplayedColumns"
-        [accountingRuleData]="accountingRuleData" [recurringDepositProduct]="recurringDepositProduct"
-        (submitEvent)="submit()">
+        [accountingRuleData]="accountingRuleData"
+        [recurringDepositProduct]="recurringDepositProduct"
+        (submitEvent)="submit()"
+      >
       </mifosx-recurring-deposit-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html
index 38f60c635f..7e5cba702a 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html
@@ -1,10 +1,13 @@
 <form [formGroup]="recurringDepositProductAccountingForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column"
-      formControlName="accountingRule">
-      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
+    <mat-radio-group
+      fxFlex="98%"
+      fxLayout="row"
+      fxLayoutGap="5%"
+      fxLayout.lt-md="column"
+      formControlName="accountingRule"
+    >
+      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i = index" [value]="i + 1">
         {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
@@ -12,109 +15,163 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div *ngIf="isCashOrAccrualAccounting()" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
-
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.savingsReferenceAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Saving reference'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Saving reference'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.feesReceivableAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Fees Receivable'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Fees Receivable'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.penaltiesReceivableAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Penalties Receivable'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Penalties Receivable'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.savingsControlAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Saving control'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Saving control'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.transfersInSuspenseAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Savings transfers in suspense'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Savings transfers in suspense'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.interestPayableAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Interest Payable'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Interest Payable'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.interestOnSavingsAccountId"
-        [glAccountList]="expenseAccountData" [required]="true" [inputLabel]="'Interest on savings'">
+        [glAccountList]="expenseAccountData"
+        [required]="true"
+        [inputLabel]="'Interest on savings'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from fees'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.incomeFromPenaltyAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from penalties'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from penalties'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h3 fxFlex="23%" class="mat-h3">{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
+      <h3 fxFlex="23%" class="mat-h3">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
       <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules"></mat-checkbox>
 
-      <div *ngIf="recurringDepositProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap"
-        fxLayoutGap="2%" fxLayout.lt-md="column">
-
+      <div
+        *ngIf="recurringDepositProductAccountingForm.value.advancedAccountingRules"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
         <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}
+          <h4 fxFlex="63%" class="mat-h4">
+            {{ 'labels.heading.Configure Fund Sources for Payment Channels' | translate }}
           </h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value"
-            *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="paymentChannelToFundSourceMappings.value"
+            *ngIf="paymentChannelToFundSourceMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="paymentTypeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
               <td mat-cell *matCellDef="let paymentFundSource">
-                {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
+                {{ paymentFundSource.paymentTypeId | find: paymentTypeData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="fundSourceAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
               <td mat-cell *matCellDef="let paymentFundSource">
-                {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
+                {{ paymentFundSource.fundSourceAccountId | find: assetAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let paymentFundSource; let i = index">
-                <button mat-icon-button color="primary"
-                  (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
                 <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
@@ -124,41 +181,47 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Pay
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
           </table>
         </div>
         <div fxFlex="100%" *ngIf="existCharges()">
-
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
+          <h4 fxFlex="63%" class="mat-h4">{{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}</h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('FeesIncome', feeToIncomeAccountMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('FeesIncome', feeToIncomeAccountMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value"
-            *ngIf="feeToIncomeAccountMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="feeToIncomeAccountMappings.value"
+            *ngIf="feeToIncomeAccountMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="chargeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome">
-                {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
+                {{ feesIncome.chargeId | find: chargeData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="incomeAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome">
-                {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+                {{ feesIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome; let i = index">
                 <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
                   <fa-icon icon="edit"></fa-icon>
@@ -170,46 +233,56 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Ac
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
           </table>
         </div>
 
         <div fxFlex="100%" *ngIf="existCharges()">
-
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}
+          <h4 fxFlex="63%" class="mat-h4">
+            {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
           </h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
-            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="penaltyToIncomeAccountMappings.value"
+            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="chargeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome">
-                {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
+                {{ penaltyIncome.chargeId | find: penaltyData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="incomeAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome">
-                {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+                {{ penaltyIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome; let i = index">
-                <button mat-icon-button color="primary"
-                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
                 <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
@@ -219,25 +292,21 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Inco
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
           </table>
         </div>
       </div>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!recurringDepositProductFormValid">
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
-</form>
\ No newline at end of file
+</form>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html
index c868a4cc63..2fca654b8f 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html
@@ -1,10 +1,11 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
-        [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -13,43 +14,47 @@
   <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>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource"
-    [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </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> {{'labels.inputs.Amount' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </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="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </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>
@@ -58,19 +63,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html
index 2530892fd3..47eaa1b192 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html
@@ -1,46 +1,60 @@
 <form [formGroup]="recurringDepositProductCurrencyForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
-      <mat-select formControlName="currencyCode" matTooltip = "{{ 'tooltips.The currency in which the deposit will be disbursed' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <mat-select
+        formControlName="currencyCode"
+        matTooltip="{{ 'tooltips.The currency in which the deposit will be disbursed' | translate }}"
+        required
+      >
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matInput formControlName="digitsAfterDecimal" matTooltip = "{{ 'tooltips.Decimal places to be used to track and report' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="digitsAfterDecimal"
+        matTooltip="{{ 'tooltips.Decimal places to be used to track and report' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Decimal Places' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOf" matTooltip = "{{ 'tooltips.Enter multiples of currency value' | translate}}">
+      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="inMultiplesOf"
+        matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
+      />
       <mat-error>
-        {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html
index 89b54684de..46eb93a328 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html
@@ -1,42 +1,60 @@
 <form [formGroup]="recurringDepositProductDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}} </mat-label>
-      <input matInput formControlName="name" matTooltip="{{ 'tooltips.Product name is a unique identifier' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }} </mat-label>
+      <input
+        matInput
+        formControlName="name"
+        matTooltip="{{ 'tooltips.Product name is a unique identifier' | translate }}"
+        required
+      />
       <mat-error *ngIf="recurringDepositProductDetailsForm.controls.name.hasError('required')">
-        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
-      <input matInput formControlName="shortName" maxlength="4"  matTooltip="{{ 'tooltips.Short name is a unique identifier' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Short Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="shortName"
+        maxlength="4"
+        matTooltip="{{ 'tooltips.Short name is a unique identifier' | translate }}"
+        required
+      />
       <mat-error *ngIf="recurringDepositProductDetailsForm.controls.shortName.hasError('required')">
-        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Short Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
-      <textarea matInput formControlName="description" matTooltip="{{ 'tooltips.Description is used to provide additional information regarding the purpose' | translate}}"  cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+      <textarea
+        matInput
+        formControlName="description"
+        matTooltip="{{
+          'tooltips.Description is used to provide additional information regarding the purpose' | translate
+        }}"
+        cdkTextareaAutosize
+        cdkAutosizeMinRows="2"
+      ></textarea>
       <mat-error *ngIf="recurringDepositProductDetailsForm.controls.description.hasError('required')">
-        {{'labels.inputs.Description' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Description' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
index 3953267aea..7552fc7b48 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
@@ -1,248 +1,302 @@
 <form [formGroup]="recurringDepositProductInterestRateChartForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h3 fxFlex="83%" class="mat-h3">{{ 'labels.heading.Interest Rate Charts' | translate}}</h3>
+    <h3 fxFlex="83%" class="mat-h3">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
     <div fxFlex="13%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        {{ 'labels.buttons.Add' | translate}}
+        {{ 'labels.buttons.Add' | translate }}
       </button>
     </div>
 
-    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="charts"
-      *ngFor="let chart of charts.controls; let chartIndex = index">
-
+    <div
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+      formArrayName="charts"
+      *ngFor="let chart of charts.controls; let chartIndex = index"
+    >
       <mat-divider fxFlex="98%"></mat-divider>
 
       <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="chartIndex">
-
         <div fxFlex="98%" fxLayout="row" fxLayoutAlign="end center">
-          <button type="button" mat-icon-button color="warn" (click)="delete(charts, chartIndex)"
-            matTooltip="{{ 'tooltips.Delete Interest Rate Chart' | translate}}" matTooltipPosition="left">
+          <button
+            type="button"
+            mat-icon-button
+            color="warn"
+            (click)="delete(charts, chartIndex)"
+            matTooltip="{{ 'tooltips.Delete Interest Rate Chart' | translate }}"
+            matTooltipPosition="left"
+          >
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
 
         <mat-form-field fxFlex="32%">
-          <mat-label>{{ 'labels.inputs.Name' | translate}}</mat-label>
-          <input matInput formControlName="name" matTooltip="{{ 'tooltips.The name is a unique identifier for the chart' | translate}}" required>
+          <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+          <input
+            matInput
+            formControlName="name"
+            matTooltip="{{ 'tooltips.The name is a unique identifier for the chart' | translate }}"
+            required
+          />
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="validFromDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Start Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker"
-            formControlName="fromDate" required>
+          <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="validFromDatePicker"
+            formControlName="fromDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #validFromDatePicker></mat-datepicker>
           <mat-error>
-            {{ 'labels.inputs.Start Date' | translate}} {{'labels.commons.is' | translate}}
-            <strong>{{'labels.commons.required' | translate}}</strong>
+            {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="endDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.End Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+          <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex="65%">
-          <mat-label>{{ 'labels.inputs.Description' | translate}}</mat-label>
-          <textarea matInput formControlName="description"
-            matTooltip="{{ 'tooltips.The description is used to provide additional information' | translate}}"></textarea>
+          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+          <textarea
+            matInput
+            formControlName="description"
+            matTooltip="{{ 'tooltips.The description is used to provide additional information' | translate }}"
+          ></textarea>
         </mat-form-field>
 
         <div fxFlex="31%" fxLayout="row" fxLayoutAlign="space-between center">
           <mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
-            {{ 'labels.inputs.Is primary grouping by amount?' | translate}}
+            {{ 'labels.inputs.Is primary grouping by amount?' | translate }}
           </mat-checkbox>
-
         </div>
         <div fxFlex="100%" class="center">
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{ 'labels.buttons.Add Slab' | translate}}
+            {{ 'labels.buttons.Add Slab' | translate }}
           </button>
         </div>
 
         <div fxFlex="100%" *ngIf="chart.value.chartSlabs.length === 0">
-          <h3 class="mat-h3">{{ "labels.heading.It is required to add at least one Slab" | translate}}</h3>
+          <h3 class="mat-h3">{{ 'labels.heading.It is required to add at least one Slab' | translate }}</h3>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs"
-          *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
-
+        <table
+          fxFlex="98%"
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="chart.value.chartSlabs"
+          *ngIf="chart.value.chartSlabs.length !== 0"
+          multiTemplateDataRows
+        >
           <ng-container matColumnDef="period">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Period' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
-              {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType |
-              find:periodTypeData:'id':'value') }}
+              {{
+                chartSlab.fromPeriod +
+                  ' - ' +
+                  chartSlab.toPeriod +
+                  ' ' +
+                  (chartSlab.periodType | find: periodTypeData : 'id' : 'value')
+              }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="amountRange">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount Range' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.amountRangeFrom + ' - ' + chartSlab.amountRangeTo }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="annualInterestRate">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Interest' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.annualInterestRate }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Description' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.description }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-              <button mat-icon-button color="primary"
-                (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)">
+              <button
+                mat-icon-button
+                color="primary"
+                (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)"
+              >
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(chart.controls.chartSlabs, chartSlabIndex)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <button mat-button color="primary"
-                (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
+              <button
+                mat-button
+                color="primary"
+                (click)="
+                  expandChartSlabIndex[chartIndex] =
+                    expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex
+                "
+              >
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                   <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                  {{ 'labels.buttons.View Incentives' | translate}}
+                  {{ 'labels.buttons.View Incentives' | translate }}
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
                   <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                  {{ 'labels.buttons.Hide Incentives' | translate}}
+                  {{ 'labels.buttons.Hide Incentives' | translate }}
                 </span>
               </button>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incentives">
-            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-              [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
-
-              <div fxLayout="row wrap" fxFlexFill class="incentives"
-                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
-
+            <td
+              mat-cell
+              *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+              [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length"
+            >
+              <div
+                fxLayout="row wrap"
+                fxFlexFill
+                class="incentives"
+                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'"
+              >
                 <mat-card fxLayout="row wrap" fxFlexFill>
-
                   <h4 class="mat-h4" fxFlex="83%">
-                    {{ 'labels.heading.Incentives' | translate}}
+                    {{ 'labels.heading.Incentives' | translate }}
                   </h4>
 
                   <div fxFlex="13%">
-                    <button mat-raised-button color="primary"
-                      (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
+                    <button
+                      mat-raised-button
+                      color="primary"
+                      (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))"
+                    >
                       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                      {{ 'labels.buttons.Add' | translate}}
+                      {{ 'labels.buttons.Add' | translate }}
                     </button>
                   </div>
 
-                  <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
-                    *ngIf="chartSlab.incentives.length">
-
+                  <table
+                    fxFlexFill
+                    class="mat-elevation-z1"
+                    mat-table
+                    [dataSource]="chartSlab.incentives"
+                    *ngIf="chartSlab.incentives.length"
+                  >
                     <ng-container matColumnDef="entityType">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Entity Type' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.entityType | find:entityTypeData:'id':'value' }}
+                        {{ incentive.entityType | find: entityTypeData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="attributeName">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Attribute Name' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.attributeName | find:attributeNameData:'id':'value' }}
+                        {{ incentive.attributeName | find: attributeNameData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="conditionType">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Condition Type' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.conditionType | find:conditionTypeData:'id':'value' }}
+                        {{ incentive.conditionType | find: conditionTypeData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="attributeValue">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Attribute Value' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                        <span *ngSwitchCase="2">{{ incentive.attributeValue | find:genderData:'id':'name' }}</span>
+                        <span *ngSwitchCase="2">{{ incentive.attributeValue | find: genderData : 'id' : 'name' }}</span>
                         <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                        <span *ngSwitchCase="4">{{ incentive.attributeValue | find:clientTypeData:'id':'name' }}</span>
-                        <span *ngSwitchCase="5">{{ incentive.attributeValue | find:clientClassificationData:'id':'name'
-                          }}</span>
+                        <span *ngSwitchCase="4">{{
+                          incentive.attributeValue | find: clientTypeData : 'id' : 'name'
+                        }}</span>
+                        <span *ngSwitchCase="5">{{
+                          incentive.attributeValue | find: clientClassificationData : 'id' : 'name'
+                        }}</span>
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="incentiveType">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Incentive Type' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
-                        {{ incentive.incentiveType | find:incentiveTypeData:'id':'value'}}
+                        {{ incentive.incentiveType | find: incentiveTypeData : 'id' : 'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="amount">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Interest' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.amount }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="actions">
-                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate}} </th>
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
                       <td mat-cell *matCellDef="let incentive; let incentiveIndex = index">
-                        <button mat-icon-button color="primary"
-                          (click)="editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button
+                          mat-icon-button
+                          color="primary"
+                          (click)="
+                            editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)
+                          "
+                        >
                           <fa-icon icon="edit"></fa-icon>
                         </button>
-                        <button mat-icon-button color="warn"
-                          (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button
+                          mat-icon-button
+                          color="warn"
+                          (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)"
+                        >
                           <fa-icon icon="trash"></fa-icon>
                         </button>
                       </td>
                     </ng-container>
 
                     <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                    <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                   </table>
-
                 </mat-card>
               </div>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns[chartIndex]"></tr>
-          <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex];"></tr>
-          <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex]"></tr>
+          <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
         </table>
-
       </div>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html
index 83af36df01..adcfc5e4bb 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html
@@ -1,431 +1,569 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
   <h2 class="mat-h2" fxFlexFill>{{ recurringDepositProduct.name }}</h2>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.description">
-    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.currencyCode | find:recurringDepositProductsTemplate.currencyOptions:'code':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.currencyCode | find: recurringDepositProductsTemplate.currencyOptions : 'code' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.digitsAfterDecimal }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Deposit Amount' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.depositAmount + ' (Min: ' + (recurringDepositProduct.minDepositAmount ? recurringDepositProduct.minDepositAmount : recurringDepositProduct.depositAmount) + ', Max: ' + (recurringDepositProduct.maxDepositAmount ? recurringDepositProduct.maxDepositAmount : recurringDepositProduct.depositAmount) + ')' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.depositAmount +
+        ' (Min: ' +
+        (recurringDepositProduct.minDepositAmount
+          ? recurringDepositProduct.minDepositAmount
+          : recurringDepositProduct.depositAmount) +
+        ', Max: ' +
+        (recurringDepositProduct.maxDepositAmount
+          ? recurringDepositProduct.maxDepositAmount
+          : recurringDepositProduct.depositAmount) +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.interestCompoundingPeriodType | find:recurringDepositProductsTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.interestCompoundingPeriodType
+        | find: recurringDepositProductsTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.interestPostingPeriodType | find:recurringDepositProductsTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.interestPostingPeriodType
+        | find: recurringDepositProductsTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationType | find:recurringDepositProductsTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.interestCalculationType
+        | find: recurringDepositProductsTemplate.interestCalculationTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationDaysInYearType | find:recurringDepositProductsTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.interestCalculationDaysInYearType
+        | find: recurringDepositProductsTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.lockinPeriodFrequency + ' ' + (recurringDepositProduct.lockinPeriodFrequencyType | find:recurringDepositProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.lockinPeriodFrequency +
+        ' ' +
+        (recurringDepositProduct.lockinPeriodFrequencyType
+          | find: recurringDepositProductsTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.minDepositTerm + ' ' + (recurringDepositProduct.minDepositTermTypeId | find:recurringDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.minDepositTerm +
+        ' ' +
+        (recurringDepositProduct.minDepositTermTypeId
+          | find: recurringDepositProductsTemplate.periodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.inMultiplesOfDepositTerm">
-    <span fxFlex="40%">{{'labels.inputs.And thereafter, in Multiples of' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.inMultiplesOfDepositTerm + ' ' + (recurringDepositProduct.inMultiplesOfDepositTermTypeId | find:recurringDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.And thereafter, in Multiples of' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.inMultiplesOfDepositTerm +
+        ' ' +
+        (recurringDepositProduct.inMultiplesOfDepositTermTypeId
+          | find: recurringDepositProductsTemplate.periodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.maxDepositTerm">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.maxDepositTerm + ' ' + (recurringDepositProduct.maxDepositTermTypeId | find:recurringDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.maxDepositTerm +
+        ' ' +
+        (recurringDepositProduct.maxDepositTermTypeId
+          | find: recurringDepositProductsTemplate.periodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
   <!-- For Pre-mature closure -->
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Apply Penal Interest (less)' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.preClosurePenalApplicable">
-    <span fxFlex="40%">{{'labels.inputs.Penal Interest' | translate}} (%):</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.preClosurePenalInterest + '% (' + (recurringDepositProduct.preClosurePenalInterestOnTypeId | find:recurringDepositProductsTemplate.preClosurePenalInterestOnTypeOptions:'id':'value') + ')' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.preClosurePenalInterest +
+        '% (' +
+        (recurringDepositProduct.preClosurePenalInterestOnTypeId
+          | find: recurringDepositProductsTemplate.preClosurePenalInterestOnTypeOptions : 'id' : 'value') +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
-    <span fxFlex="40%">{{'labels.inputs.Recurring Deposit Type' | translate}}:</span>
-    <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Mandatory' | translate}} </span>
-    <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Voluntary' | translate}} </span>
+    <span fxFlex="40%">{{ 'labels.inputs.Recurring Deposit Type' | translate }}:</span>
+    <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit">
+      {{ 'labels.text.Mandatory' | translate }}
+    </span>
+    <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit">
+      {{ 'labels.text.Voluntary' | translate }}
+    </span>
   </div>
   <!--  -->
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.withHoldTax">
-    <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.taxGroupId | find:recurringDepositProductsTemplate.taxGroupOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Tax Group' | translate }}:</span>
+    <span fxFlex="60%">{{
+      recurringDepositProduct.taxGroupId | find: recurringDepositProductsTemplate.taxGroupOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" *ngIf="recurringDepositProduct.charts.length !== 0">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Charts' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <div fxFlexFill *ngFor="let chart of recurringDepositProduct.charts; let chartIndex = index" fxLayout="row wrap" fxLayout.lt-md="column">
-
+    <div
+      fxFlexFill
+      *ngFor="let chart of recurringDepositProduct.charts; let chartIndex = index"
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
       <div fxFlexFill *ngIf="chart.name">
-        <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Name' | translate }}:</span>
         <span fxFlex="60%">{{ chart.name }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{'labels.inputs.From Date' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.From Date' | translate }}:</span>
         <span fxFlex="60%">{{ chart.fromDate | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.endDate">
-        <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
         <span fxFlex="60%">{{ chart.endDate | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.description">
-        <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
         <span fxFlex="60%">{{ chart.description }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
+        <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
         <span fxFlex="60%">{{ recurringDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chart.chartSlabs" *ngIf="chart.chartSlabs.length !== 0" multiTemplateDataRows>
-
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="chart.chartSlabs"
+        *ngIf="chart.chartSlabs.length !== 0"
+        multiTemplateDataRows
+      >
         <ng-container matColumnDef="period">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Period' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
-            {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType | find:recurringDepositProductsTemplate.chartTemplate.periodTypes:'id':'value') }}
+            {{
+              chartSlab.fromPeriod +
+                ' - ' +
+                chartSlab.toPeriod +
+                ' ' +
+                (chartSlab.periodType
+                  | find: recurringDepositProductsTemplate.chartTemplate.periodTypes : 'id' : 'value')
+            }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="amountRange">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Range' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.amountRangeFrom + ' - ' + chartSlab.amountRangeTo }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="annualInterestRate">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Interest' | translate}} </th>
-          <td mat-cell *matCellDef="let chartSlab">
-            {{ chartSlab.annualInterestRate | formatNumber }} %
-          </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+          <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
         </ng-container>
 
         <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Description' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.description }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-            <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex" [disabled]="chartSlab.incentives.length === 0">
+            <button
+              mat-button
+              color="primary"
+              (click)="
+                expandChartSlabIndex[chartIndex] =
+                  expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex
+              "
+              [disabled]="chartSlab.incentives.length === 0"
+            >
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                 <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                {{'labels.buttons.View Incentives' | translate}}
+                {{ 'labels.buttons.View Incentives' | translate }}
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
                 <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                {{'labels.buttons.Hide Incentives' | translate}}
+                {{ 'labels.buttons.Hide Incentives' | translate }}
               </span>
             </button>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incentives">
-          <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
-            <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
+          <td
+            mat-cell
+            *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+            [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length"
+          >
+            <div
+              fxLayout="row wrap"
+              fxFlexFill
+              class="incentives"
+              [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'"
+            >
               <mat-card fxLayout="row wrap" fxFlexFill>
-
                 <h4 class="mat-h4" fxFlex="23%">
-                  {{'labels.heading.Incentives' | translate}}
+                  {{ 'labels.heading.Incentives' | translate }}
                 </h4>
 
                 <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
-
                   <ng-container matColumnDef="entityType">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.entityType | find:recurringDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
+                      {{
+                        incentive.entityType
+                          | find: recurringDepositProductsTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeName">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Name' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.attributeName | find:recurringDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
+                      {{
+                        incentive.attributeName
+                          | find: recurringDepositProductsTemplate.chartTemplate.attributeNameOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="conditionType">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition Type' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.conditionType | find:recurringDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
+                      {{
+                        incentive.conditionType
+                          | find: recurringDepositProductsTemplate.chartTemplate.conditionTypeOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeValue">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Value' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                      <span *ngSwitchCase="2">{{ incentive.attributeValue | find:recurringDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
+                      <span *ngSwitchCase="2">{{
+                        incentive.attributeValue
+                          | find: recurringDepositProductsTemplate.chartTemplate.genderOptions : 'id' : 'name'
+                      }}</span>
                       <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                      <span *ngSwitchCase="4">{{ incentive.attributeValue | find:recurringDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
-                      <span *ngSwitchCase="5">{{ incentive.attributeValue | find:recurringDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name' }}</span>
+                      <span *ngSwitchCase="4">{{
+                        incentive.attributeValue
+                          | find: recurringDepositProductsTemplate.chartTemplate.clientTypeOptions : 'id' : 'name'
+                      }}</span>
+                      <span *ngSwitchCase="5">{{
+                        incentive.attributeValue
+                          | find
+                            : recurringDepositProductsTemplate.chartTemplate.clientClassificationOptions
+                            : 'id'
+                            : 'name'
+                      }}</span>
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="incentiveType">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Incentive Type' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.incentiveType | find:recurringDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
+                      {{
+                        incentive.incentiveType
+                          | find: recurringDepositProductsTemplate.chartTemplate.incentiveTypeOptions : 'id' : 'value'
+                      }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="amount">
-                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
                       {{ incentive.amount | formatNumber }}
                     </td>
                   </ng-container>
 
                   <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                  <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                  <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                 </table>
-
               </mat-card>
             </div>
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns[chartIndex]"></tr>
-        <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex];"></tr>
-        <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns[chartIndex]"></tr>
+        <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
       </table>
 
       <mat-divider fxFlexFill></mat-divider>
-
     </div>
-
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </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> {{'labels.inputs.Amount' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount  }}
+          {{ charge.amount }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <mifosx-view-savings-accounting-details *ngIf="!isNoneAccounting()"
-  [accountingRule]="accountingRule"
-  [accountingMappings]="accountingMappings"
+  <mifosx-view-savings-accounting-details
+    *ngIf="!isNoneAccounting()"
+    [accountingRule]="accountingRule"
+    [accountingMappings]="accountingMappings"
   >
   </mifosx-view-savings-accounting-details>
 
-  <div *ngIf="recurringDepositProduct.advancedAccountingRules && (recurringDepositProduct.paymentChannelToFundSourceMappings?.length || recurringDepositProduct.feeToIncomeAccountMappings?.length || recurringDepositProduct.penaltyToIncomeAccountMappings?.length)" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
+  <div
+    *ngIf="
+      recurringDepositProduct.advancedAccountingRules &&
+      (recurringDepositProduct.paymentChannelToFundSourceMappings?.length ||
+        recurringDepositProduct.feeToIncomeAccountMappings?.length ||
+        recurringDepositProduct.penaltyToIncomeAccountMappings?.length)
+    "
+    fxFlexFill
+    fxLayout="row wrap"
+    fxLayout.lt-md="column"
+  >
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <div *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fund Sources for Payment Channels' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings">
-
+    <div
+      *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings"
+      >
         <ng-container matColumnDef="paymentTypeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
           <td mat-cell *matCellDef="let paymentFundSource">
-            {{ paymentFundSource.paymentTypeId | find:recurringDepositProductsTemplate.paymentTypeOptions:'id':'name' }}
+            {{
+              paymentFundSource.paymentTypeId
+                | find: recurringDepositProductsTemplate.paymentTypeOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="fundSourceAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
           <td mat-cell *matCellDef="let paymentFundSource">
-            {{ paymentFundSource.fundSourceAccountId | find:recurringDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
+            {{
+              paymentFundSource.fundSourceAccountId
+                | find: recurringDepositProductsTemplate.accountingMappingOptions.assetAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <div *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fees to Specific Income Accounts' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings">
-
+    <div
+      *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings"
+      >
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
-            {{ feesIncome.chargeId | find:recurringDepositProductsTemplate.chargeOptions:'id':'name' }}
+            {{ feesIncome.chargeId | find: recurringDepositProductsTemplate.chargeOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
-            {{ feesIncome.incomeAccountId | find:recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+            {{
+              feesIncome.incomeAccountId
+                | find: recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <div *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Penalties to Specific Income Accounts' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings">
-
+    <div
+      *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings"
+      >
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
-            {{ penaltyIncome.chargeId  | find:recurringDepositProductsTemplate.penaltyOptions:'id':'name' }}
+            {{ penaltyIncome.chargeId | find: recurringDepositProductsTemplate.penaltyOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
-            {{ penaltyIncome.incomeAccountId | find:recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+            {{
+              penaltyIncome.incomeAccountId
+                | find: recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
       </table>
-
     </div>
-
   </div>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{'labels.buttons.Submit' | translate}}    
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html
index b6765ece0e..914b69342f 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html
@@ -1,67 +1,90 @@
 <form [formGroup]="recurringDepositProductSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
-      {{'labels.inputs.Is Mandatory Deposit' | translate}}
+      {{ 'labels.inputs.Is Mandatory Deposit' | translate }}
     </mat-checkbox>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments" class="margin-v">
-      {{'labels.inputs.Adjust advance payments toward future installments' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      formControlName="adjustAdvanceTowardsFuturePayments"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Adjust advance payments toward future installments' | translate }}
     </mat-checkbox>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
-      {{'labels.inputs.Allow Withdrawals' | translate}}
+      {{ 'labels.inputs.Allow Withdrawals' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency" matTooltip="{{ 'tooltips.The number at which lock in period occurs' | translate}}" >
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="lockinPeriodFrequency"
+        matTooltip="{{ 'tooltips.The number at which lock in period occurs' | translate }}"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
-          [value]="lockinPeriodFrequencyType.id">
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
           {{ lockinPeriodFrequencyType.value }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Minimum Deposit Term' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Minimum Deposit Term' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minDepositTerm" matTooltip="{{ 'tooltips.The number at which minimum deposit occurs' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="minDepositTerm"
+        matTooltip="{{ 'tooltips.The number at which minimum deposit occurs' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Minimum Deposit Term Frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Minimum Deposit Term Frequency Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Minimum Deposit Term Frequency Type' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.And thereafter, in Multiples of' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.And thereafter, in Multiples of' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOfDepositTerm" matTooltip="{{ 'tooltips.The number at which multiple deposits occurs' | translate}}">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="inMultiplesOfDepositTerm"
+        matTooltip="{{ 'tooltips.The number at which multiple deposits occurs' | translate }}"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -69,15 +92,20 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.And thereafter, in Multiples o
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Maximum Deposit Term' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="maxDepositTerm" matTooltip="{{ 'tooltips.The number at which minimum deposit occurs' | translate}}">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        formControlName="maxDepositTerm"
+        matTooltip="{{ 'tooltips.The number at which minimum deposit occurs' | translate }}"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -87,22 +115,24 @@ <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Maximum Deposit Term' | transla
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">{{'labels.heading.For Pre-mature closure' | translate}}</h4>
+    <h4 fxFlex="23%" class="mat-h4">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      {{'labels.inputs.Apply Penal Interest (less)' | translate}}
+      {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Penal Interest' | translate}} (%)</mat-label>
-      <input type="number" matInput formControlName="preClosurePenalInterest">
+      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Period' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
-        <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
-          [value]="preClosurePenalInterestOnType.id">
+        <mat-option
+          *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
+          [value]="preClosurePenalInterestOnType.id"
+        >
           {{ preClosurePenalInterestOnType.value }}
         </mat-option>
       </mat-select>
@@ -111,32 +141,31 @@ <h4 fxFlex="23%" class="mat-h4">{{'labels.heading.For Pre-mature closure' | tran
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
-      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}
+      {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="recurringDepositProductSettingsForm.value.withHoldTax">
-      <mat-label>{{'labels.inputs.Tax Group' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
       <mat-select formControlName="taxGroupId" required>
         <mat-option *ngFor="let taxGroup of taxGroupData" [value]="taxGroup.id">
           {{ taxGroup.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Tax Group' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Tax Group' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html
index 92a9eb8db4..0c5808b41c 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html
@@ -1,88 +1,101 @@
 <form [formGroup]="recurringDepositProductTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Deposit Amount' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Deposit Amount' | translate }}</h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minDepositAmount">
+      <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minDepositAmount" />
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-      <input type="number" matInput formControlName="depositAmount" required>
+      <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+      <input type="number" matInput formControlName="depositAmount" required />
       <mat-error>
-        {{'labels.inputs.Default' | translate}} {{'labels.inputs.Deposit Amount' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Default' | translate }} {{ 'labels.inputs.Deposit Amount' | translate }}
+        {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="maxDepositAmount">
+      <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maxDepositAmount" />
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
+        <mat-option
+          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id"
+        >
           {{ interestCompoundingPeriodType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Compounding Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Posting Period' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
+        <mat-option
+          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id"
+        >
           {{ interestPostingPeriodType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Posting Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Calculated using' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
+        <mat-option
+          *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id"
+        >
           {{ interestCalculationType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Calculated using' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Days in Year' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
+        <mat-option
+          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id"
+        >
           {{ interestCalculationDaysInYearType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Days in Year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
index 7885afbac7..b53fbfb0d2 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
@@ -1,71 +1,117 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-<div #buttonCreateRecurringProduct class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'
-  matTooltip="{{ 'tooltips.Create Recurring Deposit Product' | translate}}" matTooltipPosition="above">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Recurring Deposit Product' | translate}}
-  </button>
-</div>
+  <div #buttonCreateRecurringProduct class="in-block">
+    <button
+      mat-raised-button
+      color="primary"
+      [routerLink]="['create']"
+      *mifosxHasPermission="'CREATE_RECURRINGDEPOSITPRODUCT'"
+      matTooltip="{{ 'tooltips.Create Recurring Deposit Product' | translate }}"
+      matTooltipPosition="above"
+    >
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Recurring Deposit Product' | translate }}
+    </button>
+  </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)"  matTooltip="{{ 'tooltips.Add Filters' | translate}}" matTooltipPosition="left">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input
+        matInput
+        (keyup)="applyFilter($event.target.value)"
+        matTooltip="{{ 'tooltips.Add Filters' | translate }}"
+        matTooltipPosition="left"
+      />
     </mat-form-field>
   </div>
 
   <div #recurringProductsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let recurringDepositProduct"> {{ recurringDepositProduct.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let recurringDepositProduct">{{ recurringDepositProduct.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
-        <td mat-cell *matCellDef="let recurringDepositProduct"> {{ recurringDepositProduct.shortName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Short Name' | translate }}</th>
+        <td mat-cell *matCellDef="let recurringDepositProduct">{{ recurringDepositProduct.shortName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateRecurringProduct let-popover="popover">
-  <h2>{{'labels.heading.Create recurring deposit product' | translate}}</h2>
-  <p class="mw300">{{'labels.text.This option allows you to create new recurring product.' | translate}}</p>
+  <h2>{{ 'labels.heading.Create recurring deposit product' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This option allows you to create new recurring product.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter recurring deposit products.' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter recurring deposit products.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateRecurringProduct,buttonCreateRecurringProduct , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateRecurringProductsTable,recurringProductsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="
+        popover.close(); showPopover(templateButtonCreateRecurringProduct, buttonCreateRecurringProduct, 'bottom', true)
+      "
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateRecurringProductsTable, recurringProductsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateRecurringProductsTable let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.List of recurring deposit products in the organization' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629552/Recurring+Deposit" target="_blank">{{'labels.heading.Recurring Deposit Products' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of recurring deposit products in the organization' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629552/Recurring+Deposit" target="_blank">{{
+      'labels.heading.Recurring Deposit Products' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html
index f1f3170457..4d6688bfba 100644
--- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html
+++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html
@@ -1,293 +1,353 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <h2 class="mat-h2" fxFlexFill>{{ recurringDepositProduct.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.shortName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.description">
-          <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.description }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.heading.Currency' | translate}}:</span>
-          <span fxFlex="60%">({{ recurringDepositProduct.currency.code }}) {{ recurringDepositProduct.currency.name }}</span>
+          <span fxFlex="40%">{{ 'labels.heading.Currency' | translate }}:</span>
+          <span fxFlex="60%"
+            >({{ recurringDepositProduct.currency.code }}) {{ recurringDepositProduct.currency.name }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.currency.decimalPlaces }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
-          <span fxFlex="60%">{{ recurringDepositProduct.currency.inMultiplesOf | formatNumber}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+          <span fxFlex="60%">{{ recurringDepositProduct.currency.inMultiplesOf | formatNumber }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Deposit Amount' | translate}}:</span>
-          <span fxFlex="60%">{{ recurringDepositProduct.depositAmount + ' (Min: ' + (recurringDepositProduct.minDepositAmount ? recurringDepositProduct.minDepositAmount : recurringDepositProduct.depositAmount) + ', Max: ' + (recurringDepositProduct.maxDepositAmount ? recurringDepositProduct.maxDepositAmount : recurringDepositProduct.depositAmount) + ')' }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
+          <span fxFlex="60%">{{
+            recurringDepositProduct.depositAmount +
+              ' (Min: ' +
+              (recurringDepositProduct.minDepositAmount
+                ? recurringDepositProduct.minDepositAmount
+                : recurringDepositProduct.depositAmount) +
+              ', Max: ' +
+              (recurringDepositProduct.maxDepositAmount
+                ? recurringDepositProduct.maxDepositAmount
+                : recurringDepositProduct.depositAmount) +
+              ')'
+          }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestCompoundingPeriodType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestPostingPeriodType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationDaysInYearType.value }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.lockinPeriodFrequency">
-          <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
           <span fxFlex="60%" *ngIf="recurringDepositProduct.lockinPeriodFrequency !== undefined">
             {{ recurringDepositProduct.lockinPeriodFrequency }}
-            {{ recurringDepositProduct.lockinPeriodFrequencyType.value }}</span>
+            {{ recurringDepositProduct.lockinPeriodFrequencyType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.minDepositTerm">
-          <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
-          <span fxFlex="60%"
-            *ngIf="recurringDepositProduct.minDepositTerm !== undefined">{{ recurringDepositProduct.minDepositTerm }}
+          <span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
+          <span fxFlex="60%" *ngIf="recurringDepositProduct.minDepositTerm !== undefined"
+            >{{ recurringDepositProduct.minDepositTerm }}
             &nbsp;
-            {{ recurringDepositProduct.minDepositTermType.value }}</span>
+            {{ recurringDepositProduct.minDepositTermType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.maxDepositTerm">
-          <span fxFlex="40%">{{'labels.inputs.Maximum Deposit Term' | translate}}:</span>
-          <span fxFlex="60%"
-            *ngIf="recurringDepositProduct.maxDepositTerm !== undefined">{{ recurringDepositProduct.maxDepositTerm }}
+          <span fxFlex="40%">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
+          <span fxFlex="60%" *ngIf="recurringDepositProduct.maxDepositTerm !== undefined"
+            >{{ recurringDepositProduct.maxDepositTerm }}
             &nbsp;
-            {{ recurringDepositProduct.maxDepositTermType.value }}</span>
+            {{ recurringDepositProduct.maxDepositTermType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.inMultipleOfDepositTerm">
-          <span fxFlex="40%">{{'labels.inputs.Deposit Term In multiple of' | translate}}:</span>
-          <span fxFlex="60%"
-            *ngIf="recurringDepositProduct.inMultipleOfDepositTerm !== undefined">{{ recurringDepositProduct.inMultipleOfDepositTerm }}
+          <span fxFlex="40%">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}:</span>
+          <span fxFlex="60%" *ngIf="recurringDepositProduct.inMultipleOfDepositTerm !== undefined"
+            >{{ recurringDepositProduct.inMultipleOfDepositTerm }}
             -
-            {{ recurringDepositProduct.inMultipleOfDepositTermType.value }}</span>
+            {{ recurringDepositProduct.inMultipleOfDepositTermType.value }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
-          <span fxFlex="40%">{{'labels.inputs.Recurring Deposit Type' | translate}}:</span>
-          <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Mandatory' | translate}} </span>
-          <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Voluntary' | translate}} </span>
+          <span fxFlex="40%">{{ 'labels.inputs.Recurring Deposit Type' | translate }}:</span>
+          <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit">
+            {{ 'labels.text.Mandatory' | translate }}
+          </span>
+          <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit">
+            {{ 'labels.text.Voluntary' | translate }}
+          </span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.preClosurePenalInterest">
-          <span fxFlex="40%">{{'labels.inputs.Apply penal interest (less)' | translate}}:</span>
-          <span fxFlex="60%"><span class="m-r-5">{{recurringDepositProduct.preClosurePenalInterest}}</span>%<span class="m-r-5">On</span>
-            {{recurringDepositProduct.preClosurePenalInterestOnType.value}}
+          <span fxFlex="40%">{{ 'labels.inputs.Apply penal interest (less)' | translate }}:</span>
+          <span fxFlex="60%"
+            ><span class="m-r-5">{{ recurringDepositProduct.preClosurePenalInterest }}</span
+            >%<span class="m-r-5">On</span>
+            {{ recurringDepositProduct.preClosurePenalInterestOnType.value }}
           </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.withHoldTax">
-          <span fxFlex="40%">{{'labels.inputs.Withhold Tax group' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax group' | translate }}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.taxGroup.name }}</span>
         </div>
 
-        <div *ngIf="recurringDepositProduct.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Charts' | translate}}</h3>
+        <div *ngIf="recurringDepositProduct.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <div fxFlexFill  fxLayout="row wrap" fxLayout.lt-md="column">
-
+          <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.name">
-              <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Name' | translate }}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.name }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">{{'labels.inputs.Valid from Date' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.fromDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.endDate">
-              <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.endDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.description">
-              <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.description }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
+              <span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
-            <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.activeChart.chartSlabs" multiTemplateDataRows>
-
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="recurringDepositProduct.activeChart.chartSlabs"
+              multiTemplateDataRows
+            >
               <ng-container matColumnDef="period">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Period' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   <div *ngIf="chartSlab.fromPeriod !== undefined">
                     {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{ chartSlab.periodType.value }}
                   </div>
-                  <div *ngIf="chartSlab.fromPeriod === undefined">
-                    &nbsp;
-                  </div>
+                  <div *ngIf="chartSlab.fromPeriod === undefined">&nbsp;</div>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="amountRange">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Range' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   <div *ngIf="chartSlab.amountRangeFrom !== undefined">
                     {{ chartSlab.amountRangeFrom }} - {{ chartSlab.amountRangeTo }}
                   </div>
 
-                  <div *ngIf="chartSlab.amountRangeFrom === undefined">
-                    &nbsp;
-                  </div>
+                  <div *ngIf="chartSlab.amountRangeFrom === undefined">&nbsp;</div>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="annualInterestRate">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Interest' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   {{ chartSlab.annualInterestRate }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Description' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab">
                   {{ chartSlab.description }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-                  <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+                  <button
+                    mat-button
+                    color="primary"
+                    (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+                  >
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
                       <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                      {{'labels.buttons.View Incentives' | translate}}
+                      {{ 'labels.buttons.View Incentives' | translate }}
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
                       <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                      {{'labels.buttons.Hide Incentives' | translate}}
+                      {{ 'labels.buttons.Hide Incentives' | translate }}
                     </span>
                   </button>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incentives">
-                <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-                  <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex? 'expanded' : 'collapsed'">
+                <td
+                  mat-cell
+                  *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+                  [attr.colspan]="chartSlabsDisplayedColumns.length"
+                >
+                  <div
+                    fxLayout="row wrap"
+                    fxFlexFill
+                    class="incentives"
+                    [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+                  >
                     <mat-card fxLayout="row wrap" fxFlexFill>
-
                       <h4 class="mat-h4" fxFlex="23%">
-                        {{'labels.heading.Incentives' | translate}}
+                        {{ 'labels.heading.Incentives' | translate }}
                       </h4>
 
                       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
-
                         <ng-container matColumnDef="entityType">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.entityType | find:recurringDepositProductTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
+                            {{
+                              incentive.entityType
+                                | find: recurringDepositProductTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeName">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Name' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.attributeName | find:recurringDepositProductTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
+                            {{
+                              incentive.attributeName
+                                | find
+                                  : recurringDepositProductTemplate.chartTemplate.attributeNameOptions
+                                  : 'id'
+                                  : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="conditionType">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition Type' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.conditionType | find:recurringDepositProductTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
+                            {{
+                              incentive.conditionType
+                                | find
+                                  : recurringDepositProductTemplate.chartTemplate.conditionTypeOptions
+                                  : 'id'
+                                  : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeValue">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Value' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                            <span *ngSwitchCase="2">{{ incentive.attributeValue | find:recurringDepositProductTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
+                            <span *ngSwitchCase="2">{{
+                              incentive.attributeValue
+                                | find: recurringDepositProductTemplate.chartTemplate.genderOptions : 'id' : 'name'
+                            }}</span>
                             <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                            <span *ngSwitchCase="4">{{ incentive.attributeValue | find:recurringDepositProductTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
-                            <span *ngSwitchCase="5">{{ incentive.attributeValue | find:recurringDepositProductTemplate.chartTemplate.clientClassificationOptions:'id':'name' }}</span>
+                            <span *ngSwitchCase="4">{{
+                              incentive.attributeValue
+                                | find: recurringDepositProductTemplate.chartTemplate.clientTypeOptions : 'id' : 'name'
+                            }}</span>
+                            <span *ngSwitchCase="5">{{
+                              incentive.attributeValue
+                                | find
+                                  : recurringDepositProductTemplate.chartTemplate.clientClassificationOptions
+                                  : 'id'
+                                  : 'name'
+                            }}</span>
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="incentiveType">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Incentive Type' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.incentiveType | find:recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
+                            {{
+                              incentive.incentiveType
+                                | find
+                                  : recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions
+                                  : 'id'
+                                  : 'value'
+                            }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="amount">
-                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+                          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.amount }}
                           </td>
                         </ng-container>
 
                         <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                        <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-
+                        <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
                       </table>
-
                     </mat-card>
                   </div>
                 </td>
@@ -295,168 +355,183 @@ <h4 class="mat-h4" fxFlex="23%">
 
               <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
               <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-
+              <tr
+                mat-row
+                *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns"
+                class="incentives-row"
+              ></tr>
             </table>
 
             <mat-divider [inset]="true"></mat-divider>
-
           </div>
-
         </div>
 
         <div *ngIf="recurringDepositProduct.charges.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
-
             <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.name }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="type">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </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> {{'labels.inputs.Amount' | translate}} </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> {{'labels.inputs.Collected On' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.chargeTimeType.value }}
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
           </table>
-
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <mifosx-view-savings-accounting-details class="container"
-        [accountingRule]="recurringDepositProduct.accountingRule"
-        [accountingMappings]="recurringDepositProduct.accountingMappings"
+        <mifosx-view-savings-accounting-details
+          class="container"
+          [accountingRule]="recurringDepositProduct.accountingRule"
+          [accountingMappings]="recurringDepositProduct.accountingMappings"
         >
         </mifosx-view-savings-accounting-details>
 
-        <div fxFlexFill *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length || recurringDepositProduct.feeToIncomeAccountMappings?.length || recurringDepositProduct.penaltyToIncomeAccountMappings?.length " fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Advanced Accounting Rules' | translate}}</h3>
+        <div
+          fxFlexFill
+          *ngIf="
+            recurringDepositProduct.paymentChannelToFundSourceMappings?.length ||
+            recurringDepositProduct.feeToIncomeAccountMappings?.length ||
+            recurringDepositProduct.penaltyToIncomeAccountMappings?.length
+          "
+          fxLayout="row wrap"
+          fxLayout.lt-md="column"
+        >
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <div *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout.lt-md="column">
-            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Configure Fund Sources for Payment Channels' | translate}}</h4>
-
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings">
-
+          <div
+            *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+          >
+            <h4 class="mat-h4" fxFlexFill>
+              {{ 'labels.inputs.Configure Fund Sources for Payment Channels' | translate }}
+            </h4>
+
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings"
+            >
               <ng-container matColumnDef="paymentTypeId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
                 <td mat-cell *matCellDef="let paymentFundSource">
                   {{ paymentFundSource.paymentType.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="fundSourceAccountId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
                 <td mat-cell *matCellDef="let paymentFundSource">
                   {{ paymentFundSource.fundSourceAccount.name }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
             </table>
           </div>
 
-
-          <div *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout.lt-md="column">
-
-
-            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fees to Specific Income Accounts' | translate}}</h4>
-
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings">
-
+          <div
+            *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+          >
+            <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
+
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings"
+            >
               <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
                 <td mat-cell *matCellDef="let feesIncome">
                   {{ feesIncome.charge.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                 <td mat-cell *matCellDef="let feesIncome">
                   {{ feesIncome.incomeAccount.name }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
             </table>
-
           </div>
 
-          <div *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout.lt-md="column">
-
-            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Penalties to Specific Income Accounts' | translate}}</h4>
-
-            <table fxFlexFill class="mat-elevation-z1" mat-table
-              [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings">
-
+          <div
+            *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length"
+            fxFlexFill
+            fxLayout="row wrap"
+            fxLayout.lt-md="column"
+          >
+            <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
+
+            <table
+              fxFlexFill
+              class="mat-elevation-z1"
+              mat-table
+              [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings"
+            >
               <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
                 <td mat-cell *matCellDef="let penaltyIncome">
                   {{ penaltyIncome.charge.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
                 <td mat-cell *matCellDef="let penaltyIncome">
                   {{ penaltyIncome.incomeAccount.name }}
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
             </table>
-
           </div>
-
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
index cb76ab8125..673f4aff6c 100644
--- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
+++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
@@ -1,23 +1,29 @@
 <mat-card class="product-card">
-
   <mat-card-content>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.heading.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.heading.General' | translate }}
       </a>
       <ng-container *ngFor="let recurringDepositDatatable of recurringDepositDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',recurringDepositDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive"
-          *mifosxHasPermission="'READ_' + recurringDepositDatatable.registeredTableName">
-          {{recurringDepositDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          [routerLink]="['./datatables', recurringDepositDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + recurringDepositDatatable.registeredTableName"
+        >
+          {{ recurringDepositDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/products/saving-products/create-saving-product/create-saving-product.component.html b/src/app/products/saving-products/create-saving-product/create-saving-product.component.html
index 490bf40b7b..044dae7250 100644
--- a/src/app/products/saving-products/create-saving-product/create-saving-product.component.html
+++ b/src/app/products/saving-products/create-saving-product/create-saving-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,52 +21,47 @@
     </ng-template>
 
     <mat-step [stepControl]="savingProductDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-saving-product-details-step></mifosx-saving-product-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="savingProductCurrencyForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-saving-product-currency-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-currency-step>
-
+      <mifosx-saving-product-currency-step
+        [savingProductsTemplate]="savingProductsTemplate"
+      ></mifosx-saving-product-currency-step>
     </mat-step>
 
     <mat-step [stepControl]="savingProductTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-saving-product-terms-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-terms-step>
-
+      <mifosx-saving-product-terms-step
+        [savingProductsTemplate]="savingProductsTemplate"
+      ></mifosx-saving-product-terms-step>
     </mat-step>
 
     <mat-step [stepControl]="savingProductSettingsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-      <mifosx-saving-product-settings-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-settings-step>
-
+      <mifosx-saving-product-settings-step
+        [savingProductsTemplate]="savingProductsTemplate"
+      ></mifosx-saving-product-settings-step>
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-saving-product-charges-step
         [savingProductsTemplate]="savingProductsTemplate"
         [currencyCode]="savingProductCurrencyForm.get('currencyCode')"
       >
       </mifosx-saving-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="savingProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-saving-product-accounting-step
         [savingProductsTemplate]="savingProductsTemplate"
@@ -77,24 +70,19 @@
         [savingProductFormValid]="savingProductFormValid"
       >
       </mifosx-saving-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="savingProductFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-saving-product-preview-step
         [savingProductsTemplate]="savingProductsTemplate"
         [accountingRuleData]="accountingRuleData"
         [savingProduct]="savingProduct"
-        [taskPermission]='"CREATE_SAVINGSPRODUCT"'
+        [taskPermission]="'CREATE_SAVINGSPRODUCT'"
         (submitEvent)="submit()"
       >
       </mifosx-saving-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html b/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html
index 9287ae6909..70cbd1e465 100644
--- a/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html
+++ b/src/app/products/saving-products/edit-saving-product/edit-saving-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,52 +21,49 @@
     </ng-template>
 
     <mat-step [stepControl]="savingProductDetailsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-      <mifosx-saving-product-details-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-details-step>
-
+      <mifosx-saving-product-details-step
+        [savingProductsTemplate]="savingProductAndTemplate"
+      ></mifosx-saving-product-details-step>
     </mat-step>
 
     <mat-step [stepControl]="savingProductCurrencyForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-saving-product-currency-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-currency-step>
-
+      <mifosx-saving-product-currency-step
+        [savingProductsTemplate]="savingProductAndTemplate"
+      ></mifosx-saving-product-currency-step>
     </mat-step>
 
     <mat-step [stepControl]="savingProductTermsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-saving-product-terms-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-terms-step>
-
+      <mifosx-saving-product-terms-step
+        [savingProductsTemplate]="savingProductAndTemplate"
+      ></mifosx-saving-product-terms-step>
     </mat-step>
 
     <mat-step [stepControl]="savingProductSettingsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-      <mifosx-saving-product-settings-step [savingProductsTemplate]="savingProductAndTemplate"></mifosx-saving-product-settings-step>
-
+      <mifosx-saving-product-settings-step
+        [savingProductsTemplate]="savingProductAndTemplate"
+      ></mifosx-saving-product-settings-step>
     </mat-step>
 
     <mat-step completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-saving-product-charges-step
         [savingProductsTemplate]="savingProductAndTemplate"
         [currencyCode]="savingProductCurrencyForm.get('currencyCode')"
       >
       </mifosx-saving-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="savingProductAccountingForm" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-saving-product-accounting-step
         [savingProductsTemplate]="savingProductAndTemplate"
@@ -77,24 +72,19 @@
         [savingProductFormValid]="savingProductFormValidAndNotPristine"
       >
       </mifosx-saving-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="savingProductFormValidAndNotPristine" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-saving-product-preview-step
         [savingProductsTemplate]="savingProductAndTemplate"
         [accountingRuleData]="accountingRuleData"
         [savingProduct]="savingProduct"
-        [taskPermission]='"UPDATE_SAVINGSPRODUCT"'
+        [taskPermission]="'UPDATE_SAVINGSPRODUCT'"
         (submitEvent)="submit()"
       >
       </mifosx-saving-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
index 81f7c48c84..bcf5a00caa 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
@@ -1,10 +1,13 @@
 <form [formGroup]="savingProductAccountingForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column"
-      formControlName="accountingRule">
-      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
+    <mat-radio-group
+      fxFlex="98%"
+      fxLayout="row"
+      fxLayoutGap="5%"
+      fxLayout.lt-md="column"
+      formControlName="accountingRule"
+    >
+      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i = index" [value]="i + 1">
         {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
@@ -12,172 +15,249 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div *ngIf="isCashOrAccrualAccounting()" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
-
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.savingsReferenceAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Saving reference'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Saving reference'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.overdraftPortfolioControlId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Overdraft portfolio'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Overdraft portfolio'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="savingProductAccountingForm.controls.feesReceivableAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Fees Receivable'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Fees Receivable'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="savingProductAccountingForm.controls.penaltiesReceivableAccountId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Penalties Receivable'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Penalties Receivable'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.savingsControlAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Saving control'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Saving control'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.transfersInSuspenseAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Savings transfers in suspense'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Savings transfers in suspense'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isAccrualAccounting()"
         [inputFormControl]="savingProductAccountingForm.controls.interestPayableAccountId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Interest Payable'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Interest Payable'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isDormancyTrackingActive.value"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        *ngIf="isDormancyTrackingActive.value"
         [inputFormControl]="savingProductAccountingForm.controls.escheatLiabilityId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Escheat liability'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Escheat liability'"
+      >
       </mifosx-gl-account-selector>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.interestOnSavingsAccountId"
-        [glAccountList]="expenseAccountData" [required]="true" [inputLabel]="'Interest on savings'">
+        [glAccountList]="expenseAccountData"
+        [required]="true"
+        [inputLabel]="'Interest on savings'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
-        [inputFormControl]="savingProductAccountingForm.controls.writeOffAccountId" [glAccountList]="expenseAccountData"
-        [required]="true" [inputLabel]="'Write-off'">
+      <mifosx-gl-account-selector
+        fxFlex="48%"
+        [inputFormControl]="savingProductAccountingForm.controls.writeOffAccountId"
+        [glAccountList]="expenseAccountData"
+        [required]="true"
+        [inputLabel]="'Write-off'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from fees'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.incomeFromPenaltyAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from penalties'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from penalties'"
+      >
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.incomeFromInterestId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Overdraft Interest Income'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Overdraft Interest Income'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{'labels.heading.Advanced Accounting Rules'
-        | translate}}</mat-checkbox>
+      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{
+        'labels.heading.Advanced Accounting Rules' | translate
+      }}</mat-checkbox>
+
+      <div
+        *ngIf="savingProductAccountingForm.value.advancedAccountingRules"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayoutGap="2%"
+        fxLayout.lt-md="column"
+      >
+        <div fxFlex="100%">
+          <h4 fxFlex="63%" class="mat-h4">
+            {{ 'labels.heading.Configure Fund Sources for Payment Channels' | translate }}
+          </h4>
 
-      <div *ngIf="savingProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap"
-        fxLayoutGap="2%" fxLayout.lt-md="column">
+          <div fxFlex="33%">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)"
+            >
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{ 'labels.buttons.Add' | translate }}
+            </button>
+          </div>
 
-        <div fxFlex="100%">
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="paymentChannelToFundSourceMappings.value"
+            *ngIf="paymentChannelToFundSourceMappings.value.length !== 0"
+          >
+            <ng-container matColumnDef="paymentTypeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
+              <td mat-cell *matCellDef="let paymentFundSource">
+                {{ paymentFundSource.paymentTypeId | find: paymentTypeData : 'id' : 'name' }}
+              </td>
+            </ng-container>
 
-        <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}
-        </h4>
+            <ng-container matColumnDef="fundSourceAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
+              <td mat-cell *matCellDef="let paymentFundSource">
+                {{ paymentFundSource.fundSourceAccountId | find: combinedAccountData : 'id' : 'name' }}
+              </td>
+            </ng-container>
 
-        <div fxFlex="33%">
-          <button type="button" mat-raised-button color="primary"
-            (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}}
-          </button>
-        </div>
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+              <td mat-cell *matCellDef="let paymentFundSource; let i = index">
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)"
+                >
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value"
-          *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
-
-          <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.fundSourceAccountId | find:combinedAccountData:'id':'name' }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
-            <td mat-cell *matCellDef="let paymentFundSource; let i = index">
-              <button mat-icon-button color="primary"
-                (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
-                <fa-icon icon="edit"></fa-icon>
-              </button>
-              <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
-        </table>
+            <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
+          </table>
         </div>
 
         <div fxFlex="100%" *ngIf="existCharges()">
-
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
+          <h4 fxFlex="63%" class="mat-h4">{{ 'labels.heading.Map Fees to Specific Income Accounts' | translate }}</h4>
 
           <div fxFlex="33%" *ngIf="existCharges()">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('FeesIncome', feeToIncomeAccountMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('FeesIncome', feeToIncomeAccountMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value"
-            *ngIf="feeToIncomeAccountMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="feeToIncomeAccountMappings.value"
+            *ngIf="feeToIncomeAccountMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="chargeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome">
-                {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
+                {{ feesIncome.chargeId | find: chargeData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="incomeAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome">
-                {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+                {{ feesIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let feesIncome; let i = index">
                 <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
                   <fa-icon icon="edit"></fa-icon>
@@ -189,46 +269,56 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Ac
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
           </table>
         </div>
 
         <div fxFlex="100%" *ngIf="existCharges()">
-
-          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}
+          <h4 fxFlex="63%" class="mat-h4">
+            {{ 'labels.heading.Map Penalties to Specific Income Accounts' | translate }}
           </h4>
 
           <div fxFlex="33%">
-            <button type="button" mat-raised-button color="primary"
-              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
+            <button
+              type="button"
+              mat-raised-button
+              color="primary"
+              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)"
+            >
               <fa-icon icon="plus" class="m-r-10"></fa-icon>
-              {{'labels.buttons.Add' | translate}}
+              {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>
 
-          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
-            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
-
+          <table
+            fxFlex="98%"
+            class="mat-elevation-z1"
+            mat-table
+            [dataSource]="penaltyToIncomeAccountMappings.value"
+            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0"
+          >
             <ng-container matColumnDef="chargeId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome">
-                {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
+                {{ penaltyIncome.chargeId | find: penaltyData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="incomeAccountId">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome">
-                {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+                {{ penaltyIncome.incomeAccountId | find: incomeAccountData : 'id' : 'name' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
               <td mat-cell *matCellDef="let penaltyIncome; let i = index">
-                <button mat-icon-button color="primary"
-                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)"
+                >
                   <fa-icon icon="edit"></fa-icon>
                 </button>
                 <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
@@ -238,26 +328,21 @@ <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Inco
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
           </table>
         </div>
-
       </div>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!savingProductFormValid">
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
-</form>
\ No newline at end of file
+</form>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html
index 5445535011..284d323514 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html
@@ -1,9 +1,11 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -12,42 +14,47 @@
   <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>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+        {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </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>
@@ -56,19 +63,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
index a53fc65306..d816bed78e 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
@@ -1,46 +1,60 @@
 <form [formGroup]="savingProductCurrencyForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
-      <mat-select formControlName="currencyCode" matTooltip="{{ 'tooltips.The currency to be used' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <mat-select
+        formControlName="currencyCode"
+        matTooltip="{{ 'tooltips.The currency to be used' | translate }}"
+        required
+      >
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>r{{'labels.commons.equired' | translate}}</strong>
+        {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>r{{ 'labels.commons.equired' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Track and report saving account' | translate}}" formControlName="digitsAfterDecimal" required>
+      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Track and report saving account' | translate }}"
+        formControlName="digitsAfterDecimal"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Decimal Places' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Amount to be rounded off' | translate}}" formControlName="inMultiplesOf">
+      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Amount to be rounded off' | translate }}"
+        formControlName="inMultiplesOf"
+      />
       <mat-error>
-        {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
index 5514251c28..4b17a6fa01 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
@@ -1,39 +1,54 @@
 <form [formGroup]="savingProductDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
-      <input matInput formControlName="name" matTooltip="{{ 'tooltips.A unique identifier for the saving product' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="name"
+        matTooltip="{{ 'tooltips.A unique identifier for the saving product' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
-      <input matInput formControlName="shortName" matTooltip="{{ 'tooltips.A unique identifier for the saving product' | translate}}" maxlength="4" required>
+      <mat-label>{{ 'labels.inputs.Short Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="shortName"
+        matTooltip="{{ 'tooltips.A unique identifier for the saving product' | translate }}"
+        maxlength="4"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Short Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
-      <textarea matInput matTooltip="{{ 'tooltips.Provides additional information' | translate}}" formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+      <textarea
+        matInput
+        matTooltip="{{ 'tooltips.Provides additional information' | translate }}"
+        formControlName="description"
+        cdkTextareaAutosize
+        cdkAutosizeMinRows="2"
+      ></textarea>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
index e8210fe3be..07c17e45cc 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
@@ -1,302 +1,347 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
   <h2 class="mat-h2" fxFlexFill>{{ savingProduct.name }}</h2>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.description">
-    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.currencyCode | find:savingProductsTemplate.currencyOptions:'code':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.currencyCode | find: savingProductsTemplate.currencyOptions : 'code' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.digitsAfterDecimal }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType | find:savingProductsTemplate.interestCompoundingPeriodTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.interestCompoundingPeriodType
+        | find: savingProductsTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.interestPostingPeriodType | find:savingProductsTemplate.interestPostingPeriodTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.interestPostingPeriodType
+        | find: savingProductsTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.interestCalculationType | find:savingProductsTemplate.interestCalculationTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.interestCalculationType
+        | find: savingProductsTemplate.interestCalculationTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.interestCalculationDaysInYearType | find:savingProductsTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.interestCalculationDaysInYearType
+        | find: savingProductsTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
+        | translateKey: 'catalogs'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Settings' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Settings' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="savingProduct.minRequiredOpeningBalance">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.minRequiredOpeningBalance | formatNumber }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.lockinPeriodFrequency + ' ' + (savingProduct.lockinPeriodFrequencyType | find:savingProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.lockinPeriodFrequency +
+        ' ' +
+        (savingProduct.lockinPeriodFrequencyType
+          | find: savingProductsTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value') | translateKey: 'catalogs'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
-    <span fxFlex="40%">{{'labels.inputs.Balance Required for Interest Calculation' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.minBalanceForInterestCalculation | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.minRequiredBalance | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.withHoldTax">
-    <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
-    <span fxFlex="60%">{{ savingProduct.taxGroupId | find:savingProductsTemplate.taxGroupOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Tax Group' | translate }}:</span>
+    <span fxFlex="60%">{{
+      savingProduct.taxGroupId | find: savingProductsTemplate.taxGroupOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.overdraftLimit">
-    <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.overdraftLimit | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Enable Dormancy Tracking' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Enable Dormancy Tracking' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">
-    <span fxFlex="40%">{{'labels.inputs.Number of Days to Inactive sub-status' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.daysToInactive }}</span>
-    <span fxFlex="40%">{{'labels.inputs.Number of Days to Dormant sub-status' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.daysToDormancy }}</span>
-    <span fxFlex="40%">{{'labels.inputs.Number of Days to Escheat' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Number of Days to Escheat' | translate }}:</span>
     <span fxFlex="60%">{{ savingProduct.daysToEscheat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <mifosx-view-savings-accounting-details fxFlex="100%"
-  [accountingRule]="accountingRule"
-  [accountingMappings]="accountingMappings"
+  <mifosx-view-savings-accounting-details
+    fxFlex="100%"
+    [accountingRule]="accountingRule"
+    [accountingMappings]="accountingMappings"
   >
   </mifosx-view-savings-accounting-details>
 
-  <div *ngIf="savingProduct.advancedAccountingRules && (savingProduct.paymentChannelToFundSourceMappings?.length || savingProduct.feeToIncomeAccountMappings?.length || savingProduct.penaltyToIncomeAccountMappings?.length)" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
+  <div
+    *ngIf="
+      savingProduct.advancedAccountingRules &&
+      (savingProduct.paymentChannelToFundSourceMappings?.length ||
+        savingProduct.feeToIncomeAccountMappings?.length ||
+        savingProduct.penaltyToIncomeAccountMappings?.length)
+    "
+    fxFlexFill
+    fxLayout="row wrap"
+    fxLayout.lt-md="column"
+  >
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fund Sources for Payment Channels' | translate}}</h4>
-
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.paymentChannelToFundSourceMappings">
-
+    <div
+      *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
+
+      <table
+        fxFlexFill
+        class="mat-elevation-z1"
+        mat-table
+        [dataSource]="savingProduct.paymentChannelToFundSourceMappings"
+      >
         <ng-container matColumnDef="paymentTypeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
           <td mat-cell *matCellDef="let paymentFundSource">
-            {{ paymentFundSource.paymentTypeId | find:savingProductsTemplate.paymentTypeOptions:'id':'name' }}
+            {{ paymentFundSource.paymentTypeId | find: savingProductsTemplate.paymentTypeOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="fundSourceAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
           <td mat-cell *matCellDef="let paymentFundSource">
-            {{ paymentFundSource.fundSourceAccountId | find:savingProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
+            {{
+              paymentFundSource.fundSourceAccountId
+                | find: savingProductsTemplate.accountingMappingOptions.assetAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fees to Specific Income Accounts' | translate}}</h4>
+    <div
+      *ngIf="savingProduct.feeToIncomeAccountMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
-
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
-            {{ feesIncome.chargeId | find:savingProductsTemplate.chargeOptions:'id':'name' }}
+            {{ feesIncome.chargeId | find: savingProductsTemplate.chargeOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
-            {{ feesIncome.incomeAccountId | find:savingProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+            {{
+              feesIncome.incomeAccountId
+                | find: savingProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <div *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Penalties to Specific Income Accounts' | translate}}</h4>
+    <div
+      *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h4 class="mat-h4" fxFlexFill>{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
-
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
-            {{ penaltyIncome.chargeId  | find:savingProductsTemplate.penaltyOptions:'id':'name' }}
+            {{ penaltyIncome.chargeId | find: savingProductsTemplate.penaltyOptions : 'id' : 'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
           <td mat-cell *matCellDef="let penaltyIncome">
-            {{ penaltyIncome.incomeAccountId | find:savingProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+            {{
+              penaltyIncome.incomeAccountId
+                | find: savingProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+            }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
       </table>
-
     </div>
-
   </div>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()" *mifosxHasPermission="taskPermission">
-    {{'labels.buttons.Submit' | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
index a52af6664e..bf45ad208c 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
@@ -1,135 +1,229 @@
 <form [formGroup]="savingProductSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Minimum Opening Balance' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Sets the minimum deposit amount' | translate}}" formControlName="minRequiredOpeningBalance">
+      <mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Sets the minimum deposit amount' | translate }}"
+        formControlName="minRequiredOpeningBalance"
+      />
     </mat-form-field>
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Lock-in Period' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Used to indicate the length of time' | translate}}" formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Lock-in Period' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Used to indicate the length of time' | translate }}"
+        formControlName="lockinPeriodFrequency"
+      />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
+          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="{{ 'tooltips.Indicates whether the withdrawal fee' | translate}}" formControlName="withdrawalFeeForTransfers" class="margin-v">
-      {{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Indicates whether the withdrawal fee' | translate }}"
+      formControlName="withdrawalFeeForTransfers"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Balance Required for Interest Calculation' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Sets the balance required for interest calculation' | translate}}" formControlName="minBalanceForInterestCalculation">
+      <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Sets the balance required for interest calculation' | translate }}"
+        formControlName="minBalanceForInterestCalculation"
+      />
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="{{ 'tooltips.Indicates whether to enforce a minimum balance' | translate}}" formControlName="enforceMinRequiredBalance" class="margin-v">
-      {{'labels.inputs.Enforce Minimum Balance' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Indicates whether to enforce a minimum balance' | translate }}"
+      formControlName="enforceMinRequiredBalance"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Enforce Minimum Balance' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Minimum Balance' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Sets the minimum balance allowed for a saving account' | translate}}" formControlName="minRequiredBalance">
+      <mat-label>{{ 'labels.inputs.Minimum Balance' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Sets the minimum balance allowed for a saving account' | translate }}"
+        formControlName="minRequiredBalance"
+      />
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="{{ 'tooltips.An boolean flag to attach' | translate}}" formControlName="withHoldTax" class="margin-v">
-      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}
+    <mat-checkbox
+      fxFlex="48%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.An boolean flag to attach' | translate }}"
+      formControlName="withHoldTax"
+      class="margin-v"
+    >
+      {{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="savingProductSettingsForm.value.withHoldTax">
-      <mat-label>{{'labels.inputs.Tax Group' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
       <mat-select formControlName="taxGroupId" required>
         <mat-option *ngFor="let taxGroup of taxGroupData" [value]="taxGroup.id">
           {{ taxGroup.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Tax Group' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Tax Group' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Overdraft' | translate}}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Overdraft' | translate }}</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="{{ 'tooltips.Indicates whether saving accounts based on this saving product' | translate}}" formControlName="allowOverdraft" class="margin-b">
-      {{'labels.inputs.Is Overdraft Allowed' | translate}}
+    <mat-checkbox
+      fxFlex="73%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Indicates whether saving accounts based on this saving product' | translate }}"
+      formControlName="allowOverdraft"
+      class="margin-b"
+    >
+      {{ 'labels.inputs.Is Overdraft Allowed' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="savingProductSettingsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+    <div
+      *ngIf="savingProductSettingsForm.value.allowOverdraft"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Sets the overdraft required for interest calculation' | translate}}" formControlName="minOverdraftForInterestCalculation">
+        <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Sets the overdraft required for interest calculation' | translate }}"
+          formControlName="minOverdraftForInterestCalculation"
+        />
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Default interest rate on overdraft' | translate}}" formControlName="nominalAnnualInterestRateOverdraft">
+        <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Default interest rate on overdraft' | translate }}"
+          formControlName="nominalAnnualInterestRateOverdraft"
+        />
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Sets the maximum allowed overdraft amount' | translate}}" formControlName="overdraftLimit">
+        <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Sets the maximum allowed overdraft amount' | translate }}"
+          formControlName="overdraftLimit"
+        />
       </mat-form-field>
-
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Dormancy Tracking' | translate}}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Dormancy Tracking' | translate }}</h3>
 
-    <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="{{ 'tooltips.Enables definition and tracking inactive Savings Accounts' | translate}}" formControlName="isDormancyTrackingActive" class="margin-b">
-      {{'labels.inputs.Enable Dormancy Tracking' | translate}}
+    <mat-checkbox
+      fxFlex="73%"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Enables definition and tracking inactive Savings Accounts' | translate }}"
+      formControlName="isDormancyTrackingActive"
+      class="margin-b"
+    >
+      {{ 'labels.inputs.Enable Dormancy Tracking' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="savingProductSettingsForm.value.isDormancyTrackingActive" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+    <div
+      *ngIf="savingProductSettingsForm.value.isDormancyTrackingActive"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Number of Days to Inactive sub-status' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Inactive period to mark an account as Inactive' | translate}}" formControlName="daysToInactive" required>
+        <mat-label>{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Inactive period to mark an account as Inactive' | translate }}"
+          formControlName="daysToInactive"
+          required
+        />
         <mat-error>
-          {{'labels.inputs.Number of Days to Inactive sub-status' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Number of Days to Dormant sub-status' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Inactive period to mark an account as Dormant' | translate}}" formControlName="daysToDormancy" required>
+        <mat-label>{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Inactive period to mark an account as Dormant' | translate }}"
+          formControlName="daysToDormancy"
+          required
+        />
         <mat-error>
-          {{'labels.inputs.Number of Days to Dormant sub-status' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Number of Days to Escheat' | translate}}</mat-label>
-        <input type="number" matInput matTooltip="{{ 'tooltips.Inactive period to mark an account as Escheat' | translate}}" formControlName="daysToEscheat" required>
+        <mat-label>{{ 'labels.inputs.Number of Days to Escheat' | translate }}</mat-label>
+        <input
+          type="number"
+          matInput
+          matTooltip="{{ 'tooltips.Inactive period to mark an account as Escheat' | translate }}"
+          formControlName="daysToEscheat"
+          required
+        />
         <mat-error>
-          {{'labels.inputs.Number of Days to Escheat' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Number of Days to Escheat' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
index f3c1c9f18a..0105f7162d 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
@@ -1,76 +1,111 @@
 <form [formGroup]="savingProductTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Nominal Annual Interest' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.The default interest rate set' | translate}}" formControlName="nominalAnnualInterestRate" required>
+      <mat-label>{{ 'labels.inputs.Nominal Annual Interest' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.The default interest rate set' | translate }}"
+        formControlName="nominalAnnualInterestRate"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Nominal Annual Interest' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Nominal Annual Interest' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
-      <mat-select formControlName="interestCompoundingPeriodType" matTooltip="{{ 'tooltips.The period at which interest rate' | translate}}" required>
-        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
-          {{ interestCompoundingPeriodType.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCompoundingPeriodType"
+        matTooltip="{{ 'tooltips.The period at which interest rate' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id"
+        >
+          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Compounding Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Posting Period' | translate}}</mat-label>
-      <mat-select formControlName="interestPostingPeriodType" matTooltip="{{ 'tooltips.Interest rate is posted or credited to a saving account' | translate}}" required>
-        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
-          {{ interestPostingPeriodType.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestPostingPeriodType"
+        matTooltip="{{ 'tooltips.Interest rate is posted or credited to a saving account' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id"
+        >
+          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Posting Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Calculated using' | translate}}</mat-label>
-      <mat-select formControlName="interestCalculationType" matTooltip="{{ 'tooltips.The method used to calculate interest' | translate}}" required>
-        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
-          {{ interestCalculationType.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCalculationType"
+        matTooltip="{{ 'tooltips.The method used to calculate interest' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id"
+        >
+          {{ interestCalculationType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Calculated using' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Days in Year' | translate}}</mat-label>
-      <mat-select formControlName="interestCalculationDaysInYearType" matTooltip="{{ 'tooltips.To calculate interest' | translate}}" required>
-        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
-          {{ interestCalculationDaysInYearType.value | translateKey:'catalogs' }}
+      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
+      <mat-select
+        formControlName="interestCalculationDaysInYearType"
+        matTooltip="{{ 'tooltips.To calculate interest' | translate }}"
+        required
+      >
+        <mat-option
+          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id"
+        >
+          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Days in Year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/saving-products/saving-products.component.html b/src/app/products/saving-products/saving-products.component.html
index 6d569edcbd..1d906058b7 100644
--- a/src/app/products/saving-products/saving-products.component.html
+++ b/src/app/products/saving-products/saving-products.component.html
@@ -1,70 +1,103 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonSavingProduct class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SAVINGSPRODUCT'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.text.Create Savings Product' | translate}}
-  </button>
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SAVINGSPRODUCT'">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.text.Create Savings Product' | translate }}
+    </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #savingProductTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let savingProduct"> {{ savingProduct.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let savingProduct">{{ savingProduct.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
-        <td mat-cell *matCellDef="let savingProduct"> {{ savingProduct.shortName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Short Name' | translate }}</th>
+        <td mat-cell *matCellDef="let savingProduct">{{ savingProduct.shortName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonSavingProduct let-popover="popover">
-  <h2>{{'labels.text.Create Savings Product' | translate}}</h2>
-  <p class="mw300">{{'labels.text.This option allows you to create new savings product.' | translate}}</p>
+  <h2>{{ 'labels.text.Create Savings Product' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This option allows you to create new savings product.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter saving products.' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter saving products.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonSavingProduct,buttonSavingProduct , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSavingProductTable,savingProductTable, 'top', true)">{{'labels.buttons.Next' | translate}}t</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonSavingProduct, buttonSavingProduct, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateSavingProductTable, savingProductTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}t
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateSavingProductTable let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.List of saving products in the organization' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629497/Savings+Products" target="_blank">{{'labels.heading.Savings Products' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of saving products in the organization' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629497/Savings+Products" target="_blank">{{
+      'labels.heading.Savings Products' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
index a7881efadd..f3a756db13 100644
--- a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
@@ -1,308 +1,314 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>{{'labels.buttons.Edit' | translate}}
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="tab-container mat-typography">
-
-
   <div fxLayout="row wrap" fxLayout.lt-md="column">
-
     <h2 class="mat-h2" fxFlexFill>{{ savingProduct.name }}</h2>
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.shortName }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.description">
-      <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.description }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Currency' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.currency.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.currency.decimalPlaces }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.currency.inMultiplesOf }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
-      <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate | formatNumber}} %</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
+      <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRate | formatNumber }} %</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-      <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType.value | translateKey:'catalogs' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+      <span fxFlex="60%">{{ savingProduct.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
-      <span fxFlex="60%">{{ savingProduct.interestPostingPeriodType.value | translateKey:'catalogs' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+      <span fxFlex="60%">{{ savingProduct.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
-      <span fxFlex="60%">{{ savingProduct.interestCalculationType.value | translateKey:'catalogs' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+      <span fxFlex="60%">{{ savingProduct.interestCalculationType.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
-      <span fxFlex="60%">{{ savingProduct.interestCalculationDaysInYearType.value | translateKey:'catalogs' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+      <span fxFlex="60%">{{ savingProduct.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</span>
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
     <div fxFlexFill *ngIf="savingProduct.minRequiredOpeningBalance">
-      <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.minRequiredOpeningBalance | formatNumber }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.lockinPeriodFrequency">
-      <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-      <span fxFlex="60%">{{ savingProduct.lockinPeriodFrequency + ' ' + savingProduct.lockinPeriodFrequencyType.value
-        }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+      <span fxFlex="60%">{{
+        savingProduct.lockinPeriodFrequency + ' ' + savingProduct.lockinPeriodFrequencyType.value
+      }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
-      <span fxFlex="40%">{{'labels.inputs.Balance Required for Interest Calculation' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.minBalanceForInterestCalculation | formatNumber }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
-      <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.minRequiredBalance | formatNumber }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.withHoldTax | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.withHoldTax">
-      <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Tax Group' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.taxGroup.name }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.allowOverdraft | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
-      <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.minOverdraftForInterestCalculation }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
-      <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.nominalAnnualInterestRateOverdraft }} %</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.overdraftLimit">
-      <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.overdraftLimit | formatNumber }}</span>
     </div>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Enable Dormancy Tracking' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Enable Dormancy Tracking' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">
-      <span fxFlex="40%">{{'labels.inputs.Number of Days to Inactive sub-status' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.daysToInactive }}</span>
-      <span fxFlex="40%">{{'labels.inputs.Number of Days to Dormant sub-status' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.daysToDormancy }}</span>
-      <span fxFlex="40%">{{'labels.inputs.Number of Days to Escheat' | translate}}:</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Number of Days to Escheat' | translate }}:</span>
       <span fxFlex="60%">{{ savingProduct.daysToEscheat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+      <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
       <mat-divider [inset]="true"></mat-divider>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
-
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
           <td mat-cell *matCellDef="let charge">
-            {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+            {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
           <td mat-cell *matCellDef="let charge">
-            {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+            {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
           </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
       </table>
-
     </div>
 
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <mifosx-view-savings-accounting-details fxFlex="100%"
-    [accountingRule]="savingProduct.accountingRule"
-    [accountingMappings]="savingProduct.accountingMappings"
+    <mifosx-view-savings-accounting-details
+      fxFlex="100%"
+      [accountingRule]="savingProduct.accountingRule"
+      [accountingMappings]="savingProduct.accountingMappings"
     >
     </mifosx-view-savings-accounting-details>
 
     <div
-      *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length || savingProduct.feeToIncomeAccountMappings?.length || savingProduct.penaltyToIncomeAccountMappings?.length"
-      fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-
-      <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Advanced Accounting Rules' | translate}}</h3>
+      *ngIf="
+        savingProduct.paymentChannelToFundSourceMappings?.length ||
+        savingProduct.feeToIncomeAccountMappings?.length ||
+        savingProduct.penaltyToIncomeAccountMappings?.length
+      "
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayout.lt-md="column"
+    >
+      <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
 
       <mat-divider [inset]="true"></mat-divider>
 
-      <div *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
-        fxLayout.lt-md="column">
-
-        <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fund Sources for Payment Channels' | translate}}</h4>
-
-        <table fxFlexFill class="mat-elevation-z1" mat-table
-          [dataSource]="savingProduct.paymentChannelToFundSourceMappings">
-
+      <div
+        *ngIf="savingProduct.paymentChannelToFundSourceMappings?.length"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayout.lt-md="column"
+      >
+        <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Fund Sources for Payment Channels' | translate }}</h4>
+
+        <table
+          fxFlexFill
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="savingProduct.paymentChannelToFundSourceMappings"
+        >
           <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
             <td mat-cell *matCellDef="let paymentFundSource">
               {{ paymentFundSource.paymentType.name }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
             <td mat-cell *matCellDef="let paymentFundSource">
               ({{ paymentFundSource.fundSourceAccount.glCode }}) {{ paymentFundSource.fundSourceAccount.name }}
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
         </table>
-
       </div>
 
-      <div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-        fxLayout.lt-md="column">
-
-        <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fees to Specific Income Accounts' | translate}}</h4>
+      <div
+        *ngIf="savingProduct.feeToIncomeAccountMappings?.length"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayout.lt-md="column"
+      >
+        <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
 
         <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
-
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
             <td mat-cell *matCellDef="let feesIncome">
               {{ feesIncome.charge.name }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
             <td mat-cell *matCellDef="let feesIncome">
               ({{ feesIncome.incomeAccount.glCode }}) {{ feesIncome.incomeAccount.name }}
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
         </table>
-
       </div>
 
-      <div *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
-        fxLayout.lt-md="column">
-
-        <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Penalties to Specific Income Accounts' | translate}}</h4>
-
-        <table fxFlexFill class="mat-elevation-z1" mat-table
-          [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
-
+      <div
+        *ngIf="savingProduct.penaltyToIncomeAccountMappings?.length"
+        fxFlexFill
+        fxLayout="row wrap"
+        fxLayout.lt-md="column"
+      >
+        <h4 class="mat-h4" fxFlexFill>{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
+
+        <table
+          fxFlexFill
+          class="mat-elevation-z1"
+          mat-table
+          [dataSource]="savingProduct.penaltyToIncomeAccountMappings"
+        >
           <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
             <td mat-cell *matCellDef="let penaltyIncome">
               {{ penaltyIncome.charge.name }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
             <td mat-cell *matCellDef="let penaltyIncome">
               ({{ penaltyIncome.incomeAccount.glCode }}) {{ penaltyIncome.incomeAccount.name }}
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
         </table>
-
       </div>
-
     </div>
-
   </div>
-
 </div>
diff --git a/src/app/products/saving-products/view-saving-product/view-saving-product.component.html b/src/app/products/saving-products/view-saving-product/view-saving-product.component.html
index 78ef135d5c..8693f808ce 100644
--- a/src/app/products/saving-products/view-saving-product/view-saving-product.component.html
+++ b/src/app/products/saving-products/view-saving-product/view-saving-product.component.html
@@ -1,23 +1,29 @@
 <mat-card class="product-card">
-
   <mat-card-content>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.heading.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.heading.General' | translate }}
       </a>
       <ng-container *ngFor="let savingProductDatatable of savingProductDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',savingProductDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive"
-          *mifosxHasPermission="'READ_' + savingProductDatatable.registeredTableName">
-          {{savingProductDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          [routerLink]="['./datatables', savingProductDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + savingProductDatatable.registeredTableName"
+        >
+          {{ savingProductDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/products/share-products/create-dividend/create-dividend.component.html b/src/app/products/share-products/create-dividend/create-dividend.component.html
index 2b02b32338..5a6bb35106 100644
--- a/src/app/products/share-products/create-dividend/create-dividend.component.html
+++ b/src/app/products/share-products/create-dividend/create-dividend.component.html
@@ -1,52 +1,63 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="createDividendForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="startDatePicker.open()">
-            <mat-label>{{'labels.inputs.Dividend Period Start Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="dividendPeriodStartDate">
+            <mat-label>{{ 'labels.inputs.Dividend Period Start Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="startDatePicker"
+              required
+              formControlName="dividendPeriodStartDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
             <mat-error *ngIf="createDividendForm.controls.dividendPeriodStartDate.hasError('required')">
-              {{'labels.inputs.Starting Date' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Starting Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field (click)="endDatePicker.open()">
-            <mat-label>{{'labels.inputs.Dividend Period End Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" required formControlName="dividendPeriodEndDate">
+            <mat-label>{{ 'labels.inputs.Dividend Period End Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="endDatePicker"
+              required
+              formControlName="dividendPeriodEndDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #endDatePicker></mat-datepicker>
             <mat-error *ngIf="createDividendForm.controls.dividendPeriodEndDate.hasError('required')">
-              {{'labels.inputs.End Date' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.End Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Dividend Amount' | translate}}</mat-label>
-            <input matInput required formControlName="dividendAmount">
+            <mat-label>{{ 'labels.inputs.Dividend Amount' | translate }}</mat-label>
+            <input matInput required formControlName="dividendAmount" />
             <mat-error *ngIf="createDividendForm.controls.dividendAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!createDividendForm.valid">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!createDividendForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/share-products/create-share-product/create-share-product.component.html b/src/app/products/share-products/create-share-product/create-share-product.component.html
index a96d0afe76..9a8fc8f526 100644
--- a/src/app/products/share-products/create-share-product/create-share-product.component.html
+++ b/src/app/products/share-products/create-share-product/create-share-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,60 +21,51 @@
     </ng-template>
 
     <mat-step [stepControl]="shareProductDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-share-product-details-step></mifosx-share-product-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="shareProductCurrencyForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-share-product-currency-step [shareProductsTemplate]="shareProductsTemplate"></mifosx-share-product-currency-step>
-
+      <mifosx-share-product-currency-step
+        [shareProductsTemplate]="shareProductsTemplate"
+      ></mifosx-share-product-currency-step>
     </mat-step>
 
     <mat-step [stepControl]="shareProductTermsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-share-product-terms-step></mifosx-share-product-terms-step>
-
     </mat-step>
 
     <mat-step [stepControl]="shareProductSettingsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-      <mifosx-share-product-settings-step [shareProductsTemplate]="shareProductsTemplate"></mifosx-share-product-settings-step>
-
+      <mifosx-share-product-settings-step
+        [shareProductsTemplate]="shareProductsTemplate"
+      ></mifosx-share-product-settings-step>
     </mat-step>
 
     <mat-step [stepControl]="shareProductMarketPriceForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.MARKET PRICE' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.MARKET PRICE' | translate }}</ng-template>
 
       <mifosx-share-product-market-price-step></mifosx-share-product-market-price-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-share-product-charges-step
         [shareProductsTemplate]="shareProductsTemplate"
         [currencyCode]="shareProductCurrencyForm.get('currencyCode')"
       >
       </mifosx-share-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="shareProductAccountingForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-share-product-accounting-step
         [shareProductsTemplate]="shareProductsTemplate"
@@ -84,24 +73,19 @@
         [shareProductFormValid]="shareProductFormValid"
       >
       </mifosx-share-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="shareProductFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-share-product-preview-step
         [shareProductsTemplate]="shareProductsTemplate"
         [accountingRuleData]="accountingRuleData"
         [shareProduct]="shareProduct"
-        [taskPermission]='"CREATE_SHAREPRODUCT"'
+        [taskPermission]="'CREATE_SHAREPRODUCT'"
         (submitEvent)="submit()"
       >
       </mifosx-share-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/share-products/dividends-share-product/dividends.component.html b/src/app/products/share-products/dividends-share-product/dividends.component.html
index 9aad130d85..ae3d9ebffb 100644
--- a/src/app/products/share-products/dividends-share-product/dividends.component.html
+++ b/src/app/products/share-products/dividends-share-product/dividends.component.html
@@ -1,55 +1,58 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREDIVIDEND'">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Initiate Dividend
-    </button>
+  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREDIVIDEND'">
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
+    Initiate Dividend
+  </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let dividend">{{ dividend.productData.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dividendPeriodStartDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Dividend Period Start Date' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Dividend Period Start Date' | translate }}
+        </th>
         <td mat-cell *matCellDef="let dividend">{{ dividend.dividendPeriodStartDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dividendPeriodEndDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Dividend Period End Date' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Dividend Period End Date' | translate }}
+        </th>
         <td mat-cell *matCellDef="let dividend">{{ dividend.dividendPeriodEndDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Amount' | translate }} </th>
-        <td mat-cell *matCellDef="let dividend"> {{ dividend.amount }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let dividend">{{ dividend.status.value }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="showDividend(row.id, row.status.value)" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        (click)="showDividend(row.id, row.status.value)"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/products/share-products/edit-share-product/edit-share-product.component.html b/src/app/products/share-products/edit-share-product/edit-share-product.component.html
index ccf9444f1a..8e633f4f2d 100644
--- a/src/app/products/share-products/edit-share-product/edit-share-product.component.html
+++ b/src/app/products/share-products/edit-share-product/edit-share-product.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,60 +21,57 @@
     </ng-template>
 
     <mat-step [stepControl]="shareProductDetailsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-      <mifosx-share-product-details-step [shareProductsTemplate]="shareProductAndTemplate"></mifosx-share-product-details-step>
-
+      <mifosx-share-product-details-step
+        [shareProductsTemplate]="shareProductAndTemplate"
+      ></mifosx-share-product-details-step>
     </mat-step>
 
     <mat-step [stepControl]="shareProductCurrencyForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.CURRENCY' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
-
-      <mifosx-share-product-currency-step [shareProductsTemplate]="shareProductAndTemplate"></mifosx-share-product-currency-step>
-
+      <mifosx-share-product-currency-step
+        [shareProductsTemplate]="shareProductAndTemplate"
+      ></mifosx-share-product-currency-step>
     </mat-step>
 
     <mat-step [stepControl]="shareProductTermsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-share-product-terms-step [shareProductsTemplate]="shareProductAndTemplate"></mifosx-share-product-terms-step>
-
+      <mifosx-share-product-terms-step
+        [shareProductsTemplate]="shareProductAndTemplate"
+      ></mifosx-share-product-terms-step>
     </mat-step>
 
     <mat-step [stepControl]="shareProductSettingsForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
-
-      <mifosx-share-product-settings-step [shareProductsTemplate]="shareProductAndTemplate"></mifosx-share-product-settings-step>
-
+      <mifosx-share-product-settings-step
+        [shareProductsTemplate]="shareProductAndTemplate"
+      ></mifosx-share-product-settings-step>
     </mat-step>
 
     <mat-step [stepControl]="shareProductMarketPriceForm" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.MARKET PRICE' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.MARKET PRICE' | translate}}</ng-template>
-
-      <mifosx-share-product-market-price-step [shareProductsTemplate]="shareProductAndTemplate"></mifosx-share-product-market-price-step>
-
+      <mifosx-share-product-market-price-step
+        [shareProductsTemplate]="shareProductAndTemplate"
+      ></mifosx-share-product-market-price-step>
     </mat-step>
 
     <mat-step completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-share-product-charges-step
         [shareProductsTemplate]="shareProductAndTemplate"
         [currencyCode]="shareProductCurrencyForm.get('currencyCode')"
       >
       </mifosx-share-product-charges-step>
-
     </mat-step>
 
     <mat-step [stepControl]="shareProductAccountingForm" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.ACCOUNTING' | translate }}</ng-template>
 
       <mifosx-share-product-accounting-step
         [shareProductsTemplate]="shareProductAndTemplate"
@@ -84,24 +79,19 @@
         [shareProductFormValid]="shareProductFormValidAndNotPristine"
       >
       </mifosx-share-product-accounting-step>
-
     </mat-step>
 
     <mat-step state="preview" *ngIf="shareProductFormValidAndNotPristine" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-share-product-preview-step
         [shareProductsTemplate]="shareProductAndTemplate"
         [accountingRuleData]="accountingRuleData"
         [shareProduct]="shareProduct"
-        [taskPermission]='"UPDATE_SHAREPRODUCT"'
+        [taskPermission]="'UPDATE_SHAREPRODUCT'"
         (submitEvent)="submit()"
       >
       </mifosx-share-product-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html
index e9c4622685..e7951868d6 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html
@@ -1,64 +1,86 @@
 <form [formGroup]="shareProductAccountingForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" formControlName="accountingRule">
-      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
+    <mat-radio-group
+      fxFlex="98%"
+      fxLayout="row"
+      fxLayoutGap="5%"
+      fxLayout.lt-md="column"
+      formControlName="accountingRule"
+    >
+      <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i = index" [value]="i + 1">
         {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <div *ngIf="shareProductAccountingForm.value.accountingRule === 2" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
-
-      <mifosx-gl-account-selector fxFlex="48%"
+    <div
+      *ngIf="shareProductAccountingForm.value.accountingRule === 2"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
+
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="shareProductAccountingForm.controls.shareReferenceId"
-        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Share reference'">
+        [glAccountList]="assetAccountData"
+        [required]="true"
+        [inputLabel]="'Share reference'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="shareProductAccountingForm.controls.shareSuspenseId"
-        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Share suspense control'">
+        [glAccountList]="liabilityAccountData"
+        [required]="true"
+        [inputLabel]="'Share suspense control'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Share Equity' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Share Equity' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="shareProductAccountingForm.controls.shareEquityId"
-        [glAccountList]="equityAccountData" [required]="true" [inputLabel]="'Equity'">
+        [glAccountList]="equityAccountData"
+        [required]="true"
+        [inputLabel]="'Equity'"
+      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+      <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
-      <mifosx-gl-account-selector fxFlex="48%"
+      <mifosx-gl-account-selector
+        fxFlex="48%"
         [inputFormControl]="shareProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
+        [glAccountList]="incomeAccountData"
+        [required]="true"
+        [inputLabel]="'Income from fees'"
+      >
       </mifosx-gl-account-selector>
-
     </div>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!shareProductFormValid">
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html
index 5445535011..284d323514 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html
@@ -1,9 +1,11 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -12,42 +14,47 @@
   <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>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+        {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </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>
@@ -56,19 +63,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html
index ae647a39b4..3bd400ee5c 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html
@@ -1,46 +1,61 @@
 <form [formGroup]="shareProductCurrencyForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
-      <mat-select matTooltip="{{ 'tooltips.The currency to be used' | translate}}" formControlName="currencyCode" required>
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <mat-select
+        matTooltip="{{ 'tooltips.The currency to be used' | translate }}"
+        formControlName="currencyCode"
+        required
+      >
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matTooltip="{{ 'tooltips.Track and report on share accounts' | translate}}" matInput formControlName="digitsAfterDecimal" required>
+      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <input
+        type="number"
+        matTooltip="{{ 'tooltips.Track and report on share accounts' | translate }}"
+        matInput
+        formControlName="digitsAfterDecimal"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Decimal Places' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Amount to be rounded off' | translate}}" formControlName="inMultiplesOf" required>
+      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Amount to be rounded off' | translate }}"
+        formControlName="inMultiplesOf"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html
index bd8a621eb8..f2b8287f86 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html
@@ -1,39 +1,53 @@
 <form [formGroup]="shareProductDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
-      <input matInput formControlName="name" matTooltip="{{ 'tooltips.A unique identifier for the share product' | translate}}" required>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="name"
+        matTooltip="{{ 'tooltips.A unique identifier for the share product' | translate }}"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
-      <input matInput formControlName="shortName" matTooltip="{{ 'tooltips.A unique identifier for the share product' | translate}}" maxlength="4" required>
+      <mat-label>{{ 'labels.inputs.Short Name' | translate }}</mat-label>
+      <input
+        matInput
+        formControlName="shortName"
+        matTooltip="{{ 'tooltips.A unique identifier for the share product' | translate }}"
+        maxlength="4"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Short Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
-      <textarea matInput formControlName="description" matTooltip="{{ 'tooltips.Provides additional information' | translate}}" required></textarea>
+      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+      <textarea
+        matInput
+        formControlName="description"
+        matTooltip="{{ 'tooltips.Provides additional information' | translate }}"
+        required
+      ></textarea>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html
index 9c182d7234..71a5a0088d 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html
@@ -1,32 +1,39 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-  <h4 fxFlex="23%" class="mat-h4">{{'labels.inputs.Market Price Period' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Add future share value with date range' | translate}}"></i></h4>
+  <h4 fxFlex="23%" class="mat-h4">
+    {{ 'labels.inputs.Market Price Period' | translate }}
+    <i class="fas fa-question" matTooltip="{{ 'tooltips.Add future share value with date range' | translate }}"></i>
+  </h4>
 
   <div fxFlex="73%">
     <button type="button" mat-raised-button color="primary" (click)="addMarketPricePeriod()">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="marketPricePeriods.value" *ngIf="marketPricePeriods.value.length">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="marketPricePeriods.value"
+    *ngIf="marketPricePeriods.value.length"
+  >
     <ng-container matColumnDef="fromDate">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.From Date' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
       <td mat-cell *matCellDef="let marketPricePeriod">
         {{ marketPricePeriod.fromDate | dateFormat }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="shareValue">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Nominal/Unit Price' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Nominal/Unit Price' | translate }}</th>
       <td mat-cell *matCellDef="let marketPricePeriod">
         {{ marketPricePeriod.shareValue }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let variation; let i = index">
         <button mat-icon-button color="primary" (click)="editMarketPricePeriod(i)">
           <fa-icon icon="edit"></fa-icon>
@@ -38,19 +45,17 @@ <h4 fxFlex="23%" class="mat-h4">{{'labels.inputs.Market Price Period' | translat
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html
index 79986aa998..70b934ec29 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html
@@ -1,214 +1,233 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
   <h2 class="mat-h2" fxFlexFill>{{ shareProduct.name }}</h2>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.description">
-    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Currency' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Currency' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
-    <span fxFlex="60%">{{ shareProduct.currencyCode | find:shareProductsTemplate.currencyOptions:'code':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}:</span>
+    <span fxFlex="60%">{{
+      shareProduct.currencyCode | find: shareProductsTemplate.currencyOptions : 'code' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.digitsAfterDecimal }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Total Number of Shares' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.totalShares | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Shares to be Issued' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Shares to be Issued' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.sharesIssued | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Nominal/Unit Price' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal/Unit Price' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.unitPrice | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Capital Value' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Capital Value' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.shareCapital | formatNumber }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Shares per Client' | translate}}:</span>
-    <span fxFlex="60%">{{ shareProduct.nominalShares + ' (Min: ' + (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) + ', Max: ' + (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) + ')' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Shares per Client' | translate }}:</span>
+    <span fxFlex="60%">{{
+      shareProduct.nominalShares +
+        ' (Min: ' +
+        (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
+        ', Max: ' +
+        (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
+        ')'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.minimumActivePeriodForDividends">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Active Period' | translate}}:</span>
-    <span fxFlex="60%">{{ shareProduct.minimumActivePeriodForDividends + ' ' + (shareProduct.minimumactiveperiodFrequencyType | find:shareProductsTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Active Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      shareProduct.minimumActivePeriodForDividends +
+        ' ' +
+        (shareProduct.minimumactiveperiodFrequencyType
+          | find: shareProductsTemplate.minimumActivePeriodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-    <span fxFlex="60%">{{ shareProduct.lockinPeriodFrequency + ' ' + (shareProduct.lockinPeriodFrequencyType | find:shareProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      shareProduct.lockinPeriodFrequency +
+        ' ' +
+        (shareProduct.lockinPeriodFrequencyType
+          | find: shareProductsTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Allow dividends for inactive clients' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}:</span>
     <span fxFlex="60%">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.marketPricePeriods.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Market Price Period' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Market Price Period' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="shareProduct.marketPricePeriods">
-
       <ng-container matColumnDef="fromDate">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.From Date' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
         <td mat-cell *matCellDef="let marketPricePeriod">
           {{ marketPricePeriod.fromDate | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="shareValue">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Nominal/Unit Price' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Nominal/Unit Price' | translate }}</th>
         <td mat-cell *matCellDef="let marketPricePeriod">
           {{ marketPricePeriod.shareValue | formatNumber }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="marketPriceDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns"></tr>
     </table>
-
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.chargesSelected.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="shareProduct.chargesSelected">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Type' | translate}}:</span>
-    <span fxFlex="60%">{{ accountingRuleData[shareProduct.accountingRule-1] }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span fxFlex="60%">{{ accountingRuleData[shareProduct.accountingRule - 1] }}</span>
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.accountingRule === 2" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Share reference' | translate}}:</span>
-      <span fxFlex="60%">{{ shareProduct.shareReferenceId | find:shareProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Share reference' | translate }}:</span>
+      <span fxFlex="60%">{{
+        shareProduct.shareReferenceId
+          | find: shareProductsTemplate.accountingMappingOptions.assetAccountOptions : 'id' : 'name'
+      }}</span>
     </div>
 
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Share suspense control' | translate}}:</span>
-      <span fxFlex="60%">{{ shareProduct.shareSuspenseId | find:shareProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Share suspense control' | translate }}:</span>
+      <span fxFlex="60%">{{
+        shareProduct.shareSuspenseId
+          | find: shareProductsTemplate.accountingMappingOptions.liabilityAccountOptions : 'id' : 'name'
+      }}</span>
     </div>
 
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Share Equity' | translate}}</h4>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Share Equity' | translate }}</h4>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Equity' | translate}}:</span>
-      <span fxFlex="60%">{{ shareProduct.shareEquityId | find:shareProductsTemplate.accountingMappingOptions.equityAccountOptions:'id':'name' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Equity' | translate }}:</span>
+      <span fxFlex="60%">{{
+        shareProduct.shareEquityId
+          | find: shareProductsTemplate.accountingMappingOptions.equityAccountOptions : 'id' : 'name'
+      }}</span>
     </div>
 
-    <h4 fxFlexFill class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{'labels.inputs.Income from fees' | translate}}:</span>
-      <span fxFlex="60%">{{ shareProduct.incomeFromFeeAccountId | find:shareProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="40%">{{ 'labels.inputs.Income from fees' | translate }}:</span>
+      <span fxFlex="60%">{{
+        shareProduct.incomeFromFeeAccountId
+          | find: shareProductsTemplate.accountingMappingOptions.incomeAccountOptions : 'id' : 'name'
+      }}</span>
     </div>
-
   </div>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()" *mifosxHasPermission="taskPermission">
-    {{'labels.buttons.Submit' | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html
index 1878e692e9..60582659e1 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html
@@ -1,74 +1,103 @@
 <form [formGroup]="shareProductSettingsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Shares per Client' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.These fields are used to define the minimum, default, maximum shares per customer' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Shares per Client' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{
+          'tooltips.These fields are used to define the minimum, default, maximum shares per customer' | translate
+        }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minimumShares">
+      <mat-label>{{ 'labels.inputs.Minimum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minimumShares" />
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
-      <input type="number" matInput formControlName="nominalShares" required>
+      <mat-label>{{ 'labels.inputs.Default' | translate }}</mat-label>
+      <input type="number" matInput formControlName="nominalShares" required />
       <mat-error>
-        {{'labels.inputs.Default Shares per Client' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Default Shares per Client' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
-      <input type="number" matInput formControlName="maximumShares">
+      <mat-label>{{ 'labels.inputs.Maximum' | translate }}</mat-label>
+      <input type="number" matInput formControlName="maximumShares" />
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Minimum Active Period' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Minimum active period to consider for dividend calculations' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Minimum Active Period' | translate }}
+      <i
+        class="fas fa-question"
+        matTooltip="{{ 'tooltips.Minimum active period to consider for dividend calculations' | translate }}"
+      ></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minimumActivePeriodForDividends">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minimumActivePeriodForDividends" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="minimumactiveperiodFrequencyType">
-        <mat-option *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData" [value]="minimumActivePeriodFrequencyType.id">
-          {{ minimumActivePeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData"
+          [value]="minimumActivePeriodFrequencyType.id"
+        >
+          {{ minimumActivePeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Used to indicate the length of time' | translate}}"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">
+      {{ 'labels.inputs.Lock-in Period' | translate }}
+      <i class="fas fa-question" matTooltip="{{ 'tooltips.Used to indicate the length of time' | translate }}"></i>
+    </h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
+          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="98%" class="margin-v" labelPosition="before" matTooltip="{{ 'tooltips.Indicates whether the dividends can be processed even share account of this share product is inactive' | translate}}" formControlName="allowDividendCalculationForInactiveClients">
-      {{'labels.inputs.Allow dividends for inactive clients' | translate}}
+    <mat-checkbox
+      fxFlex="98%"
+      class="margin-v"
+      labelPosition="before"
+      matTooltip="{{
+        'tooltips.Indicates whether the dividends can be processed even share account of this share product is inactive'
+          | translate
+      }}"
+      formControlName="allowDividendCalculationForInactiveClients"
+    >
+      {{ 'labels.inputs.Allow dividends for inactive clients' | translate }}
     </mat-checkbox>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html
index e7784db12b..578426c184 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html
@@ -1,50 +1,73 @@
 <form [formGroup]="shareProductTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Total Number of Shares' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Total number of shares that a product is offering' | translate}}" formControlName="totalShares" required>
+      <mat-label>{{ 'labels.inputs.Total Number of Shares' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Total number of shares that a product is offering' | translate }}"
+        formControlName="totalShares"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Total Number of Shares' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Total Number of Shares' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Shares to be Issued' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Total number of shares that an orgranization' | translate}}" formControlName="sharesIssued" required>
+      <mat-label>{{ 'labels.inputs.Shares to be Issued' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Total number of shares that an orgranization' | translate }}"
+        formControlName="sharesIssued"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Shares to be Issued' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Shares to be Issued' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Nominal/Unit Price' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Unit/Nominal Price of each share' | translate}}" formControlName="unitPrice" required>
+      <mat-label>{{ 'labels.inputs.Nominal/Unit Price' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Unit/Nominal Price of each share' | translate }}"
+        formControlName="unitPrice"
+        required
+      />
       <mat-error>
-        {{'labels.inputs.Nominal Price' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Nominal Price' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Capital Value' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="{{ 'tooltips.Total Capital Value' | translate}}" formControlName="shareCapital" readonly>
+      <mat-label>{{ 'labels.inputs.Capital Value' | translate }}</mat-label>
+      <input
+        type="number"
+        matInput
+        matTooltip="{{ 'tooltips.Total Capital Value' | translate }}"
+        formControlName="shareCapital"
+        readonly
+      />
       <mat-hint>
-        {{'labels.inputs.Shares to be Issued * Nominal Price (Auto calculated)' | translate}}
+        {{ 'labels.inputs.Shares to be Issued * Nominal Price (Auto calculated)' | translate }}
       </mat-hint>
     </mat-form-field>
-
   </div>
 
   <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>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/products/share-products/share-products.component.html b/src/app/products/share-products/share-products.component.html
index 01cc12ba93..d4f85be8f9 100644
--- a/src/app/products/share-products/share-products.component.html
+++ b/src/app/products/share-products/share-products.component.html
@@ -1,75 +1,108 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-<div #buttonCreateShareProduct class="in-block">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREPRODUCT'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Create Share Product' | translate }}
-  </button>
-</div>
+  <div #buttonCreateShareProduct class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREPRODUCT'">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Share Product' | translate }}
+    </button>
+  </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #shareProductsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Name' | translate }} </th>
-        <td mat-cell *matCellDef="let shareProduct"> {{ shareProduct.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let shareProduct">{{ shareProduct.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Short Name' | translate }} </th>
-        <td mat-cell *matCellDef="let shareProduct"> {{ shareProduct.shortName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Short Name' | translate }}</th>
+        <td mat-cell *matCellDef="let shareProduct">{{ shareProduct.shortName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Shares' | translate }} </th>
-        <td mat-cell *matCellDef="let shareProduct"> {{ shareProduct.totalShares }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Total Shares' | translate }}</th>
+        <td mat-cell *matCellDef="let shareProduct">{{ shareProduct.totalShares }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateShareProduct let-popover="popover">
   <h2>{{ 'labels.buttons.Create Share Product' | translate }}</h2>
-  <p class="mw300">{{'labels.text.This option allows you to create new share product.' | translate}}</p>
+  <p class="mw300">{{ 'labels.text.This option allows you to create new share product.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{ 'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter share products.' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter share products.' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateShareProduct,buttonCreateShareProduct , 'bottom', true)">{{ 'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateShareProductsTable,shareProductsTable, 'top', true)">{{ 'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateShareProduct, buttonCreateShareProduct, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateShareProductsTable, shareProductsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateShareProductsTable let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.List of share products in the organization' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/129531946/Share+products" target="_blank">{{ 'labels.buttons.Share Products' | translate }}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of share products in the organization' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/129531946/Share+products" target="_blank">{{
+      'labels.buttons.Share Products' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{ 'labels.buttons.Back' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{ 'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/products/share-products/view-dividend/view-dividend.component.html b/src/app/products/share-products/view-dividend/view-dividend.component.html
index 7613c57913..32354c0887 100644
--- a/src/app/products/share-products/view-dividend/view-dividend.component.html
+++ b/src/app/products/share-products/view-dividend/view-dividend.component.html
@@ -1,50 +1,44 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" *ngIf="!isdividendPosted">
-  <button mat-raised-button color="primary" *mifosxHasPermission='"POST_DIVIDENDS"' (click)="postDividends()">
+  <button mat-raised-button color="primary" *mifosxHasPermission="'POST_DIVIDENDS'" (click)="postDividends()">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.buttons' | translate}}
+    {{ 'labels.buttons.buttons' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="clientName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Client Name' | translate }} </th>
-        <td mat-cell *matCellDef="let dividend"> {{ dividend.accountData.clientName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Client Name' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.accountData.clientName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="shareAccount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Share Account' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{ dividend.accountData.accountNo }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Share Account' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.accountData.accountNo }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dividendAmount">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Dividend Amount' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{ dividend.amount }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Dividend Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
-        <td mat-cell *matCellDef="let dividend"> {{ dividend.status.value }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.status.value }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html b/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html
index 61551491dc..160a38c1c8 100644
--- a/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html
+++ b/src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html
@@ -1,228 +1,246 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
-  <button mat-raised-button color="primary" [routerLink]="['../dividends']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
+  <button
+    mat-raised-button
+    color="primary"
+    [routerLink]="['../dividends']"
+    *mifosxHasPermission="'UPDATE_SHAREPRODUCT'"
+  >
     <fa-icon icon="hand-holding-usd" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Dividends' | translate}}
+    {{ 'labels.buttons.Dividends' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
         <h2 class="mat-h2" fxFlexFill>{{ shareProduct.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Short Name' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.shortName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.description">
-          <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.description }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Currency' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Currency' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.currency.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.currency.decimalPlaces }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.currency.inMultiplesOf }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Total Number of Shares' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.totalShares | formatNumber }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Shares to be Issued' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Shares to be Issued' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Nominal/Unit Price' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Nominal/Unit Price' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.unitPrice | formatNumber }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Capital Value' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Capital Value' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.shareCapital | formatNumber }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Shares per Client' | translate}}:</span>
-          <span fxFlex="60%">{{ shareProduct.nominalShares + ' (Min: ' + (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) + ', Max: ' + (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) + ')' }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Shares per Client' | translate }}:</span>
+          <span fxFlex="60%">{{
+            shareProduct.nominalShares +
+              ' (Min: ' +
+              (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
+              ', Max: ' +
+              (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
+              ')'
+          }}</span>
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.minimumActivePeriod">
-          <span fxFlex="40%">{{'labels.inputs.Minimum Active Period' | translate}}:</span>
-          <span fxFlex="60%">{{ shareProduct.minimumActivePeriod }} {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey:'catalogs' }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Minimum Active Period' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ shareProduct.minimumActivePeriod }}
+            {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
+          >
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.lockinPeriod">
-          <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-          <span fxFlex="60%">{{ shareProduct.lockinPeriod }} {{ shareProduct.lockPeriodTypeEnum.value | translateKey:'catalogs'}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+          <span fxFlex="60%"
+            >{{ shareProduct.lockinPeriod }}
+            {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
+          >
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Allow dividends for inactive clients' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}:</span>
           <span fxFlex="60%">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.marketPrice?.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Market Price Period' | translate}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Market Price Period' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="shareProduct.marketPrice">
-
             <ng-container matColumnDef="fromDate">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.From Date' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
               <td mat-cell *matCellDef="let marketPrice">
                 {{ marketPrice.fromDate | dateFormat }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="shareValue">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Nominal/Unit Price' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Nominal/Unit Price' | translate }}</th>
               <td mat-cell *matCellDef="let marketPrice">
                 {{ marketPrice.shareValue | formatNumber }}
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="marketPriceDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns"></tr>
           </table>
-
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="shareProduct.charges">
-
             <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+                {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="amount">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.amount | numberFormat }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="chargeTimeType">
-              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
-                {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+                {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
               </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+            <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
           </table>
-
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Accounting' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Type' | translate}}:</span>
-          <span fxFlex="60%">{{ 'labels.accounting.' + getAccountingRuleName(shareProduct.accountingRule.value) | translate }}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
+          <span fxFlex="60%">{{
+            'labels.accounting.' + getAccountingRuleName(shareProduct.accountingRule.value) | translate
+          }}</span>
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.accountingRule.id === 2" fxLayout="row wrap" fxLayout.lt-md="column">
-
-          <h4 fxFlexFill class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
+          <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
 
           <div fxFlexFill>
-            <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Share reference'"
-                [glAccount]="shareProduct.accountingMappings.shareReferenceId" [withTitle]="'40%'">
+            <mifosx-gl-account-display
+              fxFlex="100%"
+              [accountTitle]="'Share reference'"
+              [glAccount]="shareProduct.accountingMappings.shareReferenceId"
+              [withTitle]="'40%'"
+            >
             </mifosx-gl-account-display>
           </div>
 
-          <h4 fxFlexFill class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
+          <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
 
           <div fxFlexFill>
-            <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Share suspense control'"
-                [glAccount]="shareProduct.accountingMappings.shareSuspenseId" [withTitle]="'40%'">
+            <mifosx-gl-account-display
+              fxFlex="100%"
+              [accountTitle]="'Share suspense control'"
+              [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
+              [withTitle]="'40%'"
+            >
             </mifosx-gl-account-display>
           </div>
 
-          <h4 fxFlexFill class="mat-h4">{{'labels.heading.Share Equity' | translate}}</h4>
+          <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Share Equity' | translate }}</h4>
 
           <div fxFlexFill>
-            <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Equity'"
-                [glAccount]="shareProduct.accountingMappings.shareEquityId" [withTitle]="'40%'">
+            <mifosx-gl-account-display
+              fxFlex="100%"
+              [accountTitle]="'Equity'"
+              [glAccount]="shareProduct.accountingMappings.shareEquityId"
+              [withTitle]="'40%'"
+            >
             </mifosx-gl-account-display>
           </div>
 
-          <h4 fxFlexFill class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
+          <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
 
           <div fxFlexFill>
-            <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from fees'"
-                [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId" [withTitle]="'40%'">
+            <mifosx-gl-account-display
+              fxFlex="100%"
+              [accountTitle]="'Income from fees'"
+              [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
+              [withTitle]="'40%'"
+            >
             </mifosx-gl-account-display>
           </div>
-
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/products/share-products/view-share-product/view-share-product.component.html b/src/app/products/share-products/view-share-product/view-share-product.component.html
index c21025a4a8..748c58a351 100644
--- a/src/app/products/share-products/view-share-product/view-share-product.component.html
+++ b/src/app/products/share-products/view-share-product/view-share-product.component.html
@@ -1,23 +1,29 @@
 <mat-card class="product-card">
-
   <mat-card-content>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.inputs.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
       <ng-container *ngFor="let shareProductDatatable of shareProductDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',shareProductDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive"
-          *mifosxHasPermission="'READ_' + shareProductDatatable.registeredTableName">
-          {{shareProductDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          [routerLink]="['./datatables', shareProductDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + shareProductDatatable.registeredTableName"
+        >
+          {{ shareProductDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 04631692e0..e7356ebba8 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -1,23 +1,19 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['/system', 'roles-and-permissions']">
     <fa-icon icon="check" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Permissions" | translate}}
+    {{ 'labels.buttons.Permissions' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
     <fa-icon icon="cog" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Change Password" | translate}}
+    {{ 'labels.buttons.Change Password' | translate }}
   </button>
 </div>
 
-
 <div class="container" fxLayout="column" fxLayoutGap="2%">
-
   <mat-card>
-
     <div fxLayout="row wrap" class="content">
-
       <div fxFlex="50%" class="header">
-        {{"labels.inputs.Tenant Id" | translate}}
+        {{ 'labels.inputs.Tenant Id' | translate }}
       </div>
 
       <div fxFlex="50%">
@@ -25,7 +21,7 @@
       </div>
 
       <div fxFlex="50%" class="header">
-        {{"labels.inputs.User Id" | translate}}
+        {{ 'labels.inputs.User Id' | translate }}
       </div>
 
       <div fxFlex="50%">
@@ -33,7 +29,7 @@
       </div>
 
       <div fxFlex="50%" class="header">
-        {{"labels.inputs.User Name" | translate}}
+        {{ 'labels.inputs.User Name' | translate }}
       </div>
 
       <div fxFlex="50%">
@@ -41,7 +37,7 @@
       </div>
 
       <div fxFlex="50%" class="header">
-        {{"labels.inputs.Office" | translate}}
+        {{ 'labels.inputs.Office' | translate }}
       </div>
 
       <div fxFlex="50%">
@@ -49,7 +45,7 @@
       </div>
 
       <div fxFlex="50%" class="header">
-        {{"labels.inputs.Status" | translate}}
+        {{ 'labels.inputs.Status' | translate }}
       </div>
 
       <div fxFlex="50%">
@@ -57,36 +53,29 @@
       </div>
 
       <div fxFlex="50%" class="header">
-        {{"labels.inputs.Language" | translate}}
+        {{ 'labels.inputs.Language' | translate }}
       </div>
 
       <div fxFlex="50%">
         {{ language }}
       </div>
-
     </div>
-
   </mat-card>
 
   <mat-card>
-
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="role">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Role" | translate}} </th>
-        <td mat-cell *matCellDef="let role"> {{ role.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Role' | translate }}</th>
+        <td mat-cell *matCellDef="let role">{{ role.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
         <td mat-cell *matCellDef="let role">{{ role.description }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </mat-card>
-
 </div>
diff --git a/src/app/reports/reports.component.html b/src/app/reports/reports.component.html
index 4379f3761a..99302f6623 100644
--- a/src/app/reports/reports.component.html
+++ b/src/app/reports/reports.component.html
@@ -1,38 +1,38 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="reportName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
-        <td mat-cell *matCellDef="let report"> {{ report.reportName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ report.reportName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="reportType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let report"> {{'labels.text.' + report.reportType | translate}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ 'labels.text.' + report.reportType | translate }}</td>
       </ng-container>
 
       <ng-container matColumnDef="reportCategory">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category" | translate}} </th>
-        <td mat-cell *matCellDef="let report"> {{'labels.text.' + report.reportCategory | translate}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Category' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ 'labels.text.' + report.reportCategory | translate }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="['/reports','run', row.reportName]" [queryParams]="{ type: row.reportType, id: row.id }"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        class="select-row"
+        [routerLink]="['/reports', 'run', row.reportName]"
+        [queryParams]="{ type: row.reportType, id: row.id }"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/reports/run-report/chart/chart.component.html b/src/app/reports/run-report/chart/chart.component.html
index d20ea87c4a..f3eb729674 100644
--- a/src/app/reports/run-report/chart/chart.component.html
+++ b/src/app/reports/run-report/chart/chart.component.html
@@ -1,10 +1,14 @@
 <div class="m-b-20" fxLayoutAlign="end">
-  <mat-button-toggle-group  aria-label="Select Chart Type">
-    <mat-button-toggle value="Bar" (click) = "setBarChart(inputData)">{{"labels.buttons.Bar Chart" | translate}}</mat-button-toggle>
-    <mat-button-toggle value="Pie" (click) = "setPieChart(inputData)">{{"labels.buttons.Pie Chart" | translate}}</mat-button-toggle>
+  <mat-button-toggle-group aria-label="Select Chart Type">
+    <mat-button-toggle value="Bar" (click)="setBarChart(inputData)">{{
+      'labels.buttons.Bar Chart' | translate
+    }}</mat-button-toggle>
+    <mat-button-toggle value="Pie" (click)="setPieChart(inputData)">{{
+      'labels.buttons.Pie Chart' | translate
+    }}</mat-button-toggle>
   </mat-button-toggle-group>
 </div>
 
-<div [ngStyle]="{'display': (hideOutput) ? 'none' : 'block'}">
+<div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
   <canvas id="output"></canvas>
 </div>
diff --git a/src/app/reports/run-report/pentaho/pentaho.component.html b/src/app/reports/run-report/pentaho/pentaho.component.html
index 59244a56c5..f4ae97fb1b 100644
--- a/src/app/reports/run-report/pentaho/pentaho.component.html
+++ b/src/app/reports/run-report/pentaho/pentaho.component.html
@@ -1 +1 @@
-<iframe *ngIf = "!hideOutput" [src]="pentahoUrl" frameborder="0" width=100% height="750px;"></iframe>
+<iframe *ngIf="!hideOutput" [src]="pentahoUrl" frameborder="0" width="100%" height="750px;"></iframe>
diff --git a/src/app/reports/run-report/run-report.component.html b/src/app/reports/run-report/run-report.component.html
index 041b1b24b4..46edacd831 100644
--- a/src/app/reports/run-report/run-report.component.html
+++ b/src/app/reports/run-report/run-report.component.html
@@ -1,52 +1,53 @@
 <div class="container input">
-
   <mat-card *ngIf="!isCollapsed">
-
     <form [formGroup]="reportForm">
-
       <mat-card-content fxLayout="column">
-
         <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
-
           <ng-container *ngIf="reportForm.contains(param.name)">
-
             <mat-form-field fxFlex *ngSwitchCase="'text'">
-              <mat-label>{{param.label}}</mat-label>
-              <input matInput required [formControlName]="param.name">
+              <mat-label>{{ param.label }}</mat-label>
+              <input matInput required [formControlName]="param.name" />
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ param.label }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
-              <mat-label>{{param.label}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
-                [formControlName]="param.name">
+              <mat-label>{{ param.label }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="runReportDatePicker"
+                required
+                [formControlName]="param.name"
+              />
               <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #runReportDatePicker></mat-datepicker>
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ param.label }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex *ngSwitchCase="'select'">
-              <mat-label>{{param.label}}</mat-label>
+              <mat-label>{{ param.label }}</mat-label>
               <mat-select required [formControlName]="param.name">
                 <mat-option *ngFor="let option of param.selectOptions" [value]="option">
-                  {{option.name}}
+                  {{ option.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ param.label }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
-
           </ng-container>
-
         </ng-container>
 
         <mat-form-field fxFlex>
-          <mat-label>{{"labels.inputs.Decimal Places" | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
           <mat-select [formControl]="decimalChoice">
             <mat-option value="0">0</mat-option>
             <mat-option value="1">1</mat-option>
@@ -57,50 +58,59 @@
         </mat-form-field>
 
         <mat-form-field fxFlex *ngIf="isPentahoReport()">
-          <mat-label>{{'labels.inputs.Output Type' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Output Type' | translate }}</mat-label>
           <mat-select required formControlName="outputType">
             <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
-              {{ "labels.inputs." + option.name | translate}}
+              {{ 'labels.inputs.' + option.name | translate }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="reportForm.controls['outputType'].hasError('required')">
-            {{ "labels.text.Report Output Type" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.text.Report Output Type' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <div fxFlex="98%" *ngIf="exportToS3Allowed"  >
+        <div fxFlex="98%" *ngIf="exportToS3Allowed">
           <mat-checkbox labelPosition="after" formControlName="exportOutputToS3">
-            {{ "labels.text.Export output data to S3 repository" | translate }} [{{exportToS3Repository}}]
+            {{ 'labels.text.Export output data to S3 repository' | translate }} [{{ exportToS3Repository }}]
           </mat-checkbox>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/reports']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!reportForm.valid || isProcessing" id="runreport" (click)="run()">
+        <button type="button" mat-raised-button [routerLink]="['/reports']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!reportForm.valid || isProcessing"
+          id="runreport"
+          (click)="run()"
+        >
           <fa-icon icon="file-export" class="m-r-10"></fa-icon>
-          {{"labels.buttons.Run Report" | translate}}
+          {{ 'labels.buttons.Run Report' | translate }}
         </button>
-        <button *ngIf="isTableReport()" mat-raised-button color="primary" [disabled]="!reportForm.valid || isProcessing" (click)="runReportAndExport($event)">
+        <button
+          *ngIf="isTableReport()"
+          mat-raised-button
+          color="primary"
+          [disabled]="!reportForm.valid || isProcessing"
+          (click)="runReportAndExport($event)"
+        >
           <fa-icon icon="download" class="m-r-10"></fa-icon>
-          {{"labels.buttons.Run and Download Report" | translate}}
+          {{ 'labels.buttons.Run and Download Report' | translate }}
         </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <div class="container output" *ngIf="isCollapsed">
-
   <mat-card>
-
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        {{'labels.buttons.Parameters' | translate}}
+        {{ 'labels.buttons.Parameters' | translate }}
       </button>
     </div>
 
@@ -109,7 +119,5 @@
       <mifosx-chart *ngIf="!hideChart" [dataObject]="dataObject"></mifosx-chart>
       <mifosx-pentaho *ngIf="!hidePentaho" [dataObject]="dataObject"></mifosx-pentaho>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/reports/run-report/table-and-sms/table-and-sms.component.html b/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
index bf5a4f2405..f672e4404f 100644
--- a/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
+++ b/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
@@ -1,31 +1,39 @@
 <div class="container">
-
   <div *ngIf="!hideOutput && !toBeExportedToRepo">
-
     <div class="m-b-10" *ngIf="dataObject.report.type === 'Table'" fxLayoutGap="25px" fxLayoutAlign="end">
-      <button mat-raised-button color="primary" (click)="exportFile()" [disabled]="notExistsReportData"
-        matToolTip="{{'labels.text.Export the data to CSV file' | translate}}">
-        {{'labels.buttons.Export CSV' | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="exportFile()"
+        [disabled]="notExistsReportData"
+        matToolTip="{{ 'labels.text.Export the data to CSV file' | translate }}"
+      >
+        {{ 'labels.buttons.Export CSV' | translate }}
       </button>
-      <button mat-raised-button color="primary" (click)="exportToXLS()" [disabled]="notExistsReportData"
-        matToolTip="{{'labels.text.Export the data to XLS file' | translate}}">
-        {{'labels.buttons.Export XLS' | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="exportToXLS()"
+        [disabled]="notExistsReportData"
+        matToolTip="{{ 'labels.text.Export the data to XLS file' | translate }}"
+      >
+        {{ 'labels.buttons.Export XLS' | translate }}
       </button>
     </div>
 
     <div class="table-output" [hidden]="notExistsReportData">
       <table id="report-table" mat-table [dataSource]="dataSource">
-        <div *ngFor="let column of displayedColumns index as i">
+        <div *ngFor="let column of displayedColumns; index as i">
           <ng-container [matColumnDef]="column">
-            <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+            <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
             <td mat-cell *matCellDef="let param">
-              <span *ngIf="isDecimal(i)">{{toDecimal(param.row[i])}}</span>
-              <span *ngIf="!isDecimal(i)">{{param.row[i]}}</span>
+              <span *ngIf="isDecimal(i)">{{ toDecimal(param.row[i]) }}</span>
+              <span *ngIf="!isDecimal(i)">{{ param.row[i] }}</span>
             </td>
           </ng-container>
         </div>
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
       </table>
       <mat-paginator [pageSizeOptions]="[100, 200, 300]" showFirstLastButtons></mat-paginator>
     </div>
@@ -33,7 +41,7 @@
     <div class="alert" [hidden]="!notExistsReportData">
       <div class="message">
         <i class="fa fa-exclamation-circle alert-check"></i>
-        {{'labels.text.No report data was generated' | translate}}
+        {{ 'labels.text.No report data was generated' | translate }}
       </div>
     </div>
   </div>
@@ -41,7 +49,7 @@
   <div class="alert" *ngIf="!hideOutput && toBeExportedToRepo">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{'labels.text.The report request' | translate}}
+      {{ 'labels.text.The report request' | translate }}
     </div>
   </div>
 
@@ -51,7 +59,7 @@
 
   <div class="back-button" *ngIf="!hideOutput">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{ 'labels.buttons.Back' | translate }}
+    </button>
   </div>
-
 </div>
diff --git a/src/app/reports/xbrl-report/xbrl-report.component.html b/src/app/reports/xbrl-report/xbrl-report.component.html
index fec20143eb..b7e38f27bb 100644
--- a/src/app/reports/xbrl-report/xbrl-report.component.html
+++ b/src/app/reports/xbrl-report/xbrl-report.component.html
@@ -1,79 +1,73 @@
 <div class="container form">
-
   <mat-card *ngIf="isCollapsed">
-
     <form [formGroup]="xbrlForm" (ngSubmit)="runreport()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field fxFlex (click)="startDatePicker.open()">
-          <mat-label>{{"labels.inputs.Start Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" formControlName="startDate">
+          <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="startDatePicker"
+            formControlName="startDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #startDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex (click)="endDatePicker.open()">
-          <mat-label>{{"labels.inputs.End Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+          <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
-        <button mat-raised-button color="primary" id="runreport">{{"labels.buttons.Run Report" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" id="runreport">{{ 'labels.buttons.Run Report' | translate }}</button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <div class="container">
-
   <mat-card *ngIf="!isCollapsed">
-
     <button mat-raised-button color="primary" (click)="isCollapsed = !isCollapsed">
-      {{"labels.buttons.Parameters" | translate}}
+      {{ 'labels.buttons.Parameters' | translate }}
     </button>
 
     <div class="m-t-20">
-
       <table mat-table [dataSource]="dataSource" matSort>
-
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
-          <td mat-cell *matCellDef="let entry"> {{ entry.name }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+          <td mat-cell *matCellDef="let entry">{{ entry.name }}</td>
         </ng-container>
 
         <ng-container matColumnDef="dimension">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Dimension" | translate}} </th>
-          <td mat-cell *matCellDef="let entry"> {{ entry.dimension }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Dimension' | translate }}</th>
+          <td mat-cell *matCellDef="let entry">{{ entry.dimension }}</td>
         </ng-container>
 
         <ng-container matColumnDef="value">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Value" | translate}} </th>
-          <td mat-cell *matCellDef="let entry"> <input [formControl]="entry.value"></td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+          <td mat-cell *matCellDef="let entry"><input [formControl]="entry.value" /></td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+        <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
       </table>
 
       <div class="container m-t-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
         <a [href]="submit()" download="file.xml">
-        <button mat-raised-button color="primary">{{"labels.buttons.Submit" | translate}}</button>
+          <button mat-raised-button color="primary">{{ 'labels.buttons.Submit' | translate }}</button>
         </a>
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/reports/xbrl/xbrl.component.html b/src/app/reports/xbrl/xbrl.component.html
index 0fbbd0aedc..de6756851a 100644
--- a/src/app/reports/xbrl/xbrl.component.html
+++ b/src/app/reports/xbrl/xbrl.component.html
@@ -1,61 +1,59 @@
 <mat-card class="container">
-
   <div *ngIf="XBRLSuccess">
-     <h1><strong>{{"labels.heading.Saved Successfully" | translate}}</strong></h1>
+    <h1>
+      <strong>{{ 'labels.heading.Saved Successfully' | translate }}</strong>
+    </h1>
   </div>
 
   <div *ngIf="!XBRLSuccess">
-
-      <mat-tab-group (selectedTabChange)="filterTaxonomiesBy($event.index)">
-         <mat-tab label="Portfolio"></mat-tab>
-         <mat-tab label="BalanceSheet"></mat-tab>
-         <mat-tab label="Incomes"></mat-tab>
-         <mat-tab label="Expenses"></mat-tab>
-      </mat-tab-group>
-
-      <div class="table-container">
-         <table mat-table [dataSource]="dataSource">
-
-            <ng-container matColumnDef="info">
-               <td mat-cell *matCellDef="let mixtaxonomy">
-                  <fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
-               </td>
-            </ng-container>
-
-            <ng-container matColumnDef="name">
-               <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="dimension">
-               <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="mapping">
-               <td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
-            </ng-container>
-
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
-         </table>
-      </div>
-
-      <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-         <button mat-raised-button color="primary" [routerLink]="['./report']">
-            <fa-icon icon="cog" class="m-r-10"></fa-icon>
-            {{"labels.buttons.Generate Report" | translate}}
-         </button>
-         <button mat-raised-button color="accent" (click)="submit()">
-            <fa-icon icon="download" class="m-r-10"></fa-icon>
-            {{"labels.buttons.Save Changes" | translate}}
-         </button>
-      </div>
-
-      <mat-autocomplete autoActiveFirstOption #glAccountAutocomplete="matAutocomplete">
-         <mat-option *ngFor="let glAccount of filteredGlAccounts" [value]="'{' + glAccount.glCode + '}'">
-         {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
-         </mat-option>
-      </mat-autocomplete>
-
+    <mat-tab-group (selectedTabChange)="filterTaxonomiesBy($event.index)">
+      <mat-tab label="Portfolio"></mat-tab>
+      <mat-tab label="BalanceSheet"></mat-tab>
+      <mat-tab label="Incomes"></mat-tab>
+      <mat-tab label="Expenses"></mat-tab>
+    </mat-tab-group>
+
+    <div class="table-container">
+      <table mat-table [dataSource]="dataSource">
+        <ng-container matColumnDef="info">
+          <td mat-cell *matCellDef="let mixtaxonomy">
+            <fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name">
+          <td mat-cell *matCellDef="let mixtaxonomy">{{ mixtaxonomy.name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="dimension">
+          <td mat-cell *matCellDef="let mixtaxonomy">{{ mixtaxonomy.dimension }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="mapping">
+          <td mat-cell *matCellDef="let mixtaxonomy">
+            <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete" />
+          </td>
+        </ng-container>
+
+        <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
+      </table>
+    </div>
+
+    <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
+      <button mat-raised-button color="primary" [routerLink]="['./report']">
+        <fa-icon icon="cog" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Generate Report' | translate }}
+      </button>
+      <button mat-raised-button color="accent" (click)="submit()">
+        <fa-icon icon="download" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Save Changes' | translate }}
+      </button>
+    </div>
+
+    <mat-autocomplete autoActiveFirstOption #glAccountAutocomplete="matAutocomplete">
+      <mat-option *ngFor="let glAccount of filteredGlAccounts" [value]="'{' + glAccount.glCode + '}'">
+        {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
+      </mat-option>
+    </mat-autocomplete>
   </div>
-
 </mat-card>
diff --git a/src/app/savings/create-savings-account/create-savings-account.component.html b/src/app/savings/create-savings-account/create-savings-account.component.html
index 53ad54d36f..38e833e365 100644
--- a/src/app/savings/create-savings-account/create-savings-account.component.html
+++ b/src/app/savings/create-savings-account/create-savings-account.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,30 +21,25 @@
     </ng-template>
 
     <mat-step [stepControl]="savingsAccountDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-savings-account-details-step
-        [savingsAccountTemplate]="savingsAccountTemplate" 
+        [savingsAccountTemplate]="savingsAccountTemplate"
         (savingsAccountProductTemplate)="setTemplate($event)"
       >
       </mifosx-savings-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="savingsAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-savings-account-terms-step 
+      <mifosx-savings-account-terms-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
       ></mifosx-savings-account-terms-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-savings-account-charges-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -54,12 +47,10 @@
         [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
       >
       </mifosx-savings-account-charges-step>
-
     </mat-step>
 
     <mat-step *ngIf="savingsAccountFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-savings-account-preview-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -69,9 +60,6 @@
         (submitEvent)="submit()"
       >
       </mifosx-savings-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/savings/edit-savings-account/edit-savings-account.component.html b/src/app/savings/edit-savings-account/edit-savings-account.component.html
index b77cf2cc44..043ec1e9a5 100644
--- a/src/app/savings/edit-savings-account/edit-savings-account.component.html
+++ b/src/app/savings/edit-savings-account/edit-savings-account.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,31 +21,26 @@
     </ng-template>
 
     <mat-step [stepControl]="savingsAccountDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-savings-account-details-step
-        [savingsAccountTemplate]="savingsAccountAndTemplate" 
+        [savingsAccountTemplate]="savingsAccountAndTemplate"
         (savingsAccountProductTemplate)="setTemplate($event)"
       >
       </mifosx-savings-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="savingsAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-savings-account-terms-step 
+      <mifosx-savings-account-terms-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
         [savingsAccountTemplate]="savingsAccountAndTemplate"
       ></mifosx-savings-account-terms-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-savings-account-charges-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -55,12 +48,10 @@
         [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
       >
       </mifosx-savings-account-charges-step>
-
     </mat-step>
 
     <mat-step *ngIf="savingsAccountFormValidAndNotPristine" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-savings-account-preview-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -70,9 +61,6 @@
         (submitEvent)="submit()"
       >
       </mifosx-savings-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html b/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html
index 40275097ad..27094ada3c 100644
--- a/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html
+++ b/src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html
@@ -1,78 +1,66 @@
 <div class="container">
-
-    <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
-
-      <ng-template matStepperIcon="number">
-        <fa-icon icon="pencil-alt" size="sm"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="edit">
-        <fa-icon icon="pencil-alt" size="sm"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="done">
-        <fa-icon icon="check" size="sm"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="error">
-        <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
-      </ng-template>
-
-      <ng-template matStepperIcon="preview">
-        <fa-icon icon="eye" size="sm"></fa-icon>
-      </ng-template>
-
-      <mat-step [stepControl]="savingsAccountDetailsForm">
-
-        <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
-
-        <mifosx-savings-account-details-step
-          [savingsAccountTemplate]="savingsAccountTemplate"
-          (savingsAccountProductTemplate)="setTemplate($event)"
-        >
-        </mifosx-savings-account-details-step>
-
-      </mat-step>
-
-      <mat-step [stepControl]="savingsAccountTermsForm">
-
-        <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-        <mifosx-savings-account-terms-step
-          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-        ></mifosx-savings-account-terms-step>
-
-      </mat-step>
-
-      <mat-step>
-
-        <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
-
-        <mifosx-savings-account-charges-step
-          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-          [savingsAccountTemplate]="savingsAccountTemplate"
-          [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
-          [activeClientMembers]="activeClientMembers"
-        >
-        </mifosx-savings-account-charges-step>
-
-      </mat-step>
-
-      <mat-step *ngIf="savingsAccountFormValid" completed>
-
-        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-        <mifosx-savings-account-preview-step
-          [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-          [savingsAccountTemplate]="savingsAccountTemplate"
-          [savingsAccountTermsForm]="savingsAccountTermsForm"
-          [savingsAccount]="savingsAccount"
-          (submitEvent)="submit()"
-        >
-        </mifosx-savings-account-preview-step>
-
-      </mat-step>
-
-    </mat-horizontal-stepper>
-
-  </div>
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step [stepControl]="savingsAccountDetailsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
+
+      <mifosx-savings-account-details-step
+        [savingsAccountTemplate]="savingsAccountTemplate"
+        (savingsAccountProductTemplate)="setTemplate($event)"
+      >
+      </mifosx-savings-account-details-step>
+    </mat-step>
+
+    <mat-step [stepControl]="savingsAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
+
+      <mifosx-savings-account-terms-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+      ></mifosx-savings-account-terms-step>
+    </mat-step>
+
+    <mat-step>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
+
+      <mifosx-savings-account-charges-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountTemplate"
+        [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
+        [activeClientMembers]="activeClientMembers"
+      >
+      </mifosx-savings-account-charges-step>
+    </mat-step>
+
+    <mat-step *ngIf="savingsAccountFormValid" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+
+      <mifosx-savings-account-preview-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountTemplate"
+        [savingsAccountTermsForm]="savingsAccountTermsForm"
+        [savingsAccount]="savingsAccount"
+        (submitEvent)="submit()"
+      >
+      </mifosx-savings-account-preview-step>
+    </mat-step>
+  </mat-horizontal-stepper>
+</div>
diff --git a/src/app/savings/gsim-account/gsim-account.component.html b/src/app/savings/gsim-account/gsim-account.component.html
index b36af7dcbd..f7734931bb 100644
--- a/src/app/savings/gsim-account/gsim-account.component.html
+++ b/src/app/savings/gsim-account/gsim-account.component.html
@@ -1,65 +1,99 @@
 <div class="tab-container mat-typography">
+  <div style="margin-top: 5px">
+    <h2>{{ 'labels.heading.GSIM Account Overview' | translate }}</h2>
 
-    <div style="margin-top: 5px;">
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="clientDetails">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ 'labels.inputs.Client' | translate }} {{ 'labels.inputs.Details' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.displayName }}
+        </td>
+      </ng-container>
 
-      <h2>{{ 'labels.heading.GSIM Account Overview' | translate }}</h2>
+      <ng-container matColumnDef="savingsAccount">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Saving Account' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup" [matTooltip]="element.status.value"></i>
+          {{ element.accountNo }}
+        </td>
+      </ng-container>
 
-      <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="products">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.menus.Products' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
+      </ng-container>
 
-        <ng-container matColumnDef="clientDetails">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client' | translate}} {{'labels.inputs.Details' | translate}} </th>
-          <td mat-cell *matCellDef="let element">
-            {{element.displayName}} </td>
-        </ng-container>
+      <ng-container matColumnDef="balance">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td mat-cell *matCellDef="let element"></td>
+      </ng-container>
 
-        <ng-container matColumnDef="savingsAccount">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Saving Account' | translate}} </th>
-          <td mat-cell *matCellDef="let element"><i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i> {{element.accountNo}} </td>
-        </ng-container>
+      <ng-container matColumnDef="Actions">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          <button
+            *ngIf="element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+          >
+            <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
+          </button>
+          <button
+            *ngIf="element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+          >
+            <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
+          </button>
+          <button
+            *ngIf="element.status.submittedAndPendingApproval"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Approve']"
+          >
+            <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
+          </button>
+          <button
+            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
+          >
+            <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
+          </button>
+          <button
+            *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="['../../', element.id, 'actions', 'Activate']"
+          >
+            <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
+          </button>
+        </td>
+      </ng-container>
 
-        <ng-container matColumnDef="products">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.menus.Products' | translate}} </th>
-          <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="balance">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Balance' | translate}} </th>
-          <td mat-cell *matCellDef="let element" >  </td>
-        </ng-container>
-
-        <ng-container matColumnDef="Actions">
-          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
-          <td mat-cell *matCellDef="let element">
-            <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-              (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Deposit']">
-              <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate}}"></i>
-            </button>
-            <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary"
-              (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Withdrawal']">
-              <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate}}"></i>
-            </button>
-            <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button color="primary"
-              (click)="routeEdit($event)" [routerLink]="['../','savings-accounts', element.id, 'actions', 'Approve']">
-              <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate}}"></i>
-            </button>
-            <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-              class="account-action-button" mat-raised-button color="primary"
-              (click)="routeEdit($event)" [routerLink]="['../../../','savings-accounts', element.id, 'actions', 'Undo Approval']">
-              <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate}}"></i>
-            </button>
-            <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
-              class="account-action-button" mat-raised-button color="primary"
-              (click)="routeEdit($event)" [routerLink]="['../../', element.id, 'actions', 'Activate']">
-              <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate}}"></i>
-            </button>
-          </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row  [routerLink]="['../../', row.id, 'transactions']" *matRowDef="let row; columns: displayedColumns;"></tr>
-
-      </table>
-
-      <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr
+        mat-row
+        [routerLink]="['../../', row.id, 'transactions']"
+        *matRowDef="let row; columns: displayedColumns"
+      ></tr>
+    </table>
 
+    <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
   </div>
+</div>
diff --git a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html
index 3979053a12..0e07913bef 100644
--- a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html
@@ -1,30 +1,34 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="activateSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
-          <mat-label>{{'labels.inputs.Activated On Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required formControlName="activatedOnDate">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activatedOnDatePicker"
+            required
+            formControlName="activatedOnDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #activatedOnDatePicker></mat-datepicker>
           <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{'labels.inputs.Activated On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html
index 93d43b0f51..5ee785596a 100644
--- a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html
@@ -1,46 +1,45 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="savingsChargeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let savingsCharge of savingsChargeOptions" [value]="savingsCharge.id">
                 {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="savingsChargeForm.controls.chargeId.hasError('required')">
-              {{'labels.inputs.Charge' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Amount' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="savingsChargeForm.controls.amount.hasError('required')">
-                {{'labels.inputs.Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Charge Calculation' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
               <mat-select formControlName="chargeCalculationType">
-                <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
-                  [value]="chargeCalculation.id">
+                <mat-option
+                  *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
+                  [value]="chargeCalculation.id"
+                >
                   {{ chargeCalculation.value }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Charge time type' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,45 +48,57 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="savingsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>{{'labels.inputs.Due for collection on' | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-                formControlName="dueDate">
+              <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="dueDatePicker"
+                required
+                formControlName="dueDate"
+              />
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="savingsChargeForm.controls.dueDate.hasError('required')">
-                {{'labels.inputs.Due for collection on' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="savingsChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>{{'labels.inputs.Due On' | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
-                formControlName="feeOnMonthDay">
+              <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="feeOnMonthDayPicker"
+                required
+                formControlName="feeOnMonthDay"
+              />
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="savingsChargeForm.controls.feeOnMonthDay.hasError('required')">
-                {{'labels.inputs.Due Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="savingsChargeForm.contains('feeInterval')">
-              <mat-label>{{'labels.inputs.Repeats Every' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
-
           </div>
-
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!savingsChargeForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!savingsChargeForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html b/src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html
index a185897d63..f83b434c6c 100644
--- a/src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html
@@ -1,42 +1,45 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="applyAnnualFeesForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="dueDatePicker.open()">
-            <mat-label>{{'labels.inputs.Annual Fees Transaction Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required formControlName="dueDate">
+            <mat-label>{{ 'labels.inputs.Annual Fees Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="dueDatePicker"
+              required
+              formControlName="dueDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dueDatePicker></mat-datepicker>
             <mat-error *ngIf="applyAnnualFeesForm.controls.dueDate.hasError('required')">
-              {{'labels.inputs.Due Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Amount' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input type="number" formControlName="amount" required matInput />
             <mat-error *ngIf="applyAnnualFeesForm.controls.amount.hasError('required')">
-              {{'labels.inputs.Amount' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!applyAnnualFeesForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!applyAnnualFeesForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html
index b2ed18942b..e06d926bec 100644
--- a/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html
@@ -1,39 +1,41 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="approveSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="approvedOnDatePicker.open()">
-            <mat-label>{{'labels.inputs.Approved On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required formControlName="approvedOnDate">
+            <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="approvedOnDatePicker"
+              required
+              formControlName="approvedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="approveSavingsAccountForm.controls.approvedOnDate.hasError('required')">
-              {{'labels.inputs.Approved On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!approveSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html b/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html
index bfa0402581..2f1e4119f8 100644
--- a/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html
@@ -1,43 +1,44 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="closeSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedOnDatePicker.open()">
-            <mat-label>{{'labels.inputs.Closed On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required formControlName="closedOnDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedOnDatePicker"
+              required
+              formControlName="closedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="closeSavingsAccountForm.controls.closedOnDate.hasError('required')">
-              {{'labels.inputs.Closed On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox class="m-b-25 m-t-15" formControlName="withdrawBalance">
-            {{'labels.inputs.Withdraw Balance' | translate}}
+            {{ 'labels.inputs.Withdraw Balance' | translate }}
           </mat-checkbox>
 
-          <mat-checkbox  formControlName="postInterestValidationOnClosure">
-            {{'labels.inputs.Is Interest Posting required on closure date' | translate}}?
+          <mat-checkbox formControlName="postInterestValidationOnClosure">
+            {{ 'labels.inputs.Is Interest Posting required on closure date' | translate }}?
           </mat-checkbox>
 
           <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" fxLayout="column">
-
             <mat-form-field class="m-t-20" *ngIf="closeSavingsAccountForm.controls['amount']">
-              <mat-label>{{'labels.inputs.Transaction Amount' | translate}}</mat-label>
-              <input type="number" required matInput formControlName="amount"/>
+              <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
+              <input type="number" required matInput formControlName="amount" />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['paymentTypeId']">
-              <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
               <mat-select formControlName="paymentTypeId">
-                <mat-option *ngFor="let paymentType of paymentTypeOptions"
-                  [value]="paymentType.id">
+                <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
                   {{ paymentType.name }}
                 </mat-option>
               </mat-select>
@@ -47,55 +48,53 @@
               <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
                 <mat-slide-toggle>
                   <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                    <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+                    <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
                   </div>
                 </mat-slide-toggle>
               </span>
             </div>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['accountNumber']">
-              <mat-label>{{'labels.inputs.Account Number' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
               <input type="number" formControlName="accountNumber" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['checkNumber']">
-              <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
               <input type="number" formControlName="checkNumber" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['routingCode']">
-              <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
               <input formControlName="routingCode" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['receiptNumber']">
-              <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
               <input formControlName="receiptNumber" matInput />
             </mat-form-field>
 
             <mat-form-field *ngIf="closeSavingsAccountForm.controls['bankNumber']">
-              <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
               <input formControlName="bankNumber" matInput />
             </mat-form-field>
-
           </div>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!closeSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html
index dae6354031..c78580d28a 100644
--- a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html
@@ -1,50 +1,59 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
-    <h2 mat-title *ngIf="transactionType.holdamount">{{'labels.heading.Hold Amount' | translate}}</h2>
-    <h2 mat-title *ngIf="transactionType.blockaccount">{{'labels.heading.Block Savings Account' | translate}}</h2>
+    <h2 mat-title *ngIf="transactionType.holdamount">{{ 'labels.heading.Hold Amount' | translate }}</h2>
+    <h2 mat-title *ngIf="transactionType.blockaccount">{{ 'labels.heading.Block Savings Account' | translate }}</h2>
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Reason' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
           <mat-select required formControlName="reasonForBlock">
             <mat-option *ngFor="let codeValue of reasonOptions" [value]="codeValue.id">
               {{ codeValue.name }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="manageSavingsAccountForm.controls.reasonForBlock.hasError('required')">
-            {{'labels.inputs.Reason' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Reason' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
-          <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="transactionDatePicker"
+            required
+            formControlName="transactionDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="manageSavingsAccountForm.controls.transactionDate.hasError('required')">
-            {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mifosx-input-amount [currency]="currency" [isRequired]="true" *ngIf="transactionType.holdamount"
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
+          *ngIf="transactionType.holdamount"
           [inputFormControl]="manageSavingsAccountForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'">
+          [inputLabel]="'Transaction Amount'"
+        >
         </mifosx-input-amount>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!manageSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!manageSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html b/src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html
index e06b3129ce..cc46bb6cdf 100644
--- a/src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html
@@ -1,30 +1,34 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="postInterestSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex (click)="transactionDatePicker.open()">
-          <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="transactionDatePicker"
+            required
+            formControlName="transactionDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transactionDatePicker></mat-datepicker>
           <mat-error *ngIf="postInterestSavingsAccountForm.controls.transactionDate.hasError('required')">
-            {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!postInterestSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!postInterestSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html b/src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html
index 5c1f6d7630..f629594551 100644
--- a/src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html
@@ -1,39 +1,41 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="rejectSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectedOnDatePicker.open()">
-            <mat-label>{{'labels.inputs.Rejected On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedOnDatePicker" required formControlName="rejectedOnDate">
+            <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectedOnDatePicker"
+              required
+              formControlName="rejectedOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedOnDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectSavingsAccountForm.controls.rejectedOnDate.hasError('required')">
-              {{'labels.inputs.Rejected On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!rejectSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/saving-account-actions.component.html b/src/app/savings/saving-account-actions/saving-account-actions.component.html
index 06cefab0e8..ff99afec42 100644
--- a/src/app/savings/saving-account-actions/saving-account-actions.component.html
+++ b/src/app/savings/saving-account-actions/saving-account-actions.component.html
@@ -2,14 +2,22 @@
 <mifosx-reject-savings-account *ngIf="actions['Reject']"></mifosx-reject-savings-account>
 <mifosx-activate-savings-account *ngIf="actions['Activate']"></mifosx-activate-savings-account>
 <mifosx-undo-approval-savings-account *ngIf="actions['Undo Approval']"></mifosx-undo-approval-savings-account>
-<mifosx-post-interest-as-on-savings-account *ngIf="actions['Post Interest As On']"></mifosx-post-interest-as-on-savings-account>
+<mifosx-post-interest-as-on-savings-account
+  *ngIf="actions['Post Interest As On']"
+></mifosx-post-interest-as-on-savings-account>
 <mifosx-savings-account-assign-staff *ngIf="actions['Assign Staff']"></mifosx-savings-account-assign-staff>
 <mifosx-savings-account-unassign-staff *ngIf="actions['Unassign Staff']"></mifosx-savings-account-unassign-staff>
-<mifosx-withdraw-by-client-savings-account *ngIf="actions['Withdrawn by Client']"></mifosx-withdraw-by-client-savings-account>
+<mifosx-withdraw-by-client-savings-account
+  *ngIf="actions['Withdrawn by Client']"
+></mifosx-withdraw-by-client-savings-account>
 <mifosx-add-charge-savings-account *ngIf="actions['Add Charge']"></mifosx-add-charge-savings-account>
 <mifosx-savings-transactions *ngIf="actions['Withdrawal'] || actions['Deposit']"></mifosx-savings-transactions>
 <mifosx-close-savings-account *ngIf="actions['Close']"></mifosx-close-savings-account>
-<mifosx-apply-annual-fees-savings-account *ngIf="actions['Apply Annual Fees']"></mifosx-apply-annual-fees-savings-account>
-<mifosx-manage-savings-account [currency]="currency"
-    *ngIf="actions['Hold Amount'] || actions['Block Account'] || actions['Block Deposit'] || actions['Block Withdrawal']">
+<mifosx-apply-annual-fees-savings-account
+  *ngIf="actions['Apply Annual Fees']"
+></mifosx-apply-annual-fees-savings-account>
+<mifosx-manage-savings-account
+  [currency]="currency"
+  *ngIf="actions['Hold Amount'] || actions['Block Account'] || actions['Block Deposit'] || actions['Block Withdrawal']"
+>
 </mifosx-manage-savings-account>
diff --git a/src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html b/src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html
index ec99cb09bc..5c466713e6 100644
--- a/src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html
+++ b/src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html
@@ -1,15 +1,10 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="savingsAssignStaffForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.To Savings Officer' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.To Savings Officer' | translate }}</mat-label>
             <mat-select formControlName="toSavingsOfficerId">
               <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
                 {{ officer.displayName }}
@@ -18,26 +13,33 @@
           </mat-form-field>
 
           <mat-form-field (click)="assignmentDatePicker.open()">
-            <mat-label>{{'labels.inputs.Assignment Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignmentDatePicker" required formControlName="assignmentDate">
+            <mat-label>{{ 'labels.inputs.Assignment Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="assignmentDatePicker"
+              required
+              formControlName="assignmentDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignmentDatePicker></mat-datepicker>
             <mat-error *ngIf="savingsAssignStaffForm.controls.assignmentDate.hasError('required')">
-              {{'labels.inputs.Assignment Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Assignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!savingsAssignStaffForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!savingsAssignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html
index 662af92097..23dd6525cb 100644
--- a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html
+++ b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html
@@ -1,32 +1,42 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
-    <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.heading.Withdraw Money From Saving Account' | translate}}</h2>
-    <h2 mat-title *ngIf="transactionType.deposit">{{'labels.heading.Deposit Money To Saving Account' | translate}}</h2>
+    <h2 mat-title *ngIf="transactionType.withdrawal">
+      {{ 'labels.heading.Withdraw Money From Saving Account' | translate }}
+    </h2>
+    <h2 mat-title *ngIf="transactionType.deposit">
+      {{ 'labels.heading.Deposit Money To Saving Account' | translate }}
+    </h2>
 
     <form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate" required>
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="dueDatePicker"
+            formControlName="transactionDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
-            {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
           [inputFormControl]="savingAccountTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'">
+          [inputLabel]="'Transaction Amount'"
+        >
         </mifosx-input-amount>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select required formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -38,51 +48,51 @@ <h2 mat-title *ngIf="transactionType.deposit">{{'labels.heading.Deposit Money To
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{'labels.inputs.Account Number' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Notes' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
           <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html b/src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html
index dd23d51f1a..58f2aa692e 100644
--- a/src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html
+++ b/src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html
@@ -1,30 +1,34 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="savingsUnassignStaffForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex (click)="unassignedDatePicker.open()">
-          <mat-label>{{'labels.inputs.Unassignment Date' | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="unassignedDatePicker" required formControlName="unassignedDate">
+          <mat-label>{{ 'labels.inputs.Unassignment Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="unassignedDatePicker"
+            required
+            formControlName="unassignedDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="unassignedDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #unassignedDatePicker></mat-datepicker>
           <mat-error *ngIf="savingsUnassignStaffForm.controls.unassignedDate.hasError('required')">
-            {{'labels.inputs.Unassignment Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Unassignment Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!savingsUnassignStaffForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!savingsUnassignStaffForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html b/src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html
index 902b94b91c..e33091715c 100644
--- a/src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html
@@ -1,25 +1,21 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="undoApprovalSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <mat-form-field fxFlex>
-          <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!undoApprovalSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!undoApprovalSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html b/src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html
index 4ce7a4419b..ec34b2ca7b 100644
--- a/src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html
+++ b/src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html
@@ -1,39 +1,41 @@
 <div class="container mat-elevation-z8">
-
   <mat-card>
-
     <form [formGroup]="withdrawSavingsAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
-            <mat-label>{{'labels.inputs.Withdrawn On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required formControlName="withdrawnOnDate">
+            <mat-label>{{ 'labels.inputs.Withdrawn On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="withdrawnOnDatePicker"
+              required
+              formControlName="withdrawnOnDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawSavingsAccountForm.controls.withdrawnOnDate.hasError('required')">
-              {{'labels.inputs.Withdrawn On Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Withdrawn On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!withdrawSavingsAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawSavingsAccountForm.valid">
+          {{ 'labels.buttons.Confirm' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html b/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html
index 6748d1b2e7..0f2f78f3e8 100644
--- a/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html
@@ -1,10 +1,11 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate }}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
-        [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -13,29 +14,33 @@
   <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>
-      {{'labels.buttons.Add' | translate }}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource"
-    *ngIf="chargesDataSource.length > 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    *ngIf="chargesDataSource.length > 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate }} </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> {{'labels.inputs.Type' | translate }} </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> {{'labels.inputs.Amount' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount | formatNumber }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -45,48 +50,69 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate }} </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'">
-          {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+          *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+        >
+          {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
+          {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
         </span>
-        <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-            || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+        <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
         </span>
-        <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                  || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
+        <button
+          mat-icon-button
+          color="primary"
+          *ngIf="
+            charge.chargeTimeType.value === 'Weekly Fee' ||
+            charge.chargeTimeType.value === 'Monthly Fee' ||
+            charge.chargeTimeType.value === 'Annual Fee' ||
+            charge.chargeTimeType.value === 'Specified due date'
+          "
+          (click)="editChargeDate(charge)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        <span *ngIf="charge.feeInterval">{{ charge.feeInterval}}</span>
-        <span *ngIf="!charge.feeInterval">{{'labels.inputs.Not Provided' | translate }}</span>
-        <button mat-icon-button color="primary"
+        <span *ngIf="charge.feeInterval">{{ charge.feeInterval }}</span>
+        <span *ngIf="!charge.feeInterval">{{ 'labels.inputs.Not Provided' | translate }}</span>
+        <button
+          mat-icon-button
+          color="primary"
           *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
-          (click)="editChargeFeeInterval(charge)">
+          (click)="editChargeFeeInterval(charge)"
+        >
           <fa-icon icon="pen"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate }} </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>
@@ -95,13 +121,11 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <div fxFlex="98%" *ngIf="activeClientMembers">
     <table fxFlex="98%" mat-table [dataSource]="dataSource">
-
       <!-- Check Column -->
       <ng-container matColumnDef="check">
         <th mat-header-cell *matHeaderCellDef>
@@ -114,32 +138,29 @@
 
       <!-- Position Column -->
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client ID' | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
       </ng-container>
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client Name' | translate }} </th>
-        <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+        <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
       </ng-container>
 
-
       <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
     </table>
   </div>
-
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{"labels.buttons.Next" | translate }}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html
index 146de4862b..4df0d1df32 100644
--- a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html
@@ -1,32 +1,38 @@
 <form [formGroup]="savingsAccountDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
-      <mat-label>{{'labels.inputs.Submitted On' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
-        formControlName="submittedOnDate" required>
+      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedOnDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        {{'labels.inputs.Submitted On' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
-      <mat-label>{{'labels.inputs.Field Officer' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -35,21 +41,19 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
-      <mat-label>{{'labels.inputs.External ID' | translate}}</mat-label>
-      <input matInput formControlName="externalId">
+      <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
+      <input matInput formControlName="externalId" />
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
-</form>
\ No newline at end of file
+</form>
diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
index f168294bbb..d82af05c04 100644
--- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
@@ -1,203 +1,230 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Product' | translate}}</span>
-    <span fxFlex="60%">{{ savingsAccount.productId | find:savingsAccountTemplate.productOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
+    <span fxFlex="60%">{{
+      savingsAccount.productId | find: savingsAccountTemplate.productOptions : 'id' : 'name'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Submitted On' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
     <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.External Id' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
     <span fxFlex="60%" *ngIf="savingsAccount.externalId">
-      <mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
+      <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
     </span>
     <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
-      {{'labels.inputs.Unassigned' | translate}}
+      {{ 'labels.inputs.Unassigned' | translate }}
     </span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Field Officer' | translate}}</span>
-    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId |
-      find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
+    <span fxFlex="60%">{{
+      savingsAccount.fieldOfficerId | find: savingsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
+    }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
     <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
     <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCompoundingPeriodType |
-      find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      getCatalogTranslation(
+        savingsAccount.interestCompoundingPeriodType
+          | find: savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
+      )
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
-    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestPostingPeriodType |
-      find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      getCatalogTranslation(
+        savingsAccount.interestPostingPeriodType
+          | find: savingsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
+      )
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
-    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCalculationType |
-      find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span fxFlex="60%">{{
+      getCatalogTranslation(
+        savingsAccount.interestCalculationType
+          | find: savingsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
+      )
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
-    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCalculationDaysInYearType |
-      find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value') }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span fxFlex="60%">{{
+      getCatalogTranslation(
+        savingsAccount.interestCalculationDaysInYearType
+          | find: savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
+      )
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType |
-      find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value')) }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span fxFlex="60%">{{
+      getCatalogTranslation(
+        savingsAccount.lockinPeriodFrequency +
+          ' ' +
+          (savingsAccount.lockinPeriodFrequencyType
+            | find: savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
+      )
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
-    <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
     <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </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="date">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate}} </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'">
-            {{(charge.dueDate | dateFormat) || 'Unassigned'}}
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
+          >
+            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
+            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
           </span>
           <span
-            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+            *ngIf="
+              !(
+                charge.chargeTimeType.value === 'Monthly Fee' ||
+                charge.chargeTimeType.value === 'Annual Fee' ||
+                charge.chargeTimeType.value === 'Specified due date' ||
+                charge.chargeTimeType.value === 'Weekly Fee'
+              )
+            "
+          >
             N/A
           </span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
 
 <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>
-    {{"labels.buttons.Previous" | translate }}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../..']">
-    {{"labels.buttons.Cancel" | translate }}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{"labels.buttons.Submit" | translate }}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html b/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html
index 1adfd827d6..7eb41f6bf9 100644
--- a/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html
@@ -1,152 +1,172 @@
 <form [formGroup]="savingsAccountTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
-      <input matInput formControlName="currencyCode">
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <input matInput formControlName="currencyCode" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matInput formControlName="decimal">
+      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <input type="number" matInput formControlName="decimal" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Nominal Annual Interest' | translate}}</mat-label>
-      <input type="number" matInput formControlName="nominalAnnualInterestRate" required>
+      <mat-label>{{ 'labels.inputs.Nominal Annual Interest' | translate }}</mat-label>
+      <input type="number" matInput formControlName="nominalAnnualInterestRate" required />
       <mat-error>
-        {{'labels.inputs.Nominal Annual Interest' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Nominal Annual Interest' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
-        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
-          {{ interestCompoundingPeriodType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id"
+        >
+          {{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Compounding Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Posting Period' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
-        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
-          {{ interestPostingPeriodType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id"
+        >
+          {{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Posting Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Interest Calculated using' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
-        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
-          {{ interestCalculationType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id"
+        >
+          {{ interestCalculationType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Interest Calculated using' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Days in Year' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
-        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
-          {{ interestCalculationDaysInYearType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id"
+        >
+          {{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Days in Year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        {{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Minimum Opening Balance' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minRequiredOpeningBalance">
+      <mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minRequiredOpeningBalance" />
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
-      {{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}
+      {{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
+          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Overdraft' | translate}}</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Overdraft' | translate }}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
-      {{'labels.inputs.Is Overdraft Allowed' | translate}}
+      {{ 'labels.inputs.Is Overdraft Allowed' | translate }}
     </mat-checkbox>
 
-    <div *ngIf="savingsAccountTermsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
+    <div
+      *ngIf="savingsAccountTermsForm.value.allowOverdraft"
+      fxFlexFill
+      fxLayout="row wrap"
+      fxLayoutGap="2%"
+      fxLayout.lt-md="column"
+    >
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</mat-label>
-        <input type="number" matInput formControlName="minOverdraftForInterestCalculation">
+        <mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
+        <input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}</mat-label>
-        <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft">
+        <mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
+        <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}</mat-label>
-        <input type="number" matInput formControlName="overdraftLimit">
+        <mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
+        <input type="number" matInput formControlName="overdraftLimit" />
       </mat-form-field>
-
     </div>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
-      {{'labels.inputs.Enforce Minimum Balance' | translate}}
+      {{ 'labels.inputs.Enforce Minimum Balance' | translate }}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Minimum Balance' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minRequiredBalance">
+      <mat-label>{{ 'labels.inputs.Minimum Balance' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minRequiredBalance" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
-      <mat-label>{{'labels.inputs.Balance Required for Interest Calculation' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minBalanceForInterestCalculation">
+      <mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minBalanceForInterestCalculation" />
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{"labels.buttons.Previous" | translate }}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{"labels.buttons.Next" | translate }}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html
index a9d9bed1bb..cf0099dd3e 100644
--- a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html
@@ -1,100 +1,137 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
       <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
     </div>
     <div class="action-button m-b-20" *ngIf="this.chargesData">
       <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{showInactiveCharges ? viewAllChargeButtons('View Active Charges') : viewAllChargeButtons('View Inactive
-        Charges')}}</button>
+        {{
+          showInactiveCharges
+            ? viewAllChargeButtons('View Active Charges')
+            : viewAllChargeButtons(
+                'View Inactive
+        Charges'
+              )
+        }}
+      </button>
     </div>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #chargesTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Charge Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty ? 'Penalty' : 'Fee' | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.penalty ? 'Penalty' : ('Fee' | translateKey: 'catalogs') }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Due At' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Due At' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due As Of' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due As Of' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.dueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repeats On (M/d)' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On (M/d)' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Calculation Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amount | currency:charge.currency.code:'symbol-narrow':'1.2-2'}}
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Paid' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountPaid |
-          currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountPaid | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Waived' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountWaived |
-          currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountWaived | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Outstanding' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding |
-          currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountOutstanding | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
-              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+              *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); editCharge(charge)"
+            >
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
-              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+              *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); deleteCharge(charge.id)"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </span>
           <span *ngIf="savingsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
-              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+              *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); payCharge(charge.id)"
+            >
               <i class="fa fa-dollar"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
-              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+              *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+              (click)="routeEdit($event); waiveCharge(charge.id)"
+            >
               <i class="fa fa-flag"></i>
             </button>
             <ng-container *ngIf="isRecurringCharge(charge)">
-              <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
                 *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
-                (click)="routeEdit($event); inactivateCharge(charge.id)">
+                (click)="routeEdit($event); inactivateCharge(charge.id)"
+              >
                 <i class="fa fa-ban"></i>
               </button>
             </ng-container>
@@ -103,10 +140,7 @@ <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html
index b110f9abc5..1c57b59d27 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Calculate Interest' | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Calculate Interest' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to calculate interest' | translate }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to calculate interest' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html
index ffeb2aab0c..ae49740ee6 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/inactivate-charge-dialog/inactivate-charge-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'tooltips.Inactivate Charge' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'tooltips.Inactivate Charge' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to inactivate charge with id" | translate }}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to inactivate charge with id' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html
index d7ed1cf98b..0f5c9905e6 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/post-interest-dialog/post-interest-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.heading.Post Interest" | translate }}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Post Interest' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to post interest" | translate }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to post interest' | translate }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{"labels.buttons.Cancel" | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{"labels.buttons.Confirm" | translate }}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.html
index c66838917a..221981e44f 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Release Amount' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Release Amount' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to release this amount' | translate}}</p>
+  <p>{{ 'labels.text.Are you sure you want to release this amount' | translate }}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html
index 681f039b3d..7970e3346d 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component.html
@@ -1,8 +1,17 @@
-<h1 mat-dialog-title>{{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }} {{"labels.heading.Withhold Tax" | translate }}</h1>
+<h1 mat-dialog-title>
+  {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }}
+  {{ 'labels.heading.Withhold Tax' | translate }}
+</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to" | translate }} {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }} {{"labels.text.withhold tax for this account" | translate }} ?</p>
+  <p>
+    {{ 'labels.text.Are you sure you want to' | translate }}
+    {{ (data.isEnable ? 'labels.heading.Enable' : 'labels.heading.Disable') | translate }}
+    {{ 'labels.text.withhold tax for this account' | translate }} ?
+  </p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="{{ data.isEnable ? 'accent' : 'warn' }}" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.html
index 6cbd6f170d..b7635779f4 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Undo Transaction' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Undo Transaction' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to undo this transaction' | translate}}</p>
+  <p>{{ 'labels.text.Are you sure you want to undo this transaction' | translate }}</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html b/src/app/savings/savings-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html
index fbf676796a..fa644167d2 100644
--- a/src/app/savings/savings-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html
+++ b/src/app/savings/savings-account-view/custom-dialogs/waive-charge-dialog/waive-charge-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{"labels.buttons.Waive Charge" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.buttons.Waive Charge' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{"labels.text.Are you sure you want to waive charge with id" | translate }}: {{ data.id }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to waive charge with id' | translate }}: {{ data.id }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.html b/src/app/savings/savings-account-view/general-tab/general-tab.component.html
index bf2f0e6fdf..18538ed472 100644
--- a/src/app/savings/savings-account-view/general-tab/general-tab.component.html
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.html
@@ -1,40 +1,49 @@
-
 <div *ngIf="isLoading" class="loader">
   <div class="loading"></div>
 </div>
 
 <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%" *ngIf="!isLoading">
-
   <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
     <div
-      *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
-      <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+      *ngIf="
+        !savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval;
+        else alternateDetails
+      "
+    >
+      <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+              <mifosx-external-identifier externalId="{{ savingsAccountData.externalId }}"></mifosx-external-identifier>
             </td>
-            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+            <td *ngIf="!savingsAccountData.externalId">{{ 'labels.inputs.Not Provided' | translate }}</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Activated On' | translate}}</td>
-            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-              dateFormat) : 'Not Activated'}}</td>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td>
+              {{
+                savingsAccountData.timeline.activatedOnDate
+                  ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
+                  : 'Not Activated'
+              }}
+            </td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Field Officer' | translate}}</td>
-            <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+            <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+            <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Currency' | translate}}</td>
-            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+            <td>{{ 'labels.inputs.Currency' | translate }}</td>
+            <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
+            <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
             <td class="r-amount">
-              <span *ngIf="savingsAccountData.nominalAnnualInterestRate">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</span>
+              <span *ngIf="savingsAccountData.nominalAnnualInterestRate"
+                >{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</span
+              >
               <span *ngIf="!savingsAccountData.nominalAnnualInterestRate">0 %</span>
             </td>
           </tr>
@@ -44,16 +53,18 @@ <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
 
     <ng-template #alternateDetails>
       <div>
-        <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Savings Details' | translate }}</h4>
         <table>
           <tbody>
             <tr>
-              <td>{{'labels.inputs.Field Officer' | translate}}</td>
-              <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+              <td>{{ 'labels.inputs.Field Officer' | translate }}</td>
+              <td>{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}</td>
             </tr>
             <tr>
-              <td>{{'labels.inputs.Balance' | translate}}</td>
-              <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+              <td>{{ 'labels.inputs.Balance' | translate }}</td>
+              <td class="r-amount">
+                {{ savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -61,141 +72,175 @@ <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
     </ng-template>
 
     <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-      <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
       <table>
         <tbody>
           <tr *ngIf="savingsAccountData.summary.totalDeposits">
-            <td>{{'labels.inputs.Total Deposits' | translate}}</td>
-            <td class="r-amount">{{savingsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
+            <td class="r-amount">
+              {{ savingsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
           <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-            <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
-            <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            <td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
+            <td class="r-amount">
+              {{ savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
 
-  <div fxFlex="49%"
-    *ngIf="isActive; else alternateSummary">
-    <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+  <div fxFlex="49%" *ngIf="isActive; else alternateSummary">
+    <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
     <table>
       <tbody>
         <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
-          <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Total Withdrawls' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
-          <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawalFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Withdrawals Fees' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalWithdrawalFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
-          <td>{{'labels.inputs.Annual Fees' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalAnnualFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Annual Fees' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalAnnualFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-          <td>{{'labels.inputs.Interest Earned' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Interest Earned' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
-          <td>{{'labels.inputs.Interest Posted' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Interest Posted' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
-          <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Interest Earned Not Posted' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
-          <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
+          <td>{{ 'labels.inputs.Interest On Overdraft' | translate }}</td>
           <td class="r-amount">
-            {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            {{
+              savingsAccountData.summary.totalOverdraftInterestDerived
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
-          <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Overdraft Interest Not Posted' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
-          <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+          <td>{{ 'labels.inputs.Nominal Interest Rate' | translate }}</td>
+          <td class="r-amount">{{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} %</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
-          <td>{{savingsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
+          <td>{{ savingsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
-          <td>{{savingsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
+          <td>{{ savingsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
-          <td>{{savingsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
+          <td>{{ savingsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr>
-          <td>{{'labels.inputs.Days in Year' | translate}}</td>
-          <td>{{savingsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</td>
+          <td>{{ 'labels.inputs.Days in Year' | translate }}</td>
+          <td>{{ savingsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.withdrawalFee">
-          <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.withdrawalFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Withdrawal Fee' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.withdrawalFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
-          <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
-          <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
+          <td>{{ 'labels.inputs.Last Active Transaction Date' | translate }}</td>
+          <td>{{ savingsAccountData.lastActiveTransactionDate | dateFormat }}</td>
         </tr>
         <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
-          <td>{{'labels.inputs.Substatus' | translate}}</td>
-          <td>{{savingsAccountData.subStatus.value}}</td>
+          <td>{{ 'labels.inputs.Substatus' | translate }}</td>
+          <td>{{ savingsAccountData.subStatus.value }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.daysToInactive">
-          <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
-          <td>{{savingsAccountData.daysToInactive}}</td>
+          <td>{{ 'labels.inputs.Days to Inactive' | translate }}</td>
+          <td>{{ savingsAccountData.daysToInactive }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.daysToDormancy">
-          <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
-          <td>{{savingsAccountData.daysToDormancy}}</td>
+          <td>{{ 'labels.inputs.Days to Dormancy' | translate }}</td>
+          <td>{{ savingsAccountData.daysToDormancy }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.daysToEscheat">
-          <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
-          <td>{{savingsAccountData.daysToEscheat}}</td>
+          <td>{{ 'labels.inputs.Days to Escheat' | translate }}</td>
+          <td>{{ savingsAccountData.daysToEscheat }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.annualFee">
-          <td>{{'labels.inputs.Annual Fee' | translate}}</td>
+          <td>{{ 'labels.inputs.Annual Fee' | translate }}</td>
           <td class="r-amount">
-            {{savingsAccountData.annualFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+            {{ savingsAccountData.annualFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
           </td>
         </tr>
         <tr *ngIf="savingsAccountData.allowOverdraft">
-          <td>{{'labels.inputs.Overdraft Limit' | translate}}</td>
-          <td class="r-amount">{{savingsAccountData.overdraftLimit | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Overdraft Limit' | translate }}</td>
+          <td class="r-amount">
+            {{ savingsAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.allowOverdraft">
-          <td>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</td>
-          <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          <td>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</td>
+          <td>
+            {{
+              savingsAccountData.minOverdraftForInterestCalculation
+                | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
-          <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
-          <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
+          <td>{{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }}</td>
+          <td>{{ savingsAccountData.minBalanceForInterestCalculation | formatNumber }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.minRequiredBalance">
-          <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
-          <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
+          <td>{{ 'labels.inputs.Minimum Required Balance' | translate }}</td>
+          <td>{{ savingsAccountData.minRequiredBalance | formatNumber }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
-          <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
-          <td>{{savingsAccountData.enforceMinRequiredBalance | yesNo}}</td>
+          <td>{{ 'labels.inputs.Enforce Minimum Required Balance' | translate }}</td>
+          <td>{{ savingsAccountData.enforceMinRequiredBalance | yesNo }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
-          <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
-          <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
+          <td>{{ 'labels.inputs.Interest Recalculation Date' | translate }}</td>
+          <td>{{ savingsAccountData.summary.lastInterestCalculationDate | dateFormat }}</td>
         </tr>
         <tr *ngIf="savingsAccountData.onHoldFunds">
-          <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
-          <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currency.code:'symbol-narrow':'1.2-2'}}</a></td>
+          <td>{{ 'labels.inputs.On Hold Funds' | translate }}</td>
+          <td>
+            <a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{
+              savingsAccountData.onHoldFunds | currency: currency.code : 'symbol-narrow' : '1.2-2'
+            }}</a>
+          </td>
         </tr>
         <tr *ngIf="savingsAccountData.withHoldTax">
-          <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
-          <td>{{savingsAccountData.taxGroup.name}}</td>
+          <td>{{ 'labels.inputs.Withhold Tax Group' | translate }}</td>
+          <td>{{ savingsAccountData.taxGroup.name }}</td>
         </tr>
       </tbody>
     </table>
@@ -203,28 +248,32 @@ <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
 
   <ng-template #alternateSummary>
     <div fxFlex="49%">
-      <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+      <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
       <table>
         <tbody>
           <tr>
-            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
             <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+              <mifosx-external-identifier externalId="{{ savingsAccountData.externalId }}"></mifosx-external-identifier>
             </td>
-            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+            <td *ngIf="!savingsAccountData.externalId">{{ 'labels.inputs.Not Provided' | translate }}</td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Activated On' | translate}}</td>
-            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-              dateFormat) : 'Not Activated'}}</td>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td>
+              {{
+                savingsAccountData.timeline.activatedOnDate
+                  ? (savingsAccountData.timeline.activatedOnDate | dateFormat)
+                  : 'Not Activated'
+              }}
+            </td>
           </tr>
           <tr>
-            <td>{{'labels.inputs.Currency' | translate}}</td>
-            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+            <td>{{ 'labels.inputs.Currency' | translate }}</td>
+            <td>{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]</td>
           </tr>
         </tbody>
       </table>
     </div>
   </ng-template>
-
 </div>
diff --git a/src/app/savings/savings-account-view/notes-tab/notes-tab.component.html b/src/app/savings/savings-account-view/notes-tab/notes-tab.component.html
index 04cf7318f2..bbeca4fa04 100644
--- a/src/app/savings/savings-account-view/notes-tab/notes-tab.component.html
+++ b/src/app/savings/savings-account-view/notes-tab/notes-tab.component.html
@@ -1,4 +1,5 @@
-<mifosx-entity-notes-tab [entityId]="entityId"
+<mifosx-entity-notes-tab
+  [entityId]="entityId"
   [entityNotes]="entityNotes"
   [callbackAdd]="addNote"
   [callbackEdit]="editNote"
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html
index f9b336c7b7..d253da394d 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.html
+++ b/src/app/savings/savings-account-view/savings-account-view.component.html
@@ -1,13 +1,14 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" matTooltip="{{ 'tooltips.Savings Account' | translate}}"
-            [src]="'assets/images/savings_account_placeholder.png'">
+          <img
+            mat-card-md-image
+            class="profile-image"
+            matTooltip="{{ 'tooltips.Savings Account' | translate }}"
+            [src]="'assets/images/savings_account_placeholder.png'"
+          />
         </div>
       </div>
 
@@ -15,34 +16,55 @@
         <mat-card-title fxLayout="row" fxLayout.lt-md="column">
           <div fxFlex="60%">
             <h3>
-              <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
-                [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
-              <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
-                [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-                <span class="m-r-5">{{'labels.inputs.Savings Product' | translate}} :</span> 
-                <span class="m-r-5"><mifosx-long-text textValue="{{savingsAccountData.savingsProductName}}"></mifosx-long-text></span>
-                <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}" display="left"></mifosx-account-number>
+              <i
+                class="fa fa-stop"
+                [ngClass]="savingsAccountData.status.code | statusLookup"
+                [matTooltip]="savingsAccountData.status.value"
+                *ngIf="!savingsAccountData.subStatus.block"
+              ></i>
+              <i
+                class="fa fa-stop"
+                [ngClass]="savingsAccountData.subStatus.value | statusLookup"
+                [matTooltip]="savingsAccountData.subStatus.value"
+                *ngIf="savingsAccountData.subStatus.block"
+              ></i>
+              <span class="m-r-5">{{ 'labels.inputs.Savings Product' | translate }} :</span>
+              <span class="m-r-5"
+                ><mifosx-long-text textValue="{{ savingsAccountData.savingsProductName }}"></mifosx-long-text
+              ></span>
+              <mifosx-account-number
+                accountNo="{{ savingsAccountData.accountNo }}"
+                display="left"
+              ></mifosx-account-number>
             </h3>
             <span class="account-overview">
-              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}: {{savingsAccountData.clientName ||
-              savingsAccountData.groupName}}
+              {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
+              {{ savingsAccountData.clientName || savingsAccountData.groupName }}
               <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">
-                <mifosx-account-number accountNo="{{savingsAccountData.clientAccountNo}}"></mifosx-account-number>
+                <mifosx-account-number accountNo="{{ savingsAccountData.clientAccountNo }}"></mifosx-account-number>
               </span>
             </span>
           </div>
 
           <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
             <table class="account-overview">
               <tbody>
                 <tr>
-                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
-                  <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
                 <tr>
-                  <td>{{"labels.inputs.Available Balance" | translate }}</td>
-                  <td class="r-amount">{{savingsAccountData.summary.availableBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  <td>{{ 'labels.inputs.Available Balance' | translate }}</td>
+                  <td class="r-amount">
+                    {{
+                      savingsAccountData.summary.availableBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    }}
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -51,8 +73,12 @@ <h3> {{"labels.heading.Account Overview" | translate}} </h3>
           <span fxFlex="auto"></span>
 
           <div fxFlex="5%">
-            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
-              yPosition="below">
+            <button
+              mat-icon-button
+              [matMenuTriggerFor]="accountMenu"
+              aria-label="Loan account actions"
+              yPosition="below"
+            >
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
               </mat-icon>
@@ -65,68 +91,100 @@ <h3> {{"labels.heading.Account Overview" | translate}} </h3>
         <ng-container *ngFor="let item of buttonConfig.singleButtons">
           <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
             <mat-icon matListIcon>
-              <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+              <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
             </mat-icon>
-            <span> {{'labels.menus.' + item.name | translate}} </span>
+            <span> {{ 'labels.menus.' + item.name | translate }} </span>
           </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options && !savingsAccountData.subStatus.block">
-          <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
-              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
-                (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+                {{ 'labels.menus.' + option.name | translate }}
+              </button>
             </span>
           </mat-menu>
         </ng-container>
       </mat-menu>
-
     </mat-card-title-group>
-
   </mat-card-header>
 
   <mat-card-content class="content">
-
     <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive">
-        {{'labels.inputs.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-        [active]="transactions.isActive">
-        {{'labels.inputs.Transactions' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./transactions']"
+        routerLinkActive
+        #transactions="routerLinkActive"
+        [active]="transactions.isActive"
+      >
+        {{ 'labels.inputs.Transactions' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-        [active]="charges.isActive">
-        {{'labels.inputs.Charges' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./charges']"
+        routerLinkActive
+        #charges="routerLinkActive"
+        [active]="charges.isActive"
+      >
+        {{ 'labels.inputs.Charges' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #savingsDocuments="routerLinkActive"
-        [active]="savingsDocuments.isActive">
-        {{'labels.inputs.Documents' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./documents']"
+        routerLinkActive
+        #savingsDocuments="routerLinkActive"
+        [active]="savingsDocuments.isActive"
+      >
+        {{ 'labels.inputs.Documents' | translate }}
       </a>
-      <a mat-tab-link *mifosxHasPermission="'READ_SAVINGSNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
-        [active]="notes.isActive">
-        {{'labels.inputs.Notes' | translate}}
+      <a
+        mat-tab-link
+        *mifosxHasPermission="'READ_SAVINGSNOTE'"
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+      >
+        {{ 'labels.inputs.Notes' | translate }}
       </a>
       <ng-container *mifosxHasPermission="'READ_SAVINGSACCOUNTCHARGE'">
-        <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
-          #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
-          *ngIf="savingsAccountData.clientId">
-          {{'labels.inputs.Standing Instructions' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./standing-instructions']"
+          routerLinkActive
+          #standingInstructions="routerLinkActive"
+          [active]="standingInstructions.isActive"
+          *ngIf="savingsAccountData.clientId"
+        >
+          {{ 'labels.inputs.Standing Instructions' | translate }}
         </a>
       </ng-container>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
-        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
-          #datatable="routerLinkActive" [active]="datatable.isActive">
-          {{savingsDatatable.registeredTableName}}
+        <a
+          mat-tab-link
+          *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+          [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
+          routerLinkActive
+          #datatable="routerLinkActive"
+          [active]="datatable.isActive"
+        >
+          {{ savingsDatatable.registeredTableName }}
         </a>
       </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.html b/src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.html
index 8c0dd9b622..1be9a0313e 100644
--- a/src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.html
+++ b/src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.html
@@ -1,4 +1,6 @@
-<mifosx-entity-documents-tab [entityType]="entityType" [entityId]="entityId"
+<mifosx-entity-documents-tab
+  [entityType]="entityType"
+  [entityId]="entityId"
   [entityDocuments]="entityDocuments"
   [callbackUpload]="uploadDocument"
   [callbackDownload]="downloadDocument"
diff --git a/src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html b/src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html
index 7067191eb1..4a8144a57c 100644
--- a/src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html
+++ b/src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html
@@ -1,70 +1,89 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{"labels.heading.All Standing Instructions" | translate }}</h3>
+    <h3>{{ 'labels.heading.All Standing Instructions' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table #instructionsTable [dataSource]="dataSource">
-
       <ng-container matColumnDef="client">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client' | translate}} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromClient.displayName}}-{{instruction.fromClient.id}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromClient.displayName }}-{{ instruction.fromClient.id }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="fromAccount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.From Account' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.fromAccount.accountNo}} ({{instruction.fromAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.fromAccount.accountNo }} ({{ instruction.fromAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="beneficiary">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Beneficiary' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toClient.displayName}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Beneficiary' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.toClient.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="toAccount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.To Account' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.toAccount.accountNo}} ({{instruction.toAccountType.value}})</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.To Account' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.toAccount.accountNo }} ({{ instruction.toAccountType.value }})
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.instructionType.value}}/{{instruction.amount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">{{ instruction.instructionType.value }}/{{ instruction.amount }}</td>
       </ng-container>
 
       <ng-container matColumnDef="validity">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Validity' | translate }} </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | dateFormat}} {{ 'labels.inputs.To' | translate }} {{instruction.validTill | dateFormat}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validity' | translate }}</th>
+        <td mat-cell *matCellDef="let instruction">
+          {{ instruction.validFrom | dateFormat }} {{ 'labels.inputs.To' | translate }}
+          {{ instruction.validTill | dateFormat }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let instruction">
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
-              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Standing Instruction' | translate }}"
+              *mifosxHasPermission="'UPDATE_STANDINGINSTRUCTION'"
+            >
               <i class="fa fa-edit"></i>
             </button>
           </span>
-          <span *ngIf="instruction.status.value!=='Deleted'">
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
-              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'" (click)="deleteStandingInstruction(instruction.id)">
+          <span *ngIf="instruction.status.value !== 'Deleted'">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Standing Instruction' | translate }}"
+              *mifosxHasPermission="'DELETE_STANDINGINSTRUCTION'"
+              (click)="deleteStandingInstruction(instruction.id)"
+            >
               <i class="fa fa-times"></i>
             </button>
           </span>
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
-            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
+          <button
+            class="account-action-button"
+            mat-raised-button
+            color="primary"
+            matTooltip="{{ 'tooltips.View Standing Instruction' | translate }}"
+            *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
+          >
             <i class="fa fa-eye"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html b/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
index 15c68db301..babc8e431d 100644
--- a/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
+++ b/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
@@ -1,35 +1,48 @@
 <form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
-
   <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-
     <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
       <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="fromDatePicker"
+        required
+        formControlName="fromDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #fromDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.From Date' | translate }} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
       <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="toDatePicker"
+        required
+        formControlName="toDate"
+      />
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #toDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.To Date' | translate }} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-
   </div>
 
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
-    <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+    <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;</button>
+      <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;
+    </button>
   </div>
-
 </form>
 
 <iframe *ngIf="!hideOutput" [src]="pentahoUrl" frameborder="0" width="100%" height="750px;"></iframe>
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
index 22eaac141f..8e611e9b6a 100644
--- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
@@ -1,113 +1,162 @@
 <div class="tab-container mat-typography">
-
   <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
     <div fxLayout="row" fxLayoutAlign="start">
       <div class="m-b-10">
-        <h3>{{"labels.heading.All Transactions" | translate }}</h3>
+        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
       </div>
       <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
-          {{"labels.inputs.Hide Reversed" | translate}}</mat-checkbox>
+          {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
+        >
         <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
-          {{"labels.inputs.Hide Accruals" | translate}}</mat-checkbox>
-        <button mat-raised-button color="primary" [routerLink]="['export']">{{"labels.buttons.Export" | translate}}</button>
+          {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
+        >
+        <button mat-raised-button color="primary" [routerLink]="['export']">
+          {{ 'labels.buttons.Export' | translate }}
+        </button>
       </div>
     </div>
 
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="row">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
-        <td mat-cell *matCellDef="let transaction; let idx = index;" (click)="showTransactions(transaction)">{{(idx + 1)}}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
+        <td mat-cell *matCellDef="let transaction; let idx = index" (click)="showTransactions(transaction)">
+          {{ idx + 1 }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Id" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" class="td-select" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)"> {{ transaction.id }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Id' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          class="td-select"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.id }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{"labels.inputs.Transaction Date" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Transaction Date' | translate }}
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.date | dateFormat }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.External Id' | translate }}</th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)">
-          <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier externalId="{{ transaction.externalId }}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ transaction.transactionType.value | translateKey:'catalogs' }}
+        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
+        <td
+          mat-cell
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ transaction.transactionType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Debit" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
-          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}}
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Debit' | translate }}</th>
+        <td
+          mat-cell
+          class="r-amount"
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
+          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Credit" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Credit' | translate }}</th>
+        <td
+          mat-cell
+          class="r-amount"
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef> {{"labels.inputs.Balance" | translate}} </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)" (click)="showTransactions(transaction)">
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <td
+          mat-cell
+          class="r-amount"
+          *matCellDef="let transaction"
+          [ngClass]="savingsTransactionColor(transaction)"
+          (click)="showTransactions(transaction)"
+        >
           {{ transaction.runningBalance | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell class="center" *matCellDef="let transaction">
           <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
-            <mat-icon>{{"labels.text.more_vert" | translate }}</mat-icon>
+            <mat-icon>{{ 'labels.text.more_vert' | translate }}</mat-icon>
           </button>
           <mat-menu #transactionMenu="matMenu">
             <button mat-menu-item (click)="showTransactions(transaction)">
               <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.text.View Transaction' | translate}}</span>
+              <span>{{ 'labels.text.View Transaction' | translate }}</span>
             </button>
             <button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
               <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.Undo Transaction' | translate}}</span>
+              <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
             </button>
-            <button mat-menu-item class="account-action-button" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+            <button
+              mat-menu-item
+              class="account-action-button"
+              (click)="routeEdit($event)"
+              [routerLink]="[transaction.id, 'reciept']"
+            >
               <mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Receipts' | translate}}</span>
+              <span>{{ 'tooltips.View Receipts' | translate }}</span>
             </button>
-            <button mat-menu-item (click)="routeEdit($event)" [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <button
+              mat-menu-item
+              (click)="routeEdit($event)"
+              [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
+            >
               <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Journal Entries' | translate}}</span>
+              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
             </button>
           </mat-menu>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
-
   </div>
 
   <div class="alert" [hidden]="accountWithTransactions">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{ "labels.text.No transaction was found" | translate }}
+      {{ 'labels.text.No transaction was found' | translate }}
     </div>
   </div>
 </div>
diff --git a/src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html b/src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html
index ed46f7c0d6..5e27bdf05b 100644
--- a/src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html
+++ b/src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html
@@ -1,29 +1,35 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-
       <mat-card-content fxLayout="column">
-
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate" required>
+          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="dueDatePicker"
+            formControlName="transactionDate"
+            required
+          />
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
 
-        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+        <mifosx-input-amount
+          [currency]="currency"
+          [isRequired]="true"
           [inputFormControl]="editTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'">
+          [inputLabel]="'Transaction Amount'"
+        >
         </mifosx-input-amount>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
           <mat-select formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -35,46 +41,46 @@
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html b/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html
index d6536ffadd..6d6c800d34 100644
--- a/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html
@@ -1,10 +1,9 @@
 <mat-card class="container">
-
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back
+    </button>
   </div>
 
-  <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
-
+  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="600px;"></iframe>
 </mat-card>
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html
index fb1897f124..a5c4a2af55 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html
@@ -6,4 +6,4 @@
     [entityDatatable]="entityDatatable"
   >
   </mifosx-entity-datatable-tab>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component.html b/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component.html
index 048f974c67..2eb3eb7d5c 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component.html
@@ -1 +1 @@
-<p>{{'labels.heading.savings-transaction-datatable-tab works' | translate }}!</p>
+<p>{{ 'labels.heading.savings-transaction-datatable-tab works' | translate }}!</p>
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html b/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html
index 2ee09e3eb3..421d6e7014 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html
@@ -1,39 +1,58 @@
 <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
   <span
-    *ngIf="!(transactionData.interestedPostedAsOn === false && (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3))">
+    *ngIf="
+      !(
+        transactionData.interestedPostedAsOn === false &&
+        (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3)
+      )
+    "
+  >
     <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-      <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true'
-          || transactionData.transactionType.id===3 || transactionData.transactionType.id===17" [routerLink]="'edit'">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{"labels.buttons.Edit" | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        *ngIf="
+          transactionData.transactionType.value === 'Transfer' ||
+          transactionData.reversed === 'true' ||
+          transactionData.transactionType.id === 3 ||
+          transactionData.transactionType.id === 17
+        "
+        [routerLink]="'edit'"
+      >
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
       </button>
     </span>
   </span>
   <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
-      (click)="releaseAmount()">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{"labels.buttons.Release Amount" | translate}}
+    <button
+      mat-raised-button
+      color="primary"
+      *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
+      (click)="releaseAmount()"
+    >
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Release Amount' | translate }}
     </button>
   </span>
   <span *ngIf="allowUndo()">
-    <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-      (click)="undoTransaction()">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{"labels.buttons.Undo" | translate}}
+    <button
+      mat-raised-button
+      color="warn"
+      *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+      (click)="undoTransaction()"
+    >
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
     </button>
   </span>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="transactionColor()">
-        </div>
+        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Id" | translate}}
+          {{ 'labels.inputs.Id' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,15 +60,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Type" | translate}}
+          {{ 'labels.inputs.Transaction Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.transactionType.value | translateKey:'catalogs' }}
+          {{ transactionData.transactionType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Transaction Date" | translate}}
+          {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +76,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Currency" | translate}}
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -65,33 +84,33 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{"labels.inputs.Amount" | translate }}
+          {{ 'labels.inputs.Amount' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
+          {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.note">
-          {{"labels.inputs.Note" | translate}}
+          {{ 'labels.inputs.Note' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 
-        <mifosx-transaction-payment-detail *ngIf="transactionData.paymentDetailData"
-          [paymentDetailData]="transactionData.paymentDetailData">
+        <mifosx-transaction-payment-detail
+          *ngIf="transactionData.paymentDetailData"
+          [paymentDetailData]="transactionData.paymentDetailData"
+        >
         </mifosx-transaction-payment-detail>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../../']">{{ 'labels.buttons.Back' |
-          translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html
index 89b7f8d64d..706cfd067c 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html
@@ -1,18 +1,27 @@
 <div class="container">
   <nav mat-tab-nav-bar class="navigation-tabs">
-    <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-      [active]="general.isActive">
-      {{'labels.heading.General' | translate}}
+    <a
+      mat-tab-link
+      [routerLink]="['./general']"
+      routerLinkActive
+      #general="routerLinkActive"
+      [active]="general.isActive"
+    >
+      {{ 'labels.heading.General' | translate }}
     </a>
     <ng-container *ngFor="let entityDatatable of entityDatatables">
-      <a mat-tab-link [routerLink]="['./datatables',entityDatatable.registeredTableName]" routerLinkActive
-        #datatable="routerLinkActive" [active]="datatable.isActive"
-        *mifosxHasPermission="'READ_' + entityDatatable.registeredTableName">
-        {{entityDatatable.registeredTableName}}
+      <a
+        mat-tab-link
+        [routerLink]="['./datatables', entityDatatable.registeredTableName]"
+        routerLinkActive
+        #datatable="routerLinkActive"
+        [active]="datatable.isActive"
+        *mifosxHasPermission="'READ_' + entityDatatable.registeredTableName"
+      >
+        {{ entityDatatable.registeredTableName }}
       </a>
     </ng-container>
   </nav>
 
   <router-outlet></router-outlet>
-
 </div>
diff --git a/src/app/savings/savings-account-view/view-charge/view-charge.component.html b/src/app/savings/savings-account-view/view-charge/view-charge.component.html
index 190b56b2f1..aee440cc52 100644
--- a/src/app/savings/savings-account-view/view-charge/view-charge.component.html
+++ b/src/app/savings/savings-account-view/view-charge/view-charge.component.html
@@ -1,43 +1,54 @@
-
-
-<div *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
-  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
-      <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
-      Pay
-    </button>
-    <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
-      <fa-icon icon="flag" class="m-r-10"></fa-icon>
-      Waive
+<div
+  *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
+  fxLayout="row"
+  fxLayoutAlign="end"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+  class="container m-b-20"
+>
+  <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
+    <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
+    Pay
+  </button>
+  <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
+    <fa-icon icon="flag" class="m-r-10"></fa-icon>
+    Waive
+  </button>
+  <span *ngIf="isRecurringCharge()">
+    <button
+      mat-raised-button
+      color="warn"
+      *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
+      (click)="inactivateCharge()"
+    >
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
+      Inactivate
     </button>
-    <span *ngIf="isRecurringCharge()">
-      <button mat-raised-button color="warn" *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="inactivateCharge()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>
-        Inactivate
-      </button>
-    </span>
+  </span>
 </div>
 
-<div *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
-  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
-    </button>
-    <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete
-    </button>
+<div
+  *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
+  fxLayout="row"
+  fxLayoutAlign="end"
+  fxLayoutGap="2%"
+  fxLayout.lt-md="column"
+  class="container m-b-20"
+>
+  <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    Edit
+  </button>
+  <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    Delete
+  </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
           {{ 'labels.inputs.Name' | translate }}
         </div>
@@ -51,7 +62,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.penalty ? 'Penalty' : 'Fee' | translateKey:'catalogs' }}
+          {{ chargeData.penalty ? 'Penalty' : ('Fee' | translateKey: 'catalogs') }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -67,7 +78,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeTimeType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -83,7 +94,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ chargeData.chargeCalculationType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -117,14 +128,13 @@
         <div fxFlex="50%">
           {{ chargeData.amountOutstanding | formatNumber }}
         </div>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/search/search-page/search-page.component.html b/src/app/search/search-page/search-page.component.html
index fa17891593..ffa1a357cd 100644
--- a/src/app/search/search-page/search-page.component.html
+++ b/src/app/search/search-page/search-page.component.html
@@ -1,72 +1,71 @@
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="2%" *ngIf="hasResults">
-
-    <mat-error *ngIf="overload">{{ 'error.Searched query resulted more than 200 records' | translate}}</mat-error>
+    <mat-error *ngIf="overload">{{ 'error.Searched query resulted more than 200 records' | translate }}</mat-error>
 
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="entityType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
-        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityType}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
+        <td mat-cell *matCellDef="let entity" class="view-details">{{ entity.entityType }}</td>
       </ng-container>
 
       <ng-container matColumnDef="entityName">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Name' | translate}} </th>
-        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Name' | translate }}</th>
+        <td mat-cell *matCellDef="let entity" class="view-details">{{ entity.entityName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="entityAccount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Account No' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
         <td mat-cell *matCellDef="let entity" class="view-details">
-          <mifosx-account-number display="left" accountNo="{{entity.entityAccountNo}}"></mifosx-account-number>
+          <mifosx-account-number display="left" accountNo="{{ entity.entityAccountNo }}"></mifosx-account-number>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.External Id' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
         <td mat-cell *matCellDef="let entity" class="view-details">
-          <mifosx-external-identifier externalId="{{entity.entityExternalId}}"></mifosx-external-identifier>
+          <mifosx-external-identifier externalId="{{ entity.entityExternalId }}"></mifosx-external-identifier>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="parentType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Parent Type' | translate}} </th>
-        <td mat-cell *matCellDef="let entity" class="view-details"> {{ ['CLIENT','GROUP', 'CENTER'].includes(entity.entityType) ? 'Office' : 'Client' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Parent Type' | translate }}</th>
+        <td mat-cell *matCellDef="let entity" class="view-details">
+          {{ ['CLIENT', 'GROUP', 'CENTER'].includes(entity.entityType) ? 'Office' : 'Client' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="parentName">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Parent Name' | translate}} </th>
-        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.parentName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Parent Name' | translate }}</th>
+        <td mat-cell *matCellDef="let entity" class="view-details">{{ entity.parentName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="details">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Details' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Details' | translate }}</th>
         <td mat-cell *matCellDef="let entity" class="view-details">
-          <button mat-icon-button matTooltip="{{ 'tooltips.View Entity' | translate}}" (click)="navigate(entity)" matTooltipPosition="right">
+          <button
+            mat-icon-button
+            matTooltip="{{ 'tooltips.View Entity' | translate }}"
+            (click)="navigate(entity)"
+            matTooltipPosition="right"
+          >
             <fa-icon icon="eye" size="lg"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let entity; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let entity; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </mat-card>
 
   <mat-card fxLayout="column" fxLayoutGap="2%" *ngIf="!hasResults">
     <div class="alert">
-
       <div class="message">
         <i class="fa fa-exclamation-circle alert-check"></i>
-        {{'labels.text.No data found' | translate}}
+        {{ 'labels.text.No data found' | translate }}
       </div>
-
     </div>
   </mat-card>
-
 </div>
diff --git a/src/app/self-service/app-configuration/app-configuration.component.html b/src/app/self-service/app-configuration/app-configuration.component.html
index 6192276427..a1e9e64f64 100644
--- a/src/app/self-service/app-configuration/app-configuration.component.html
+++ b/src/app/self-service/app-configuration/app-configuration.component.html
@@ -1,34 +1,30 @@
 <div class="container">
-
   <mat-accordion>
-
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Main Configuration' | translate}}
+          {{ 'labels.inputs.Main Configuration' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Name of the Organization' | translate}}</mat-label>
-          <input matInput>
+          <mat-label>{{ 'labels.inputs.Name of the Organization' | translate }}</mat-label>
+          <input matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
           <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Summary' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Summary' | translate }}</mat-label>
           <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Language' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Language' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let language of languages" [value]="language">
               {{ language }}
@@ -37,57 +33,49 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Date Format' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Date Format' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
               {{ dateFormat }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Images' | translate}}
+          {{ 'labels.inputs.Images' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
-        <span class="header">{{'labels.inputs.Favicon' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Favicon' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Cover Image' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Cover Image' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Logo' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Logo' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Logo with Organization Name' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Logo with Organization Name' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Theme and Font' | translate}}
+          {{ 'labels.inputs.Theme and Font' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
-        <span class="header">{{'labels.inputs.Mobile Banking App' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Mobile Banking App' | translate }}</span>
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Theme' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Theme' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let theme of mobileAppThemes" [value]="theme">
               {{ theme }}
@@ -96,7 +84,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Font' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of mobileAppFonts" [value]="font">
               {{ font }}
@@ -104,9 +92,9 @@
           </mat-select>
         </mat-form-field>
 
-        <span class="header">{{'labels.inputs.Online Banking App' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Online Banking App' | translate }}</span>
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Theme' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Theme' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let theme of onlineBankingAppThemes" [value]="theme">
               {{ theme }}
@@ -115,47 +103,39 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Font' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of onlineBankingAppFonts" [value]="font">
               {{ font }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Contact Information' | translate}}
+          {{ 'labels.inputs.Contact Information' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Website' | translate}}</mat-label>
-          <input type="url" matInput>
+          <mat-label>{{ 'labels.inputs.Website' | translate }}</mat-label>
+          <input type="url" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-          <input type="email" matInput>
+          <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+          <input type="email" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Contact No' | translate}}</mat-label>
-          <input type="tel" matInput>
+          <mat-label>{{ 'labels.inputs.Contact No' | translate }}</mat-label>
+          <input type="tel" matInput />
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
-
   </mat-accordion>
-
 </div>
diff --git a/src/app/self-service/task-management/task-management.component.html b/src/app/self-service/task-management/task-management.component.html
index 2fd88f82e0..85b6a537bc 100644
--- a/src/app/self-service/task-management/task-management.component.html
+++ b/src/app/self-service/task-management/task-management.component.html
@@ -1,7 +1,3 @@
 <div class="container">
-
-  <p>
-    {{'labels.inputs.TODO' | translate}}: {{'labels.inputs.task-management component' | translate}}.
-  </p>
-
+  <p>{{ 'labels.inputs.TODO' | translate }}: {{ 'labels.inputs.task-management component' | translate }}.</p>
 </div>
diff --git a/src/app/self-service/users/create-user/create-user.component.html b/src/app/self-service/users/create-user/create-user.component.html
index 517149d15a..d229028ac3 100644
--- a/src/app/self-service/users/create-user/create-user.component.html
+++ b/src/app/self-service/users/create-user/create-user.component.html
@@ -1,7 +1,5 @@
 <div class="container" [class.small-width-container]="userType.value === 'Existing User'">
-
   <mat-card>
-
     <mat-card-header class="m-b-20">
       <mat-radio-group fxLayout="row" fxLayoutGap="20px" [formControl]="userType">
         <mat-radio-button *ngFor="let type of userTypes" [value]="type">
@@ -11,27 +9,24 @@
     </mat-card-header>
 
     <div *ngIf="userType.value === 'Existing User'">
-
       <form [formGroup]="createUserForm">
-
         <mat-card-content>
-
           <div fxLayout="column">
-
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of offices" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
-                {{'labels.inputs.Office' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                   {{ staff.displayName }}
@@ -40,52 +35,47 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Client' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
               <mat-select>
                 <mat-option *ngFor="let client of clientData" [value]="client">
                   {{ client }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-
           </div>
-
         </mat-card-content>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
           <button mat-raised-button color="accent">
             <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Activate Self Service User' | translate}}
+            {{ 'labels.buttons.Activate Self Service User' | translate }}
           </button>
         </mat-card-actions>
-
       </form>
-
     </div>
 
     <div *ngIf="userType.value === 'New User'">
-
       <form [formGroup]="createUserForm">
-
         <mat-card-content>
-
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
             <mat-form-field>
-              <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of offices" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
-                {{'labels.inputs.Office' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                   {{ staff.displayName }}
@@ -94,24 +84,24 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.User Name' | translate}}</mat-label>
-              <input type="text" matInput>
+              <mat-label>{{ 'labels.inputs.User Name' | translate }}</mat-label>
+              <input type="text" matInput />
             </mat-form-field>
 
             <span fxFlex="48%" fxHide.lt-md></span>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.First Name' | translate}}</mat-label>
-              <input type="text" matInput>
+              <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+              <input type="text" matInput />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Last Name' | translate}}</mat-label>
-              <input type="text" matInput>
+              <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+              <input type="text" matInput />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Gender' | translate}}</mat-label>
+              <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
               <mat-select>
                 <mat-option *ngFor="let gender of genderData" [value]="gender">
                   {{ gender }}
@@ -120,35 +110,31 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-              <mat-label>{{'labels.inputs.Date of Birth' | translate}}</mat-label>
-              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
+              <mat-label>{{ 'labels.inputs.Date of Birth' | translate }}</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" />
               <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-              <input type="email" matInput>
+              <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+              <input type="email" matInput />
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Mobile No' | translate}}</mat-label>
-              <input type="tel" matInput>
+              <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
+              <input type="tel" matInput />
             </mat-form-field>
-
           </div>
-
         </mat-card-content>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button mat-raised-button color="primary">{{ 'labels.buttons.Submit' | translate }}</button>
         </mat-card-actions>
-
       </form>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/self-service/users/edit-user/edit-user.component.html b/src/app/self-service/users/edit-user/edit-user.component.html
index 983b93d9c3..4bf3733209 100644
--- a/src/app/self-service/users/edit-user/edit-user.component.html
+++ b/src/app/self-service/users/edit-user/edit-user.component.html
@@ -1,15 +1,10 @@
 <div class="container">
-
   <mat-card>
-
     <form>
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select>
               <mat-option *ngFor="let office of officeData" [value]="office">
                 {{ office }}
@@ -18,7 +13,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select>
               <mat-option *ngFor="let staff of staffData" [value]="staff">
                 {{ staff }}
@@ -27,24 +22,24 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.User Name' | translate}}</mat-label>
-            <input type="text" matInput>
+            <mat-label>{{ 'labels.inputs.User Name' | translate }}</mat-label>
+            <input type="text" matInput />
           </mat-form-field>
 
           <span fxFlex="48%" fxHide.lt-md></span>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.First Name' | translate}}</mat-label>
-            <input type="text" matInput>
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input type="text" matInput />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Last Name' | translate}}</mat-label>
-            <input type="text" matInput>
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input type="text" matInput />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Gender' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
             <mat-select>
               <mat-option *ngFor="let gender of genderData" [value]="gender">
                 {{ gender }}
@@ -53,33 +48,30 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-            <mat-label>{{'labels.inputs.Date of Birth' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
+            <mat-label>{{ 'labels.inputs.Date of Birth' | translate }}</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" />
             <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-            <input type="email" matInput>
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+            <input type="email" matInput />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Mobile No' | translate}}</mat-label>
-            <input type="tel" matInput>
+            <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
+            <input type="tel" matInput />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/self-service/users/users.component.html b/src/app/self-service/users/users.component.html
index 21ed056434..6d2ca12b9e 100644
--- a/src/app/self-service/users/users.component.html
+++ b/src/app/self-service/users/users.component.html
@@ -2,88 +2,93 @@
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to selection in table. -->
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Activate' | translate}}
+    {{ 'labels.buttons.Activate' | translate }}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Deactivate' | translate}}
+    {{ 'labels.buttons.Deactivate' | translate }}
   </button>
   <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create User' | translate}}
+    {{ 'labels.buttons.Create User' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput type="text" (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput type="text" (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.User ID' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.id }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.User ID' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Email ID' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.email }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Email ID' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.email }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> {{'labels.inputs.Status' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser">
+          {{ 'labels.inputs.Status' | translate }}
+        </th>
         <td mat-cell *matCellDef="let user">
           <div [className]="user.isSelfServiceUser === true ? 'active' : 'inactive'">
-            <fa-icon matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.officeName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="staff">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Staff' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.staff }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Staff' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.staff }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view',row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['view', row.id]"></tr>
       <!-- TODO: Update route once API is setup. -->
-
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/self-service/users/view-user/view-user.component.html b/src/app/self-service/users/view-user/view-user.component.html
index 9def8d5f06..baa0de6980 100644
--- a/src/app/self-service/users/view-user/view-user.component.html
+++ b/src/app/self-service/users/view-user/view-user.component.html
@@ -2,38 +2,34 @@
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to status of user. -->
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
     <fa-icon icon="cog" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Change Password' | translate}}
+    {{ 'labels.buttons.Change Password' | translate }}
   </button>
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Activate' | translate}}
+    {{ 'labels.buttons.Activate' | translate }}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Deactivate' | translate}}
+    {{ 'labels.buttons.Deactivate' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="100%" class="header">
           <fa-icon icon="circle" size="lg" matTooltip="{{ user.status }}" matTooltipPosition="above"></fa-icon>
           &nbsp;&nbsp;
-          {{'labels.inputs.ID' | translate}}: {{ user.id }}
+          {{ 'labels.inputs.ID' | translate }}: {{ user.id }}
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.User Name' | translate}}
+          {{ 'labels.inputs.User Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +37,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.First Name' | translate}}
+          {{ 'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -49,7 +45,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Last Name' | translate}}
+          {{ 'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +53,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Gender' | translate}}
+          {{ 'labels.inputs.Gender' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -65,7 +61,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Date of Birth' | translate}}
+          {{ 'labels.inputs.Date of Birth' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -73,7 +69,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Email' | translate}}
+          {{ 'labels.inputs.Email' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -81,7 +77,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Mobile' | translate}}
+          {{ 'labels.inputs.Mobile' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -89,7 +85,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Office' | translate}}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -97,7 +93,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Staff' | translate}}
+          {{ 'labels.inputs.Staff' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -105,20 +101,19 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          {{'labels.inputs.Activation Date' | translate}}
+          {{ 'labels.inputs.Activation Date' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ user.activationDate }}
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Back' | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </mat-card-actions>
   </mat-card>
-
 </div>
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 8ac22efa73..bb69efce6c 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -2,21 +2,17 @@
 
 <!-- Global Web App Configuration Settings -->
 <div class="container">
-
   <mat-accordion>
-
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Main Configuration' | translate}}
+          {{ 'labels.inputs.Main Configuration' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Language' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Language' | translate }}</mat-label>
           <mat-select [formControl]="language" [compareWith]="compareOptions">
             <mat-option *ngFor="let language of languages" [value]="language">
               {{ language.name }}
@@ -25,7 +21,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Date Format' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Date Format' | translate }}</mat-label>
           <mat-select [formControl]="dateFormat">
             <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
               {{ dateFormat }}
@@ -34,99 +30,83 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Decimals to Display' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Decimals to Display' | translate }}</mat-label>
           <mat-select [formControl]="decimalsToDisplay">
             <mat-option *ngFor="let decimalOpt of decimals" [value]="decimalOpt">
               {{ decimalOpt }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Images' | translate}}
+          {{ 'labels.inputs.Images' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
-        <span class="header">{{'labels.inputs.Favicon' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Favicon' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Cover Image' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Cover Image' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Logo' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Logo' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">{{'labels.inputs.Logo with Organization Name' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Logo with Organization Name' | translate }}</span>
         <mifosx-file-upload></mifosx-file-upload>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Theme and Font' | translate}}
+          {{ 'labels.inputs.Theme and Font' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
-        <span class="header">{{'labels.inputs.Theme' | translate}}</span>
+        <span class="header">{{ 'labels.inputs.Theme' | translate }}</span>
         <mifosx-theme-picker></mifosx-theme-picker>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Default Font' | translate}}</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font' | translate }}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of fonts" [value]="font">
               {{ font }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
 
     <mat-expansion-panel>
-
       <mat-expansion-panel-header>
         <mat-panel-title>
-          {{'labels.inputs.Contact Information' | translate}}
+          {{ 'labels.inputs.Contact Information' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
-
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Website' | translate}}</mat-label>
-          <input type="url" matInput>
+          <mat-label>{{ 'labels.inputs.Website' | translate }}</mat-label>
+          <input type="url" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-          <input type="email" matInput>
+          <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+          <input type="email" matInput />
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{'labels.inputs.Contact No' | translate}}</mat-label>
-          <input type="tel" matInput>
+          <mat-label>{{ 'labels.inputs.Contact No' | translate }}</mat-label>
+          <input type="tel" matInput />
         </mat-form-field>
-
       </div>
-
     </mat-expansion-panel>
-
   </mat-accordion>
-
 </div>
diff --git a/src/app/shared/account-number/account-number.component.html b/src/app/shared/account-number/account-number.component.html
index f7217487e7..e9eea878bb 100644
--- a/src/app/shared/account-number/account-number.component.html
+++ b/src/app/shared/account-number/account-number.component.html
@@ -1,8 +1,12 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
   <span class="m-l-5" *ngIf="accountType">
-    <a href="{{getAccountLink()}}">{{ accountNo }}</a>
+    <a href="{{ getAccountLink() }}">{{ accountNo }}</a>
   </span>
   <span class="m-l-5" *ngIf="!accountType">{{ accountNo }}</span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
 </span>
diff --git a/src/app/shared/accounting/gl-account-display/gl-account-display.component.html b/src/app/shared/accounting/gl-account-display/gl-account-display.component.html
index e805370752..a63eb4aec8 100644
--- a/src/app/shared/accounting/gl-account-display/gl-account-display.component.html
+++ b/src/app/shared/accounting/gl-account-display/gl-account-display.component.html
@@ -1,13 +1,13 @@
 <span *ngIf="accountTitle">
-  <div fxFlex="{{withTitle}}" class="header">
-    {{'labels.inputs.' + accountTitle | translate}}
+  <div fxFlex="{{ withTitle }}" class="header">
+    {{ 'labels.inputs.' + accountTitle | translate }}
   </div>
 
-  <div fxFlex="{{withAccount}}">
-    {{glAccountValue()}}
+  <div fxFlex="{{ withAccount }}">
+    {{ glAccountValue() }}
   </div>
 </span>
 
 <div fxFlex="100%" *ngIf="!accountTitle">
-  {{glAccountValue()}}
+  {{ glAccountValue() }}
 </div>
diff --git a/src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html b/src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html
index 50b34e77e4..e9f5f09cc0 100644
--- a/src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html
+++ b/src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html
@@ -1,5 +1,5 @@
 <mat-form-field fxFlex="100%" *ngIf="required">
-  <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
 
   <mat-select required [formControl]="inputFormControl">
     <mat-option>
@@ -10,18 +10,21 @@
     </mat-option>
   </mat-select>
   <mat-error *ngIf="inputFormControl.hasError('required')">
-    {{"labels.inputs.Account"| translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+    {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+    <strong>{{ 'labels.commons.required' | translate }}</strong>
   </mat-error>
 </mat-form-field>
 
 <mat-form-field fxFlex="100%" *ngIf="!required">
-  <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
 
   <mat-select [formControl]="inputFormControl">
     <mat-option>
-      <ngx-mat-select-search [formControl]="filterFormCtrl"
-        placeholderLabel="{{placeHolderLabel}}"
-        noEntriesFoundLabel="{{noEntriesFoundLabel}}">
+      <ngx-mat-select-search
+        [formControl]="filterFormCtrl"
+        placeholderLabel="{{ placeHolderLabel }}"
+        noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
+      >
       </ngx-mat-select-search>
     </mat-option>
     <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">
diff --git a/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html b/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html
index ecbe7af21a..4ee22be648 100644
--- a/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html
+++ b/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html
@@ -1,8 +1,12 @@
 <div *ngIf="isJournalEntryLoaded">
-
   <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
-    <button mat-raised-button color="primary" (click)="revertTransaction()"
-      *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="revertTransaction()"
+      *mifosxHasPermission="'REVERSE_JOURNALENTRY'"
+      [disabled]="dataSource?.data[0].reversed"
+    >
       <span *ngIf="!dataSource.data[0].reversed">
         <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
       </span>
@@ -11,13 +15,9 @@
   </div>
 
   <div class="container m-b-20" *ngIf="isViewTransaction()">
-
     <mat-card class="mat-elevation-z8" *ngIf="dataSource">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" class="content">
-
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
             {{ 'labels.inputs.Office' | translate }}
           </div>
@@ -49,65 +49,77 @@
           <div fxFlex="25%" fxFlex.lt-md="50%">
             {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
 
   <div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="id">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Entry ID' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Code' |
-          translate }} </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Account Code' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Name' |
-          translate }} </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Account Name' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{
-            (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
-          </span></td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Debit' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">
+          <span *ngIf="transaction.entryType.value === 'DEBIT'">
+            {{ transaction.currency.displaySymbol || transaction.currency.code }}
+            {{ transaction.amount | formatNumber }}
+          </span>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{
-            (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
-          </span></td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Credit' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">
+          <span *ngIf="transaction.entryType.value === 'CREDIT'">
+            {{ transaction.currency.displaySymbol || transaction.currency.code }}
+            {{ transaction.amount | formatNumber }}
+          </span>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        (click)="viewJournalEntry(row)"
+        class="select-row"
+      ></tr>
     </table>
 
     <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
-        }}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </div>
-
   </div>
 </div>
 
@@ -115,12 +127,13 @@
   <div class="alert">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{"labels.text.No data found" | translate}}
+      {{ 'labels.text.No data found' | translate }}
     </div>
   </div>
 
   <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
-    <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
-      }}</button>
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
   </div>
 </div>
diff --git a/src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html b/src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html
index 5c29874a83..0906b5b60f 100644
--- a/src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html
+++ b/src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html
@@ -1,9 +1,7 @@
 <h1 mat-dialog-title>{{ 'labels.heading.View Journal Entry' | translate }}</h1>
 
 <div mat-dialog-content>
-
   <table>
-
     <tr>
       <th>{{ 'labels.inputs.Office' | translate }}</th>
       <td>{{ data.journalEntry.officeName }}</td>
@@ -44,9 +42,7 @@ <h1 mat-dialog-title>{{ 'labels.heading.View Journal Entry' | translate }}</h1>
         <span *ngIf="data.journalEntry.entryType.value === 'CREDIT'">{{ 'labels.inputs.Credit' | translate }}</span>
         <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">{{ 'labels.inputs.Debit' | translate }}</span>
       </th>
-      <td>
-        {{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}
-      </td>
+      <td>{{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}</td>
     </tr>
 
     <tr>
@@ -107,9 +103,7 @@ <h1 mat-dialog-title>{{ 'labels.heading.View Journal Entry' | translate }}</h1>
       <th>{{ 'labels.inputs.Submitted on' | translate }}</th>
       <td>{{ data.journalEntry.submittedOnDate | datetimeFormat }}</td>
     </tr>
-
   </table>
-
 </div>
 
 <mat-dialog-actions align="end">
diff --git a/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html b/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
index 190bbb35d6..8654dd6449 100644
--- a/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
+++ b/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html
@@ -1,59 +1,114 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
+  <div fxFlexFill fxFlex="98%" *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span fxFlex="60%">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
+  </div>
 
-    <div fxFlexFill fxFlex="98%" *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
-        <span fxFlex="40%">{{'labels.inputs.Type' | translate}}:</span>
-        <span fxFlex="60%">{{'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate}}</span>
-    </div>
+  <div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Saving reference'"
+      [glAccount]="accountingMappings.savingsReferenceAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Overdraft portfolio'"
+      *ngIf="accountingMappings.overdraftPortfolioControl"
+      [glAccount]="accountingMappings.overdraftPortfolioControl"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Fees Receivable'"
+      *ngIf="isAccrualAccounting()"
+      [glAccount]="accountingMappings.feeReceivableAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Penalties Receivable'"
+      *ngIf="isAccrualAccounting()"
+      [glAccount]="accountingMappings.penaltyReceivableAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
 
-    <div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Saving control'"
+      [glAccount]="accountingMappings.savingsControlAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Savings transfers in suspense'"
+      [glAccount]="accountingMappings.transfersInSuspenseAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Interest Payable'"
+      *ngIf="isAccrualAccounting()"
+      [glAccount]="accountingMappings.interestPayableAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Escheat liability'"
+      *ngIf="accountingMappings.escheatLiabilityAccount"
+      [glAccount]="accountingMappings.escheatLiabilityAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
 
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Saving reference'"
-            [glAccount]="accountingMappings.savingsReferenceAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Overdraft portfolio'" *ngIf="accountingMappings.overdraftPortfolioControl"
-            [glAccount]="accountingMappings.overdraftPortfolioControl" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Fees Receivable'" *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.feeReceivableAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Penalties Receivable'" *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.penaltyReceivableAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from fees'"
+      [glAccount]="accountingMappings.incomeFromFeeAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from penalties'"
+      [glAccount]="accountingMappings.incomeFromPenaltyAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from Interest'"
+      *ngIf="accountingMappings.incomeFromInterest"
+      [glAccount]="accountingMappings.incomeFromInterest"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
 
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Saving control'"
-            [glAccount]="accountingMappings.savingsControlAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Savings transfers in suspense'"
-            [glAccount]="accountingMappings.transfersInSuspenseAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Interest Payable'" *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.interestPayableAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Escheat liability'"
-            *ngIf="accountingMappings.escheatLiabilityAccount" [glAccount]="accountingMappings.escheatLiabilityAccount"
-            [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from fees'"
-            [glAccount]="accountingMappings.incomeFromFeeAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from penalties'"
-            [glAccount]="accountingMappings.incomeFromPenaltyAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from Interest'" *ngIf="accountingMappings.incomeFromInterest"
-            [glAccount]="accountingMappings.incomeFromInterest" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Interest on savings'"
-            [glAccount]="accountingMappings.interestOnSavingsAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Write-off'" *ngIf="accountingMappings.writeOffAccount"
-            [glAccount]="accountingMappings.writeOffAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-    </div>
-
-</div>
\ No newline at end of file
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Interest on savings'"
+      [glAccount]="accountingMappings.interestOnSavingsAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Write-off'"
+      *ngIf="accountingMappings.writeOffAccount"
+      [glAccount]="accountingMappings.writeOffAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+  </div>
+</div>
diff --git a/src/app/shared/cancel-dialog/cancel-dialog.component.html b/src/app/shared/cancel-dialog/cancel-dialog.component.html
index 371150c06f..4503d3be16 100644
--- a/src/app/shared/cancel-dialog/cancel-dialog.component.html
+++ b/src/app/shared/cancel-dialog/cancel-dialog.component.html
@@ -1,9 +1,15 @@
 <h1 mat-dialog-title>{{ 'labels.buttons.Cancel' | translate }}</h1>
 <div mat-dialog-content>
-  <p *ngIf="!data.cancelContext">{{ 'labels.text.Are you sure you want to leave this page and lose all inputted data' | translate }}?</p>
-  <p *ngIf="data.cancelContext">{{ 'labels.text.Are you sure you want to cancel' | translate }} {{ data.cancelContext }} ?</p>
+  <p *ngIf="!data.cancelContext">
+    {{ 'labels.text.Are you sure you want to leave this page and lose all inputted data' | translate }}?
+  </p>
+  <p *ngIf="data.cancelContext">
+    {{ 'labels.text.Are you sure you want to cancel' | translate }} {{ data.cancelContext }} ?
+  </p>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.No' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ cancel: true }">{{ 'labels.buttons.Yes' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ cancel: true }">
+    {{ 'labels.buttons.Yes' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/change-password-dialog/change-password-dialog.component.html b/src/app/shared/change-password-dialog/change-password-dialog.component.html
index 546b5ddb2f..8b69ec014a 100644
--- a/src/app/shared/change-password-dialog/change-password-dialog.component.html
+++ b/src/app/shared/change-password-dialog/change-password-dialog.component.html
@@ -1,46 +1,64 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Change Password' | translate }}</h1>
 
 <div mat-dialog-content>
-
   <form [formGroup]="changePasswordForm">
-
     <div fxLayout="column">
-
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-        <input matInput formControlName="password" type="password">
+        <input matInput formControlName="password" type="password" />
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('required')">
-          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('minlength')">
-          {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.12 characters long' | translate }}</strong>
+          {{ 'labels.commons.Password should be at least' | translate }}
+          <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('maxlength')">
-          {{'labels.commons.Password should not be more than' | translate }} <strong>{{'labels.commons.50 characters long' | translate }}</strong>
+          {{ 'labels.commons.Password should not be more than' | translate }}
+          <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
         </mat-error>
-        <mat-error *ngIf="changePasswordForm.controls.password.hasError('pattern') && !(changePasswordForm.controls.password.hasError('minlength') || changePasswordForm.controls.password.hasError('maxlength'))">
-          {{'labels.commons.Password should include a' | translate }} <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }} <strong>{{'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
+        <mat-error
+          *ngIf="
+            changePasswordForm.controls.password.hasError('pattern') &&
+            !(
+              changePasswordForm.controls.password.hasError('minlength') ||
+              changePasswordForm.controls.password.hasError('maxlength')
+            )
+          "
+        >
+          {{ 'labels.commons.Password should include a' | translate }}
+          <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
+          <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{
+            'labels.commons.lowercase and special character' | translate
+          }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
-        <input matInput formControlName="repeatPassword" type="password">
+        <input matInput formControlName="repeatPassword" type="password" />
         <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('required')">
-          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('notequal')">
-          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.does not match' | translate }}</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.does not match' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
-
   </form>
-
 </div>
 
 <mat-dialog-actions align="center">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [disabled]="!changePasswordForm.valid" [mat-dialog-close]="{password:changePasswordForm.get('password').value,repeatPassword:changePasswordForm.get('repeatPassword').value}">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button
+    mat-raised-button
+    color="warn"
+    [disabled]="!changePasswordForm.valid"
+    [mat-dialog-close]="{
+      password: changePasswordForm.get('password').value,
+      repeatPassword: changePasswordForm.get('repeatPassword').value
+    }"
+  >
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/confirmation-dialog/confirmation-dialog.component.html b/src/app/shared/confirmation-dialog/confirmation-dialog.component.html
index 8c4ae370ef..2f14fd5a49 100644
--- a/src/app/shared/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/app/shared/confirmation-dialog/confirmation-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{data.heading}}</h1>
+<h1 mat-dialog-title>{{ data.heading }}</h1>
 <div mat-dialog-content>
   <p>{{ data.dialogContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color={{color}} [mat-dialog-close]="{ confirm: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="{{ color }}" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/delete-dialog/delete-dialog.component.html b/src/app/shared/delete-dialog/delete-dialog.component.html
index db83d22d6e..dff68ae61a 100644
--- a/src/app/shared/delete-dialog/delete-dialog.component.html
+++ b/src/app/shared/delete-dialog/delete-dialog.component.html
@@ -4,5 +4,7 @@ <h1 mat-dialog-title>{{ 'labels.heading.Delete' | translate }}</h1>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/disable-dialog/disable-dialog.component.html b/src/app/shared/disable-dialog/disable-dialog.component.html
index d2e8d7d472..e89e5a8c19 100644
--- a/src/app/shared/disable-dialog/disable-dialog.component.html
+++ b/src/app/shared/disable-dialog/disable-dialog.component.html
@@ -4,5 +4,7 @@ <h1 mat-dialog-title>{{ 'labels.heading.Disable' | translate }}</h1>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ disable: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ disable: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/dropdown/dropdown.component.html b/src/app/shared/dropdown/dropdown.component.html
index 83adffdc01..a6ae8c3769 100644
--- a/src/app/shared/dropdown/dropdown.component.html
+++ b/src/app/shared/dropdown/dropdown.component.html
@@ -1,12 +1,11 @@
 <mat-form-field fxFlex fxFlex="28%">
-    <mat-label>{{getLabelText()}}</mat-label>
-    <mat-select placeholder="{{getPlaceHolderText()}}" formControlName="controlSelect">
-        <mat-option *ngFor="let option of selectOptions" [value]="option.id">
-            {{ option.value | translateKey:'catalogs' }}
-        </mat-option>
-    </mat-select>
-    <button mat-button *ngIf="controlSelect" matSuffix mat-icon-button
-        aria-label="Clear" (click)="clearProperty($event)">
-        <mat-icon>{{'labels.buttons.Close' | translate }}</mat-icon>
-    </button>
+  <mat-label>{{ getLabelText() }}</mat-label>
+  <mat-select placeholder="{{ getPlaceHolderText() }}" formControlName="controlSelect">
+    <mat-option *ngFor="let option of selectOptions" [value]="option.id">
+      {{ option.value | translateKey: 'catalogs' }}
+    </mat-option>
+  </mat-select>
+  <button mat-button *ngIf="controlSelect" matSuffix mat-icon-button aria-label="Clear" (click)="clearProperty($event)">
+    <mat-icon>{{ 'labels.buttons.Close' | translate }}</mat-icon>
+  </button>
 </mat-form-field>
diff --git a/src/app/shared/enable-dialog/enable-dialog.component.html b/src/app/shared/enable-dialog/enable-dialog.component.html
index 4f7b2bdac6..9dd0ad11a5 100644
--- a/src/app/shared/enable-dialog/enable-dialog.component.html
+++ b/src/app/shared/enable-dialog/enable-dialog.component.html
@@ -4,5 +4,7 @@ <h1 mat-dialog-title>{{ 'labels.heading.Enable' | translate }}</h1>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ enable: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ enable: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/entity-name/entity-name.component.html b/src/app/shared/entity-name/entity-name.component.html
index c8872ea409..663449335d 100644
--- a/src/app/shared/entity-name/entity-name.component.html
+++ b/src/app/shared/entity-name/entity-name.component.html
@@ -1,5 +1,11 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
-  <span class="m-l-5"><b>{{ entityName }}</b></span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
+  <span class="m-l-5"
+    ><b>{{ entityName }}</b></span
+  >
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
 </span>
diff --git a/src/app/shared/error-dialog/error-dialog.component.html b/src/app/shared/error-dialog/error-dialog.component.html
index 261710a035..299b066e82 100644
--- a/src/app/shared/error-dialog/error-dialog.component.html
+++ b/src/app/shared/error-dialog/error-dialog.component.html
@@ -1,10 +1,10 @@
-<h1 mat-dialog-title>{{'Error Log' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'Error Log' | translate }}</h1>
 
 <div mat-dialog-content>
-    <p *ngIf="!showAsCode"> {{ data }}</p>
-    <span *ngIf="showAsCode" [innerHTML]="data"></span>
+  <p *ngIf="!showAsCode">{{ data }}</p>
+  <span *ngIf="showAsCode" [innerHTML]="data"></span>
 </div>
 
 <mat-dialog-actions align="left">
-    <button mat-raised-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'Cancel' | translate }}</button>
 </mat-dialog-actions>
diff --git a/src/app/shared/external-identifier/external-identifier.component.html b/src/app/shared/external-identifier/external-identifier.component.html
index fea5572795..0f0fbd6f88 100644
--- a/src/app/shared/external-identifier/external-identifier.component.html
+++ b/src/app/shared/external-identifier/external-identifier.component.html
@@ -1,8 +1,16 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
-  <span (click)="copyValue()" *ngIf="displayL && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
-  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  <span (click)="copyValue()" *ngIf="displayL && iconVisible"
+    ><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon
+  ></span>
+  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"
+    ><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon
+  ></span>
   <span class="m-l-5" *ngIf="!completed">{{ externalId | externalIdentifier }}</span>
   <span class="m-l-5" *ngIf="completed">{{ externalId }}</span>
-  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
-  <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
+  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"
+    ><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon
+  ></span>
+  <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"
+    ><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon
+  ></span>
 </span>
diff --git a/src/app/shared/file-upload/file-upload.component.html b/src/app/shared/file-upload/file-upload.component.html
index 1f4cea7fe2..400dda796e 100644
--- a/src/app/shared/file-upload/file-upload.component.html
+++ b/src/app/shared/file-upload/file-upload.component.html
@@ -1,7 +1,6 @@
 <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="2%">
-
   <mat-form-field [fxFlex]="flex || '83%'">
-    <input matInput [readonly]="true" [value]="fileName || ''" placeholder="No file selected">
+    <input matInput [readonly]="true" [value]="fileName || ''" placeholder="No file selected" />
   </mat-form-field>
 
   <span fxFlex="10%" fxFlexAlign="center">
@@ -11,7 +10,6 @@
       {{ 'labels.buttons.Browse' | translate }}
     </button>
   </span>
-
 </div>
 
-<input type="file" #uploadFile accept="{{acceptFilter}}" (change)="onFileSelect($event)" [style.display]="'none'">
+<input type="file" #uploadFile accept="{{ acceptFilter }}" (change)="onFileSelect($event)" [style.display]="'none'" />
diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html
index 77b74a660e..6d939c0cdd 100644
--- a/src/app/shared/footer/footer.component.html
+++ b/src/app/shared/footer/footer.component.html
@@ -1,26 +1,34 @@
 <div fxLayout="column" id="footer" class="m-b-20" *ngIf="displayBackEndInfo">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <div fxLayout="column" class="m-b-20 content">
-
     <table class="versions">
       <tr>
         <td class="footer-content">Mifos</td>
-        <td class="right footer-content">{{ versions.mifos }} - <b>{{ hash }}</b></td>
+        <td class="right footer-content">
+          {{ versions.mifos }} - <b>{{ hash }}</b>
+        </td>
       </tr>
       <tr>
-        <td class="footer-content">{{"labels.text.Fineract" | translate }}</td>
-        <td class="right footer-content">{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b></td>
+        <td class="footer-content">{{ 'labels.text.Fineract' | translate }}</td>
+        <td class="right footer-content">
+          {{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b>
+        </td>
       </tr>
       <tr *ngIf="displayBackEndInfo">
-        <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
+        <td colspan="2" class="center footer-content">
+          <b>{{ server }}</b>
+        </td>
       </tr>
       <tr *ngIf="isBusinessDateDefined">
-        <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
-        <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
+        <td class="footer-content">{{ 'labels.text.Current Business Date' | translate }}:</td>
+        <td class="center footer-content business-date">
+          <b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b>
+        </td>
       </tr>
     </table>
   </div>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate}} {{'labels.text.by' | translate}} Mifos
+  <p fxFlexAlign="center" class="footer-content">
+    {{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos
   </p>
 </div>
diff --git a/src/app/shared/form-dialog/form-dialog.component.html b/src/app/shared/form-dialog/form-dialog.component.html
index be77b22159..5dc53203ce 100644
--- a/src/app/shared/form-dialog/form-dialog.component.html
+++ b/src/app/shared/form-dialog/form-dialog.component.html
@@ -1,14 +1,26 @@
 <h1 mat-dialog-title>{{ data.title }}</h1>
 
-<div mat-dialog-content [formGroup]="form" [fxLayout]="layout.columns > 1 ? 'row wrap' : 'column'" fxLayout.lt-md="column" [fxLayoutGap]="(layout.columns > 1 ? layout.gap : 0) + '%'" fxLayoutGap.lt-md="0%">
-
+<div
+  mat-dialog-content
+  [formGroup]="form"
+  [fxLayout]="layout.columns > 1 ? 'row wrap' : 'column'"
+  fxLayout.lt-md="column"
+  [fxLayoutGap]="(layout.columns > 1 ? layout.gap : 0) + '%'"
+  fxLayoutGap.lt-md="0%"
+>
   <div *ngFor="let formfield of formfields" [fxFlex]="layout.flex + '%'" fxFlex.lt-md="100%">
     <mifosx-formfield [formfield]="formfield" [form]="form" fxFlexFill></mifosx-formfield>
   </div>
-
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.' + layout.cancelButtonText | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid || form.pristine">{{ 'labels.buttons.' + layout.addButtonText | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [mat-dialog-close]="{ data: form }"
+    [disabled]="!form.valid || form.pristine"
+  >
+    {{ 'labels.buttons.' + layout.addButtonText | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shared/form-dialog/formfield/formfield.component.html b/src/app/shared/form-dialog/formfield/formfield.component.html
index 48cd259b58..3952f68f21 100644
--- a/src/app/shared/form-dialog/formfield/formfield.component.html
+++ b/src/app/shared/form-dialog/formfield/formfield.component.html
@@ -1,54 +1,76 @@
 <div [formGroup]="form" fxFlexFill>
-
-  <div *ngIf="formfield.controlType==='input' || formfield.controlType==='select'" fxFlexFill>
-
+  <div *ngIf="formfield.controlType === 'input' || formfield.controlType === 'select'" fxFlexFill>
     <mat-form-field fxFlexFill>
-
       <mat-label>{{ formfield.label }}</mat-label>
 
-      <input *ngIf="formfield.controlType==='input'" [type]="formfield.type" matInput
-        [formControlName]="formfield.controlName" [required]="formfield.required">
+      <input
+        *ngIf="formfield.controlType === 'input'"
+        [type]="formfield.type"
+        matInput
+        [formControlName]="formfield.controlName"
+        [required]="formfield.required"
+      />
 
-      <mat-select *ngIf="formfield.controlType==='select'" [formControlName]="formfield.controlName"
-        [required]="formfield.required">
+      <mat-select
+        *ngIf="formfield.controlType === 'select'"
+        [formControlName]="formfield.controlName"
+        [required]="formfield.required"
+      >
         <mat-option *ngFor="let option of formfield.options.data" [value]="option[formfield.options.value]">
           {{ option[formfield.options.label] }}
         </mat-option>
       </mat-select>
 
       <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-        {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ formfield.label }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
-
     </mat-form-field>
-
   </div>
 
-  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datepicker'" (click)="datePicker.open()">
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType === 'datepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
-      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <input
+      matInput
+      [matDatepicker]="datePicker"
+      [min]="formfield.minDate"
+      [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName"
+      [required]="formfield.required"
+    />
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-      {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+      {{ formfield.label }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datetimepicker'" (click)="datePicker.open()">
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType === 'datetimepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [ngxMatDatetimePicker]="datetimePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
-      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <input
+      matInput
+      [ngxMatDatetimePicker]="datetimePicker"
+      [min]="formfield.minDate"
+      [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName"
+      [required]="formfield.required"
+    />
     <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
     <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-      {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+      {{ formfield.label }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-checkbox *ngIf="formfield.controlType==='checkbox'" labelPosition="before" [checked]="formfield.value"
-    [formControlName]="formfield.controlName" [required]="formfield.required">
+  <mat-checkbox
+    *ngIf="formfield.controlType === 'checkbox'"
+    labelPosition="before"
+    [checked]="formfield.value"
+    [formControlName]="formfield.controlName"
+    [required]="formfield.required"
+  >
     {{ formfield.label }}
   </mat-checkbox>
-
 </div>
diff --git a/src/app/shared/input-amount/input-amount.component.html b/src/app/shared/input-amount/input-amount.component.html
index 41d84e2da3..940a94e8e6 100644
--- a/src/app/shared/input-amount/input-amount.component.html
+++ b/src/app/shared/input-amount/input-amount.component.html
@@ -1,21 +1,39 @@
 <mat-form-field appearance="fill" fxFlex="100%" *ngIf="isRequired">
-    <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
-    <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
-    <span fxFlex="auto"></span>
-    <input mifosxFormatAmount="{{currency.code}}:{{currency.displaySymbol}}" class="right-input"
-        [formControl]="inputFormControl"  (keypress)="numberOnly($event)"
-        required matInput (blur)="displayHint = false;" (focus)="displayHint = true;" />
-    <mat-error *ngIf="inputFormControl.hasError('required')">
-        {{'labels.inputs.' + inputLabel | translate}} {{ "labels.commons.is" | translate}} <strong>{{
-            "labels.commons.required" | translate}}</strong>
-    </mat-error>
-    <mat-hint class="right-hint" *ngIf="displayHint">{{inputFormControl.value | currency:currency.code:currency.displaySymbol:'1.2-2'}}</mat-hint>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+  <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+  <span fxFlex="auto"></span>
+  <input
+    mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
+    class="right-input"
+    [formControl]="inputFormControl"
+    (keypress)="numberOnly($event)"
+    required
+    matInput
+    (blur)="displayHint = false"
+    (focus)="displayHint = true"
+  />
+  <mat-error *ngIf="inputFormControl.hasError('required')">
+    {{ 'labels.inputs.' + inputLabel | translate }} {{ 'labels.commons.is' | translate }}
+    <strong>{{ 'labels.commons.required' | translate }}</strong>
+  </mat-error>
+  <mat-hint class="right-hint" *ngIf="displayHint">{{
+    inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
+  }}</mat-hint>
 </mat-form-field>
 <mat-form-field appearance="fill" fxFlex="100%" *ngIf="!isRequired">
-    <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
-    <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
-    <span fxFlex="auto"></span>
-    <input mifosxFormatAmount="{{currency.code}}:{{currency.displaySymbol}}" class="right-input"
-        [formControl]="inputFormControl"  (keypress)="numberOnly($event)" matInput (blur)="displayHint = false;" (focus)="displayHint = true;" />
-    <mat-hint class="right-hint" *ngIf="displayHint">{{inputFormControl.value | currency:currency.code:currency.displaySymbol:'1.2-2'}}</mat-hint>
-</mat-form-field>
\ No newline at end of file
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+  <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+  <span fxFlex="auto"></span>
+  <input
+    mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
+    class="right-input"
+    [formControl]="inputFormControl"
+    (keypress)="numberOnly($event)"
+    matInput
+    (blur)="displayHint = false"
+    (focus)="displayHint = true"
+  />
+  <mat-hint class="right-hint" *ngIf="displayHint">{{
+    inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
+  }}</mat-hint>
+</mat-form-field>
diff --git a/src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html b/src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html
index 136e90fc78..e7a63c925d 100644
--- a/src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html
+++ b/src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html
@@ -6,10 +6,18 @@ <h1 mat-dialog-title>{{ 'labels.heading.Keyboard Shortcuts' | translate }}</h1>
       <mat-divider [inset]="true"></mat-divider>
       <div fxFlexFill fxFlex="50%">
         <span fxFlex="50%">
-          <span *ngIf="item.ctrlKey"> <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> + </span>
-          <span *ngIf="item.shiftKey"> <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> + </span>
-          <span *ngIf="item.altKey"> <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> + </span>
-          <span *ngIf="item.key"> <span class="modifierKey">{{ item.key }}</span></span>
+          <span *ngIf="item.ctrlKey">
+            <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> +
+          </span>
+          <span *ngIf="item.shiftKey">
+            <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> +
+          </span>
+          <span *ngIf="item.altKey">
+            <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> +
+          </span>
+          <span *ngIf="item.key">
+            <span class="modifierKey">{{ item.key }}</span></span
+          >
         </span>
         <span fxFlex="50%">{{ item.title }}</span>
       </div>
diff --git a/src/app/shared/language-selector/language-selector.component.html b/src/app/shared/language-selector/language-selector.component.html
index c48ec00d78..903a76ca38 100644
--- a/src/app/shared/language-selector/language-selector.component.html
+++ b/src/app/shared/language-selector/language-selector.component.html
@@ -1,8 +1,8 @@
 <mat-form-field id="language-selector" class="m-l-10">
-  <mat-label>{{'labels.inputs.Language' | translate}}</mat-label>
+  <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
   <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">
-      {{ 'languages.' + language | translate}}
+      {{ 'languages.' + language | translate }}
     </mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/src/app/shared/long-text/long-text.component.html b/src/app/shared/long-text/long-text.component.html
index 6fe828561e..68b7deef58 100644
--- a/src/app/shared/long-text/long-text.component.html
+++ b/src/app/shared/long-text/long-text.component.html
@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
-    <span class="m-l-3" *ngIf="isLongValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
-    <span class="m-l-5" *ngIf="isLongValue()">{{ textValue | truncateText:chars }}...</span>
-    <span class="m-l-5" *ngIf="!isLongValue()">{{ textValue }}</span>
-</span>
\ No newline at end of file
+  <span class="m-l-3" *ngIf="isLongValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
+  <span class="m-l-5" *ngIf="isLongValue()">{{ textValue | truncateText: chars }}...</span>
+  <span class="m-l-5" *ngIf="!isLongValue()">{{ textValue }}</span>
+</span>
diff --git a/src/app/shared/notifications-tray/notifications-tray.component.html b/src/app/shared/notifications-tray/notifications-tray.component.html
index 6c6f6da6b5..83a7954d36 100644
--- a/src/app/shared/notifications-tray/notifications-tray.component.html
+++ b/src/app/shared/notifications-tray/notifications-tray.component.html
@@ -1,28 +1,41 @@
 <button
-  mat-icon-button class="ml-1" matTooltip="{{ 'tooltips.Notifications' | translate}}"
-  [matMenuTriggerFor]="notificationsMenu" (menuClosed)="menuClosed()"
-  [matBadge]="unreadNotifications.length" [matBadgeHidden]="!unreadNotifications.length" matBadgeColor="warn"  matBadgeSize="medium"
+  mat-icon-button
+  class="ml-1"
+  matTooltip="{{ 'tooltips.Notifications' | translate }}"
+  [matMenuTriggerFor]="notificationsMenu"
+  (menuClosed)="menuClosed()"
+  [matBadge]="unreadNotifications.length"
+  [matBadgeHidden]="!unreadNotifications.length"
+  matBadgeColor="warn"
+  matBadgeSize="medium"
 >
   <fa-icon icon="bell" size="lg"></fa-icon>
 </button>
 
 <mat-menu class="mifosx-notifications-menu" #notificationsMenu="matMenu" [overlapTrigger]="false">
-
-  <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px;">
-    <mat-icon style="font-size: 24px; opacity: 0.8;">
-      <span class="material-icons">{{'labels.menus.Notifications' | translate}}</span>
+  <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px">
+    <mat-icon style="font-size: 24px; opacity: 0.8">
+      <span class="material-icons">{{ 'labels.menus.Notifications' | translate }}</span>
     </mat-icon>
     <p>{{ 'labels.text.No notifications' | translate }}</p>
   </div>
 
-  <button mat-menu-item class="unread" *ngFor="let notification of unreadNotifications" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
-    {{ notification.content }}*<br>
+  <button
+    mat-menu-item
+    class="unread"
+    *ngFor="let notification of unreadNotifications"
+    [routerLink]="[routeMap[notification.objectType], notification.objectId]"
+  >
+    {{ notification.content }}*<br />
     <span class="time">[{{ notification.createdAt }}]</span>
   </button>
 
-  <button mat-menu-item *ngFor="let notification of displayedReadNotifications" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
-    {{ notification.content }}<br>
+  <button
+    mat-menu-item
+    *ngFor="let notification of displayedReadNotifications"
+    [routerLink]="[routeMap[notification.objectType], notification.objectId]"
+  >
+    {{ notification.content }}<br />
     <span class="time">[{{ notification.createdAt }}]</span>
   </button>
-
 </mat-menu>
diff --git a/src/app/shared/search-tool/search-tool.component.html b/src/app/shared/search-tool/search-tool.component.html
index 477c7af563..8be143dded 100644
--- a/src/app/shared/search-tool/search-tool.component.html
+++ b/src/app/shared/search-tool/search-tool.component.html
@@ -1,19 +1,25 @@
-<div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" fxLayout="row" fxLayoutGap="2%" [@fadeInOut]>
-
+<div
+  *ngIf="searchVisible"
+  class="search-bar"
+  fxFlex="auto"
+  fxHide.lt-sm="true"
+  fxLayout="row"
+  fxLayoutGap="2%"
+  [@fadeInOut]
+>
   <mat-form-field class="search">
     <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
-    <input matInput type="text" [formControl]="query" (keydown.enter)="search()">
+    <input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
   </mat-form-field>
 
   <mat-form-field class="resource">
     <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
     <mat-select [formControl]="resource">
       <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
-        {{'labels.text.' + option.name | translate }}
+        {{ 'labels.text.' + option.name | translate }}
       </mat-option>
     </mat-select>
   </mat-form-field>
-
 </div>
 
 <div class="search-icon">
diff --git a/src/app/shared/server-selector/server-selector.component.html b/src/app/shared/server-selector/server-selector.component.html
index 48094ee2be..cf8e0c725f 100644
--- a/src/app/shared/server-selector/server-selector.component.html
+++ b/src/app/shared/server-selector/server-selector.component.html
@@ -1,24 +1,28 @@
 <mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
-    <mat-label>{{'labels.inputs.Server' | translate }}</mat-label>
-    <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
-        <div class="sticky">
-            <form [formGroup]="form" (ngSubmit)="addNewServer()">
-                <div class="actions">
-                    <mat-form-field class="ml" fxFlexAlign="start">
-                        <span matPrefix><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span>
-                        <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
-                        <input matInput type="text" autocomplete="off" formControlName="url">
-                        <mat-error *ngIf="form.controls.url.hasError('required')">
-                          {{'labels.inputs.Url' | translate}} <strong>{{'labels.commons.is required' | translate }}</strong>
-                        </mat-error>
-                    </mat-form-field>
+  <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
+  <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
+    <div class="sticky">
+      <form [formGroup]="form" (ngSubmit)="addNewServer()">
+        <div class="actions">
+          <mat-form-field class="ml" fxFlexAlign="start">
+            <span matPrefix
+              ><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span
+            >
+            <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
+            <input matInput type="text" autocomplete="off" formControlName="url" />
+            <mat-error *ngIf="form.controls.url.hasError('required')">
+              {{ 'labels.inputs.Url' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{'labels.buttons.Add' | translate }}</button>
-                </div>
-            </form>
+          <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">
+            {{ 'labels.buttons.Add' | translate }}
+          </button>
         </div>
-        <mat-option *ngFor="let server of servers" [value]="server">
-            {{ server }}
-        </mat-option>
-    </mat-select>
+      </form>
+    </div>
+    <mat-option *ngFor="let server of servers" [value]="server">
+      {{ server }}
+    </mat-option>
+  </mat-select>
 </mat-form-field>
diff --git a/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html b/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html
index 8dbdc48690..dc8fa673ad 100644
--- a/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html
+++ b/src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html
@@ -1,4 +1,3 @@
-
 <div fxFlexFill fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious [disabled]="disablePrevious">
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
index 3ceb5ff9f8..ec1798d7e5 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
@@ -1,8 +1,7 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
+      <h3>{{ datatableName }}</h3>
     </div>
     <div class="action-button m-b-7" fxLayoutGap="10px">
       <span *mifosxHasPermission="'CREATE_' + datatableName">
@@ -25,29 +24,30 @@ <h3>{{datatableName}}</h3>
 
   <div class="m-t-10">
     <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25" [fxHide]="isLoading">
-
-      <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
+      <ng-container *ngFor="let datatableColumn of datatableColumns; let i = index" [matColumnDef]="datatableColumn">
         <ng-container *ngIf="i === 0">
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let data">
-            <mat-checkbox class="center" (click)="$event.stopPropagation()"
-              (change)="$event ? itemToggle(data) : null" [checked]="selection.isSelected(data)">
+            <mat-checkbox
+              class="center"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? itemToggle(data) : null"
+              [checked]="selection.isSelected(data)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container *ngIf="i > 0">
-          <th mat-header-cell class="right" *matHeaderCellDef> {{ getInputName(datatableColumn) }} </th>
+          <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
           <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-              {{ formatValue(data, datatableColumn) }}
+            {{ formatValue(data, datatableColumn) }}
           </td>
         </ng-container>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: datatableColumns"></tr>
     </table>
   </div>
-
 </div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
index 5be7b0d111..8a89f730e9 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
+  <h3>{{ datatableName }}</h3>
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
@@ -15,43 +15,59 @@ <h3>{{datatableName}}</h3>
   <mat-divider></mat-divider>
 
   <div class="m-t-10" *ngIf="dataObject.data.length > 0">
-
-    <div fxFlexFill *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" [ngClass]="setAttributeClass(columnHeader.columnName)" >
-
+    <div
+      fxFlexFill
+      *ngFor="let columnHeader of dataObject.columnHeaders; let i = index"
+      [ngClass]="setAttributeClass(columnHeader.columnName)"
+    >
       <div fxFlex="40%" class="mat-body-strong left">
         {{ getInputName(columnHeader.columnName) }}
       </div>
 
-      <div fxFlex="68%" [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right">
+      <div
+        fxFlex="68%"
+        [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)"
+        class="right"
+      >
         <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
+          {{ dataObject.data[0].row[i] | dateFormat }}
         </span>
         <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
+          {{ dataObject.data[0].row[i] | datetimeFormat }}
         </span>
         <span *ngSwitchCase="'INTEGER'">
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
         <span *ngSwitchCase="'DECIMAL'">
-          {{dataObject.data[0].row[i] | formatNumber}}
+          {{ dataObject.data[0].row[i] | formatNumber }}
         </span>
         <span *ngSwitchCase="'TEXT'" class="long-text">
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
-        <textarea *ngSwitchCase="'JSON'" cdkTextareaAutosize="true" cdkAutosizeMaxRows="20" cdkAutosizeMinRows="1" style="width: 100%; height: 100%" [innerHTML]="dataObject.data[0].row[i].value | prettyPrint">
+        <textarea
+          *ngSwitchCase="'JSON'"
+          cdkTextareaAutosize="true"
+          cdkAutosizeMaxRows="20"
+          cdkAutosizeMinRows="1"
+          style="width: 100%; height: 100%"
+          [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
+        >
         </textarea>
         <span *ngSwitchDefault>
           <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
-            <button mat-icon-button matTooltip="{{ 'tooltips.View Link' | translate }}" (click)="openSite(dataObject.data[0].row[i])"
-              matTooltipPosition="right" class="small-icon">
+            <button
+              mat-icon-button
+              matTooltip="{{ 'tooltips.View Link' | translate }}"
+              (click)="openSite(dataObject.data[0].row[i])"
+              matTooltipPosition="right"
+              class="small-icon"
+            >
               <fa-icon icon="eye" size="lg"></fa-icon>
             </button>
           </span>
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
       </div>
     </div>
-
   </div>
-
 </div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html
index 03b1714fea..ced0a15137 100644
--- a/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html
@@ -1,10 +1,12 @@
 <div>
-  <mifosx-datatable-multi-row *ngIf="multiRowDatatableFlag"
+  <mifosx-datatable-multi-row
+    *ngIf="multiRowDatatableFlag"
     [entityType]="entityType"
     [entityId]="entityId"
     [dataObject]="entityDatatable"
   ></mifosx-datatable-multi-row>
-  <mifosx-datatable-single-row *ngIf="!multiRowDatatableFlag"
+  <mifosx-datatable-single-row
+    *ngIf="!multiRowDatatableFlag"
     [entityType]="entityType"
     [entityId]="entityId"
     [dataObject]="entityDatatable"
diff --git a/src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html b/src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html
index e929767eaa..59693f33d3 100644
--- a/src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html
+++ b/src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html
@@ -1,6 +1,5 @@
 <div class="tab-container mat-typography">
   <div fxLayout="row" fxLayoutAlign="start center">
-
     <h3 fxFlex="90%">{{ 'labels.heading.Documents' | translate }}</h3>
 
     <div fxFlex="10%" *mifosxHasPermission="'CREATE_DOCUMENT'">
@@ -11,40 +10,50 @@ <h3 fxFlex="90%">{{ 'labels.heading.Documents' | translate }}</h3>
   </div>
 
   <table mat-table #documentsTable [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.description }}</td>
     </ng-container>
 
     <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.File Name' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.File Name' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.fileName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Actions' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let document; let index">
-        <button class="document-action-button" mat-raised-button color="primary"
-          (click)="downloadDocument(document.id)">
+        <button
+          class="document-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="downloadDocument(document.id)"
+        >
           <fa-icon icon="cloud-download-alt"></fa-icon>
         </button>
-        <button class="document-action-button" mat-raised-button color="warn"
-          (click)="deleteDocument(document.id, document.name)">
+        <button
+          class="document-action-button"
+          mat-raised-button
+          color="warn"
+          (click)="deleteDocument(document.id, document.name)"
+        >
           <fa-icon icon="times"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
-  <mat-paginator *ngIf="entityDocuments && entityDocuments.length > 10" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    *ngIf="entityDocuments && entityDocuments.length > 10"
+    [pageSizeOptions]="[10, 25, 50]"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>
diff --git a/src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html b/src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html
index 77418f325b..46298ed57b 100644
--- a/src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html
+++ b/src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html
@@ -1,12 +1,24 @@
 <div class="tab-container mat-typography">
-
   <h3>{{ 'labels.heading.Notes' | translate }}</h3>
 
   <div>
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="addNote()">
+    <form
+      #formRef="ngForm"
+      [formGroup]="noteForm"
+      fxLayout="row"
+      fxLayoutAlign="start baseline"
+      fxLayoutGap="20px"
+      (ngSubmit)="addNote()"
+    >
       <mat-form-field fxFlex="calc(85%-20px)">
-        <textarea required formControlName="note" matInput placeholder="{{'labels.text.Write a note' | translate}} ..." cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+        <textarea
+          required
+          formControlName="note"
+          matInput
+          placeholder="{{ 'labels.text.Write a note' | translate }} ..."
+          cdkTextareaAutosize
+          cdkAutosizeMinRows="2"
+        ></textarea>
       </mat-form-field>
       <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
@@ -15,12 +27,16 @@ <h3>{{ 'labels.heading.Notes' | translate }}</h3>
   </div>
 
   <mat-list>
-    <mat-list-item *ngFor="let entityNote of entityNotes; let i=index;">
+    <mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
       <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{ entityNote.note }} </h3>
+      <h3 matLine>{{ entityNote.note }}</h3>
       <p matLine>
-        <span><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{entityNote.createdByUsername}}</span><br />
-        <span><b>{{ 'labels.inputs.Date' | translate }}:</b> {{entityNote.createdOn | dateFormat}}</span>
+        <span
+          ><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}</span
+        ><br />
+        <span
+          ><b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}</span
+        >
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
         <button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">
diff --git a/src/app/shared/tenant-selector/tenant-selector.component.html b/src/app/shared/tenant-selector/tenant-selector.component.html
index 4202955623..ded52fce18 100644
--- a/src/app/shared/tenant-selector/tenant-selector.component.html
+++ b/src/app/shared/tenant-selector/tenant-selector.component.html
@@ -2,8 +2,13 @@
   <span matPrefix class="m-r-10">
     <fa-icon icon="building" size="lg"></fa-icon>
   </span>
-  <mat-label>{{'labels.inputs.Tenant' | translate}}</mat-label>
-  <mat-select [disabled]="!allowSelection()" [formControl]="tenantSelector" (selectionChange)="setTenantIdentifier()" class="tenantselector">
+  <mat-label>{{ 'labels.inputs.Tenant' | translate }}</mat-label>
+  <mat-select
+    [disabled]="!allowSelection()"
+    [formControl]="tenantSelector"
+    (selectionChange)="setTenantIdentifier()"
+    class="tenantselector"
+  >
     <mat-option *ngFor="let tenant of tenants" [value]="tenant">
       {{ tenant }}
     </mat-option>
diff --git a/src/app/shared/theme-picker/theme-picker.component.html b/src/app/shared/theme-picker/theme-picker.component.html
index cb33cfbcfa..560d696229 100644
--- a/src/app/shared/theme-picker/theme-picker.component.html
+++ b/src/app/shared/theme-picker/theme-picker.component.html
@@ -7,7 +7,12 @@
     <mat-grid-tile *ngFor="let theme of themes">
       <div mat-menu-item (click)="installTheme(theme)">
         <div class="mifosx-theme-picker-swatch">
-          <fa-icon class="mifosx-theme-chosen-icon" *ngIf="currentTheme.href === theme.href" icon="check-circle" size="lg"></fa-icon>
+          <fa-icon
+            class="mifosx-theme-chosen-icon"
+            *ngIf="currentTheme.href === theme.href"
+            icon="check-circle"
+            size="lg"
+          ></fa-icon>
           <div class="mifosx-theme-picker-primary" [style.background]="theme.primary"></div>
           <div class="mifosx-theme-picker-accent" [style.background]="theme.accent"></div>
         </div>
diff --git a/src/app/shared/theme-toggle/theme-toggle.component.html b/src/app/shared/theme-toggle/theme-toggle.component.html
index b9d2ab1955..4ab4b279e8 100644
--- a/src/app/shared/theme-toggle/theme-toggle.component.html
+++ b/src/app/shared/theme-toggle/theme-toggle.component.html
@@ -1,3 +1,3 @@
 <button mat-icon-button (click)="toggleTheme()" class="m-l-15 m-r-5">
-    <mat-icon>{{ darkModeOn ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
+  <mat-icon>{{ darkModeOn ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
 </button>
diff --git a/src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html b/src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html
index ad2f932939..465f2141e2 100644
--- a/src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html
+++ b/src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row wrap" class="content">
   <div fxFlex="50%" class="mat-body-strong">
-    {{ 'labels.inputs.Payment Type' | translate}}
+    {{ 'labels.inputs.Payment Type' | translate }}
   </div>
 
   <div fxFlex="50%">
@@ -10,27 +10,27 @@
 <table *ngIf="hasSomeValue()">
   <tbody>
     <tr>
-      <td class="mat-body-strong center" colspan="2">{{ 'labels.inputs.Payment Details' | translate}}</td>
+      <td class="mat-body-strong center" colspan="2">{{ 'labels.inputs.Payment Details' | translate }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.accountNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Account No' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Account No' | translate }}</td>
       <td>{{ paymentDetailData.accountNumber }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.checkNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Cheque Number' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Cheque Number' | translate }}</td>
       <td>{{ paymentDetailData.checkNumber }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.routingCode)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Routing Code' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Routing Code' | translate }}</td>
       <td class="mat-body-strong">{{ paymentDetailData.routingCode }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.receiptNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Receipt No' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Receipt No' | translate }}</td>
       <td>{{ paymentDetailData.receiptNumber }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.bankNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Bank No' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Bank No' | translate }}</td>
       <td>{{ paymentDetailData.bankNumber }}</td>
     </tr>
   </tbody>
-</table>
\ No newline at end of file
+</table>
diff --git a/src/app/shares/create-shares-account/create-shares-account.component.html b/src/app/shares/create-shares-account/create-shares-account.component.html
index 4a91264696..c1cafb2b9b 100644
--- a/src/app/shares/create-shares-account/create-shares-account.component.html
+++ b/src/app/shares/create-shares-account/create-shares-account.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,28 +21,25 @@
     </ng-template>
 
     <mat-step [stepControl]="sharesAccountDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-shares-account-details-step
         [sharesAccountTemplate]="sharesAccountTemplate"
         (sharesAccountProductTemplate)="setTemplate($event)"
       >
       </mifosx-shares-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="sharesAccountTermsForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
-
-      <mifosx-shares-account-terms-step [sharesAccountProductTemplate]="sharesAccountProductTemplate"></mifosx-shares-account-terms-step>
-
+      <mifosx-shares-account-terms-step
+        [sharesAccountProductTemplate]="sharesAccountProductTemplate"
+      ></mifosx-shares-account-terms-step>
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-shares-account-charges-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -52,12 +47,10 @@
         [currencyCode]="sharesAccountTermsForm.get('currencyCode')"
       >
       </mifosx-shares-account-charges-step>
-
     </mat-step>
 
     <mat-step *ngIf="sharesAccountFormValid" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-shares-account-preview-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -67,9 +60,6 @@
         (submitEvent)="submit()"
       >
       </mifosx-shares-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/shares/edit-shares-account/edit-shares-account.component.html b/src/app/shares/edit-shares-account/edit-shares-account.component.html
index b5e0d17818..ac1a0a7aeb 100644
--- a/src/app/shares/edit-shares-account/edit-shares-account.component.html
+++ b/src/app/shares/edit-shares-account/edit-shares-account.component.html
@@ -1,7 +1,5 @@
 <div class="container">
-
   <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
-
     <ng-template matStepperIcon="number">
       <fa-icon icon="pencil-alt" size="sm"></fa-icon>
     </ng-template>
@@ -23,31 +21,27 @@
     </ng-template>
 
     <mat-step [stepControl]="sharesAccountDetailsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
 
       <mifosx-shares-account-details-step
         [sharesAccountTemplate]="sharesAccountAndTemplate"
         (sharesAccountProductTemplate)="setTemplate($event)"
       >
       </mifosx-shares-account-details-step>
-
     </mat-step>
 
     <mat-step [stepControl]="sharesAccountTermsForm">
-
-      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
 
       <mifosx-shares-account-terms-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
-        [sharesAccountTemplate]="sharesAccountAndTemplate">
+        [sharesAccountTemplate]="sharesAccountAndTemplate"
+      >
       </mifosx-shares-account-terms-step>
-
     </mat-step>
 
     <mat-step>
-
-      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
 
       <mifosx-shares-account-charges-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -55,12 +49,10 @@
         [currencyCode]="sharesAccountTermsForm.get('currencyCode')"
       >
       </mifosx-shares-account-charges-step>
-
     </mat-step>
 
     <mat-step *ngIf="sharesAccountFormValidAndNotPristine" completed>
-
-      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 
       <mifosx-shares-account-preview-step
         [sharesAccountProductTemplate]="sharesAccountProductTemplate"
@@ -70,9 +62,6 @@
         (submitEvent)="submit()"
       >
       </mifosx-shares-account-preview-step>
-
     </mat-step>
-
   </mat-horizontal-stepper>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html b/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
index 3dc3b0f7d1..d9ad7f2138 100644
--- a/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
@@ -1,30 +1,34 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="activateSharesAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <mat-form-field fxFlex (click)="activatedDatePicker.open()">
-            <mat-label>{{'labels.inputs.Activated On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedDatePicker" required formControlName="activatedDate">
-            <mat-datepicker-toggle matSuffix [for]="activatedDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #activatedDatePicker></mat-datepicker>
-            <mat-error *ngIf="activateSharesAccountForm.controls.activatedDate.hasError('required')">
-              {{'labels.inputs.Activated On Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
-
+        <mat-form-field fxFlex (click)="activatedDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="activatedDatePicker"
+            required
+            formControlName="activatedDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="activatedDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #activatedDatePicker></mat-datepicker>
+          <mat-error *ngIf="activateSharesAccountForm.controls.activatedDate.hasError('required')">
+            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!activateSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!activateSharesAccountForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
index 4e5f9d04a9..37bff76582 100644
--- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
+++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
@@ -1,47 +1,50 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="applySharesForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="requestedDatePicker.open()">
-            <mat-label>{{'labels.inputs.Request Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="requestedDatePicker" required formControlName="requestedDate">
+            <mat-label>{{ 'labels.inputs.Request Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="requestedDatePicker"
+              required
+              formControlName="requestedDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="requestedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #requestedDatePicker></mat-datepicker>
             <mat-error *ngIf="applySharesForm.controls.requestedDate.hasError('required')">
-              {{'labels.inputs.Request Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Request Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Total No. of Shares' | translate}}</mat-label>
-            <input matInput required formControlName="requestedShares">
+            <mat-label>{{ 'labels.inputs.Total No. of Shares' | translate }}</mat-label>
+            <input matInput required formControlName="requestedShares" />
             <mat-error *ngIf="applySharesForm.controls.requestedShares.hasError('required')">
-              {{'labels.inputs.Requested Shares' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Requested Shares' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Current Price' | translate}}</mat-label>
-            <input matInput required formControlName="unitPrice">
+            <mat-label>{{ 'labels.inputs.Current Price' | translate }}</mat-label>
+            <input matInput required formControlName="unitPrice" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!applySharesForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!applySharesForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html b/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
index bd573ff203..c12871862a 100644
--- a/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
@@ -1,39 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="approveSharesAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="approvedDatePicker.open()">
-            <mat-label>{{'labels.inputs.Approved On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedDatePicker" required formControlName="approvedDate">
+            <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="approvedDatePicker"
+              required
+              formControlName="approvedDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedDatePicker></mat-datepicker>
             <mat-error *ngIf="approveSharesAccountForm.controls.approvedDate.hasError('required')">
-              {{'labels.inputs.Approved On Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Approved On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!approveSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!approveSharesAccountForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html b/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
index 87918a0bf0..ec01b7ddb8 100644
--- a/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Approve Share' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Approve Share' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to approve share with id' | translate}}: {{ data.shareId }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to approve share with id' | translate }}: {{ data.shareId }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ approve: true }">{{'labels.buttons.Submit' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ approve: true }">
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html b/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html
index 024c006940..5287e2b214 100644
--- a/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html
@@ -1,48 +1,49 @@
 <div class="container">
-
   <div class="mat-elevation-z8">
-
     <table #sharesTable mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Transaction Date' | translate}} </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate | dateFormat }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td mat-cell *matCellDef="let share">{{ share.purchasedDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Total Shares' | translate}} </th>
-        <td mat-cell *matCellDef="let share"> {{ share.numberOfShares }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Total Shares' | translate }}</th>
+        <td mat-cell *matCellDef="let share">{{ share.numberOfShares }}</td>
       </ng-container>
 
       <ng-container matColumnDef="redeemedPrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Purchased/Redeemed Price' | translate}} </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedPrice }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Purchased/Redeemed Price' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let share">{{ share.purchasedPrice }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Status' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let share">
-          <i class="fa fa-stop" [ngClass]="share.status.code|statusLookup" [matTooltip]="share.status.value"></i>
+          <i class="fa fa-stop" [ngClass]="share.status.code | statusLookup" [matTooltip]="share.status.value"></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="approve">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Confirm Approve' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Confirm Approve' | translate }}</th>
         <td mat-cell *matCellDef="let share">
-          <button class="share-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Approve Share' | translate}}"
-            (click)="approve(share.id)">
+          <button
+            class="share-action-button"
+            mat-raised-button
+            color="accent"
+            matTooltip="{{ 'tooltips.Approve Share' | translate }}"
+            (click)="approve(share.id)"
+          >
             <i class="fa fa-check"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html b/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html
index 02d7a19c15..9bf567c6ce 100644
--- a/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html
@@ -1,39 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="closeSharesAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="closedDatePicker.open()">
-            <mat-label>{{'labels.inputs.Closed On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required formControlName="closedDate">
+            <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="closedDatePicker"
+              required
+              formControlName="closedDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeSharesAccountForm.controls.closedDate.hasError('required')">
-              {{'labels.inputs.Closed On Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html b/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html
index 68a3c4bc9b..96b444d0b7 100644
--- a/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html
+++ b/src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html
@@ -1,45 +1,50 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="redeemSharesForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="requestedDatePicker.open()">
-            <mat-label>{{'labels.inputs.Request Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="requestedDatePicker" required formControlName="requestedDate">
+            <mat-label>{{ 'labels.inputs.Request Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="requestedDatePicker"
+              required
+              formControlName="requestedDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="requestedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #requestedDatePicker></mat-datepicker>
             <mat-error *ngIf="redeemSharesForm.controls.requestedDate.hasError('required')">
-              {{'labels.inputs.Request Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Request Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Total No. of Shares' | translate}}</mat-label>
-            <input matInput required formControlName="requestedShares">
+            <mat-label>{{ 'labels.inputs.Total No. of Shares' | translate }}</mat-label>
+            <input matInput required formControlName="requestedShares" />
             <mat-error *ngIf="redeemSharesForm.controls.requestedShares.hasError('required')">
-              {{'labels.inputs.Requested Shares' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Requested Shares' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{"labels.inputs.Current Price" | translate}}</mat-label>
-            <input matInput required formControlName="unitPrice">
+            <mat-label>{{ 'labels.inputs.Current Price' | translate }}</mat-label>
+            <input matInput required formControlName="unitPrice" />
           </mat-form-field>
         </div>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!redeemSharesForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!redeemSharesForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html b/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html
index 2692a41add..eb3053bfef 100644
--- a/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html
@@ -1,39 +1,41 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="rejectSharesAccountForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field (click)="rejectedDatePicker.open()">
-            <mat-label>{{'labels.inputs.Rejected On Date' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required formControlName="rejectedDate">
+            <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="rejectedDatePicker"
+              required
+              formControlName="rejectedDate"
+            />
             <mat-datepicker-toggle matSuffix [for]="rejectedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectSharesAccountForm.controls.rejectedDate.hasError('required')">
-              {{'labels.inputs.Rejected On Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Rejected On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Note' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html b/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html
index 8fcf3eb194..5579e4ca3b 100644
--- a/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html
+++ b/src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html
@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{'labels.heading.Reject Share' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Reject Share' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'labels.text.Are you sure you want to reject share with id' | translate}}: {{ data.shareId }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to reject share with id' | translate }}: {{ data.shareId }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">{{'labels.buttons.Submit' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html b/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html
index a430a8a4fc..3d64e9a7da 100644
--- a/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html
+++ b/src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html
@@ -1,48 +1,49 @@
 <div class="container">
-
   <div class="mat-elevation-z8">
-
     <table #sharesTable mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Transaction Date' | translate}} </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate | dateFormat }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td mat-cell *matCellDef="let share">{{ share.purchasedDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Total Shares' | translate}} </th>
-        <td mat-cell *matCellDef="let share"> {{ share.numberOfShares }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Total Shares' | translate }}</th>
+        <td mat-cell *matCellDef="let share">{{ share.numberOfShares }}</td>
       </ng-container>
 
       <ng-container matColumnDef="redeemedPrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Purchased/Redeemed Price' | translate}} </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedPrice }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Purchased/Redeemed Price' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let share">{{ share.purchasedPrice }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Status' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let share">
-          <i class="fa fa-stop" [ngClass]="share.status.code|statusLookup" [matTooltip]="share.status.value"></i>
+          <i class="fa fa-stop" [ngClass]="share.status.code | statusLookup" [matTooltip]="share.status.value"></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="reject">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Confirm Reject' | translate}}t </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Confirm Reject' | translate }}t</th>
         <td mat-cell *matCellDef="let share">
-          <button class="share-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Reject Share' | translate}}"
-            (click)="reject(share.id)">
+          <button
+            class="share-action-button"
+            mat-raised-button
+            color="warn"
+            matTooltip="{{ 'tooltips.Reject Share' | translate }}"
+            (click)="reject(share.id)"
+          >
             <i class="fa fa-times"></i>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/shares/shares-account-actions/shares-account-actions.component.html b/src/app/shares/shares-account-actions/shares-account-actions.component.html
index d4ad09118a..be861323e4 100644
--- a/src/app/shares/shares-account-actions/shares-account-actions.component.html
+++ b/src/app/shares/shares-account-actions/shares-account-actions.component.html
@@ -6,4 +6,4 @@
 <mifosx-apply-shares *ngIf="actions['Apply Additional Shares']"></mifosx-apply-shares>
 <mifosx-redeem-shares *ngIf="actions['Redeem Shares']"></mifosx-redeem-shares>
 <mifosx-approve-shares *ngIf="actions['Approve Additional Shares']"></mifosx-approve-shares>
-<mifosx-reject-shares *ngIf="actions['Reject Additional Shares']"></mifosx-reject-shares>
\ No newline at end of file
+<mifosx-reject-shares *ngIf="actions['Reject Additional Shares']"></mifosx-reject-shares>
diff --git a/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html b/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html
index 66cb215238..45370d689d 100644
--- a/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html
@@ -1,28 +1,20 @@
 <div class="container">
-
   <mat-card>
-
     <form (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div>
-
           <p class="mat-typography confirm-text">
-            {{'labels.text.Undo approval of shares account with ID' | translate}}: {{accountId}} ?
+            {{ 'labels.text.Undo approval of shares account with ID' | translate }}: {{ accountId }} ?
           </p>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="warn">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html b/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
index 040624337d..8b8013d787 100644
--- a/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
@@ -1,9 +1,11 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
-      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value" [value]="charge">
+      <mat-option
+        *ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
+        [value]="charge"
+      >
         {{ charge.name }}
       </mat-option>
     </mat-select>
@@ -12,28 +14,33 @@
   <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>
-      {{'labels.buttons.Add' | translate}}
+      {{ 'labels.buttons.Add' | translate }}
     </button>
   </div>
 
-  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-
+  <table
+    fxFlex="98%"
+    class="mat-elevation-z1"
+    mat-table
+    [dataSource]="chargesDataSource"
+    [hidden]="chargesDataSource.length === 0"
+  >
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+        {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount || charge.amountOrPercentage }}
         <button mat-icon-button color="primary" (click)="editCharge(charge)">
@@ -43,14 +50,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+        {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </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>
@@ -59,19 +66,17 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate}}
+    {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>
diff --git a/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html b/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
index bf1862e8cc..7e5bfc5cdc 100644
--- a/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
@@ -1,46 +1,50 @@
 <form [formGroup]="sharesAccountDetailsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Product Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-      <mat-label>{{'labels.inputs.Submitted On' | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
-        formControlName="submittedDate" required>
+      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        {{'labels.inputs.Submission Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.External ID' | translate}}</mat-label>
-      <input matInput formControlName="externalId">
+      <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
+      <input matInput formControlName="externalId" />
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
index 039ae4c362..d44f99ca6f 100644
--- a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
@@ -1,132 +1,145 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Product' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccount.productId | find:sharesAccountTemplate.productOptions:'id':'name' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
+    <span fxFlex="60%">{{ sharesAccount.productId | find: sharesAccountTemplate.productOptions : 'id' : 'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Submitted On' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
     <span fxFlex="60%">{{ sharesAccount.submittedDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.External Id' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
     <span fxFlex="60%" *ngIf="sharesAccount.externalId">
-      <mifosx-external-identifier externalId="{{sharesAccount.externalId}}"></mifosx-external-identifier>
+      <mifosx-external-identifier externalId="{{ sharesAccount.externalId }}"></mifosx-external-identifier>
     </span>
     <span fxFlex="60%" *ngIf="!sharesAccount.externalId">
-      {{'labels.inputs.Unassigned' | translate}}
+      {{ 'labels.inputs.Unassigned' | translate }}
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyCode').value | find:[sharesAccountProductTemplate.currency]:'code':'displayLabel' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
+    <span fxFlex="60%">{{
+      sharesAccountTermsForm.get('currencyCode').value
+        | find: [sharesAccountProductTemplate.currency] : 'code' : 'displayLabel'
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Total Number of Shares' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
     <span fxFlex="60%">{{ sharesAccount.requestedShares | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Current Price' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Current Price' | translate }}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Amount' | translate}}</span>
-    <span fxFlex="60%">{{ (sharesAccount.requestedShares * sharesAccountTermsForm.get('unitPrice').value) | formatNumber }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Amount' | translate }}</span>
+    <span fxFlex="60%">{{
+      sharesAccount.requestedShares * sharesAccountTermsForm.get('unitPrice').value | formatNumber
+    }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Default Savings Account' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccount.savingsAccountId | find:sharesAccountProductTemplate.clientSavingsAccounts:'id':'accountNo' }}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Default Savings Account' | translate }}</span>
+    <span fxFlex="60%">{{
+      sharesAccount.savingsAccountId | find: sharesAccountProductTemplate.clientSavingsAccounts : 'id' : 'accountNo'
+    }}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.minimumActivePeriod">
-    <span fxFlex="40%">{{'labels.inputs.Minimum Active Period' | translate}}</span>
-    <span fxFlex="60%">{{sharesAccount.minimumActivePeriod}}&nbsp;{{sharesAccount.minimumActivePeriodFrequencyType | find:sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value' | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
+    <span fxFlex="60%"
+      >{{ sharesAccount.minimumActivePeriod }}&nbsp;{{
+        sharesAccount.minimumActivePeriodFrequencyType
+          | find: sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions : 'id' : 'value'
+          | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}</span>
-    <span fxFlex="60%">{{sharesAccount.lockinPeriodFrequency}}&nbsp;{{sharesAccount.lockinPeriodFrequencyType | find:sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value' | translateKey:'catalogs'}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+    <span fxFlex="60%"
+      >{{ sharesAccount.lockinPeriodFrequency }}&nbsp;{{
+        sharesAccount.lockinPeriodFrequencyType
+          | find: sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
+          | translateKey: 'catalogs'
+      }}</span
+    >
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Application Date' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Application Date' | translate }}</span>
     <span fxFlex="60%">{{ sharesAccount.applicationDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Allow dividends for inactive clients' | translate}}</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
     <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-
-    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="sharesAccount.charges">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.name' | translate}} </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> {{'labels.inputs.Type' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
+          {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount || charge.amountOrPercentage }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
+          {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
 
 <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>
-    {{'labels.buttons.Previous' | translate}}
+    {{ 'labels.buttons.Previous' | translate }}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate}}
+    {{ 'labels.buttons.Cancel' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{'labels.buttons.Submit' | translate}}
+    {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>
diff --git a/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html b/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
index 86119bacf8..d00496306e 100644
--- a/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
@@ -1,96 +1,109 @@
 <form [formGroup]="sharesAccountTermsForm">
-
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
-      <input matInput formControlName="currencyCode">
+      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <input matInput formControlName="currencyCode" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Current Price" | translate}}</mat-label>
-      <input type="number" matInput formControlName="unitPrice">
+      <mat-label>{{ 'labels.inputs.Current Price' | translate }}</mat-label>
+      <input type="number" matInput formControlName="unitPrice" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Total Number of Shares' | translate}}</mat-label>
-      <input type="number" matInput formControlName="requestedShares" required>
+      <mat-label>{{ 'labels.inputs.Total Number of Shares' | translate }}</mat-label>
+      <input type="number" matInput formControlName="requestedShares" required />
       <mat-error>
-        {{'labels.inputs.Total Number of Shares' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Total Number of Shares' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-    <span fxFlex="48%" *ngIf="currency">{{ calculateCurrenValue() | currency:currency.code:'symbol-narrow':'1.2-2' }}</span>
+    <span fxFlex="48%" *ngIf="currency">{{
+      calculateCurrenValue() | currency: currency.code : 'symbol-narrow' : '1.2-2'
+    }}</span>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Default Savings Account' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
       <mat-select formControlName="savingsAccountId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
           {{ account.accountNo }} - {{ account.savingsProductName }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{'labels.inputs.Default Savings Account' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Default Savings Account' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="applicationDatePicker.open()">
-      <mat-label>{{"labels.inputs.Application Date" | translate}}</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="applicationDatePicker"
-        formControlName="applicationDate" required>
+      <mat-label>{{ 'labels.inputs.Application Date' | translate }}</mat-label>
+      <input
+        matInput
+        [min]="minDate"
+        [max]="maxDate"
+        [matDatepicker]="applicationDatePicker"
+        formControlName="applicationDate"
+        required
+      />
       <mat-datepicker-toggle matSuffix [for]="applicationDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #applicationDatePicker></mat-datepicker>
       <mat-error>
-        {{ "labels.inputs.Application Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+        {{ 'labels.inputs.Application Date' | translate }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" fxFlex="48%">
-      {{'labels.inputs.Allow dividends for inactive clients' | translate}}
+      {{ 'labels.inputs.Allow dividends for inactive clients' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Minimum Active Period' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Active Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="minimumActivePeriod">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="minimumActivePeriod" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="minimumActivePeriodFrequencyType">
-        <mat-option *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData" [value]="minimumActivePeriodFrequencyType.id">
-          {{ minimumActivePeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData"
+          [value]="minimumActivePeriodFrequencyType.id"
+        >
+          {{ minimumActivePeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Lock-in Period' | translate}}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
-      <input type="number" matInput formControlName="lockinPeriodFrequency">
+      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
-        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
+        <mat-option
+          *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id"
+        >
+          {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate}}
+      {{ 'labels.buttons.Previous' | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate}}
+      {{ 'labels.buttons.Next' | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
-
 </form>
diff --git a/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html b/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html
index d85a4935b2..072b2a4c47 100644
--- a/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/shares/shares-account-view/charges-tab/charges-tab.component.html
@@ -1,73 +1,102 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{'labels.heading.All Charges' | translate}}</h3>
+    <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.name' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fee/Penalty' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? 'Penalty' : 'Fee' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Penalty' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.penalty === true ? 'Penalty' : 'Fee' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Due At' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Due At' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Calculation Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value | translateKey:'catalogs'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amount | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Paid' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountPaid | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountPaid | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Waived' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountWaived | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountWaived | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Outstanding' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amountOutstanding | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="sharesAccountData.status.value === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate}}"
-              *mifosxHasPermission="'UPDATE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
+              *mifosxHasPermission="'UPDATE_SHARESACCOUNTCHARGE'"
+              (click)="routeEdit($event); editCharge(charge)"
+            >
               <i class="fa fa-pencil"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate}}"
-              *mifosxHasPermission="'DELETE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="warn"
+              matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
+              *mifosxHasPermission="'DELETE_SHARESACCOUNTCHARGE'"
+              (click)="routeEdit($event); deleteCharge(charge.id)"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </span>
           <span *ngIf="sharesAccountData.status.value === 'Active'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate}}"
-              *mifosxHasPermission="'PAY_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
+              *mifosxHasPermission="'PAY_SHARESACCOUNTCHARGE'"
+              (click)="routeEdit($event); payCharge(charge.id)"
+            >
               <i class="fa fa-dollar"></i>
             </button>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate}}"
-              *mifosxHasPermission="'WAIVE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
+              *mifosxHasPermission="'WAIVE_SHARESACCOUNTCHARGE'"
+              (click)="routeEdit($event); waiveCharge(charge.id)"
+            >
               <i class="fa fa-flag"></i>
             </button>
           </span>
@@ -75,10 +104,7 @@ <h3>{{'labels.heading.All Charges' | translate}}</h3>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html b/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html
index 630b9ab5ee..9d120e3b8c 100644
--- a/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html
+++ b/src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html
@@ -1,38 +1,34 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{'labels.inputs.Dividends' | translate}}</h3>
+    <h3>{{ 'labels.inputs.Dividends' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
-    <table mat-table [dataSource]="dataSource" >
-
+    <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Transaction Date' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{dividend.postedDate | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.postedDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{dividend.amount | currency:shareAccountData.currency.code:'symbol-narrow':'1.2-2'}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">
+          {{ dividend.amount | currency: shareAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionReference">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Transaction Reference' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{dividend.savingsTransactionId}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Reference' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.savingsTransactionId }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Status' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{ 'labels.status.' + dividend.status.value | translate}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let dividend">{{ 'labels.status.' + dividend.status.value | translate }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/shares/shares-account-view/general-tab/general-tab.component.html b/src/app/shares/shares-account-view/general-tab/general-tab.component.html
index 744d3cb1fd..3f6b122389 100644
--- a/src/app/shares/shares-account-view/general-tab/general-tab.component.html
+++ b/src/app/shares/shares-account-view/general-tab/general-tab.component.html
@@ -1,65 +1,63 @@
 <div class="tab-container mat-typography">
-
-    <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-        <div fxFlex="49%">
-            <h4 class="table-headers">{{'labels.heading.Shares Details' | translate}}</h4>
-            <table>
-                <tbody>
-                    <tr>
-                        <td>{{'labels.inputs.Activated On' | translate}}</td>
-                        <td *ngIf="sharesAccountData.timeline.activatedDate">
-                            {{sharesAccountData.timeline.activatedDate | dateFormat}}
-                        </td>
-                        <td *ngIf="!sharesAccountData.timeline.activatedDate">
-                            {{ 'labels.text.Not Activated' | translate}}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{'labels.inputs.Currency' | translate}}</td>
-                        <td>{{sharesAccountData.currency.name}} [{{sharesAccountData.currency.code}}]</td>
-                    </tr>
-                    <tr>
-                        <td>{{'labels.inputs.External Id' | translate}}</td>
-                        <td *ngIf="sharesAccountData.externalId">
-                            <mifosx-external-identifier
-                                externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
-                        </td>
-                        <td *ngIf="!sharesAccountData.externalId">
-                            {{'labels.inputs.Unassigned' | translate}}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{'labels.inputs.Linked Savings Account(Dividend Posting)' | translate}}</td>
-                        <td *ngIf="sharesAccountData.savingsAccountNumber">
-                            <mifosx-account-number accountType="2"
-                                clientId="{{sharesAccountData.clientId}}" accountId="{{sharesAccountData.savingsAccountId}}"
-                                accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
-                        </td>
-                        <td *ngIf="!sharesAccountData.savingsAccountNumber">
-                            {{'labels.inputs.Unassigned' | translate}}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <div fxFlex="49%">
-            <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
-            <table>
-                <tbody>
-                    <tr>
-                        <td>{{'labels.inputs.Pending for Approval Shares' | translate}}</td>
-                        <td class="r-amount">{{sharesAccountData.summary.totalPendingForApprovalShares | formatNumber}}</td>
-                    </tr>
-                    <tr>
-                        <td>{{'labels.inputs.Approved Shares' | translate}}</td>
-                        <td class="r-amount">{{sharesAccountData.summary.totalApprovedShares | formatNumber}}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
+  <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div fxFlex="49%">
+      <h4 class="table-headers">{{ 'labels.heading.Shares Details' | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.Activated On' | translate }}</td>
+            <td *ngIf="sharesAccountData.timeline.activatedDate">
+              {{ sharesAccountData.timeline.activatedDate | dateFormat }}
+            </td>
+            <td *ngIf="!sharesAccountData.timeline.activatedDate">
+              {{ 'labels.text.Not Activated' | translate }}
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Currency' | translate }}</td>
+            <td>{{ sharesAccountData.currency.name }} [{{ sharesAccountData.currency.code }}]</td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.External Id' | translate }}</td>
+            <td *ngIf="sharesAccountData.externalId">
+              <mifosx-external-identifier externalId="{{ sharesAccountData.externalId }}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!sharesAccountData.externalId">
+              {{ 'labels.inputs.Unassigned' | translate }}
+            </td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Linked Savings Account(Dividend Posting)' | translate }}</td>
+            <td *ngIf="sharesAccountData.savingsAccountNumber">
+              <mifosx-account-number
+                accountType="2"
+                clientId="{{ sharesAccountData.clientId }}"
+                accountId="{{ sharesAccountData.savingsAccountId }}"
+                accountNo="{{ sharesAccountData.savingsAccountNumber }}"
+              ></mifosx-account-number>
+            </td>
+            <td *ngIf="!sharesAccountData.savingsAccountNumber">
+              {{ 'labels.inputs.Unassigned' | translate }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
 
-</div>
\ No newline at end of file
+    <div fxFlex="49%">
+      <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{ 'labels.inputs.Pending for Approval Shares' | translate }}</td>
+            <td class="r-amount">{{ sharesAccountData.summary.totalPendingForApprovalShares | formatNumber }}</td>
+          </tr>
+          <tr>
+            <td>{{ 'labels.inputs.Approved Shares' | translate }}</td>
+            <td class="r-amount">{{ sharesAccountData.summary.totalApprovedShares | formatNumber }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shares/shares-account-view/shares-account-view.component.html b/src/app/shares/shares-account-view/shares-account-view.component.html
index c7dee47ee7..7f78766eff 100644
--- a/src/app/shares/shares-account-view/shares-account-view.component.html
+++ b/src/app/shares/shares-account-view/shares-account-view.component.html
@@ -1,48 +1,56 @@
 <mat-card class="account-card">
-
   <mat-card-header fxLayout="column" class="header">
-
     <mat-card-title-group class="header-title-group">
-
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" matTooltip="{{ 'tooltips.Shares Account' | translate}}"
-            src="assets/images/shares_account_placeholder.png">
+          <img
+            mat-card-md-image
+            class="profile-image"
+            matTooltip="{{ 'tooltips.Shares Account' | translate }}"
+            src="assets/images/shares_account_placeholder.png"
+          />
         </div>
       </div>
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
           <div fxLayout="row" fxLayout.lt-md="column">
-
             <div fxFlex="60%">
               <h3>
-                <i class="fa fa-stop" [ngClass]="sharesAccountData.status.code | statusLookup"
-                  [matTooltip]="sharesAccountData.status.value"></i>
-                <span class="m-r-5">{{'labels.inputs.Share Product' | translate}} :</span>
-                <span class="m-r-5"><mifosx-long-text
-                    textValue="{{sharesAccountData.productName}}"></mifosx-long-text></span>
-                <mifosx-account-number accountNo="{{sharesAccountData.accountNo}}"
-                  display="left"></mifosx-account-number>
+                <i
+                  class="fa fa-stop"
+                  [ngClass]="sharesAccountData.status.code | statusLookup"
+                  [matTooltip]="sharesAccountData.status.value"
+                ></i>
+                <span class="m-r-5">{{ 'labels.inputs.Share Product' | translate }} :</span>
+                <span class="m-r-5"
+                  ><mifosx-long-text textValue="{{ sharesAccountData.productName }}"></mifosx-long-text
+                ></span>
+                <mifosx-account-number
+                  accountNo="{{ sharesAccountData.accountNo }}"
+                  display="left"
+                ></mifosx-account-number>
               </h3>
               <span class="shares-overview">
-                <span class="m-r-10">{{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}
-                  :</span>{{sharesAccountData.clientName || sharesAccountData.groupName}}
-                  <span class="m-l-10" *ngIf="sharesAccountData.clientAccountNo">
-                    <mifosx-account-number accountNo="{{sharesAccountData.clientAccountNo}}"></mifosx-account-number>
-                  </span>
+                <span class="m-r-10"
+                  >{{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }} :</span
+                >{{ sharesAccountData.clientName || sharesAccountData.groupName }}
+                <span class="m-l-10" *ngIf="sharesAccountData.clientAccountNo">
+                  <mifosx-account-number accountNo="{{ sharesAccountData.clientAccountNo }}"></mifosx-account-number>
+                </span>
               </span>
               <div>
                 <table class="account-overview">
                   <tbody>
                     <tr>
-                      <td>{{"labels.inputs.Current Market Price" | translate}} :</td>
-                      <td>{{sharesAccountData.currentMarketPrice | formatNumber}}</td>
+                      <td>{{ 'labels.inputs.Current Market Price' | translate }} :</td>
+                      <td>{{ sharesAccountData.currentMarketPrice | formatNumber }}</td>
                     </tr>
                     <tr *ngIf="sharesAccountData.lockinPeriod">
-                      <td>{{"labels.inputs.Lockin Period" | translate}} :</td>
+                      <td>{{ 'labels.inputs.Lockin Period' | translate }} :</td>
                       <td>
-                        {{sharesAccountData.lockinPeriod}} {{sharesAccountData.lockPeriodTypeEnum.value | translateKey:'catalogs'}}
+                        {{ sharesAccountData.lockinPeriod }}
+                        {{ sharesAccountData.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}
                       </td>
                     </tr>
                   </tbody>
@@ -53,68 +61,90 @@ <h3>
             <span fxFlex="auto"></span>
 
             <div fxFlex="4%">
-              <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Share account actions"
-                yPosition="below" *ngIf="buttonConfig.singleButtons.length > 0">
+              <button
+                mat-icon-button
+                [matMenuTriggerFor]="accountMenu"
+                aria-label="Share account actions"
+                yPosition="below"
+                *ngIf="buttonConfig.singleButtons.length > 0"
+              >
                 <mat-icon matListIcon class="actions-menu">
                   <fa-icon icon="bars" size="sm"></fa-icon>
                 </mat-icon>
               </button>
             </div>
           </div>
-
         </mat-card-title>
       </div>
-
     </mat-card-title-group>
 
     <mat-menu #accountMenu="matMenu">
-
       <ng-container *ngFor="let item of buttonConfig.singleButtons">
         <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
           <mat-icon matListIcon>
-            <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+            <fa-icon icon="{{ item.icon }}" size="sm"></fa-icon>
           </mat-icon>
-          <span>{{'labels.menus.' + item.name | translate}}</span>
+          <span>{{ 'labels.menus.' + item.name | translate }}</span>
         </button>
       </ng-container>
 
       <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.menus.More' | translate }}</button>
         <mat-menu #More="matMenu">
           <span *ngFor="let option of buttonConfig.options">
-            <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
-              (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+            <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">
+              {{ 'labels.menus.' + option.name | translate }}
+            </button>
           </span>
         </mat-menu>
       </ng-container>
-
     </mat-menu>
-
   </mat-card-header>
 
   <mat-card-content class="content">
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-        [active]="general.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
-        {{'labels.inputs.General' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+        *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'"
+      >
+        {{ 'labels.inputs.General' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-        [active]="transactions.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
-        {{'labels.inputs.Transactions' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./transactions']"
+        routerLinkActive
+        #transactions="routerLinkActive"
+        [active]="transactions.isActive"
+        *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'"
+      >
+        {{ 'labels.inputs.Transactions' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-        [active]="charges.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTCHARGE'">
-        {{'labels.inputs.Charges' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./charges']"
+        routerLinkActive
+        #charges="routerLinkActive"
+        [active]="charges.isActive"
+        *mifosxHasPermission="'READ_SHAREACCOUNTCHARGE'"
+      >
+        {{ 'labels.inputs.Charges' | translate }}
       </a>
-      <a mat-tab-link [routerLink]="['./dividends']" routerLinkActive #dividends="routerLinkActive"
-        [active]="dividends.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTDIVIDENDS'">
-        {{'labels.inputs.Dividends' | translate}}
+      <a
+        mat-tab-link
+        [routerLink]="['./dividends']"
+        routerLinkActive
+        #dividends="routerLinkActive"
+        [active]="dividends.isActive"
+        *mifosxHasPermission="'READ_SHAREACCOUNTDIVIDENDS'"
+      >
+        {{ 'labels.inputs.Dividends' | translate }}
       </a>
     </nav>
 
     <router-outlet></router-outlet>
-
   </mat-card-content>
-
 </mat-card>
diff --git a/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html b/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html
index 42a1c5beef..cc62bfb95a 100644
--- a/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html
@@ -1,48 +1,53 @@
 <div class="tab-container mat-typography">
-
   <div class="m-b-10">
-    <h3>{{'labels.heading.All Transactions' | translate}}</h3>
+    <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
-
     <table mat-table [dataSource]="dataSource">
-
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Transaction Date' | translate}} </th>
-        <td mat-cell *matCellDef="let transaction"> {{transaction.purchasedDate | dateFormat}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.purchasedDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Transaction Type' | translate}} </th>
-        <td mat-cell *matCellDef="let transaction"> {{transaction.type.value}} {{transaction.type.value !== "Charge Payment" ? ('(' + transaction.status.value + ')') : ''}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">
+          {{ transaction.type.value }}
+          {{ transaction.type.value !== 'Charge Payment' ? '(' + transaction.status.value + ')' : '' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Total Shares' | translate}} </th>
-        <td mat-cell *matCellDef="let transaction"> {{transaction.numberOfShares}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Total Shares' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.numberOfShares }}</td>
       </ng-container>
 
       <ng-container matColumnDef="purchasedOrRedeemedPrice">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Purhcased/Redeemed Price' | translate}} </th>
-        <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.purchasedPrice}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Purhcased/Redeemed Price' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">
+          {{ shareAccountData.currency.displaySymbol }}&nbsp;{{ transaction.purchasedPrice }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeAmount">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Charge Amount' | translate}} </th>
-        <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.type.value === "Charge Payment" ? transaction.amount : transaction.chargeAmount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">
+          {{ shareAccountData.currency.displaySymbol }}&nbsp;{{
+            transaction.type.value === 'Charge Payment' ? transaction.amount : transaction.chargeAmount
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="amountRecievedOrReturned">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Recieved/Returned' | translate}} </th>
-        <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.amount}}</td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Recieved/Returned' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">
+          {{ shareAccountData.currency.displaySymbol }}&nbsp;{{ transaction.amount }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/system/account-number-preferences/account-number-preferences.component.html b/src/app/system/account-number-preferences/account-number-preferences.component.html
index 498bddfe54..130b5accf2 100644
--- a/src/app/system/account-number-preferences/account-number-preferences.component.html
+++ b/src/app/system/account-number-preferences/account-number-preferences.component.html
@@ -1,35 +1,33 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'ADD_PREFERENCES'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Preference' | translate}}
+    {{ 'labels.buttons.Create Preference' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="accountType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Account Number Preferences' | translate}} </th>
-        <td mat-cell *matCellDef="let accountNumberPreference"> {{ accountNumberPreference.accountType.value | translateKey:'catalogs' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Account Number Preferences' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let accountNumberPreference">
+          {{ accountNumberPreference.accountType.value | translateKey: 'catalogs' }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html
index dd9d6eda16..224d03101d 100644
--- a/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html
+++ b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html
@@ -1,45 +1,48 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountNumberPreferenceForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Account Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="accountType">
-              <mat-option *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions" [value]="accountType.id">
-                {{ accountType.value | translateKey:'catalogs' }}
+              <mat-option
+                *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions"
+                [value]="accountType.id"
+              >
+                {{ accountType.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
-              {{'labels.inputs.Account Type' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Prefix Field' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Prefix Field' | translate }}</mat-label>
             <mat-select formControlName="prefixType">
               <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
-                {{ prefixType.value}}
+                {{ prefixType.value }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!accountNumberPreferenceForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTNUMBERFORMAT'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountNumberPreferenceForm.valid"
+          *mifosxHasPermission="'CREATE_ACCOUNTNUMBERFORMAT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html
index 7e9470a734..7181991454 100644
--- a/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html
+++ b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html
@@ -1,46 +1,48 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="accountNumberPreferenceForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Account Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="accountType">
-              <mat-option *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions" [value]="accountType.id">
-                {{ accountType.value | translateKey:'catalogs' }}
+              <mat-option
+                *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions"
+                [value]="accountType.id"
+              >
+                {{ accountType.value | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
-              {{'labels.inputs.Account Type' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Prefix Field' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Prefix Field' | translate }}</mat-label>
             <mat-select formControlName="prefixType">
               <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
                 {{ prefixType.value }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary"
-          [disabled]="!accountNumberPreferenceForm.valid || accountNumberPreferenceForm.pristine" *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!accountNumberPreferenceForm.valid || accountNumberPreferenceForm.pristine"
+          *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
index 890d6acbd1..12e060b8e9 100644
--- a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
+++ b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
@@ -1,45 +1,35 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_ACCOUNTNUMBERFORMAT'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Account Type' | translate}}
+          {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ accountNumberPreferenceData.accountType.value | translateKey:'catalogs' }}
+          {{ accountNumberPreferenceData.accountType.value | translateKey: 'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="accountNumberPreferenceData.prefixType">
-          {{'labels.inputs.Prefix Type' | translate}}
+          {{ 'labels.inputs.Prefix Type' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="accountNumberPreferenceData.prefixType">
           {{ accountNumberPreferenceData.prefixType.value }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/audit-trails/audit-trails.component.html b/src/app/system/audit-trails/audit-trails.component.html
index 28e464a13e..2c397532c5 100644
--- a/src/app/system/audit-trails/audit-trails.component.html
+++ b/src/app/system/audit-trails/audit-trails.component.html
@@ -1,80 +1,92 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="downloadCSV()">
     <fa-icon icon="file" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Download CSV' | translate}}
+    {{ 'labels.buttons.Download CSV' | translate }}
   </button>
 </div>
 
 <div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Resource ID' | translate}}</mat-label>
-    <input matInput [formControl]="resourceId">
+    <mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label>
+    <input matInput [formControl]="resourceId" />
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Status' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
     <mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')">
-      <mat-option *ngFor="let processingResult of auditTrailSearchTemplateData.processingResults" [value]="processingResult.id">
+      <mat-option
+        *ngFor="let processingResult of auditTrailSearchTemplateData.processingResults"
+        [value]="processingResult.id"
+      >
         {{ processingResult.processingResult }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.User' | translate}}</mat-label>
-    <input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.User' | translate }}</mat-label>
+    <input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Action' | translate}}</mat-label>
-    <input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
+    <input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
-    <input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete">
+    <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
+    <input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="48%">
-    <mat-label>{{'labels.inputs.Checker' | translate}}</mat-label>
-    <input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete">
+    <mat-label>{{ 'labels.inputs.Checker' | translate }}</mat-label>
+    <input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete" />
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
-    <mat-label>{{'labels.inputs.Maker From Date' | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" [formControl]="fromDate">
+    <mat-label>{{ 'labels.inputs.Maker From Date' | translate }}</mat-label>
+    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" [formControl]="fromDate" />
     <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #fromDatePicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
-    <mat-label>{{'labels.inputs.Maker To Date' | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" [formControl]="toDate">
+    <mat-label>{{ 'labels.inputs.Maker To Date' | translate }}</mat-label>
+    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" [formControl]="toDate" />
     <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #toDatePicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="checkedFromDatePicker.open()">
-    <mat-label>{{'labels.inputs.Checker From Date' | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="checkedFromDatePicker"
-      [formControl]="checkedFromDate">
+    <mat-label>{{ 'labels.inputs.Checker From Date' | translate }}</mat-label>
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="checkedFromDatePicker"
+      [formControl]="checkedFromDate"
+    />
     <mat-datepicker-toggle matSuffix [for]="checkedFromDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #checkedFromDatePicker></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field fxFlex="48%" (click)="checkedToDatePicker.open()">
-    <mat-label>{{'labels.inputs.Checked To Date' | translate}}</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="checkedToDatePicker" [formControl]="checkedToDate">
+    <mat-label>{{ 'labels.inputs.Checked To Date' | translate }}</mat-label>
+    <input
+      matInput
+      [min]="minDate"
+      [max]="maxDate"
+      [matDatepicker]="checkedToDatePicker"
+      [formControl]="checkedToDate"
+    />
     <mat-datepicker-toggle matSuffix [for]="checkedToDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #checkedToDatePicker></mat-datepicker>
   </mat-form-field>
-
 </div>
 
 <!-- Autocomplete data -->
 <mat-autocomplete autoActiveFirstOption #userNameAutocomplete="matAutocomplete" [displayWith]="displayUserName">
-  <mat-option *ngFor="let user of filteredUserData | async " [value]="{ id: user.id, name: user.username }">
+  <mat-option *ngFor="let user of filteredUserData | async" [value]="{ id: user.id, name: user.username }">
     {{ user.username }}
   </mat-option>
 </mat-autocomplete>
@@ -92,71 +104,71 @@
 </mat-autocomplete>
 
 <mat-autocomplete autoActiveFirstOption #checkerAutocomplete="matAutocomplete" [displayWith]="displayUserName">
-  <mat-option *ngFor="let user of filteredCheckerData | async " [value]="{ id: user.id, name: user.username }">
+  <mat-option *ngFor="let user of filteredCheckerData | async" [value]="{ id: user.id, name: user.username }">
     {{ user.username }}
   </mat-option>
 </mat-autocomplete>
 
 <div class="container mat-elevation-z8 table-container">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Trail ID' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.id }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trail ID' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="resourceId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Resource ID' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.resourceId }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Resource ID' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.resourceId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="processingResult">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.processingResult }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.processingResult }}</td>
     </ng-container>
 
     <ng-container matColumnDef="maker">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header > {{'labels.inputs.Made By' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.maker }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Made By' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.maker }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actionName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Action' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.actionName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Action' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.actionName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="entityName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.entityName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.entityName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="officeName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.officeName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.officeName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="madeOnDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Made Date' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.madeOnDate  | dateFormat  }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Made Date' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.madeOnDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="checker">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header > {{'labels.inputs.Checker' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.checker  }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checker' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.checker }}</td>
     </ng-container>
 
     <ng-container matColumnDef="checkedOnDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Checked Date' | translate}} </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.checkedOnDate  | dateFormat  }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checked Date' | translate }}</th>
+      <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.checkedOnDate | dateFormat }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row">
-    </tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
   </table>
 
-  <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]"
-    showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    [length]="dataSource?.records$ | async"
+    [pageSize]="10"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>
diff --git a/src/app/system/audit-trails/view-audit/view-audit.component.html b/src/app/system/audit-trails/view-audit/view-audit.component.html
index c648802597..48c25460e4 100644
--- a/src/app/system/audit-trails/view-audit/view-audit.component.html
+++ b/src/app/system/audit-trails/view-audit/view-audit.component.html
@@ -1,15 +1,10 @@
-<div class="container" fxLayout="row"  fxLayoutAlign="space-between" fxLayoutGap.lt-md="4%" fxLayout.lt-md="column">
-
+<div class="container" fxLayout="row" fxLayoutAlign="space-between" fxLayoutGap.lt-md="4%" fxLayout.lt-md="column">
   <div fxFlex="46%">
-
     <mat-card>
-
       <mat-card-content>
-
         <div fxLayout="row wrap" class="content">
-
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.ID' | translate}}
+            {{ 'labels.inputs.ID' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -17,7 +12,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.Status' | translate}}
+            {{ 'labels.inputs.Status' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -25,7 +20,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.User' | translate}}
+            {{ 'labels.inputs.User' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -33,7 +28,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.Action' | translate}}
+            {{ 'labels.inputs.Action' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -41,7 +36,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.Entity' | translate}}
+            {{ 'labels.inputs.Entity' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -49,7 +44,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.Resource ID' | translate}}
+            {{ 'labels.inputs.Resource ID' | translate }}
           </div>
 
           <div fxFlex="50%">
@@ -57,15 +52,15 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
-            {{'labels.inputs.Date' | translate}}
+            {{ 'labels.inputs.Date' | translate }}
           </div>
 
           <div fxFlex="50%">
-            {{ auditTrailData.madeOnDate  | dateFormat }}
+            {{ auditTrailData.madeOnDate | dateFormat }}
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.officeName">
-            {{'labels.inputs.Office' | translate}}
+            {{ 'labels.inputs.Office' | translate }}
           </div>
 
           <div fxFlex="50%" *ngIf="auditTrailData.officeName">
@@ -73,7 +68,7 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
-            {{'labels.inputs.Savings Account No' | translate}}
+            {{ 'labels.inputs.Savings Account No' | translate }}
           </div>
 
           <div fxFlex="50%" *ngIf="auditTrailData.savingsAccountNo">
@@ -81,40 +76,33 @@
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.groupLevelName">
-            {{'labels.inputs.Group Level' | translate}}
+            {{ 'labels.inputs.Group Level' | translate }}
           </div>
 
           <div fxFlex="50%" *ngIf="auditTrailData.groupLevelName">
             {{ auditTrailData.groupLevelName }}
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
 
   <div fxFlex="46%">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="command">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Command' | translate}} </th>
-        <td mat-cell *matCellDef="let auditTrailCommand"> {{ auditTrailCommand.command }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
       </ng-container>
 
       <ng-container matColumnDef="commandValue">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Command Value' | translate}} </th>
-        <td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper"> {{ auditTrailCommand.commandValue }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
+        <td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
+          {{ auditTrailCommand.commandValue }}
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
   </div>
-
 </div>
diff --git a/src/app/system/codes/codes.component.html b/src/app/system/codes/codes.component.html
index 5ef08688f5..0ff857263e 100644
--- a/src/app/system/codes/codes.component.html
+++ b/src/app/system/codes/codes.component.html
@@ -2,68 +2,114 @@
   <div #buttonCreateCode>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Create Code' | translate}}
+      {{ 'labels.buttons.Create Code' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #tableCodes class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Code Name' | translate}} </th>
-        <td mat-cell *matCellDef="let code"> {{ code.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Code Name' | translate }}</th>
+        <td mat-cell *matCellDef="let code">{{ code.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.System Defined' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.System Defined' | translate }}</th>
         <td mat-cell *matCellDef="let code">
-          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="{{ 'tooltips.Yes' | translate}}" matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="{{ 'tooltips.No' | translate}}" matTooltipPosition="right"></fa-icon>
+          <fa-icon
+            *ngIf="code.systemDefined"
+            icon="check-circle"
+            size="lg"
+            class="system-defined"
+            matTooltip="{{ 'tooltips.Yes' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!code.systemDefined"
+            icon="times-circle"
+            size="lg"
+            class="not-system-defined"
+            matTooltip="{{ 'tooltips.No' | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
 </div>
 
 <ng-template #templateButtonCreateCode let-popover="popover">
-  <h2>{{'labels.heading.Manage Codes' | translate}}</h2>
-  <p class="mw300">{{'labels.text.To create additional codes.' | translate}}</p>
+  <h2>{{ 'labels.heading.Manage Codes' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.To create additional codes.' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter codes' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter codes' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateTableCodes, tableCodes, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateTableCodes let-popover="popover">
-  <h4>{{'labels.heading.List of all codes in the Mifos system' | translate}}</h4>
+  <h4>{{ 'labels.heading.List of all codes in the Mifos system' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/codes/create-code/create-code.component.html b/src/app/system/codes/create-code/create-code.component.html
index b17d1f6af9..d40632aca8 100644
--- a/src/app/system/codes/create-code/create-code.component.html
+++ b/src/app/system/codes/create-code/create-code.component.html
@@ -1,43 +1,52 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="codeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <div #codeFormRef fxLayout="column">
-
-            <mat-form-field>
-              <mat-label>{{'labels.inputs.Code Name' | translate}}</mat-label>
-              <input matInput required formControlName="name">
-              <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-                {{'labels.inputs.Code Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-              </mat-error>
-            </mat-form-field>
-
-          </div>
-
+        <div #codeFormRef fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Code Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
+            <mat-error *ngIf="codeForm.controls.name.hasError('required')">
+              {{ 'labels.inputs.Code Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateCodeFormRef let-data let-popover="popover">
-  <h2>{{'labels.heading.Create Code' | translate}}</h2>
-  <p class="mw400">{{'labels.text.To create code,create' | translate}}<br> {{'labels.text.For more details click' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">{{'labels.inputs.Manage Codes' | translate}}</a></p>
+  <h2>{{ 'labels.heading.Create Code' | translate }}</h2>
+  <p class="mw400">
+    {{ 'labels.text.To create code,create' | translate }}<br />
+    {{ 'labels.text.For more details click' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">{{
+      'labels.inputs.Manage Codes' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create Code' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create Code' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/codes/edit-code/edit-code.component.html b/src/app/system/codes/edit-code/edit-code.component.html
index 477bab71e1..c8c96fb587 100644
--- a/src/app/system/codes/edit-code/edit-code.component.html
+++ b/src/app/system/codes/edit-code/edit-code.component.html
@@ -1,32 +1,32 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="codeForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <div fxLayout="column">
-
-            <mat-form-field>
-              <mat-label>{{'labels.inputs.Code Name' | translate}}</mat-label>
-              <input matInput required formControlName="name">
-              <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-                {{'labels.inputs.Code Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-              </mat-error>
-            </mat-form-field>
-
-          </div>
-
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Code Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
+            <mat-error *ngIf="codeForm.controls.name.hasError('required')">
+              {{ 'labels.inputs.Code Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!codeForm.valid || codeForm.pristine" *mifosxHasPermission="'UPDATE_CODE'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!codeForm.valid || codeForm.pristine"
+          *mifosxHasPermission="'UPDATE_CODE'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/codes/view-code/view-code.component.html b/src/app/system/codes/view-code/view-code.component.html
index 39847c1022..45aa255642 100644
--- a/src/app/system/codes/view-code/view-code.component.html
+++ b/src/app/system/codes/view-code/view-code.component.html
@@ -1,94 +1,113 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" fxLayout.xs="column">
-
   <button mat-raised-button color="primary" (click)="addCodeValueRow()" *mifosxHasPermission="'CREATE_CODEVALUE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Add Code Value' | translate}}
+    {{ 'labels.buttons.Add Code Value' | translate }}
   </button>
 
   <span *ngIf="!codeData.systemDefined">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit Code' | translate}}
-  </button>
+    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Edit Code' | translate }}
+    </button>
   </span>
 
   <span *ngIf="!codeData.systemDefined">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Delete Code' | translate}}
+      {{ 'labels.buttons.Delete Code' | translate }}
     </button>
   </span>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-title>{{ codeData.name }}</mat-card-title>
 
     <form [formGroup]="codeValuesForm">
-
       <mat-card-content>
-
-        <div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index;">
-
+        <div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index">
           <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-
             <mat-form-field fxFlex="20%">
-              <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
-              <input required matInput formControlName="name">
+              <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+              <input required matInput formControlName="name" />
               <mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
-                {{'labels.inputs.name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="22%">
-              <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
-              <input matInput formControlName="description">
+              <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+              <input matInput formControlName="description" />
             </mat-form-field>
 
             <mat-form-field fxFlex="18%">
-              <mat-label>{{'labels.inputs.Position' | translate}}</mat-label>
-              <input required matInput formControlName="position" type="number">
+              <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
+              <input required matInput formControlName="position" type="number" />
               <mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
-                {{'labels.inputs.name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <div class="active-wrapper" fxFlex="8%">
-              <mat-checkbox formControlName="isActive" class="active">{{'labels.inputs.Active' | translate}}</mat-checkbox>
+              <mat-checkbox formControlName="isActive" class="active">{{
+                'labels.inputs.Active' | translate
+              }}</mat-checkbox>
             </div>
 
             <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
               <span *ngIf="codeValueRowStatus[i] === 'edit'">
-                <button mat-stroked-button color="primary" [disabled]="codeValues.at(i).pristine" (click)="updateCodeValue(i)"
-                  *mifosxHasPermission="'UPDATE_CODEVALUE'">
-                  {{'labels.buttons.Submit' | translate}}
+                <button
+                  mat-stroked-button
+                  color="primary"
+                  [disabled]="codeValues.at(i).pristine"
+                  (click)="updateCodeValue(i)"
+                  *mifosxHasPermission="'UPDATE_CODEVALUE'"
+                >
+                  {{ 'labels.buttons.Submit' | translate }}
                 </button>
               </span>
               <button mat-button *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
-                {{'labels.buttons.Cancel' | translate}}
+                {{ 'labels.buttons.Cancel' | translate }}
               </button>
-              <button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="{{ 'tooltips.Add' | translate}}" matTooltipPosition="above" (click)="addCodeValue(i)">
+              <button
+                mat-icon-button
+                color="primary"
+                [disabled]="!codeValuesForm.get('codeValues').at(i).valid"
+                *ngIf="codeValueRowStatus[i] === 'new'"
+                matTooltip="{{ 'tooltips.Add' | translate }}"
+                matTooltipPosition="above"
+                (click)="addCodeValue(i)"
+              >
                 <fa-icon icon="plus" size="lg"></fa-icon>
               </button>
-              <button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate}}" matTooltipPosition="above" (click)="enableRow(i)">
+              <button
+                type="button"
+                color="primary"
+                *ngIf="codeValueRowStatus[i] === 'disabled'"
+                mat-icon-button
+                matTooltip="{{ 'tooltips.Edit' | translate }}"
+                matTooltipPosition="above"
+                (click)="enableRow(i)"
+              >
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Delete' | translate}}" *mifosxHasPermission="'DELETE_CODEVALUE'" matTooltipPosition="above" (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)">
+              <button
+                type="button"
+                color="warn"
+                mat-icon-button
+                matTooltip="{{ 'tooltips.Delete' | translate }}"
+                *mifosxHasPermission="'DELETE_CODEVALUE'"
+                matTooltipPosition="above"
+                (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)"
+              >
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </div>
-
           </div>
-
         </div>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/configurations/business-date-tab/business-date-tab.component.html b/src/app/system/configurations/business-date-tab/business-date-tab.component.html
index 7b910d9ec1..0630ee30d4 100644
--- a/src/app/system/configurations/business-date-tab/business-date-tab.component.html
+++ b/src/app/system/configurations/business-date-tab/business-date-tab.component.html
@@ -1,53 +1,70 @@
 <div class="container space">
-
   <div class="mat-elevation-z8">
     <div *ngIf="!isBusinessDateEnabled">
-      <p>{{'labels.text.Business Date functionality is not enabled' | translate}}: <code>{{configurationName}}</code></p>
+      <p>
+        {{ 'labels.text.Business Date functionality is not enabled' | translate }}: <code>{{ configurationName }}</code>
+      </p>
     </div>
 
     <div *ngIf="isBusinessDateEnabled">
-
       <mat-card>
         <form [formGroup]="businessDateForm">
           <mat-card-content>
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="space">
               <div fxFlex="50%">
-                <span fxFlex="40%" class="date-type">{{'labels.inputs.User date format' | translate}}: </span>
-                <span fxFlex="60%" class="date-value">{{userDateFormat}}</span>
+                <span fxFlex="40%" class="date-type">{{ 'labels.inputs.User date format' | translate }}: </span>
+                <span fxFlex="60%" class="date-value">{{ userDateFormat }}</span>
               </div>
             </div>
 
             <!-- Business Date -->
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
               <div fxFlex="50%" *ngIf="!isEditInProgress">
-                <span fxFlex="40%" class="date-type">{{'labels.inputs.Business Date' | translate}}: </span>
-                <span fxFlex="60%" class="date-value">{{businessDate | dateFormat}}</span>
+                <span fxFlex="40%" class="date-type">{{ 'labels.inputs.Business Date' | translate }}: </span>
+                <span fxFlex="60%" class="date-value">{{ businessDate | dateFormat }}</span>
               </div>
 
-              <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && (dateIndex === 0)">
-                <mat-label>{{'labels.inputs.Business Date' | translate}}</mat-label>
-                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="businessDatePicker"
-                  formControlName="businessDate">
-                <mat-datepicker-toggle matSuffix [for]="businessDatePicker">
-                </mat-datepicker-toggle>
+              <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && dateIndex === 0">
+                <mat-label>{{ 'labels.inputs.Business Date' | translate }}</mat-label>
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="businessDatePicker"
+                  formControlName="businessDate"
+                />
+                <mat-datepicker-toggle matSuffix [for]="businessDatePicker"> </mat-datepicker-toggle>
                 <mat-datepicker #businessDatePicker></mat-datepicker>
                 <mat-error *ngIf="businessDateForm.controls.businessDate.hasError('required')">
-                  {{'labels.inputs.Business Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.Business Date' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
-                <span *ngIf="isEditInProgress && (dateIndex === 0)">
-                  <button mat-raised-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
-                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
-                    {{'labels.buttons.Submit' | translate}}
+                <span *ngIf="isEditInProgress && dateIndex === 0">
+                  <button
+                    mat-raised-button
+                    color="primary"
+                    [disabled]="businessDateForm.pristine"
+                    (click)="submit()"
+                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'"
+                  >
+                    {{ 'labels.buttons.Submit' | translate }}
                   </button>
                   <button mat-raised-button (click)="editInProgressToggle(0)">
-                    {{'labels.buttons.Cancel' | translate}}
+                    {{ 'labels.buttons.Cancel' | translate }}
                   </button>
                 </span>
-                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="{{ 'tooltips.Edit the Business Date' | translate}}"
-                  matTooltipPosition="above" (click)="editInProgressToggle(0)">
+                <button
+                  type="button"
+                  color="primary"
+                  *ngIf="!isEditInProgress"
+                  mat-icon-button
+                  matTooltip="{{ 'tooltips.Edit the Business Date' | translate }}"
+                  matTooltipPosition="above"
+                  (click)="editInProgressToggle(0)"
+                >
                   <fa-icon icon="edit" size="lg"></fa-icon>
                 </button>
               </div>
@@ -56,34 +73,51 @@
             <!-- COB Date -->
             <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
               <div fxFlex="50%" *ngIf="!isEditInProgress">
-                <span fxFlex="40%" class="date-type">{{'labels.inputs.COB Date' | translate}}: </span>
-                <span fxFlex="60%" class="date-value">{{cobDate | dateFormat}}</span>
+                <span fxFlex="40%" class="date-type">{{ 'labels.inputs.COB Date' | translate }}: </span>
+                <span fxFlex="60%" class="date-value">{{ cobDate | dateFormat }}</span>
               </div>
 
-              <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && (dateIndex === 1)">
-                <mat-label>{{'labels.inputs.COB Date' | translate}}</mat-label>
-                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cobDatePicker"
-                  formControlName="businessDate">
-                <mat-datepicker-toggle matSuffix [for]="cobDatePicker">
-                </mat-datepicker-toggle>
+              <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && dateIndex === 1">
+                <mat-label>{{ 'labels.inputs.COB Date' | translate }}</mat-label>
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="cobDatePicker"
+                  formControlName="businessDate"
+                />
+                <mat-datepicker-toggle matSuffix [for]="cobDatePicker"> </mat-datepicker-toggle>
                 <mat-datepicker #cobDatePicker></mat-datepicker>
                 <mat-error *ngIf="businessDateForm.controls.cobDate.hasError('required')">
-                  {{'labels.inputs.COB Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{ 'labels.inputs.COB Date' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <div fxLayoutGap="4%" fxFlex="22%" class="options-wrapper">
-                <span *ngIf="isEditInProgress && (dateIndex === 1)">
-                  <button mat-stroked-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
-                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
-                    {{'labels.buttons.Submit' | translate}}
+                <span *ngIf="isEditInProgress && dateIndex === 1">
+                  <button
+                    mat-stroked-button
+                    color="primary"
+                    [disabled]="businessDateForm.pristine"
+                    (click)="submit()"
+                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'"
+                  >
+                    {{ 'labels.buttons.Submit' | translate }}
                   </button>
                 </span>
-                <button mat-button *ngIf="isEditInProgress && (dateIndex === 1)" (click)="editInProgressToggle(1)">
-                  {{'labels.buttons.Cancel' | translate}}
+                <button mat-button *ngIf="isEditInProgress && dateIndex === 1" (click)="editInProgressToggle(1)">
+                  {{ 'labels.buttons.Cancel' | translate }}
                 </button>
-                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="{{ 'tooltips.Edit the COB Date' | translate}}"
-                  matTooltipPosition="above" (click)="editInProgressToggle(1)">
+                <button
+                  type="button"
+                  color="primary"
+                  *ngIf="!isEditInProgress"
+                  mat-icon-button
+                  matTooltip="{{ 'tooltips.Edit the COB Date' | translate }}"
+                  matTooltipPosition="above"
+                  (click)="editInProgressToggle(1)"
+                >
                   <fa-icon icon="edit" size="lg"></fa-icon>
                 </button>
               </div>
diff --git a/src/app/system/configurations/configurations.component.html b/src/app/system/configurations/configurations.component.html
index 53813ac18d..9cfb6ec135 100644
--- a/src/app/system/configurations/configurations.component.html
+++ b/src/app/system/configurations/configurations.component.html
@@ -1,13 +1,12 @@
 <mat-card class="configurations-card">
   <mat-card-content>
     <mat-tab-group #tabGroup mat-align-tabs="center">
-      <mat-tab label="{{'labels.inputs.Global Configurations' | translate}}">
+      <mat-tab label="{{ 'labels.inputs.Global Configurations' | translate }}">
         <mifosx-global-configurations-tab></mifosx-global-configurations-tab>
       </mat-tab>
-      <mat-tab label="{{'labels.inputs.Business Date' | translate}}" *ngIf="isBusinessDateEnabled">
+      <mat-tab label="{{ 'labels.inputs.Business Date' | translate }}" *ngIf="isBusinessDateEnabled">
         <mifosx-business-date-tab></mifosx-business-date-tab>
       </mat-tab>
     </mat-tab-group>
-
   </mat-card-content>
 </mat-card>
diff --git a/src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html b/src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html
index f44807388f..3c34d139a3 100644
--- a/src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html
+++ b/src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html
@@ -1,52 +1,51 @@
 <div class="container space">
-
   <mat-card>
-
     <form [formGroup]="configurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Configuration Name' | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.Configuration Name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Number Value' | translate}}</mat-label>
-            <input matInput type="number" formControlName="value">
+            <mat-label>{{ 'labels.inputs.Number Value' | translate }}</mat-label>
+            <input matInput type="number" formControlName="value" />
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.String Value' | translate}}</mat-label>
-            <input matInput formControlName="stringValue">
+            <mat-label>{{ 'labels.inputs.String Value' | translate }}</mat-label>
+            <input matInput formControlName="stringValue" />
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="configurationDatePicker.open()">
-            <mat-label>{{'labels.inputs.Date Value' | translate}}</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="configurationDatePicker" formControlName="dateValue">
+            <mat-label>{{ 'labels.inputs.Date Value' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="configurationDatePicker"
+              formControlName="dateValue"
+            />
             <mat-datepicker-toggle matSuffix [for]="configurationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #configurationDatePicker></mat-datepicker>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../..']"> {{'labels.buttons.Cancel' | translate}} </button>
+        <button type="button" mat-raised-button [routerLink]="['../..']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
         <button mat-raised-button color="primary" [disabled]="configurationForm.pristine || !configurationForm.valid">
-          {{'labels.buttons.Submit' | translate}} </button>
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html b/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html
index 2c5874f45a..fbcd200161 100644
--- a/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html
+++ b/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html
@@ -1,52 +1,59 @@
 <div class="container">
-
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #configurationsTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-        <td mat-cell *matCellDef="let configuration"> {{ configuration.name }}&nbsp;&nbsp;
-        <fa-icon *ngIf="configuration.description" icon="question-circle" matTooltip="{{ configuration.description | translate }}" matTooltipPosition="right"></fa-icon>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let configuration">
+          {{ configuration.name }}&nbsp;&nbsp;
+          <fa-icon
+            *ngIf="configuration.description"
+            icon="question-circle"
+            matTooltip="{{ configuration.description | translate }}"
+            matTooltipPosition="right"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="enabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let configuration">
-          <mat-slide-toggle [(ngModel)]="configuration.enabled" name="{{configuration.name}}" (click)="toggleStatus(configuration)">
+          <mat-slide-toggle
+            [(ngModel)]="configuration.enabled"
+            name="{{ configuration.name }}"
+            (click)="toggleStatus(configuration)"
+          >
             <div [className]="configuration.enabled ? 'enabled' : 'disabled'">
-              <span *ngIf="configuration.enabled">{{'labels.inputs.Enabled' | translate}}</span>
-              <span *ngIf="!configuration.enabled">{{'labels.inputs.Disabled' | translate}}</span>
+              <span *ngIf="configuration.enabled">{{ 'labels.inputs.Enabled' | translate }}</span>
+              <span *ngIf="!configuration.enabled">{{ 'labels.inputs.Disabled' | translate }}</span>
             </div>
           </mat-slide-toggle>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-        <td mat-cell *matCellDef="let configuration"> {{ configuration.value }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+        <td mat-cell *matCellDef="let configuration">{{ configuration.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="stringValue">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.String Value' | translate}} </th>
-        <td mat-cell *matCellDef="let configuration"> {{ configuration.stringValue }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.String Value' | translate }}</th>
+        <td mat-cell *matCellDef="let configuration">{{ configuration.stringValue }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dateValue">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Date Value' | translate}} </th>
-        <td mat-cell *matCellDef="let configuration"> {{ configuration.dateValue | dateFormat }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Date Value' | translate }}</th>
+        <td mat-cell *matCellDef="let configuration">{{ configuration.dateValue | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="edit">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let configuration">
           <button mat-button color="primary" [routerLink]="[configuration.id, 'edit']">
             <fa-icon icon="edit"></fa-icon>
@@ -55,30 +62,52 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateFilter let-data let-popover="popover">
- <h4>{{'labels.heading.Search bar to filter configurations' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter configurations' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigurationsTable, configurationsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateConfigurationsTable, configurationsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateConfigurationsTable let-data let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.Global Configuration options' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895362/Global+Configuration" target="_blank">{{'labels.inputs.Global Configurations' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.Global Configuration options' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895362/Global+Configuration" target="_blank">{{
+      'labels.inputs.Global Configurations' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html
index f6df9023dd..7c04360cce 100644
--- a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html
+++ b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html
@@ -1,24 +1,28 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-
   <div #buttonEdit class="in-block">
-    <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="editTask(); backupCheckValues()"
+      *mifosxHasPermission="'UPDATE_PERMISSION'"
+    >
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Edit' | translate}}
+      {{ 'labels.buttons.Edit' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <ng-container>
-
       <div fxLayout="row">
-
         <div #mcTable fxFlex="30" fxLayout="column">
           <mat-list>
-            <mat-list-item [ngClass]="selectedItem === grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
+            <mat-list-item
+              [ngClass]="selectedItem === grouping ? 'active' : 'inactive'"
+              *ngFor="let grouping of groupings"
+              (click)="showPermissions(grouping)"
+            >
               <span class="grouping-name">
                 {{ formatName(grouping) }}
               </span>
@@ -30,49 +34,75 @@
 
         <div fxFlex="70" fxLayout="column" class="list-permission">
           <form [formGroup]="formGroup" (submit)="submit()">
-
             <div *ngFor="let permission of permissions.permissions" class="display-permissions">
-                <div formArrayName="roster">
-                  <div [formGroupName]="permission.id">
-                    <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
+              <div formArrayName="roster">
+                <div [formGroupName]="permission.id">
+                  <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
                     {{ permissionName(permission.code) }}
                   </mat-checkbox>
-                  </div>
                 </div>
               </div>
-
-            </form>
+            </div>
+          </form>
         </div>
-
       </div>
     </ng-container>
 
     <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!isDisabled">
       <mat-card-actions>
-        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'UPDATE_PERMISSION'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
     </div>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateButtonEdit let-popover="popover">
-  <h2>{{'labels.heading.Edit' | translate}}</h2>
-  <p class="mw300">{{'labels.text.To add or remove a task from the Maker-Checker list' | translate}}</p>
+  <h2>{{ 'labels.heading.Edit' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.To add or remove a task from the Maker-Checker list' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateMcTable,mcTable,'top', true);">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateMcTable, mcTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateMcTable let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.List of all maker checker tasks' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895359/Configure+Maker-Checker+Tasks" target="_blank">{{'labels.inputs.Configure Maker-Checker Tasks' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of all maker checker tasks' | translate }}:
+    <a
+      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895359/Configure+Maker-Checker+Tasks"
+      target="_blank"
+      >{{ 'labels.inputs.Configure Maker-Checker Tasks' | translate }}</a
+    >
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonEdit,buttonEdit,'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonEdit, buttonEdit, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html b/src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html
index 044b0e65af..499068de31 100644
--- a/src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html
+++ b/src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html
@@ -1,79 +1,87 @@
 <div class="container">
-
   <div class="mat-elevation-z8">
     <table mat-table [dataSource]="datasource">
       <ng-container matColumnDef="entitymapping">
-        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Mapping Between Entities' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Mapping Between Entities' | translate }}</th>
         <td mat-cell *matCellDef="let mappingType" (click)="showFilters(mappingType.id)">
           <span *ngIf="mappingType.mappingTypes === 'office_access_to_loan_products'">
-            {{'labels.inputs.Offices Loan Products' | translate}}
+            {{ 'labels.inputs.Offices Loan Products' | translate }}
           </span>
           <span *ngIf="mappingType.mappingTypes === 'office_access_to_savings_products'">
-            {{'labels.inputs.Offices Savings Products' | translate}}
+            {{ 'labels.inputs.Offices Savings Products' | translate }}
           </span>
           <span *ngIf="mappingType.mappingTypes === 'office_access_to_fees/charges'">
-            {{'labels.inputs.Offices Charges/Fees' | translate}}
+            {{ 'labels.inputs.Offices Charges/Fees' | translate }}
           </span>
           <span *ngIf="mappingType.mappingTypes === 'role_access_to_loan_products'">
-            {{'labels.inputs.Roles Loan Products' | translate}}
+            {{ 'labels.inputs.Roles Loan Products' | translate }}
           </span>
           <span *ngIf="mappingType.mappingTypes === 'role_access_to_savings_products'">
-            {{'labels.inputs.Roles Savings Products' | translate}}
+            {{ 'labels.inputs.Roles Savings Products' | translate }}
           </span>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <!---------------- SHOW FILTERING OPTION  ----------->
     <ng-container *ngIf="selectedMappingType > 0">
-
       <mat-card>
-
         <form [formGroup]="filterPreferenceForm" (ngSubmit)="showFilteredData()">
-          <mat-card-title> {{firstMappingEntity| translateKey:'inputs'}} {{'labels.text.access to' | translate}} {{secondMappingEntity | translateKey:'text'}} </mat-card-title>
+          <mat-card-title>
+            {{ firstMappingEntity | translateKey: 'inputs' }} {{ 'labels.text.access to' | translate }}
+            {{ secondMappingEntity | translateKey: 'text' }}
+          </mat-card-title>
           <mat-card-content>
-
             <div fxLayout="row" fxLayoutAlign="space-evenly center">
-
               <mat-form-field>
-                <mat-label>{{firstMappingEntity | translateKey:'inputs'}}</mat-label>
+                <mat-label>{{ firstMappingEntity | translateKey: 'inputs' }}</mat-label>
                 <mat-select required formControlName="mappingFirstParamId">
                   <mat-option [value]="0">
-                    {{'labels.inputs.All' | translate}}
+                    {{ 'labels.inputs.All' | translate }}
                   </mat-option>
                   <mat-option *ngFor="let firstEntity of firstEntityData" [value]="firstEntity.id">
                     {{ firstEntity.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="filterPreferenceForm.controls.mappingFirstParamId.hasError('required')">
-                  {{firstMappingEntity | translateKey:'inputs'}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{ firstMappingEntity | translateKey: 'inputs' }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field>
-                <mat-label>{{secondMappingEntity | translateKey:'text'}}</mat-label>
+                <mat-label>{{ secondMappingEntity | translateKey: 'text' }}</mat-label>
                 <mat-select required formControlName="mappingSecondParamId">
                   <mat-option [value]="0">
-                    {{'labels.inputs.All' | translate}}
+                    {{ 'labels.inputs.All' | translate }}
                   </mat-option>
                   <mat-option *ngFor="let secondEntity of secondEntityData" [value]="secondEntity.id">
                     {{ secondEntity.name }}
                   </mat-option>
                 </mat-select>
                 <mat-error *ngIf="filterPreferenceForm.controls.mappingSecondParamId.hasError('required')">
-                  {{secondMappingEntity | translateKey:'text'}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+                  {{ secondMappingEntity | translateKey: 'text' }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button mat-raised-button color="primary" [disabled]="!filterPreferenceForm.valid">{{'labels.buttons.Submit' | translate}}</button>
-                <button *ngIf="hasClickedFilters" mat-raised-button color="primary" (click)="showAddScreen(selectedMappingType)">{{'labels.buttons.Add' | translate}}</button>
+                <button mat-raised-button color="primary" [disabled]="!filterPreferenceForm.valid">
+                  {{ 'labels.buttons.Submit' | translate }}
+                </button>
+                <button
+                  *ngIf="hasClickedFilters"
+                  mat-raised-button
+                  color="primary"
+                  (click)="showAddScreen(selectedMappingType)"
+                >
+                  {{ 'labels.buttons.Add' | translate }}
+                </button>
               </mat-card-actions>
             </div>
-
           </mat-card-content>
         </form>
 
@@ -82,54 +90,66 @@
           <div>
             <table mat-table [dataSource]="entityMappingsListData">
               <ng-container matColumnDef="fromentity">
-                <th mat-header-cell *matHeaderCellDef> {{firstMappingEntity | translateKey:'inputs'}} </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.fromEntity }} </td>
+                <th mat-header-cell *matHeaderCellDef>{{ firstMappingEntity | translateKey: 'inputs' }}</th>
+                <td mat-cell *matCellDef="let listdata">{{ listdata.fromEntity }}</td>
               </ng-container>
 
               <ng-container matColumnDef="toentity">
-                <th mat-header-cell *matHeaderCellDef> {{secondMappingEntity | translateKey:'text'}} </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.toEntity }} </td>
+                <th mat-header-cell *matHeaderCellDef>{{ secondMappingEntity | translateKey: 'text' }}</th>
+                <td mat-cell *matCellDef="let listdata">{{ listdata.toEntity }}</td>
               </ng-container>
 
               <ng-container matColumnDef="startdate">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Start Date' | translate}} </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.startDate | dateFormat }} </td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
+                <td mat-cell *matCellDef="let listdata">{{ listdata.startDate | dateFormat }}</td>
               </ng-container>
 
               <ng-container matColumnDef="enddate">
-                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.End Date' | translate}} </th>
-                <td mat-cell *matCellDef="let listdata"> {{ listdata.endDate | dateFormat }} </td>
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.End Date' | translate }}</th>
+                <td mat-cell *matCellDef="let listdata">{{ listdata.endDate | dateFormat }}</td>
               </ng-container>
 
               <ng-container matColumnDef="edit">
-                <th mat-header-cell *matHeaderCellDef> </th>
+                <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let listdata">
-                  <button type="button" color="primary" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate}}" matTooltipPosition="above" *mifosxHasPermission="'UPDATE_ENTITYMAPPING'"
-                    (click)="showEditScreen(listdata.mapId, selectedMappingType)">
+                  <button
+                    type="button"
+                    color="primary"
+                    mat-icon-button
+                    matTooltip="{{ 'tooltips.Edit' | translate }}"
+                    matTooltipPosition="above"
+                    *mifosxHasPermission="'UPDATE_ENTITYMAPPING'"
+                    (click)="showEditScreen(listdata.mapId, selectedMappingType)"
+                  >
                     <fa-icon icon="edit" size="lg"></fa-icon>
                   </button>
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="delete">
-                <th mat-header-cell *matHeaderCellDef> </th>
+                <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let listdata">
-                  <button type="button" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Delete' | translate}}" matTooltipPosition="above" *mifosxHasPermission="'DELETE_ENTITYMAPPING'"
-                  (click)="delete(listdata.mapId)">
+                  <button
+                    type="button"
+                    color="warn"
+                    mat-icon-button
+                    matTooltip="{{ 'tooltips.Delete' | translate }}"
+                    matTooltipPosition="above"
+                    *mifosxHasPermission="'DELETE_ENTITYMAPPING'"
+                    (click)="delete(listdata.mapId)"
+                  >
                     <fa-icon icon="trash" size="lg"></fa-icon>
                   </button>
                 </td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="entityMappingListColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: entityMappingListColumns;" class="select-row"></tr>
+              <tr mat-row *matRowDef="let row; columns: entityMappingListColumns" class="select-row"></tr>
             </table>
             <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
           </div>
         </ng-container>
-
       </mat-card>
-
     </ng-container>
   </div>
 </div>
diff --git a/src/app/system/external-services/amazon-s3/amazon-s3.component.html b/src/app/system/external-services/amazon-s3/amazon-s3.component.html
index 4ce55428b7..c9ef0d5162 100644
--- a/src/app/system/external-services/amazon-s3/amazon-s3.component.html
+++ b/src/app/system/external-services/amazon-s3/amazon-s3.component.html
@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'inputs' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'inputs' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ getConfigurationValue(configuration) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
diff --git a/src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html b/src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html
index 1aa31ca4b5..d8b33e60ba 100644
--- a/src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html
+++ b/src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html
@@ -1,58 +1,71 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="amazonS3ConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.S3 Bucket Name' | translate}}</mat-label>
-            <input matInput required formControlName="s3_bucket_name">
+            <mat-label>{{ 'labels.inputs.S3 Bucket Name' | translate }}</mat-label>
+            <input matInput required formControlName="s3_bucket_name" />
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_bucket_name.hasError('required')">
-              {{'labels.inputs.S3 Bucket Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.S3 Bucket Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.S3 Access Key' | translate}}</mat-label>
-            <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key">
-            <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value" matSuffix mat-icon-button
-              (mousedown)="accessKeyInputType = 'text'" (mouseup)="accessKeyInputType = 'password'">
+            <mat-label>{{ 'labels.inputs.S3 Access Key' | translate }}</mat-label>
+            <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key" />
+            <button
+              mat-button
+              *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value"
+              matSuffix
+              mat-icon-button
+              (mousedown)="accessKeyInputType = 'text'"
+              (mouseup)="accessKeyInputType = 'password'"
+            >
               <fa-icon *ngIf="accessKeyInputType === 'password'" icon="eye"></fa-icon>
               <fa-icon *ngIf="accessKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
-              {{'labels.inputs.S3 Access Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.S3 Access Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.S3 Secret Key' | translate}}</mat-label>
-            <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key">
-            <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value" matSuffix mat-icon-button
-              (mousedown)="secretKeyInputType = 'text'" (mouseup)="secretKeyInputType = 'password'">
+            <mat-label>{{ 'labels.inputs.S3 Secret Key' | translate }}</mat-label>
+            <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key" />
+            <button
+              mat-button
+              *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value"
+              matSuffix
+              mat-icon-button
+              (mousedown)="secretKeyInputType = 'text'"
+              (mouseup)="secretKeyInputType = 'password'"
+            >
               <fa-icon *ngIf="secretKeyInputType === 'password'" icon="eye"></fa-icon>
               <fa-icon *ngIf="secretKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')">
-              {{'labels.inputs.S3 Secret Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.S3 Secret Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/external-services/email/edit-email/edit-email.component.html b/src/app/system/external-services/email/edit-email/edit-email.component.html
index 299b0026bd..37a5fe87f8 100644
--- a/src/app/system/external-services/email/edit-email/edit-email.component.html
+++ b/src/app/system/external-services/email/edit-email/edit-email.component.html
@@ -1,81 +1,91 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="emailConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
-            <input matInput required formControlName="username">
+            <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+            <input matInput required formControlName="username" />
             <mat-error *ngIf="emailConfigurationForm.controls.username.hasError('required')">
-              {{'labels.inputs.Username' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
-            <input matInput required type="{{ passwordInputType }}" formControlName="password">
-            <button mat-button *ngIf="emailConfigurationForm.controls.password.value" matSuffix mat-icon-button
-              (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+            <input matInput required type="{{ passwordInputType }}" formControlName="password" />
+            <button
+              mat-button
+              *ngIf="emailConfigurationForm.controls.password.value"
+              matSuffix
+              mat-icon-button
+              (mousedown)="passwordInputType = 'text'"
+              (mouseup)="passwordInputType = 'password'"
+            >
               <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
               <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="emailConfigurationForm.controls.password.hasError('required')">
-              {{'labels.inputs.Password' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Host' | translate}}</mat-label>
-            <input matInput required formControlName="host">
+            <mat-label>{{ 'labels.inputs.Host' | translate }}</mat-label>
+            <input matInput required formControlName="host" />
             <mat-error *ngIf="emailConfigurationForm.controls.host.hasError('required')">
-              {{'labels.inputs.Host' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Host' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Port' | translate}}</mat-label>
-            <input matInput type="number" required formControlName="port">
+            <mat-label>{{ 'labels.inputs.Port' | translate }}</mat-label>
+            <input matInput type="number" required formControlName="port" />
             <mat-error *ngIf="emailConfigurationForm.controls.port.hasError('required')">
-              {{'labels.inputs.Port' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Port' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useTLS" class="margin-v">
-            {{'labels.inputs.Use TLS' | translate}}?
+            {{ 'labels.inputs.Use TLS' | translate }}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.From Email' | translate}}</mat-label>
-            <input matInput type="email" required formControlName="fromEmail">
+            <mat-label>{{ 'labels.inputs.From Email' | translate }}</mat-label>
+            <input matInput type="email" required formControlName="fromEmail" />
             <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
-              {{'labels.inputs.From Email' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.From Name' | translate}}</mat-label>
-            <input matInput required formControlName="fromName">
+            <mat-label>{{ 'labels.inputs.From Name' | translate }}</mat-label>
+            <input matInput required formControlName="fromName" />
             <mat-error *ngIf="emailConfigurationForm.controls.fromName.hasError('required')">
-              {{'labels.inputs.From Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary"
-          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/external-services/email/email.component.html b/src/app/system/external-services/email/email.component.html
index a0187e32b0..ca6038d977 100644
--- a/src/app/system/external-services/email/email.component.html
+++ b/src/app/system/external-services/email/email.component.html
@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'text' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'text' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.value }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
diff --git a/src/app/system/external-services/external-services.component.html b/src/app/system/external-services/external-services.component.html
index f90f134334..8da934d7a3 100644
--- a/src/app/system/external-services/external-services.component.html
+++ b/src/app/system/external-services/external-services.component.html
@@ -1,67 +1,63 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['amazon-s3']">
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['amazon-s3']">{{'labels.heading.S3 Amazon External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['amazon-s3']">{{ 'labels.heading.S3 Amazon External Service' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">{{'labels.text.S3 Amazon Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">
+              {{ 'labels.text.S3 Amazon Service Configuration' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['sms']">
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['sms']">{{'labels.heading.SMS External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['sms']">{{ 'labels.heading.SMS External Service' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">{{'labels.text.SMS Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">
+              {{ 'labels.text.SMS Service Configuration' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['email']">
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['email']">{{'labels.heading.Email External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['email']">{{ 'labels.heading.Email External Service' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">{{'labels.text.Email Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">
+              {{ 'labels.text.Email Service Configuration' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['notification']">
               <fa-icon icon="bell" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['notification']"> {{'labels.heading.Notification External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['notification']">
+              {{ 'labels.heading.Notification External Service' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">{{'labels.text.Notification Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">
+              {{ 'labels.text.Notification Service Configuration' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/external-services/notification/edit-notification/edit-notification.component.html b/src/app/system/external-services/notification/edit-notification/edit-notification.component.html
index 56db47afb6..c998ccf7d0 100644
--- a/src/app/system/external-services/notification/edit-notification/edit-notification.component.html
+++ b/src/app/system/external-services/notification/edit-notification/edit-notification.component.html
@@ -1,48 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="notificationConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Server Key' | translate}}</mat-label>
-            <input matInput required formControlName="server_key">
+            <mat-label>{{ 'labels.inputs.Server Key' | translate }}</mat-label>
+            <input matInput required formControlName="server_key" />
             <mat-error *ngIf="notificationConfigurationForm.controls.server_key.hasError('required')">
-              {{'labels.inputs.Server Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Server Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.GCM End Point' | translate}}</mat-label>
-            <input matInput required formControlName="gcm_end_point">
+            <mat-label>{{ 'labels.inputs.GCM End Point' | translate }}</mat-label>
+            <input matInput required formControlName="gcm_end_point" />
             <mat-error *ngIf="notificationConfigurationForm.controls.gcm_end_point.hasError('required')">
-              {{'labels.inputs.GCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.GCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.FCM End Point' | translate}}</mat-label>
-            <input matInput required formControlName="fcm_end_point">
+            <mat-label>{{ 'labels.inputs.FCM End Point' | translate }}</mat-label>
+            <input matInput required formControlName="fcm_end_point" />
             <mat-error *ngIf="notificationConfigurationForm.controls.fcm_end_point.hasError('required')">
-              {{'labels.inputs.FCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.FCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/external-services/notification/notification.component.html b/src/app/system/external-services/notification/notification.component.html
index f926ba6725..ce977768b1 100644
--- a/src/app/system/external-services/notification/notification.component.html
+++ b/src/app/system/external-services/notification/notification.component.html
@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'text' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'text' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ getConfigurationValue(configuration) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
diff --git a/src/app/system/external-services/sms/edit-sms/edit-sms.component.html b/src/app/system/external-services/sms/edit-sms/edit-sms.component.html
index 53ec8944ba..f9d6a49c28 100644
--- a/src/app/system/external-services/sms/edit-sms/edit-sms.component.html
+++ b/src/app/system/external-services/sms/edit-sms/edit-sms.component.html
@@ -1,56 +1,58 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Host Name' | translate}}</mat-label>
-            <input matInput required formControlName="host_name">
+            <mat-label>{{ 'labels.inputs.Host Name' | translate }}</mat-label>
+            <input matInput required formControlName="host_name" />
             <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
-              {{'labels.inputs.Host Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Host Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Port Number' | translate}}</mat-label>
-            <input matInput required formControlName="port_number">
+            <mat-label>{{ 'labels.inputs.Port Number' | translate }}</mat-label>
+            <input matInput required formControlName="port_number" />
             <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
-              {{'labels.inputs.Port Number' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Port Number' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.End Point' | translate}}</mat-label>
-            <input matInput required formControlName="end_point">
+            <mat-label>{{ 'labels.inputs.End Point' | translate }}</mat-label>
+            <input matInput required formControlName="end_point" />
             <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
-              {{'labels.inputs.End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.End Point' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-              <mat-label>{{'labels.inputs.Tenant App Key' | translate}}</mat-label>
-              <input matInput required formControlName="tenant_app_key">
-              <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
-                {{'labels.inputs.Tenant App Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-              </mat-error>
-            </mat-form-field>
-
+            <mat-label>{{ 'labels.inputs.Tenant App Key' | translate }}</mat-label>
+            <input matInput required formControlName="tenant_app_key" />
+            <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
+              {{ 'labels.inputs.Tenant App Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/external-services/sms/sms.component.html b/src/app/system/external-services/sms/sms.component.html
index a0187e32b0..ca6038d977 100644
--- a/src/app/system/external-services/sms/sms.component.html
+++ b/src/app/system/external-services/sms/sms.component.html
@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'text' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'text' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.value }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>
diff --git a/src/app/system/manage-data-tables/column-dialog/column-dialog.component.html b/src/app/system/manage-data-tables/column-dialog/column-dialog.component.html
index 56e49ff4e6..128b4a7b19 100644
--- a/src/app/system/manage-data-tables/column-dialog/column-dialog.component.html
+++ b/src/app/system/manage-data-tables/column-dialog/column-dialog.component.html
@@ -1,35 +1,36 @@
-<h1 mat-dialog-title>{{ data.columnName ? ('labels.buttons.Edit' | translate) : ('labels.buttons.Add' | translate) }} {{'labels.inputs.Column' | translate }}</h1>
+<h1 mat-dialog-title>
+  {{ data.columnName ? ('labels.buttons.Edit' | translate) : ('labels.buttons.Add' | translate) }}
+  {{ 'labels.inputs.Column' | translate }}
+</h1>
 
 <mat-dialog-content>
-
   <form [formGroup]="columnForm">
-
     <div fxLayout="column">
-
       <mat-form-field>
-        <mat-label>{{'labels.inputs.Column Name' | translate }}</mat-label>
-        <input matInput required formControlName="name">
+        <mat-label>{{ 'labels.inputs.Column Name' | translate }}</mat-label>
+        <input matInput required formControlName="name" />
         <mat-error *ngIf="columnForm.controls.name.hasError('required')">
-          {{'labels.inputs.Column Name' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Column Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>{{'labels.inputs.Column Type' | translate }}</mat-label>
+        <mat-label>{{ 'labels.inputs.Column Type' | translate }}</mat-label>
         <mat-select required formControlName="type">
           <mat-option *ngFor="let columnType of columnTypeData" [value]="columnType.value">
-            {{ columnType.displayValue | translateKey:'inputs' }}
+            {{ columnType.displayValue | translateKey: 'inputs' }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field *ngIf="columnForm.value.type === 'String'">
-        <mat-label> {{'labels.inputs.Column Length' | translate }}</mat-label>
-        <input matInput required type="number" formControlName="length">
+        <mat-label> {{ 'labels.inputs.Column Length' | translate }}</mat-label>
+        <input matInput required type="number" formControlName="length" />
       </mat-form-field>
 
       <mat-form-field *ngIf="columnForm.value.type === 'Dropdown'">
-        <mat-label> {{'labels.inputs.Column Code' | translate }}</mat-label>
+        <mat-label> {{ 'labels.inputs.Column Code' | translate }}</mat-label>
         <mat-select required formControlName="code">
           <mat-option *ngFor="let columnCode of data.columnCodes" [value]="columnCode.name">
             {{ columnCode.name }}
@@ -38,25 +39,29 @@ <h1 mat-dialog-title>{{ data.columnName ? ('labels.buttons.Edit' | translate) :
       </mat-form-field>
 
       <div>
-        <mat-checkbox labelPosition="after" formControlName="mandatory">{{'labels.text.Mandatory' | translate}}</mat-checkbox>
+        <mat-checkbox labelPosition="after" formControlName="mandatory">{{
+          'labels.text.Mandatory' | translate
+        }}</mat-checkbox>
       </div>
 
       <div>
-        <mat-checkbox labelPosition="after" formControlName="unique">{{'labels.inputs.Unique' | translate}}</mat-checkbox>
+        <mat-checkbox labelPosition="after" formControlName="unique">{{
+          'labels.inputs.Unique' | translate
+        }}</mat-checkbox>
       </div>
 
       <div>
-        <mat-checkbox labelPosition="after" formControlName="indexed">{{'labels.inputs.Indexed' | translate}}</mat-checkbox>
+        <mat-checkbox labelPosition="after" formControlName="indexed">{{
+          'labels.inputs.Indexed' | translate
+        }}</mat-checkbox>
       </div>
-
     </div>
-
   </form>
-
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>{{'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="primary" [disabled]="!columnForm.valid || columnForm.pristine"
-    (click)="submit()">{{'labels.buttons.Submit' | translate }}</button>
+  <button mat-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [disabled]="!columnForm.valid || columnForm.pristine" (click)="submit()">
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
index 91faca0143..5d0a67a589 100644
--- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
+++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
@@ -1,38 +1,35 @@
 <div class="container">
-
   <mat-card>
-
     <form #dataTableFormRef [formGroup]="dataTableForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="40%">
-            <mat-label>{{'labels.inputs.Data Table Name' | translate}}</mat-label>
-            <input matInput required formControlName="datatableName">
+            <mat-label>{{ 'labels.inputs.Data Table Name' | translate }}</mat-label>
+            <input matInput required formControlName="datatableName" />
             <mat-error *ngIf="dataTableForm.controls.datatableName.hasError('required')">
-              {{'labels.inputs.Data Table Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Data Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="20%">
-            <mat-label>{{'labels.inputs.Entity Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity Type' | translate }}</mat-label>
             <mat-select required formControlName="apptableName">
               <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
-                {{ appTable.displayValue | translateKey:'inputs'}}
+                {{ appTable.displayValue | translateKey: 'inputs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
-              {{'labels.inputs.Application Table Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="20%" *ngIf="showEntitySubType">
-            <mat-label>{{'labels.inputs.Entity SubType' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
             <mat-select formControlName="entitySubType">
               <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
-                {{ entitySubType.displayValue | translateKey:'inputs' }}
+                {{ entitySubType.displayValue | translateKey: 'inputs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -41,88 +38,133 @@
             <mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
             <mat-select formControlName="entitySubType">
               <mat-option *ngFor="let savingsSubType of savingsSubTypeData" [value]="savingsSubType.value">
-                {{ savingsSubType.displayValue | translateKey:'inputs'}}
+                {{ savingsSubType.displayValue | translateKey: 'inputs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <div fxFlex="14%" class="multi-row-wrapper">
-            <mat-checkbox labelPosition="before" formControlName="multiRow" class="multi-row">{{'labels.inputs.Multi Row' | translate }}</mat-checkbox>
+            <mat-checkbox labelPosition="before" formControlName="multiRow" class="multi-row">{{
+              'labels.inputs.Multi Row' | translate
+            }}</mat-checkbox>
           </div>
-
         </div>
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
-
-          <p fxFlex="20%" class="mat-title">{{'labels.inputs.Columns' | translate}}</p>
+          <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Columns' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addColumn()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}} {{'labels.inputs.Columns' | translate}}
+            {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Columns' | translate }}
           </button>
-
         </div>
 
-        <br>
+        <br />
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Name' | translate}} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnName }}
-              <fa-icon *ngIf="column.isColumnPrimaryKey" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Primary Key' | translate}}" matTooltipPosition="right"></fa-icon>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+            <td mat-cell *matCellDef="let column">
+              {{ column.columnName }}
+              <fa-icon
+                *ngIf="column.isColumnPrimaryKey"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Primary Key' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="type">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Type' | translate}} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnDisplayType }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+            <td mat-cell *matCellDef="let column">{{ column.columnDisplayType }}</td>
           </ng-container>
 
           <ng-container matColumnDef="length">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Length' | translate}} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnLength }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Length' | translate }}</th>
+            <td mat-cell *matCellDef="let column">{{ column.columnLength }}</td>
           </ng-container>
 
           <ng-container matColumnDef="code">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Code' | translate }} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnCode }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Code' | translate }}</th>
+            <td mat-cell *matCellDef="let column">{{ column.columnCode }}</td>
           </ng-container>
 
           <ng-container matColumnDef="mandatory">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.text.Mandatory' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.text.Mandatory' | translate }}</th>
             <td mat-cell *matCellDef="let column" class="left">
-              <fa-icon *ngIf="!column.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="column.isColumnNullable" icon="times-circle" size="lg" class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="!column.isColumnNullable"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="column.isColumnNullable"
+                icon="times-circle"
+                size="lg"
+                class="not-column-mandatory"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="unique">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Unique' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Unique' | translate }}
+            </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon *ngIf="column.isColumnUnique" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!column.isColumnUnique" icon="times-circle" size="lg" class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}" unique="right"></fa-icon>
+              <fa-icon
+                *ngIf="column.isColumnUnique"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!column.isColumnUnique"
+                icon="times-circle"
+                size="lg"
+                class="not-column-mandatory"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                unique="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="indexed">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Indexed' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Indexed' | translate }}
+            </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon *ngIf="column.isColumnIndexed" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!column.isColumnIndexed" icon="times-circle" size="lg" class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="column.isColumnIndexed"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!column.isColumnIndexed"
+                icon="times-circle"
+                size="lg"
+                class="not-column-mandatory"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Actions' | translate }} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let column" fxLayoutGap="15%">
               <button type="button" color="primary" mat-icon-button (click)="editColumn(column)">
                 <fa-icon icon="edit" size="lg"></fa-icon>
@@ -134,33 +176,44 @@
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary"
-          [disabled]="!dataTableForm.valid || columnData.length === 0">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!dataTableForm.valid || columnData.length === 0">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateDataTableFormRef let-popover="popover">
-  <h2>{{'labels.buttons.Create Datatable' | translate }}</h2>
-  <p class="mw400">{{'labels.text.Filling Details' | translate }} <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52592760/Manage+Data+Tables" target="_blank">{{'labels.inputs.Manage Datatables' | translate}}</a></p>
+  <h2>{{ 'labels.buttons.Create Datatable' | translate }}</h2>
+  <p class="mw400">
+    {{ 'labels.text.Filling Details' | translate }}
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52592760/Manage+Data+Tables" target="_blank">{{
+      'labels.inputs.Manage Datatables' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();">{{'labels.buttons.Create Datatable' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create Datatable' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
index c3c87041bf..3c16f93ace 100644
--- a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
+++ b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
@@ -1,109 +1,154 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="dataTableForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="40%">
-            <mat-label>{{'labels.inputs.Data Table Name' | translate}}</mat-label>
-            <input matInput required formControlName="datatableName">
+            <mat-label>{{ 'labels.inputs.Data Table Name' | translate }}</mat-label>
+            <input matInput required formControlName="datatableName" />
           </mat-form-field>
 
           <mat-form-field fxFlex="20%">
-            <mat-label>{{'labels.inputs.Application Table Name' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Application Table Name' | translate }}</mat-label>
             <mat-select required formControlName="apptableName">
               <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
-                {{ appTable.displayValue | translateKey:'inputs'}}
+                {{ appTable.displayValue | translateKey: 'inputs' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
-              {{'labels.inputs.Application Table Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="20%" *ngIf="showEntitySubType">
-            <mat-label>{{'labels.inputs.Entity SubType' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
             <mat-select formControlName="entitySubType">
               <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
-                {{ entitySubType.displayValue | translateKey:'inputs'}}
+                {{ entitySubType.displayValue | translateKey: 'inputs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
         </div>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
-
-          <p fxFlex="20%" class="mat-title">{{'labels.inputs.Columns' | translate}}</p>
+          <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Columns' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addColumn()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}} {{'labels.inputs.Columns' | translate}}
+            {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Columns' | translate }}
           </button>
-
         </div>
 
-        <br>
+        <br />
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{ 'labels.inputs.Name' | translate}} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnName }}</td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Name' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let column">{{ column.columnName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="type">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Type' | translate}} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnDisplayType }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Type' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let column">{{ column.columnDisplayType }}</td>
           </ng-container>
 
           <ng-container matColumnDef="length">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Length' | translate}} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnLength }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Length' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let column">{{ column.columnLength }}</td>
           </ng-container>
 
           <ng-container matColumnDef="code">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{ 'labels.inputs.Code' | translate }} </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnCode }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Code' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let column">{{ column.columnCode }}</td>
           </ng-container>
 
           <ng-container matColumnDef="mandatory">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.text.Mandatory' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.text.Mandatory' | translate }}
+            </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon *ngIf="!column.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="column.isColumnNullable" icon="times-circle" size="lg" class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="!column.isColumnNullable"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="column.isColumnNullable"
+                icon="times-circle"
+                size="lg"
+                class="not-column-mandatory"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="unique">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Unique' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Unique' | translate }}
+            </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon *ngIf="column.isColumnUnique" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!column.isColumnUnique" icon="times-circle" size="lg" class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}" unique="right"></fa-icon>
+              <fa-icon
+                *ngIf="column.isColumnUnique"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!column.isColumnUnique"
+                icon="times-circle"
+                size="lg"
+                class="not-column-mandatory"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                unique="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="indexed">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Indexed' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Indexed' | translate }}
+            </th>
             <td mat-cell *matCellDef="let column">
-              <fa-icon *ngIf="column.isColumnIndexed" icon="check-circle" size="lg" class="column-mandatory"
-                matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-              <fa-icon *ngIf="!column.isColumnIndexed" icon="times-circle" size="lg" class="not-column-mandatory"
-                matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+              <fa-icon
+                *ngIf="column.isColumnIndexed"
+                icon="check-circle"
+                size="lg"
+                class="column-mandatory"
+                matTooltip="{{ 'tooltips.Yes' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
+              <fa-icon
+                *ngIf="!column.isColumnIndexed"
+                icon="times-circle"
+                size="lg"
+                class="not-column-mandatory"
+                matTooltip="{{ 'tooltips.No' | translate }}"
+                matTooltipPosition="right"
+              ></fa-icon>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{ 'labels.inputs.Actions' | translate }} </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+              {{ 'labels.inputs.Actions' | translate }}
+            </th>
             <td mat-cell *matCellDef="let column" fxLayoutGap="15%" class="center">
               <button type="button" color="primary" mat-icon-button (click)="editColumn(column)" *ngIf="!column.system">
                 <fa-icon icon="edit" size="lg"></fa-icon>
@@ -115,22 +160,20 @@
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
-        <button mat-raised-button color="primary" [disabled]="!isFormEdited"
-          *mifosxHasPermission="'UPDATE_DATATABLE'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!isFormEdited" *mifosxHasPermission="'UPDATE_DATATABLE'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-data-tables/manage-data-tables.component.html b/src/app/system/manage-data-tables/manage-data-tables.component.html
index eb382162a0..acdac7db8c 100644
--- a/src/app/system/manage-data-tables/manage-data-tables.component.html
+++ b/src/app/system/manage-data-tables/manage-data-tables.component.html
@@ -2,73 +2,106 @@
   <div #createDatatableRef class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DATATABLE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Create Data Table' | translate}}
+      {{ 'labels.buttons.Create Data Table' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #datatablesList class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="registeredTableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Data Table Name' | translate}} </th>
-        <td mat-cell *matCellDef="let dataTable"> {{ dataTable.registeredTableName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Data Table Name' | translate }}</th>
+        <td mat-cell *matCellDef="let dataTable">{{ dataTable.registeredTableName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="applicationTableName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Associated With' | translate}} </th>
-        <td mat-cell *matCellDef="let dataTable"> {{ dataTable.applicationTableName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Associated With' | translate }}</th>
+        <td mat-cell *matCellDef="let dataTable">{{ dataTable.applicationTableName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="entitySubType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Sub Type' | translate}} </th>
-        <td mat-cell *matCellDef="let dataTable"> {{ dataTable.entitySubType }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Sub Type' | translate }}</th>
+        <td mat-cell *matCellDef="let dataTable">{{ dataTable.entitySubType }}</td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.registeredTableName]" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [routerLink]="[row.registeredTableName]"
+        class="select-row"
+      ></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateCreateDatatableRef let-popover="popover">
-  <h2>{{'labels.buttons.Create Data Table' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Launch a page that create new data table' | translate}}</p>
+  <h2>{{ 'labels.buttons.Create Data Table' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Launch a page that create new data table' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter datatables' | translate}}</h4>
+  <h4>{{ 'labels.heading.Search bar to filter datatables' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateDatatableRef,createDatatableRef,'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDatatablesList,datatablesList,'top', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateCreateDatatableRef, createDatatableRef, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateDatatablesList, datatablesList, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateDatatablesList let-popover="popover">
-  <h4>{{'labels.heading.List of all currently available data tables' | translate}}</h4>
+  <h4>{{ 'labels.heading.List of all currently available data tables' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html b/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html
index 2493e9b315..bbed947268 100644
--- a/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html
+++ b/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html
@@ -1,97 +1,126 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DATATABLE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_DATATABLE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
-
 </div>
 
 <div class="container m-b-15" fxLayoutAlign="start">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="12px">
         <div class="mat-body-strong">
-          {{'labels.inputs.Associated With' | translate}}
+          {{ 'labels.inputs.Associated With' | translate }}
         </div>
         <div>
           {{ dataTableData.applicationTableName }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="columnName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Field Name' | translate}} </th>
-      <td mat-cell *matCellDef="let dataTableColumn"> {{ dataTableColumn.columnName }}</td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+        {{ 'labels.inputs.Field Name' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let dataTableColumn">{{ dataTableColumn.columnName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="columnDisplayType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Type' | translate}} </th>
-      <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnDisplayType }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">{{ 'labels.inputs.Type' | translate }}</th>
+      <td mat-cell *matCellDef="let dataTable">{{ dataTable.columnDisplayType }}</td>
     </ng-container>
 
     <ng-container matColumnDef="columnLength">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Length' | translate}} </th>
-      <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnLength }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">{{ 'labels.inputs.Length' | translate }}</th>
+      <td mat-cell *matCellDef="let dataTable">{{ dataTable.columnLength }}</td>
     </ng-container>
 
     <ng-container matColumnDef="columnCode">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{ 'labels.inputs.Code' | translate }} </th>
-      <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnCode }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">{{ 'labels.inputs.Code' | translate }}</th>
+      <td mat-cell *matCellDef="let dataTable">{{ dataTable.columnCode }}</td>
     </ng-container>
 
     <ng-container matColumnDef="isColumnNullable">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.text.Mandatory' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+        {{ 'labels.text.Mandatory' | translate }}
+      </th>
       <td mat-cell *matCellDef="let dataTable">
-        <fa-icon *ngIf="!dataTable.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-        <fa-icon *ngIf="dataTable.isColumnNullable" icon="times-circle" size="lg" class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+        <fa-icon
+          *ngIf="!dataTable.isColumnNullable"
+          icon="check-circle"
+          size="lg"
+          class="column-mandatory"
+          matTooltip="{{ 'tooltips.Yes' | translate }}"
+          matTooltipPosition="right"
+        ></fa-icon>
+        <fa-icon
+          *ngIf="dataTable.isColumnNullable"
+          icon="times-circle"
+          size="lg"
+          class="not-column-mandatory"
+          matTooltip="{{ 'tooltips.No' | translate }}"
+          matTooltipPosition="right"
+        ></fa-icon>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="isColumnUnique">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Unique' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">{{ 'labels.inputs.Unique' | translate }}</th>
       <td mat-cell *matCellDef="let dataTable">
-        <fa-icon *ngIf="dataTable.isColumnUnique" icon="check-circle" size="lg" class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-        <fa-icon *ngIf="!dataTable.isColumnUnique" icon="times-circle" size="lg" class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+        <fa-icon
+          *ngIf="dataTable.isColumnUnique"
+          icon="check-circle"
+          size="lg"
+          class="column-mandatory"
+          matTooltip="{{ 'tooltips.Yes' | translate }}"
+          matTooltipPosition="right"
+        ></fa-icon>
+        <fa-icon
+          *ngIf="!dataTable.isColumnUnique"
+          icon="times-circle"
+          size="lg"
+          class="not-column-mandatory"
+          matTooltip="{{ 'tooltips.No' | translate }}"
+          matTooltipPosition="right"
+        ></fa-icon>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="isColumnIndexed">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> {{'labels.inputs.Indexed' | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center">
+        {{ 'labels.inputs.Indexed' | translate }}
+      </th>
       <td mat-cell *matCellDef="let dataTable">
-        <fa-icon *ngIf="dataTable.isColumnIndexed" icon="check-circle" size="lg" class="column-mandatory"
-          matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
-        <fa-icon *ngIf="!dataTable.isColumnIndexed" icon="times-circle" size="lg" class="not-column-mandatory"
-          matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
+        <fa-icon
+          *ngIf="dataTable.isColumnIndexed"
+          icon="check-circle"
+          size="lg"
+          class="column-mandatory"
+          matTooltip="{{ 'tooltips.Yes' | translate }}"
+          matTooltipPosition="right"
+        ></fa-icon>
+        <fa-icon
+          *ngIf="!dataTable.isColumnIndexed"
+          icon="times-circle"
+          size="lg"
+          class="not-column-mandatory"
+          matTooltip="{{ 'tooltips.No' | translate }}"
+          matTooltipPosition="right"
+        ></fa-icon>
       </td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
 </div>
diff --git a/src/app/system/manage-external-events/manage-external-events.component.html b/src/app/system/manage-external-events/manage-external-events.component.html
index 607af33fe3..312ab3ffd6 100644
--- a/src/app/system/manage-external-events/manage-external-events.component.html
+++ b/src/app/system/manage-external-events/manage-external-events.component.html
@@ -1,46 +1,46 @@
 <div class="container">
-
   <div #filter fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
 
     <div class="action-button" fxLayoutGap="25px">
-      <button mat-raised-button color="primary" (click)="applyChanges()"
-        [disabled]="!existAnyUpdate" *mifosxHasPermission="'UPDATE_EXTERNAL_EVENT_CONFIGURATION'">
-        {{"labels.buttons.Apply Changes" | translate}}
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="applyChanges()"
+        [disabled]="!existAnyUpdate"
+        *mifosxHasPermission="'UPDATE_EXTERNAL_EVENT_CONFIGURATION'"
+      >
+        {{ 'labels.buttons.Apply Changes' | translate }}
       </button>
     </div>
   </div>
 
   <div #eventsTable class="mat-elevation-z8 table-container">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="eventType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Event Type" | translate}} </th>
-        <td mat-cell *matCellDef="let event"> {{ event.type | translateKey:'text'}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Event Type' | translate }}</th>
+        <td mat-cell *matCellDef="let event">{{ event.type | translateKey: 'text' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Status" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let event">
-          <mat-slide-toggle [(ngModel)]="event.enabled" name="{{event.type}}" (click)="toggleStatus(event)">
+          <mat-slide-toggle [(ngModel)]="event.enabled" name="{{ event.type }}" (click)="toggleStatus(event)">
             <div [className]="event.enabled ? 'enabled' : 'disabled'">
-              <span *ngIf="event.enabled">{{'labels.inputs.Enabled' | translate}}</span>
-              <span *ngIf="!event.enabled">{{'labels.inputs.Disabled' | translate}}</span>
+              <span *ngIf="event.enabled">{{ 'labels.inputs.Enabled' | translate }}</span>
+              <span *ngIf="!event.enabled">{{ 'labels.inputs.Disabled' | translate }}</span>
             </div>
           </mat-slide-toggle>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html b/src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html
index d6dab62621..097e98076c 100644
--- a/src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html
+++ b/src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html
@@ -1,20 +1,18 @@
-<h1 mat-dialog-title>{{"labels.buttons.Add Event" | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.buttons.Add Event' | translate }}</h1>
 
 <mat-dialog-content>
-
   <form [formGroup]="eventForm">
-
     <div fxLayout="column">
-
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select Grouping' | translate }}</mat-label>
         <mat-select required formControlName="grouping">
           <mat-option *ngFor="let grouping of data.groupings" [value]="grouping.name">
-            {{ grouping.name | translateKey:'catalogs' }}
+            {{ grouping.name | translateKey: 'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="eventForm.controls.grouping.hasError('required')">
-          {{ 'labels.inputs.Grouping' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Grouping' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -26,7 +24,8 @@ <h1 mat-dialog-title>{{"labels.buttons.Add Event" | translate}}</h1>
           </mat-option>
         </mat-select>
         <mat-error *ngIf="eventForm.controls.entity.hasError('required')">
-          {{ 'labels.inputs.Entity' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -38,18 +37,17 @@ <h1 mat-dialog-title>{{"labels.buttons.Add Event" | translate}}</h1>
           </mat-option>
         </mat-select>
         <mat-error *ngIf="eventForm.controls.action.hasError('required')">
-          {{'labels.inputs.Action' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+          {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
-
   </form>
-
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary"
-    [disabled]="!eventForm.valid || eventForm.pristine" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
+  <button mat-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="primary" [disabled]="!eventForm.valid || eventForm.pristine" (click)="submit()">
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/system/manage-hooks/create-hook/create-hook.component.html b/src/app/system/manage-hooks/create-hook/create-hook.component.html
index 7e0927e6a8..e0b74b8fd3 100644
--- a/src/app/system/manage-hooks/create-hook/create-hook.component.html
+++ b/src/app/system/manage-hooks/create-hook/create-hook.component.html
@@ -1,159 +1,158 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="hookForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="40%">
-            <mat-label>{{"labels.inputs.Hook Template" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Hook Template' | translate }}</mat-label>
             <mat-select required formControlName="name">
               <mat-option *ngFor="let hookTemplate of hooksTemplateData.templates" [value]="hookTemplate.name">
-                {{ hookTemplate.name | translateKey:'text' }}
+                {{ hookTemplate.name | translateKey: 'text' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              {{"labels.inputs.Hook Template" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="40%">
-            <mat-label>{{"labels.inputs.Display Name" | translate}}</mat-label>
-            <input matInput required formControlName="displayName">
+            <mat-label>{{ 'labels.inputs.Display Name' | translate }}</mat-label>
+            <input matInput required formControlName="displayName" />
             <mat-error *ngIf="hookForm.controls.displayName.hasError('required')">
-              {{"labels.inputs.Display Name" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="is-active-wrapper">
             <mat-checkbox class="is-active" fxFlex="10%" labelPosition="before" formControlName="isActive">
-              {{'labels.inputs.Is Active' | translate}}?
+              {{ 'labels.inputs.Is Active' | translate }}?
             </mat-checkbox>
           </div>
-
         </div>
 
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'Web'">
-            <mat-label>{{'labels.inputs.Content Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
             <mat-select required formControlName="contentType">
               <mat-option [value]="'json'">
-                {{'labels.inputs.json' | translate}}
+                {{ 'labels.inputs.json' | translate }}
               </mat-option>
               <mat-option [value]="'form'">
-                {{'labels.inputs.form' | translate}}
+                {{ 'labels.inputs.form' | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              {{'labels.inputs.Content Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-            <mat-label>{{'labels.inputs.Phone Number' | translate}}</mat-label>
-            <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber">
-            <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+            <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+            <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
+            <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
             <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              {{'labels.inputs.Payload URL' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Payload URL' | translate}}</mat-label>
-            <input matInput required formControlName="payloadUrl">
+            <mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
+            <input matInput required formControlName="payloadUrl" />
             <mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
-              {{'labels.inputs.Payload URL' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%"
-             *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-
+        <div
+          fxLayout="row wrap"
+          fxLayout.lt-md="column"
+          fxLayoutGap="4%"
+          *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
+        >
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.SMS Provider' | translate}}</mat-label>
-            <input matInput required formControlName="smsProvider">
+            <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+            <input matInput required formControlName="smsProvider" />
             <mat-error *ngIf="hookForm.controls.smsProvider.hasError('required')">
-              {{'labels.inputs.SMS Provider' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.SMS Provider Account ID' | translate}}</mat-label>
-            <input matInput required formControlName="smsProviderAccountId">
+            <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
+            <input matInput required formControlName="smsProviderAccountId" />
             <mat-error *ngIf="hookForm.controls.smsProviderAccountId.hasError('required')">
-              {{'labels.inputs.SMS Provider Account ID' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.SMS Provider Token' | translate}}</mat-label>
-            <input matInput required formControlName="smsProviderToken">
+            <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
+            <input matInput required formControlName="smsProviderToken" />
             <mat-error *ngIf="hookForm.controls.smsProviderToken.hasError('required')">
-              {{'labels.inputs.SMS Provider Token' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <br>
+        <br />
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
-
-          <p fxFlex="20%" class="mat-title">{{'labels.inputs.Events' | translate}}</p>
+          <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Events' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}} {{'labels.inputs.Events' | translate}}
+            {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Events' | translate }}
           </button>
-
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="entityName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity Name' | translate}} </th>
-            <td mat-cell *matCellDef="let event"> {{ event.entityName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity Name' | translate }}</th>
+            <td mat-cell *matCellDef="let event">{{ event.entityName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actionName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Action' | translate }} {{ 'labels.inputs.Name' | translate}} </th>
-            <td mat-cell *matCellDef="let event"> {{ event.actionName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ 'labels.inputs.Action' | translate }} {{ 'labels.inputs.Name' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let event">{{ event.actionName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let i = index" fxLayoutGap="15%">
-              <button type="button" fxFlex="8%" color="warn" mat-icon-button
-                (click)="deleteEvent(i)">
+              <button type="button" fxFlex="8%" color="warn" mat-icon-button (click)="deleteEvent(i)">
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!hookForm.valid" *mifosxHasPermission="'CREATE_HOOK'">{{ 'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!hookForm.valid" *mifosxHasPermission="'CREATE_HOOK'">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-hooks/edit-hook/edit-hook.component.html b/src/app/system/manage-hooks/edit-hook/edit-hook.component.html
index 809cf5842a..33d6ec3a62 100644
--- a/src/app/system/manage-hooks/edit-hook/edit-hook.component.html
+++ b/src/app/system/manage-hooks/edit-hook/edit-hook.component.html
@@ -1,159 +1,161 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="hookForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="40%">
-            <mat-label>{{"labels.inputs.Hook Template" | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Hook Template' | translate }}</mat-label>
             <mat-select required formControlName="name">
               <mat-option *ngFor="let hookTemplate of hooksTemplateData.templates" [value]="hookTemplate.name">
-                {{ hookTemplate.name | translateKey:'text'}}
+                {{ hookTemplate.name | translateKey: 'text' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              {{"labels.inputs.Hook Template" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="40%">
-            <mat-label>{{"labels.inputs.Display Name" | translate}}</mat-label>
-            <input matInput required formControlName="displayName">
+            <mat-label>{{ 'labels.inputs.Display Name' | translate }}</mat-label>
+            <input matInput required formControlName="displayName" />
             <mat-error *ngIf="hookForm.controls.displayName.hasError('required')">
-              {{"labels.inputs.Display Name" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="is-active-wrapper">
             <mat-checkbox class="is-active" fxFlex="10%" labelPosition="before" formControlName="isActive">
-              {{'labels.inputs.Is Active' | translate}}?
+              {{ 'labels.inputs.Is Active' | translate }}?
             </mat-checkbox>
           </div>
-
         </div>
 
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'Web'">
-            <mat-label>{{'labels.inputs.Content Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
             <mat-select required formControlName="contentType">
               <mat-option [value]="'json'">
-                {{'labels.inputs.json' | translate}}
+                {{ 'labels.inputs.json' | translate }}
               </mat-option>
               <mat-option [value]="'form'">
-                {{'labels.inputs.form' | translate}}
+                {{ 'labels.inputs.form' | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              {{'labels.inputs.Content Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-            <mat-label>{{'labels.inputs.Phone Number' | translate}}</mat-label>
-            <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber">
-            <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+            <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+            <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
+            <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
             <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              {{'labels.inputs.Payload URL' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Payload URL' | translate}}</mat-label>
-            <input matInput required formControlName="payloadUrl">
+            <mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
+            <input matInput required formControlName="payloadUrl" />
             <mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
-              {{'labels.inputs.Payload URL' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%"
-          *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-
+        <div
+          fxLayout="row wrap"
+          fxLayout.lt-md="column"
+          fxLayoutGap="4%"
+          *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
+        >
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.SMS Provider' | translate}}</mat-label>
-            <input matInput required formControlName="smsProvider">
+            <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+            <input matInput required formControlName="smsProvider" />
             <mat-error *ngIf="hookForm.controls.smsProvider.hasError('required')">
-              {{'labels.inputs.SMS Provider' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.SMS Provider Account ID' | translate}}</mat-label>
-            <input matInput required formControlName="smsProviderAccountId">
+            <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
+            <input matInput required formControlName="smsProviderAccountId" />
             <mat-error *ngIf="hookForm.controls.smsProviderAccountId.hasError('required')">
-              {{'labels.inputs.SMS Provider Account ID' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>{{'labels.inputs.SMS Provider Token' | translate}}</mat-label>
-            <input matInput required formControlName="smsProviderToken">
+            <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
+            <input matInput required formControlName="smsProviderToken" />
             <mat-error *ngIf="hookForm.controls.smsProviderToken.hasError('required')">
-              {{'labels.inputs.SMS Provider Token' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <br>
+        <br />
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
-
-          <p fxFlex="20%" class="mat-title">{{'labels.inputs.Events' | translate}}</p>
+          <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Events' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}} {{'labels.inputs.Events' | translate}}
+            {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Events' | translate }}
           </button>
-
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="entityName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity Name' | translate}} </th>
-            <td mat-cell *matCellDef="let event"> {{ event.entityName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity Name' | translate }}</th>
+            <td mat-cell *matCellDef="let event">{{ event.entityName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actionName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Action' | translate }} {{ 'labels.inputs.Name' | translate}} </th>
-            <td mat-cell *matCellDef="let event"> {{ event.actionName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ 'labels.inputs.Action' | translate }} {{ 'labels.inputs.Name' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let event">{{ event.actionName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let i = index">
-              <button type="button" color="warn" mat-icon-button
-                (click)="deleteEvent(i)">
+              <button type="button" color="warn" mat-icon-button (click)="deleteEvent(i)">
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.inputs.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="(!hookForm.valid || hookForm.pristine) && !eventsDataChanged" *mifosxHasPermission="'UPDATE_HOOK'">{{ 'labels.inputs.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.inputs.Cancel' | translate }}</button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="(!hookForm.valid || hookForm.pristine) && !eventsDataChanged"
+          *mifosxHasPermission="'UPDATE_HOOK'"
+        >
+          {{ 'labels.inputs.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-hooks/manage-hooks.component.html b/src/app/system/manage-hooks/manage-hooks.component.html
index 9ac0a9ca9f..ea5f6671e3 100644
--- a/src/app/system/manage-hooks/manage-hooks.component.html
+++ b/src/app/system/manage-hooks/manage-hooks.component.html
@@ -1,49 +1,50 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOOK'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{"labels.buttons.Create Hook" | translate}}
+    {{ 'labels.buttons.Create Hook' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Hook Template" | translate}} </th>
-        <td mat-cell *matCellDef="let hook"> {{ hook.name | translateKey:'text' }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Hook Template' | translate }}</th>
+        <td mat-cell *matCellDef="let hook">{{ hook.name | translateKey: 'text' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Hook Name" | translate}} </th>
-        <td mat-cell *matCellDef="let hook"> {{ hook.displayName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Hook Name' | translate }}</th>
+        <td mat-cell *matCellDef="let hook">{{ hook.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let hook">
           <div [className]="hook.isActive === true ? 'true' : 'false'">
-            <fa-icon matTooltip="{{ hook.isActive === true ? ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{
+                hook.isActive === true ? ('labels.inputs.Active' | translate) : ('labels.catalogs.Inactive' | translate)
+              }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/system/manage-hooks/view-hook/view-hook.component.html b/src/app/system/manage-hooks/view-hook/view-hook.component.html
index 815f67c596..444034210c 100644
--- a/src/app/system/manage-hooks/view-hook/view-hook.component.html
+++ b/src/app/system/manage-hooks/view-hook/view-hook.component.html
@@ -1,84 +1,62 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOOK'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_HOOK'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
-        <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Hook Name' | translate}}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Hook Name' | translate }}:</div>
 
         <div fxFlex="50%">
           {{ hookData.displayName }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Status' | translate }}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Status' | translate }}:</div>
 
         <div fxFlex="50%">
-          {{ hookData.isActive ? ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}
+          {{ hookData.isActive ? ('labels.inputs.Active' | translate) : ('labels.catalogs.Inactive' | translate) }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Activation Date' | translate}}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Activation Date' | translate }}:</div>
 
         <div fxFlex="50%">
           {{ hookData.createdAt | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Updated on' | translate}}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Updated on' | translate }}:</div>
 
         <div fxFlex="50%">
           {{ hookData.updatedAt | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Events' | translate}}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Events' | translate }}:</div>
 
         <div fxFlex="50%">
-
           <mat-label *ngFor="let event of hookData.events">
-
             {{ event.actionName + '  -  ' + event.entityName }}
 
-            <br>
-
+            <br />
           </mat-label>
-
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'Web'">
-          {{'labels.inputs.Content Type' | translate}}:
+          {{ 'labels.inputs.Content Type' | translate }}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'Web'">
           {{ hookData.config[0].fieldValue }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Payload URL' | translate}}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Payload URL' | translate }}:</div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'Web'">
           {{ hookData.config[1].fieldValue }}
@@ -89,7 +67,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-        {{'labels.inputs.Phone Number' | translate}}:
+          {{ 'labels.inputs.Phone Number' | translate }}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">
@@ -105,7 +83,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{'labels.inputs.SMS Provider Account ID' | translate}}:
+          {{ 'labels.inputs.SMS Provider Account ID' | translate }}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">
@@ -113,17 +91,13 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{'labels.inputs.SMS Provider Token' | translate}}:
+          {{ 'labels.inputs.SMS Provider Token' | translate }}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">
           {{ hookData.config[4].fieldValue }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html b/src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html
index 4b2f5ac1ab..34accc8200 100644
--- a/src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html
+++ b/src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html
@@ -1,11 +1,14 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
   <div #cobCatchUpStatus>
-    <h2 class="no-m">{{'labels.heading.COB Catch-Up is' | translate}}:<span class="m-l-20 m-r-20">{{ isCatchUpRunning ? ( 'labels.catalogs.Running' | translate ) : ('labels.catalogs.Inactive' | translate)}}</span>
+    <h2 class="no-m">
+      {{ 'labels.heading.COB Catch-Up is' | translate }}:<span class="m-l-20 m-r-20">{{
+        isCatchUpRunning ? ('labels.catalogs.Running' | translate) : ('labels.catalogs.Inactive' | translate)
+      }}</span>
     </h2>
   </div>
   <button mat-raised-button class="activate" (click)="runCatchUp()" *ngIf="!isCatchUpRunning">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Run Catch-Up' | translate}}
+    {{ 'labels.buttons.Run Catch-Up' | translate }}
   </button>
 </div>
 
diff --git a/src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html b/src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html
index 7f84208840..508e4fd2eb 100644
--- a/src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html
+++ b/src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html
@@ -1,81 +1,100 @@
 <div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)">
+        <input matInput placeholder="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)" />
       </mat-form-field>
     </div>
     <div fxFlex="60%" *ngIf="allowRunInlineJob">
       <button mat-raised-button color="success" *mifosxHasPermission="'EXECUTE_INLINE_JOB'" (click)="runInlineCOB()">
-        <fa-icon icon="play" class="m-r-10"></fa-icon>{{'Start inline COB' | translate}}
+        <fa-icon icon="play" class="m-r-10"></fa-icon>{{ 'Start inline COB' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource">
-
     <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        <mat-checkbox
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+          [aria-label]="checkboxLabel()"
+        >
         </mat-checkbox>
       </th>
       <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+          [aria-label]="checkboxLabel(row)"
+        >
         </mat-checkbox>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="loanId">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.loanId}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Id' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.loanId }}</td>
     </ng-container>
 
     <ng-container matColumnDef="lockPlacedOn">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lock Placed On" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.lockPlacedOn | datetimeFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Placed On' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockPlacedOn | datetimeFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="lockOwner">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lock Owner" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.lockOwner}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Lock Owner' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.lockOwner }}</td>
     </ng-container>
 
     <ng-container matColumnDef="error">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Error" | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.error}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Error' | translate }}</th>
+      <td mat-cell *matCellDef="let loan" class="view-details">{{ loan.error }}</td>
     </ng-container>
 
     <ng-container matColumnDef="details">
-      <th mat-header-cell *matHeaderCellDef> {{"labels.heading.Details" | translate}} </th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.heading.Details' | translate }}</th>
       <td mat-cell *matCellDef="let loan" class="view-details">
-        <button mat-icon-button class="error-log" matTooltip="{{ 'tooltips.Error details' | translate}}" (click)="showDetails(loan)" matTooltipPosition="left">
+        <button
+          mat-icon-button
+          class="error-log"
+          matTooltip="{{ 'tooltips.Error details' | translate }}"
+          (click)="showDetails(loan)"
+          matTooltipPosition="left"
+        >
           <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
         </button>
-        <button mat-icon-button matTooltip="{{ 'tooltips.View Loan Account' | translate}}" (click)="viewLoanAccount(loan)" matTooltipPosition="right">
+        <button
+          mat-icon-button
+          matTooltip="{{ 'tooltips.View Loan Account' | translate }}"
+          (click)="viewLoanAccount(loan)"
+          matTooltipPosition="right"
+        >
           <fa-icon icon="eye" size="lg"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
-    </tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
   </table>
 
-  <mat-paginator [hidden]="!showPaginator" [pageSizeOptions]="[100, 500, 1000, 5000]" [pageSize]="pageSize"
-    [pageIndex]="currentPage" showFirstLastButtons (page)="changePaging($event)">
+  <mat-paginator
+    [hidden]="!showPaginator"
+    [pageSizeOptions]="[100, 500, 1000, 5000]"
+    [pageSize]="pageSize"
+    [pageIndex]="currentPage"
+    showFirstLastButtons
+    (page)="changePaging($event)"
+  >
   </mat-paginator>
-
 </div>
 
 <div class="alert" *ngIf="loans && loans.length === 0">
-
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    {{"labels.text.No loan locked available" | translate}}.
+    {{ 'labels.text.No loan locked available' | translate }}.
   </div>
-
 </div>
diff --git a/src/app/system/manage-jobs/manage-jobs.component.html b/src/app/system/manage-jobs/manage-jobs.component.html
index 6893441b1b..f9fa103822 100644
--- a/src/app/system/manage-jobs/manage-jobs.component.html
+++ b/src/app/system/manage-jobs/manage-jobs.component.html
@@ -1,16 +1,15 @@
 <mat-card class="container-card">
   <mat-card-content>
     <mat-tab-group #tabGroup mat-align-tabs="center" (selectedTabChange)="onJobTabChange($event)">
-      <mat-tab label="{{title('Scheduler Jobs')}}">
+      <mat-tab label="{{ title('Scheduler Jobs') }}">
         <mifosx-manage-scheduler-jobs></mifosx-manage-scheduler-jobs>
       </mat-tab>
-      <mat-tab label="{{title('Workflow Jobs')}}">
+      <mat-tab label="{{ title('Workflow Jobs') }}">
         <mifosx-workflow-jobs></mifosx-workflow-jobs>
       </mat-tab>
-      <mat-tab label="{{title('COB')}}">
+      <mat-tab label="{{ title('COB') }}">
         <mifosx-cob-workflow [isCatchUpRunning]="isCatchUpRunning"></mifosx-cob-workflow>
       </mat-tab>
     </mat-tab-group>
-
   </mat-card-content>
 </mat-card>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html b/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html
index 9e3f6347ba..ef67f56061 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html
@@ -1,13 +1,13 @@
-<h1 mat-dialog-title>{{'labels.buttons.Edit Job Custom Parameters' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'labels.buttons.Edit Job Custom Parameters' | translate }}</h1>
 
 <mat-dialog-content>
   <div class="jobs-container">
     <div *ngFor="let job of selectedJobs">
       <mifosx-custom-parameters-table
-      [displayName]="job.displayName"
-      [jobId]="job.jobId"
-      [jobParameters]="job.jobParameters"
-      (retrieveData)="runSelectedJobs($event)"
+        [displayName]="job.displayName"
+        [jobId]="job.jobId"
+        [jobParameters]="job.jobParameters"
+        (retrieveData)="runSelectedJobs($event)"
       >
       </mifosx-custom-parameters-table>
     </div>
@@ -15,17 +15,17 @@ <h1 mat-dialog-title>{{'labels.buttons.Edit Job Custom Parameters' | translate}}
 </mat-dialog-content>
 
 <mat-list>
-  <mat-list-item *ngFor="let message of messages" class="message" [ngClass]="{'green' : message.status}">
-    {{message.message}}
+  <mat-list-item *ngFor="let message of messages" class="message" [ngClass]="{ green: message.status }">
+    {{ message.message }}
   </mat-list-item>
 </mat-list>
 
 <mat-dialog-actions>
   <button mat-raised-button color="primary" (click)="runSelectedJobs()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Run Selected Jobs' | translate}}
+    {{ 'labels.buttons.Run Selected Jobs' | translate }}
   </button>
   <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
-    {{'labels.buttons.Close Custom Parameters' | translate}}
+    {{ 'labels.buttons.Close Custom Parameters' | translate }}
   </button>
 </mat-dialog-actions>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.html b/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.html
index 68388eefb7..4b908d0323 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.html
@@ -1,20 +1,34 @@
 <div>
-  <h2>{{'labels.inputs.Job' | translate}}: {{ displayName }}</h2>
+  <h2>{{ 'labels.inputs.Job' | translate }}: {{ displayName }}</h2>
   <table mat-table [dataSource]="updatedJobParameters">
     <ng-container matColumnDef="parameterName">
-      <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Parameter' | translate}} {{'labels.inputs.Name' | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'labels.inputs.Parameter' | translate }} {{ 'labels.inputs.Name' | translate }}
+      </th>
       <td mat-cell *matCellDef="let element; index as i">
         <mat-form-field>
-          <input matInput type="text" [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Name' | translate)" [(ngModel)]="element.parameterName" />
+          <input
+            matInput
+            type="text"
+            [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Name' | translate)"
+            [(ngModel)]="element.parameterName"
+          />
         </mat-form-field>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="parameterValue">
-      <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Parameter' | translate}} {{'labels.inputs.Value' | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'labels.inputs.Parameter' | translate }} {{ 'labels.inputs.Value' | translate }}
+      </th>
       <td mat-cell *matCellDef="let element; index as i">
         <mat-form-field>
-          <input matInput type="text" [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Value' | translate)"  [(ngModel)]="element.parameterValue" />
+          <input
+            matInput
+            type="text"
+            [placeholder]="('labels.inputs.Parameter' | translate) + ' ' + ('labels.inputs.Value' | translate)"
+            [(ngModel)]="element.parameterValue"
+          />
         </mat-form-field>
       </td>
     </ng-container>
@@ -22,9 +36,14 @@ <h2>{{'labels.inputs.Job' | translate}}: {{ displayName }}</h2>
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let row; let rowIndex = index">
-        <button type="button" mat-icon-button color="warn"
-          (click)="deleteParameter(rowIndex)" [matTooltip]="('labels.buttons.Delete' | translate)"
-          matTooltipPosition="left">
+        <button
+          type="button"
+          mat-icon-button
+          color="warn"
+          (click)="deleteParameter(rowIndex)"
+          [matTooltip]="'labels.buttons.Delete' | translate"
+          matTooltipPosition="left"
+        >
           <fa-icon icon="trash"></fa-icon>
         </button>
       </td>
@@ -36,6 +55,6 @@ <h2>{{'labels.inputs.Job' | translate}}: {{ displayName }}</h2>
 
   <button mat-button (click)="addParameter()">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Add' | translate}} {{'labels.inputs.Parameter' | translate}}
+    {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Parameter' | translate }}
   </button>
 </div>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html b/src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html
index 10481c44d7..5de996b38a 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html
@@ -1,44 +1,45 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="jobForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Job Name' | translate}}</mat-label>
-            <input matInput required formControlName="displayName">
+            <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
+            <input matInput required formControlName="displayName" />
             <mat-error *ngIf="jobForm.controls.displayName.hasError('required')">
-              {{'labels.inputs.Job Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Job Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Cron Expression' | translate}}</mat-label>
-            <input matInput required formControlName="cronExpression">
+            <mat-label>{{ 'labels.inputs.Cron Expression' | translate }}</mat-label>
+            <input matInput required formControlName="cronExpression" />
             <mat-error *ngIf="jobForm.controls.cronExpression.hasError('required')">
-              {{'labels.inputs.Cron Expression' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Cron Expression' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="active">
-            {{'labels.inputs.Is job active' | translate}}?
+            {{ 'labels.inputs.Is job active' | translate }}?
           </mat-checkbox>
-
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!jobForm.valid" *mifosxHasPermission="'UPDATE_SCHEDULER'">{{'labels.buttons.Submit' | translate}}</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">
+            {{ 'labels.buttons.Cancel' | translate }}
+          </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [disabled]="!jobForm.valid"
+            *mifosxHasPermission="'UPDATE_SCHEDULER'"
+          >
+            {{ 'labels.buttons.Submit' | translate }}
+          </button>
         </mat-card-actions>
-
       </mat-card-content>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.html b/src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.html
index 8b10216f46..f5f3ca2db8 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/error-log-popover/error-log-popover.component.html
@@ -1,27 +1,29 @@
-<h2 mat-dialog-title><span class="m-r-10">{{'labels.inputs.Job Name' | translate}}:</span>{{job.displayName}}</h2>
+<h2 mat-dialog-title>
+  <span class="m-r-10">{{ 'labels.inputs.Job Name' | translate }}:</span>{{ job.displayName }}
+</h2>
 <mat-dialog-content>
-    <table class="m-b-5">
-        <tbody>
-            <tr class="m-b-20">
-                <td class="header">{{'labels.inputs.Start Time' | translate}}</td>
-                <td>{{job.lastRunHistory.jobRunStartTime | datetimeFormat}}</td>
-                <td class="header">{{'labels.inputs.End Time' | translate}}</td>
-                <td>{{job.lastRunHistory.jobRunEndTime | datetimeFormat}}</td>
-            </tr>
-            <tr>
-                <td colspan="4" class="message">
-                    <div #content class="note-field" [class.show]="show" [class.note-text]="content.scrollHeight > 18">
-                        <span>{{job.lastRunHistory.jobRunErrorLog}}</span>
-                    </div>
-                    <button mat-flat-button *ngIf="content.scrollHeight > 18" class="show-button" (click)="show = !show">
-                        {{ buttonLabel() }}
-                    </button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="m-b-5">
+    <tbody>
+      <tr class="m-b-20">
+        <td class="header">{{ 'labels.inputs.Start Time' | translate }}</td>
+        <td>{{ job.lastRunHistory.jobRunStartTime | datetimeFormat }}</td>
+        <td class="header">{{ 'labels.inputs.End Time' | translate }}</td>
+        <td>{{ job.lastRunHistory.jobRunEndTime | datetimeFormat }}</td>
+      </tr>
+      <tr>
+        <td colspan="4" class="message">
+          <div #content class="note-field" [class.show]="show" [class.note-text]="content.scrollHeight > 18">
+            <span>{{ job.lastRunHistory.jobRunErrorLog }}</span>
+          </div>
+          <button mat-flat-button *ngIf="content.scrollHeight > 18" class="show-button" (click)="show = !show">
+            {{ buttonLabel() }}
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </mat-dialog-content>
 
 <mat-dialog-actions align="center">
-    <button mat-raised-button mat-dialog-close>{{"labels.buttons.Close" | translate}}</button>
-</mat-dialog-actions>
\ No newline at end of file
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+</mat-dialog-actions>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
index dc341f4cc8..0ee85379cd 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
@@ -1,182 +1,230 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
   <div #schedulerStatus>
-    <h2 class="no-m">{{'labels.heading.Scheduler Status' | translate}}:<span class="m-l-20 m-r-20">{{ schedulerActive ?
-        ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}</span>
+    <h2 class="no-m">
+      {{ 'labels.heading.Scheduler Status' | translate }}:<span class="m-l-20 m-r-20">{{
+        schedulerActive ? ('labels.inputs.Active' | translate) : ('labels.catalogs.Inactive' | translate)
+      }}</span>
     </h2>
   </div>
   <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Suspend' | translate}}
+    {{ 'labels.buttons.Suspend' | translate }}
   </button>
   <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Activate' | translate}}
+    {{ 'labels.buttons.Activate' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="space-top" fxLayout="row" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Run Selected Jobs' | translate}}
+      {{ 'labels.buttons.Run Selected Jobs' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="openCustomParametersDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Add Custom Parameters' | translate}}
+      {{ 'labels.buttons.Add Custom Parameters' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="refresh()">
       <fa-icon icon="sync" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Refresh' | translate}}
+      {{ 'labels.buttons.Refresh' | translate }}
     </button>
   </div>
 
   <div #jobsTable class="mat-elevation-z8 space-top">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox class="m-r-10" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            class="m-r-10"
+            (change)="$event ? masterToggle() : null"
             [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox class="m-r-10" *ngIf="!row.currentlyRunning && row.active" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            class="m-r-10"
+            *ngIf="!row.currentlyRunning && row.active"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="displayName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let job" [routerLink]="[job.jobId]"> {{ job.displayName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let job" [routerLink]="[job.jobId]">{{ job.displayName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="active">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Active' | translate}}</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Active' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.active === true ? 'currently-running' : 'not-currently-running'">
-            <fa-icon matTooltip="{{ job.active === true | yesNo }}" matTooltipPosition="right" icon="circle"
-              size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ job.active === true | yesNo }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="previousRunTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Previous Run' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Previous Run' | translate }}</th>
         <td mat-cell *matCellDef="let job">
           <div *ngIf="job.lastRunHistory">
-            <fa-icon *ngIf="job.lastRunHistory.status === 'success'" class="success"
-              [matTooltip]="('tooltips.Successful' | translate)" matTooltipPosition="right" icon="check-circle"
-              size="lg"></fa-icon>
-            <fa-icon *ngIf="!(job.lastRunHistory.status === 'success')" class="fail"
-              [matTooltip]="('tooltips.Failed' | translate)" matTooltipPosition="right" icon="times-circle"
-              size="lg"></fa-icon>
+            <fa-icon
+              *ngIf="job.lastRunHistory.status === 'success'"
+              class="success"
+              [matTooltip]="'tooltips.Successful' | translate"
+              matTooltipPosition="right"
+              icon="check-circle"
+              size="lg"
+            ></fa-icon>
+            <fa-icon
+              *ngIf="!(job.lastRunHistory.status === 'success')"
+              class="fail"
+              [matTooltip]="'tooltips.Failed' | translate"
+              matTooltipPosition="right"
+              icon="times-circle"
+              size="lg"
+            ></fa-icon>
             <span *ngIf="job.lastRunHistory" class="m-l-5">
-              {{ job.lastRunHistory.jobRunStartTime | datetimeFormat}}</span>
+              {{ job.lastRunHistory.jobRunStartTime | datetimeFormat }}</span
+            >
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="nextRunTime">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Next Run' | translate}} </th>
-        <td mat-cell *matCellDef="let job"> {{ job.nextRunTime | datetimeFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Next Run' | translate }}</th>
+        <td mat-cell *matCellDef="let job">{{ job.nextRunTime | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="currentlyRunning">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Currently Running' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currently Running' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.currentlyRunning === true ? 'currently-running' : 'not-currently-running'">
-            <fa-icon matTooltip="{{ job.currentlyRunning === true | yesNo }}" matTooltipPosition="right" icon="circle"
-              size="lg"></fa-icon>
+            <fa-icon
+              matTooltip="{{ job.currentlyRunning === true | yesNo }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="errorLog">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Error Log' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Error Log' | translate }}</th>
         <td mat-cell *matCellDef="let job" class="center">
-          <button mat-icon-button class="errorlog" (click)="showErrorLog(job)"
+          <button
+            mat-icon-button
+            class="errorlog"
+            (click)="showErrorLog(job)"
             *ngIf="!(job.lastRunHistory && job.lastRunHistory.status === 'success')"
-            matTooltip="{{'labels.inputs.Error Log' | translate}}" matTooltipPosition="right">
+            matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
+            matTooltipPosition="right"
+          >
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Run Selected Jobs' | translate}}
+    {{ 'labels.buttons.Run Selected Jobs' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="refresh()">
     <fa-icon icon="sync" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Refresh' | translate}}
+    {{ 'labels.buttons.Refresh' | translate }}
   </button>
 </div>
 
 <ng-template #templateSchedulerStatus let-data let-popover="popover">
-  <h4>{{'labels.heading.Scheduler status' | translate}}.</h4>
+  <h4>{{ 'labels.heading.Scheduler status' | translate }}.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' |
-      translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' |
-      translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' |
-      translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-data let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter jobs' | translate }}.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter jobs' | translate }}.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' |
-      translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateSchedulerStatus,schedulerStatus, 'bottom', true)">{{'labels.buttons.Back'
-      | translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateJobsTable,jobsTable, 'top', true)">{{'labels.buttons.Next' |
-      translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateSchedulerStatus, schedulerStatus, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateJobsTable, jobsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateJobsTable let-data let-popover="popover">
-  <h4>{{'labels.heading.List of all scheduled batch jobs' | translate }} <a
-      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs"
-      target="_blank">{{'labels.heading.Schedular Jobs' | translate}}</a></h4>
+  <h4>
+    {{ 'labels.heading.List of all scheduled batch jobs' | translate }}
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs" target="_blank">{{
+      'labels.heading.Schedular Jobs' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn"
-      (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' |
-      translate}}</button>
-    <button mat-raised-button color="primary"
-      (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' |
-      translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' |
-      translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-popover.component.html b/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-popover.component.html
index 5cea6c4cc5..30c4adc00c 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-popover.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-popover.component.html
@@ -1,23 +1,23 @@
-<h1 mat-dialog-title>{{'labels.heading.Selected Jobs' | translate}}:</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Selected Jobs' | translate }}:</h1>
 
 <mat-dialog-content>
-    <div class="jobs-container">
-        <mifosx-run-selected-jobs-table [selectedJobs]="selectedJobs" (confirmedJobs)="runSelectedJobs()">
-        </mifosx-run-selected-jobs-table>
-    </div>
+  <div class="jobs-container">
+    <mifosx-run-selected-jobs-table [selectedJobs]="selectedJobs" (confirmedJobs)="runSelectedJobs()">
+    </mifosx-run-selected-jobs-table>
+  </div>
 </mat-dialog-content>
 
 <mat-list>
-    <mat-list-item *ngFor="let message of messages" class="message" ngClass]="{'green' : message.status}">
-        {{message.message}}
-    </mat-list-item>
+  <mat-list-item *ngFor="let message of messages" class="message" ngClass]="{'green' : message.status}">
+    {{ message.message }}
+  </mat-list-item>
 </mat-list>
 <mat-dialog-actions>
-    <button mat-raised-button color="primary" (click)="runSelectedJobs()">
-        <fa-icon icon="play" class="m-r-10"></fa-icon>
-        {{'labels.buttons.Confirm' | translate}}
-    </button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
-        {{'labels.buttons.Cancel' | translate}}
-    </button>
-</mat-dialog-actions>
\ No newline at end of file
+  <button mat-raised-button color="primary" (click)="runSelectedJobs()">
+    <fa-icon icon="play" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
+    {{ 'labels.buttons.Cancel' | translate }}
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-table/run-selected-jobs-table.component.html b/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-table/run-selected-jobs-table.component.html
index 3d2dc7a048..91bd3494f7 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-table/run-selected-jobs-table.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-table/run-selected-jobs-table.component.html
@@ -1,23 +1,27 @@
 <div>
-    <table mat-table [dataSource]="selectedJobs">
-        <ng-container matColumnDef="displayName">
-            <th mat-header-cell *matHeaderCellDef>{{'labels.inputs.Display Name' |
-                translate}}</th>
-            <td mat-cell *matCellDef="let element; index as i">{{ element.displayName
-                }}</td>
-        </ng-container>
+  <table mat-table [dataSource]="selectedJobs">
+    <ng-container matColumnDef="displayName">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Display Name' | translate }}</th>
+      <td mat-cell *matCellDef="let element; index as i">{{ element.displayName }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let row; let rowIndex = index">
-                <button type="button" mat-icon-button color="warn" (click)="removeJobFromSelection(rowIndex)"
-                    matTooltip="Delete" matTooltipPosition="left">
-                    <fa-icon icon="trash"></fa-icon>
-                </button>
-            </td>
-        </ng-container>
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let row; let rowIndex = index">
+        <button
+          type="button"
+          mat-icon-button
+          color="warn"
+          (click)="removeJobFromSelection(rowIndex)"
+          matTooltip="Delete"
+          matTooltipPosition="left"
+        >
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="columnsToDisplay" class="first-row"></tr>
-        <tr mat-row *matRowDef="let selectedJobs; columns: columnsToDisplay"></tr>
-    </table>
-</div>
\ No newline at end of file
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay" class="first-row"></tr>
+    <tr mat-row *matRowDef="let selectedJobs; columns: columnsToDisplay"></tr>
+  </table>
+</div>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html b/src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html
index 039ab7168f..1e4a60235e 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html
@@ -1,65 +1,81 @@
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
-
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter By Version' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter By Version' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
-      <ng-container matColumnDef="version" >
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Version' | translate}} </th>
-        <td mat-cell *matCellDef="let jobHistoryData"> {{ jobHistoryData.version }} </td>
+      <ng-container matColumnDef="version">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Version' | translate }}</th>
+        <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.version }}</td>
       </ng-container>
 
       <ng-container matColumnDef="run_start_time">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Start Time' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Start Time' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.jobRunStartTime | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="run_end_time">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.End Time' | translate}}End time </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.End Time' | translate }}End time</th>
         <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.jobRunEndTime | datetimeFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">
-          <fa-icon *ngIf="jobHistoryData.status === 'success'" class="success" matTooltip="{{ 'tooltips.Successful' | translate}}" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-          <fa-icon *ngIf="!(jobHistoryData.status === 'success')" class="fail" matTooltip="{{ 'tooltips.Failed' | translate}}" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+          <fa-icon
+            *ngIf="jobHistoryData.status === 'success'"
+            class="success"
+            matTooltip="{{ 'tooltips.Successful' | translate }}"
+            matTooltipPosition="right"
+            icon="check-circle"
+            size="lg"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!(jobHistoryData.status === 'success')"
+            class="fail"
+            matTooltip="{{ 'tooltips.Failed' | translate }}"
+            matTooltipPosition="right"
+            icon="times-circle"
+            size="lg"
+          ></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="run_type">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Run Type' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Run Type' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.triggerType }}</td>
       </ng-container>
 
       <ng-container matColumnDef="error_log">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Error Log' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Error Log' | translate }}</th>
         <td mat-cell *matCellDef="let jobHistoryData">
-          <button mat-icon-button class="errorlog" *ngIf="!(jobHistoryData.status === 'success')" matTooltip="{{ 'tooltips.Error Log' | translate}}" matTooltipPosition="right" (click)="openError(jobHistoryData.version)">
+          <button
+            mat-icon-button
+            class="errorlog"
+            *ngIf="!(jobHistoryData.status === 'success')"
+            matTooltip="{{ 'tooltips.Error Log' | translate }}"
+            matTooltipPosition="right"
+            (click)="openError(jobHistoryData.version)"
+          >
             <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
     <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Back' | translate}}</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </div>
-
   </div>
-
 </div>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html b/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html
index 711e37cdbb..1a5260b4a4 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html
@@ -1,23 +1,19 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="primary" [routerLink]="['viewhistory']">
-    {{'labels.buttons.View History' | translate }}
+    {{ 'labels.buttons.View History' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Job Name' | translate}}
+          {{ 'labels.inputs.Job Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -25,39 +21,37 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Cron Expression' | translate}}
+          {{ 'labels.inputs.Cron Expression' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ jobData.cronExpression }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Is Active Job' | translate}}?
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Is Active Job' | translate }}?</div>
 
         <div fxFlex="50%">
           {{ jobData.active | yesNo }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Follow' | translate}}
+          {{ 'labels.inputs.Follow' | translate }}
         </div>
 
         <div fxFlex="50%">
-          <a href="http://www.cronmaker.com/">	{{'labels.text.Click Here To Generate Cron Expression' | translate}} </a>
+          <a href="http://www.cronmaker.com/">
+            {{ 'labels.text.Click Here To Generate Cron Expression' | translate }}
+          </a>
         </div>
-
       </div>
-
     </mat-card-content>
 
     <mat-card-actions>
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" color="primary" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Back' | translate}}</button>
+        <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html b/src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html
index 58eeb67e7a..1a8e84f669 100644
--- a/src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html
@@ -1,5 +1,14 @@
-<ngx-graph [view]="diagramSize" [links]="links" [nodes]="nodes" [curve]="curve" [layout]="layout"
-  [nodeHeight]="100" [layoutSettings]="layoutSettings" [enableZoom]="true" [center$]="center$">
+<ngx-graph
+  [view]="diagramSize"
+  [links]="links"
+  [nodes]="nodes"
+  [curve]="curve"
+  [layout]="layout"
+  [nodeHeight]="100"
+  [layoutSettings]="layoutSettings"
+  [enableZoom]="true"
+  [center$]="center$"
+>
   <ng-template #defsTemplate>
     <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
       <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
@@ -21,17 +30,23 @@
     <svg:g class="edge">
       <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
       <svg:text class="edge-label" text-anchor="middle">
-        <textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline"
-          startOffset="50%">
+        <textPath
+          class="text-path"
+          [attr.href]="'#' + link.id"
+          [style.dominant-baseline]="link.dominantBaseline"
+          startOffset="50%"
+        >
           {{ link.label }}
         </textPath>
       </svg:text>
     </svg:g>
-    <svg:g class="link-midpoint" *ngIf="link.midPoint"
-      [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'">
+    <svg:g
+      class="link-midpoint"
+      *ngIf="link.midPoint"
+      [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'"
+    >
       <ellipse rx="30" ry="10" />
-      <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey:'text' }}</svg:text>
+      <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey: 'text' }}</svg:text>
     </svg:g>
   </ng-template>
-
 </ngx-graph>
diff --git a/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html b/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html
index c7fda1935a..bf34ef56cc 100644
--- a/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html
+++ b/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html
@@ -1,62 +1,76 @@
 <div class="container space-top" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
   <mat-form-field fxFlex="31%">
-    <mat-label>{{'labels.inputs.Job Name' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
     <mat-select [formControl]="jobName" (selectionChange)="getWorkflowJobSteps($event.value)">
       <mat-option *ngFor="let job of jobNameOptions" [value]="job">
-        {{ job | translateKey:'catalogs' }}
+        {{ job | translateKey: 'catalogs' }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
   <div class="action-button" fxLayoutGap="25px" *ngIf="jobStepName">
     <button mat-raised-button color="primary" (click)="addJobStep()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate}}
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate }}
     </button>
   </div>
 
   <div class="mat-elevation-z8 container" *ngIf="jobStepsData.length > 0">
-
-    <table mat-table [dataSource]="jobStepsData" #table cdkDropList [cdkDropListData]="jobStepsData"
-      (cdkDropListDropped)="dropTable($event)">
-
+    <table
+      mat-table
+      [dataSource]="jobStepsData"
+      #table
+      cdkDropList
+      [cdkDropListData]="jobStepsData"
+      (cdkDropListDropped)="dropTable($event)"
+    >
       <ng-container matColumnDef="stepName">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Step Name' | translate}} </th>
-        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.stepName }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Step Name' | translate }}</th>
+        <td mat-cell *matCellDef="let jobStep">{{ jobStep.stepName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="stepOrder">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Order' | translate }} </th>
-        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.order }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Order' | translate }}</th>
+        <td mat-cell *matCellDef="let jobStep">{{ jobStep.order }}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Actions" | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let row; let rowIndex = index">
-          <button type="button" mat-icon-button color="warn" (click)="removeJobStep(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
-            matTooltipPosition="left">
+          <button
+            type="button"
+            mat-icon-button
+            color="warn"
+            (click)="removeJobStep(rowIndex)"
+            matTooltip="{{ 'tooltips.Delete' | translate }}"
+            matTooltipPosition="left"
+          >
             <fa-icon icon="trash"></fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
 
-  <div *ngIf="stepOrderHasChanged" fxLayout="row" class="container margin-t space-top" fxLayout.xs="column"
-    fxLayoutAlign="center" fxLayoutGap="2%">
+  <div
+    *ngIf="stepOrderHasChanged"
+    fxLayout="row"
+    class="container margin-t space-top"
+    fxLayout.xs="column"
+    fxLayoutAlign="center"
+    fxLayoutGap="2%"
+  >
     <button mat-raised-button [routerLink]="['../']">
-      {{"labels.buttons.Cancel" | translate}}
+      {{ 'labels.buttons.Cancel' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="saveChanges()">
-      {{"labels.buttons.Apply Changes" | translate}}
+      {{ 'labels.buttons.Apply Changes' | translate }}
     </button>
   </div>
 
   <div class="container space-top" *ngIf="jobStepsData.length > 0 && !stepOrderHasChanged">
     <mifosx-workflow-diagram [jobStepsData]="jobStepsData"></mifosx-workflow-diagram>
   </div>
-
 </div>
diff --git a/src/app/system/manage-reports/create-report/create-report.component.html b/src/app/system/manage-reports/create-report/create-report.component.html
index b250c79257..618c8a81d9 100644
--- a/src/app/system/manage-reports/create-report/create-report.component.html
+++ b/src/app/system/manage-reports/create-report/create-report.component.html
@@ -1,54 +1,52 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="reportForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="30%">
             <mat-label>{{ 'labels.inputs.Report Name' | translate }}</mat-label>
-            <input matInput required formControlName="reportName">
+            <input matInput required formControlName="reportName" />
             <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
-              {{ 'labels.inputs.Report Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Report Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
             <mat-label>{{ 'labels.inputs.Report Type' | translate }}</mat-label>
             <mat-select required formControlName="reportType">
-              <mat-option *ngFor="let allowedReportType of reportTemplateData.allowedReportTypes"
-                [value]="allowedReportType">
-                {{ allowedReportType | translateKey:'text' }}
+              <mat-option
+                *ngFor="let allowedReportType of reportTemplateData.allowedReportTypes"
+                [value]="allowedReportType"
+              >
+                {{ allowedReportType | translateKey: 'text' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
-              {{ 'labels.inputs.Report Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Report Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
             <mat-label>{{ 'labels.inputs.Report Sub Type' | translate }}</mat-label>
             <mat-select formControlName="reportSubType">
-              <mat-option *ngFor="let allowedReportSubType of reportTemplateData.allowedReportSubTypes"
-                [value]="allowedReportSubType">
-                {{ allowedReportSubType | translateKey:'text' }}
+              <mat-option
+                *ngFor="let allowedReportSubType of reportTemplateData.allowedReportSubTypes"
+                [value]="allowedReportSubType"
+              >
+                {{ allowedReportSubType | translateKey: 'text' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="40%">
             <mat-label>{{ 'labels.inputs.Report Category' | translate }}</mat-label>
             <mat-select formControlName="reportCategory">
-              <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions"
-                [value]="reportCategoryType">
-                {{ reportCategoryType | translateKey:'catalogs' }}
+              <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions" [value]="reportCategoryType">
+                {{ reportCategoryType | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -58,11 +56,9 @@
               {{ 'labels.inputs.User Report (UI)' | translate }}
             </mat-checkbox>
           </div>
-
         </div>
 
         <div fxLayout="column">
-
           <mat-form-field fxFlex="98%">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
@@ -70,69 +66,88 @@
 
           <mat-form-field fxFlex="98%">
             <mat-label>{{ 'labels.inputs.SQL' | translate }}</mat-label>
-            <textarea matInput required formControlName="reportSql" cdkTextareaAutosize cdkAutosizeMinRows="6"></textarea>
+            <textarea
+              matInput
+              required
+              formControlName="reportSql"
+              cdkTextareaAutosize
+              cdkAutosizeMinRows="6"
+            ></textarea>
             <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
-              {{ 'labels.inputs.SQL' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.SQL' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
-
           <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Report Parameters' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addReportParameter()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add Report Parameter' | translate }}
           </button>
-
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="parameterName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.buttons.Parameters' | translate }} </th>
-            <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.parameterName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.buttons.Parameters' | translate }}</th>
+            <td mat-cell *matCellDef="let reportParameter">{{ reportParameter.parameterName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="parameterNamePassed">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Parameter Name Passed to Pentaho' | translate }} </th>
-            <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.reportParameterName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ 'labels.inputs.Parameter Name Passed to Pentaho' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let reportParameter">{{ reportParameter.reportParameterName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let reportParameter" fxLayoutGap="15%">
-              <button type="button" fxFlex="8%" color="primary" mat-icon-button
-                (click)="editReportParameter(reportParameter)">
+              <button
+                type="button"
+                fxFlex="8%"
+                color="primary"
+                mat-icon-button
+                (click)="editReportParameter(reportParameter)"
+              >
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" fxFlex="8%" color="warn" mat-icon-button
-                (click)="deleteReportParameter(reportParameter)">
+              <button
+                type="button"
+                fxFlex="8%"
+                color="warn"
+                mat-icon-button
+                (click)="deleteReportParameter(reportParameter)"
+              >
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button type="submit" color="primary"
-          [disabled]="!reportForm.valid && reportParametersData.length === 0" *mifosxHasPermission="'CREATE_REPORT'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          type="submit"
+          color="primary"
+          [disabled]="!reportForm.valid && reportParametersData.length === 0"
+          *mifosxHasPermission="'CREATE_REPORT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-reports/edit-report/edit-report.component.html b/src/app/system/manage-reports/edit-report/edit-report.component.html
index 2d7092d6bc..dd665948ba 100644
--- a/src/app/system/manage-reports/edit-report/edit-report.component.html
+++ b/src/app/system/manage-reports/edit-report/edit-report.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="reportForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="30%">
             <mat-label>{{ 'labels.inputs.Report Name' | translate }}</mat-label>
-            <input matInput required formControlName="reportName">
+            <input matInput required formControlName="reportName" />
             <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
-              {{ 'labels.inputs.Report Name' | translate }}  {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Report Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -20,34 +16,34 @@
             <mat-label>{{ 'labels.inputs.Report Type' | translate }}</mat-label>
             <mat-select required formControlName="reportType">
               <mat-option *ngFor="let allowedReportType of reportData.allowedReportTypes" [value]="allowedReportType">
-                {{ allowedReportType | translateKey:'text'}}
+                {{ allowedReportType | translateKey: 'text' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
-              {{ 'labels.inputs.Report Type' | translate }}  {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.Report Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
             <mat-label>{{ 'labels.inputs.Report Sub Type' | translate }}</mat-label>
             <mat-select formControlName="reportSubType">
-              <mat-option *ngFor="let allowedReportSubType of reportData.allowedReportSubTypes"
-                [value]="allowedReportSubType">
-                {{ allowedReportSubType | translateKey:'text'}}
+              <mat-option
+                *ngFor="let allowedReportSubType of reportData.allowedReportSubTypes"
+                [value]="allowedReportSubType"
+              >
+                {{ allowedReportSubType | translateKey: 'text' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
 
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-
           <mat-form-field fxFlex="40%">
             <mat-label>{{ 'labels.inputs.Report Category' | translate }}</mat-label>
             <mat-select formControlName="reportCategory">
-              <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions"
-                [value]="reportCategoryType">
-                {{ reportCategoryType | translateKey:'catalogs' }}
+              <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions" [value]="reportCategoryType">
+                {{ reportCategoryType | translateKey: 'catalogs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -57,11 +53,9 @@
               {{ 'labels.inputs.User Report (UI)' | translate }}
             </mat-checkbox>
           </div>
-
         </div>
 
         <div fxLayout="column">
-
           <mat-form-field fxFlex="98%">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
@@ -69,71 +63,97 @@
 
           <mat-form-field fxFlex="98%">
             <mat-label> {{ 'labels.inputs.SQL' | translate }}</mat-label>
-            <textarea matInput required formControlName="reportSql" cdkTextareaAutosize cdkAutosizeMinRows="6"></textarea>
+            <textarea
+              matInput
+              required
+              formControlName="reportSql"
+              cdkTextareaAutosize
+              cdkAutosizeMinRows="6"
+            ></textarea>
             <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
-               {{ 'labels.inputs.SQL' | translate }}  {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+              {{ 'labels.inputs.SQL' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
 
-        <br>
+        <br />
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
-
           <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Report Parameters' | translate }}</p>
 
-          <button mat-raised-button fxFlex="20%" type="button" *ngIf="!reportData.coreReport" color="primary"
-            (click)="addReportParameter()">
+          <button
+            mat-raised-button
+            fxFlex="20%"
+            type="button"
+            *ngIf="!reportData.coreReport"
+            color="primary"
+            (click)="addReportParameter()"
+          >
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
             {{ 'labels.buttons.Add Report Parameter' | translate }}
           </button>
-
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
-
           <ng-container matColumnDef="parameterName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.buttons.Parameters' | translate }} </th>
-            <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.parameterName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.buttons.Parameters' | translate }}</th>
+            <td mat-cell *matCellDef="let reportParameter">{{ reportParameter.parameterName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="parameterNamePassed">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Parameter Name Passed to Pentaho' | translate }} </th>
-            <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.reportParameterName }} </td>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+              {{ 'labels.inputs.Parameter Name Passed to Pentaho' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let reportParameter">{{ reportParameter.reportParameterName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
             <td mat-cell *matCellDef="let reportParameter" fxLayoutGap="15%">
-              <button *ngIf="!reportData.coreReport" type="button" fxFlex="8%" color="primary" mat-icon-button
-                (click)="editReportParameter(reportParameter)">
+              <button
+                *ngIf="!reportData.coreReport"
+                type="button"
+                fxFlex="8%"
+                color="primary"
+                mat-icon-button
+                (click)="editReportParameter(reportParameter)"
+              >
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button *ngIf="!reportData.coreReport" type="button" fxFlex="8%" color="warn" mat-icon-button
-                (click)="deleteReportParameter(reportParameter)">
+              <button
+                *ngIf="!reportData.coreReport"
+                type="button"
+                fxFlex="8%"
+                color="warn"
+                mat-icon-button
+                (click)="deleteReportParameter(reportParameter)"
+              >
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
           </ng-container>
 
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
 
         <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary"
-          [disabled]="(!reportForm.valid || reportForm.pristine) && !isReportParametersChanged" *mifosxHasPermission="'UPDATE_REPORT'">{{'labels.buttons.Submit' | translate }}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="(!reportForm.valid || reportForm.pristine) && !isReportParametersChanged"
+          *mifosxHasPermission="'UPDATE_REPORT'"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-reports/manage-reports.component.html b/src/app/system/manage-reports/manage-reports.component.html
index 7302878bba..e1f4065ef5 100644
--- a/src/app/system/manage-reports/manage-reports.component.html
+++ b/src/app/system/manage-reports/manage-reports.component.html
@@ -1,99 +1,157 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateReport class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_REPORT'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        {{ 'labels.buttons.Create Report' | translate }}
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create Report' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
+  <div #filter fxLayout="row">
+    <mat-form-field fxFlex>
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
+    </mat-form-field>
+  </div>
 
-    <div #filter fxLayout="row">
-        <mat-form-field fxFlex>
-            <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-            <input matInput (keyup)="applyFilter($event.target.value)">
-        </mat-form-field>
-    </div>
-
-    <div #reportsTable class="mat-elevation-z8 table-container">
-
-        <table mat-table [dataSource]="dataSource" matSort>
-
-            <ng-container matColumnDef="reportName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Name' | translate }} </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportName }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="reportType">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Type' | translate }} </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportType | translateKey:'text'}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="reportSubType">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Sub Type' | translate }} </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportSubType | translateKey:'text'}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="reportCategory">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Category' | translate }} </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportCategory | translateKey:'catalogs' }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="coreReport">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Core Report' | translate }} </th>
-                <td mat-cell *matCellDef="let report">
-                    <fa-icon *ngIf="report.coreReport" icon="check-circle" size="lg" class="true" [matTooltip]="('tooltips.Yes' | translate)"
-                        matTooltipPosition="right"></fa-icon>
-                    <fa-icon *ngIf="!report.coreReport" icon="times-circle" size="lg" class="false" [matTooltip]="('tooltips.No' | translate)"
-                        matTooltipPosition="right"></fa-icon>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="userReport">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.User Report' | translate }} </th>
-                <td mat-cell *matCellDef="let report">
-                    <fa-icon *ngIf="report.useReport" icon="check-circle" size="lg" class="true" [matTooltip]="('tooltips.Yes' | translate)"
-                        matTooltipPosition="right"></fa-icon>
-                    <fa-icon *ngIf="!report.useReport" icon="times-circle" size="lg" class="false" [matTooltip]="('tooltips.No' | translate)"
-                        matTooltipPosition="right"></fa-icon>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]"
-                class="select-row"></tr>
-        </table>
-
-        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-    </div>
+  <div #reportsTable class="mat-elevation-z8 table-container">
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="reportName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Name' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ report.reportName }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="reportType">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Type' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ report.reportType | translateKey: 'text' }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="reportSubType">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Sub Type' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ report.reportSubType | translateKey: 'text' }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="reportCategory">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Category' | translate }}</th>
+        <td mat-cell *matCellDef="let report">{{ report.reportCategory | translateKey: 'catalogs' }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="coreReport">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Core Report' | translate }}</th>
+        <td mat-cell *matCellDef="let report">
+          <fa-icon
+            *ngIf="report.coreReport"
+            icon="check-circle"
+            size="lg"
+            class="true"
+            [matTooltip]="'tooltips.Yes' | translate"
+            matTooltipPosition="right"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!report.coreReport"
+            icon="times-circle"
+            size="lg"
+            class="false"
+            [matTooltip]="'tooltips.No' | translate"
+            matTooltipPosition="right"
+          ></fa-icon>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="userReport">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.User Report' | translate }}</th>
+        <td mat-cell *matCellDef="let report">
+          <fa-icon
+            *ngIf="report.useReport"
+            icon="check-circle"
+            size="lg"
+            class="true"
+            [matTooltip]="'tooltips.Yes' | translate"
+            matTooltipPosition="right"
+          ></fa-icon>
+          <fa-icon
+            *ngIf="!report.useReport"
+            icon="times-circle"
+            size="lg"
+            class="false"
+            [matTooltip]="'tooltips.No' | translate"
+            matTooltipPosition="right"
+          ></fa-icon>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  </div>
 </div>
 
 <ng-template #templateButtonCreateReport let-popover="popover">
   <h2>{{ 'labels.buttons.Create Report' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create new report' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Filter reports by name' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateReport, buttonCreateReport, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReportsTable,reportsTable, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateReport, buttonCreateReport, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateReportsTable, reportsTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateReportsTable let-popover="popover">
-  <h4 class="mw300">{{ 'labels.heading.List of all currently available reports' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">{{'labels.heading.Manage Reports' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of all currently available reports' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">{{
+      'labels.heading.Manage Reports' | translate
+    }}</a>
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/manage-reports/report-parameter-dialog/report-parameter-dialog.component.html b/src/app/system/manage-reports/report-parameter-dialog/report-parameter-dialog.component.html
index d2919a150a..c4870deeed 100644
--- a/src/app/system/manage-reports/report-parameter-dialog/report-parameter-dialog.component.html
+++ b/src/app/system/manage-reports/report-parameter-dialog/report-parameter-dialog.component.html
@@ -1,11 +1,11 @@
-<h1 mat-dialog-title>{{ data.parameterName ? ('labels.buttons.Edit' | translate) : ('labels.buttons.Add' | translate) }} {{'labels.heading.Report Parameter' | translate }}</h1>
+<h1 mat-dialog-title>
+  {{ data.parameterName ? ('labels.buttons.Edit' | translate) : ('labels.buttons.Add' | translate) }}
+  {{ 'labels.heading.Report Parameter' | translate }}
+</h1>
 
 <mat-dialog-content>
-
   <form [formGroup]="reportParameterForm">
-
     <div fxLayout="column">
-
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select allowed parameter' | translate }}</mat-label>
         <mat-select required formControlName="parameterName">
@@ -14,23 +14,27 @@ <h1 mat-dialog-title>{{ data.parameterName ? ('labels.buttons.Edit' | translate)
           </mat-option>
         </mat-select>
         <mat-error *ngIf="reportParameterForm.controls.parameterName.hasError('required')">
-          {{ 'labels.inputs.Report Parameters' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.Report Parameters' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>{{'labels.inputs.Parameter Name Passed to Pentaho' | translate }}</mat-label>
-        <input matInput formControlName="reportParameterName">
+        <mat-label>{{ 'labels.inputs.Parameter Name Passed to Pentaho' | translate }}</mat-label>
+        <input matInput formControlName="reportParameterName" />
       </mat-form-field>
-
     </div>
-
   </form>
-
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="primary"
-    [disabled]="!reportParameterForm.valid || reportParameterForm.pristine" (click)="submit()">{{'labels.buttons.Submit' | translate }}</button>
+  <button mat-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [disabled]="!reportParameterForm.valid || reportParameterForm.pristine"
+    (click)="submit()"
+  >
+    {{ 'labels.buttons.Submit' | translate }}
+  </button>
 </mat-dialog-actions>
diff --git a/src/app/system/manage-reports/view-report/view-report.component.html b/src/app/system/manage-reports/view-report/view-report.component.html
index 80e4b2ba80..ad56f4f8b3 100644
--- a/src/app/system/manage-reports/view-report/view-report.component.html
+++ b/src/app/system/manage-reports/view-report/view-report.component.html
@@ -1,35 +1,27 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_REPORT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 
   <span *ngIf="!reportData.coreReport">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_REPORT'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Delete' | translate }}
+      {{ 'labels.buttons.Delete' | translate }}
     </button>
   </span>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-title>{{ reportData.reportName }}</mat-card-title>
 
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
-        <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Report Type' | translate }}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Report Type' | translate }}:</div>
 
         <div fxFlex="50%">
-          {{ reportData.reportType | translateKey:'text' }}
+          {{ reportData.reportType | translateKey: 'text' }}
         </div>
 
         <div *ngIf="reportData.reportSubType" fxFlex="50%" class="mat-body-strong">
@@ -37,37 +29,27 @@
         </div>
 
         <div *ngIf="reportData.reportSubType" fxFlex="50%">
-          {{ reportData.reportSubType | translateKey:'text' }}
+          {{ reportData.reportSubType | translateKey: 'text' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Report Category' | translate }}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Report Category' | translate }}:</div>
 
         <div fxFlex="50%">
-          {{ reportData.reportCategory | translateKey:'catalogs' }}
+          {{ reportData.reportCategory | translateKey: 'catalogs' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.Core Report' | translate }}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Core Report' | translate }}:</div>
 
         <div fxFlex="50%">
           {{ reportData.coreReport | yesNo }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          {{ 'labels.inputs.User Report' | translate }}:
-        </div>
+        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.User Report' | translate }}:</div>
 
         <div fxFlex="50%">
           {{ reportData.useReport | yesNo }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/manage-surveys/create-survey/create-survey.component.html b/src/app/system/manage-surveys/create-survey/create-survey.component.html
index eb44bbd775..23abdce1c2 100644
--- a/src/app/system/manage-surveys/create-survey/create-survey.component.html
+++ b/src/app/system/manage-surveys/create-survey/create-survey.component.html
@@ -1,39 +1,37 @@
 <div class="container">
-
   <form [formGroup]="surveyForm" (ngSubmit)="submit()">
-
     <div fxLayout="column" fxLayoutGap="4%">
-
       <mat-card>
-
         <mat-card-content>
-
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
-              <input matInput maxlength="32" required formControlName="key">
+              <mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
+              <input matInput maxlength="32" required formControlName="key" />
               <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
-                {{'labels.inputs.Key' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                {{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
-              <input matInput maxlength="255" required formControlName="name">
+              <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+              <input matInput maxlength="255" required formControlName="name" />
               <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
-                {{'labels.inputs.Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
               <mat-label>{{ 'labels.inputs.Country Code' | translate }}</mat-label>
-              <input matInput maxlength="2" required formControlName="countryCode">
+              <input matInput maxlength="2" required formControlName="countryCode" />
               <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
-                {{ 'labels.inputs.Country Code' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                {{ 'labels.inputs.Country Code' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
               </mat-error>
               <mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
-                {{ 'labels.inputs.Country Code' | translate }} <strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
+                {{ 'labels.inputs.Country Code' | translate }}
+                <strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -42,48 +40,80 @@
               <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
 
-            <div fxFlexFill fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!questionDatas.length">
-              <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-              <button type="button" mat-raised-button color="primary" [disabled]="!(this.surveyForm.get('key').valid && this.surveyForm.get('name').valid && this.surveyForm.get('countryCode').valid)" (click)="addQuestion()">
-                {{'labels.buttons.Proceed' | translate}}
+            <div
+              fxFlexFill
+              fxLayout="row"
+              fxLayout.xs="column"
+              fxLayoutAlign="center"
+              fxLayoutGap="5px"
+              *ngIf="!questionDatas.length"
+            >
+              <button type="button" mat-raised-button [routerLink]="['../']">
+                {{ 'labels.buttons.Cancel' | translate }}
+              </button>
+              <button
+                type="button"
+                mat-raised-button
+                color="primary"
+                [disabled]="
+                  !(
+                    this.surveyForm.get('key').valid &&
+                    this.surveyForm.get('name').valid &&
+                    this.surveyForm.get('countryCode').valid
+                  )
+                "
+                (click)="addQuestion()"
+              >
+                {{ 'labels.buttons.Proceed' | translate }}
               </button>
             </div>
-
           </div>
-
         </mat-card-content>
-
       </mat-card>
 
       <div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
-
-        <mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
-
+        <mat-card
+          cdkDrag
+          cdkDragLockAxis="y"
+          formArrayName="questionDatas"
+          *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
+        >
           <mat-card-content>
-
-            <div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
-
+            <div
+              fxFlexFill
+              fxLayoutGap="2%"
+              fxLayout.lt-md="column"
+              fxLayout="row wrap"
+              [formGroupName]="questionIndex"
+            >
               <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
-                <h2 class="mat-h2">{{'labels.heading.Question' | translate}} {{ questionIndex + 1 }}</h2>
-                <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
+                <h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
+                <button
+                  mat-raised-button
+                  color="warn"
+                  (click)="removeQuestion(questionIndex)"
+                  [disabled]="questionDatas.controls.length === 1"
+                >
                   <fa-icon icon="trash" class="m-r-10"></fa-icon>
-                  {{'labels.buttons.Delete' | translate }} {{'labels.heading.Question' | translate}}
+                  {{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
                 </button>
               </div>
 
               <mat-form-field fxFlex="48%">
-                <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
-                <input matInput maxlength="32" required formControlName="key">
+                <mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
+                <input matInput maxlength="32" required formControlName="key" />
                 <mat-error *ngIf="question.controls.key.hasError('required')">
-                  {{'labels.inputs.Key' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                  {{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="48">
-                <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
-                <input matInput maxlength="255" required formControlName="text">
+                <mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
+                <input matInput maxlength="255" required formControlName="text" />
                 <mat-error *ngIf="question.controls.text.hasError('required')">
-                  {{'labels.inputs.Text' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                  {{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -95,75 +125,95 @@ <h2 class="mat-h2">{{'labels.heading.Question' | translate}} {{ questionIndex +
               <mat-divider [inset]="true"></mat-divider>
 
               <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mat-h4">{{'labels.heading.Options' | translate}}</h4>
+                <h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
                 <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
                   <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                  {{'labels.buttons.Add' | translate}} {{'labels.inputs.Option' | translate}}
+                  {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
                 </button>
               </div>
 
-              <div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
-
-                <div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
-
+              <div
+                cdkDropList
+                (cdkDropListDropped)="dropResponse($event, questionIndex)"
+                fxFlexFill
+                fxLayout="row wrap"
+                fxLayoutGap="2%"
+              >
+                <div
+                  cdkDrag
+                  cdkDragLockAxis="y"
+                  fxFlexFill
+                  fxLayout="row wrap"
+                  fxLayoutGap="2%"
+                  formArrayName="responseDatas"
+                  *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
+                >
                   <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
-
                     <mat-form-field fxFlex="43%">
-                      <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
-                      <input matInput required formControlName="text">
+                      <mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
+                      <input matInput required formControlName="text" />
                       <mat-error *ngIf="response.controls.text.hasError('required')">
-                        {{'labels.inputs.Text' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                        {{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
+                        <strong>{{ 'labels.commons.required' | translate }}</strong>
                       </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="43%">
-                      <mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
-                      <input matInput required formControlName="value">
+                      <mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
+                      <input matInput required formControlName="value" />
                       <mat-error *ngIf="response.controls.value.hasError('required')">
-                        {{'labels.inputs.Value' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                        {{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
+                        <strong>{{ 'labels.commons.required' | translate }}</strong>
                       </mat-error>
                       <mat-error *ngIf="response.controls.value.hasError('pattern')">
-                        {{'labels.inputs.Value' | translate}} <strong>{{'labels.commons.must be an integer between -9999 and 9999' | translate}}</strong>
+                        {{ 'labels.inputs.Value' | translate }}
+                        <strong>{{ 'labels.commons.must be an integer between -9999 and 9999' | translate }}</strong>
                       </mat-error>
                     </mat-form-field>
 
                     <div fxFlex="8%">
                       <div class="delete-wrapper">
-                        <button type="button" color="warn" mat-icon-button  [matTooltip]="('labels.buttons.Delete' | translate)" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
+                        <button
+                          type="button"
+                          color="warn"
+                          mat-icon-button
+                          [matTooltip]="'labels.buttons.Delete' | translate"
+                          matTooltipPosition="above"
+                          (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)"
+                          [disabled]="getResponseDatas(questionIndex).controls.length === 1"
+                        >
                           <fa-icon icon="trash" size="lg"></fa-icon>
                         </button>
                       </div>
                     </div>
-
                   </div>
-
                 </div>
-
               </div>
-
             </div>
-
           </mat-card-content>
 
           <div>
-
-            <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-              <button type="button" mat-raised-button (click)="cancelSurvey()">{{'labels.buttons.Cancel' | translate}}</button>
-              <button type="button" mat-raised-button color="primary"(click)="addQuestion()">
+            <mat-card-actions
+              *ngIf="isLast"
+              fxLayout="row"
+              fxLayout.xs="column"
+              fxLayoutAlign="center"
+              fxLayoutGap="5px"
+            >
+              <button type="button" mat-raised-button (click)="cancelSurvey()">
+                {{ 'labels.buttons.Cancel' | translate }}
+              </button>
+              <button type="button" mat-raised-button color="primary" (click)="addQuestion()">
                 <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                {{'labels.buttons.Add' | translate}} {{'labels.heading.Question' | translate}}
+                {{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
+              </button>
+              <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
+                {{ 'labels.buttons.Submit' | translate }}
               </button>
-              <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">{{'labels.buttons.Submit' | translate}}</button>
             </mat-card-actions>
-
           </div>
-
         </mat-card>
-
       </div>
-
     </div>
-
   </form>
-
 </div>
diff --git a/src/app/system/manage-surveys/edit-survey/edit-survey.component.html b/src/app/system/manage-surveys/edit-survey/edit-survey.component.html
index 8823a70501..30c27b2118 100644
--- a/src/app/system/manage-surveys/edit-survey/edit-survey.component.html
+++ b/src/app/system/manage-surveys/edit-survey/edit-survey.component.html
@@ -1,39 +1,91 @@
 <div class="container">
-
-    <form [formGroup]="surveyForm" (ngSubmit)="submit()">
-
-      <div fxLayout="column" fxLayoutGap="4%">
-
-        <mat-card>
-
+  <form [formGroup]="surveyForm" (ngSubmit)="submit()">
+    <div fxLayout="column" fxLayoutGap="4%">
+      <mat-card>
+        <mat-card-content>
+          <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+            <mat-form-field fxFlex="48%">
+              <mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
+              <input matInput maxlength="32" required formControlName="key" />
+              <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
+                {{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="48%">
+              <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
+              <input matInput maxlength="255" required formControlName="name" />
+              <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
+                {{ 'labels.inputs.Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="48%">
+              <mat-label>{{ 'labels.inputs.Country Code' | translate }} </mat-label>
+              <input matInput maxlength="2" required formControlName="countryCode" />
+              <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
+                {{ 'labels.inputs.Country Code' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+              <mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
+                {{ 'labels.inputs.Country Code' | translate }}
+                <strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="98%">
+              <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+            </mat-form-field>
+          </div>
+        </mat-card-content>
+      </mat-card>
+
+      <div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
+        <mat-card
+          cdkDrag
+          cdkDragLockAxis="y"
+          formArrayName="questionDatas"
+          *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
+        >
           <mat-card-content>
-
-            <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
-              <mat-form-field fxFlex="48%">
-                <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
-                <input matInput maxlength="32" required formControlName="key">
-                <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
-                  {{'labels.inputs.Key' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' |translate}}</strong>
-                </mat-error>
-              </mat-form-field>
+            <div
+              fxFlexFill
+              fxLayoutGap="2%"
+              fxLayout.lt-md="column"
+              fxLayout="row wrap"
+              [formGroupName]="questionIndex"
+            >
+              <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
+                <h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
+                <button
+                  mat-raised-button
+                  color="warn"
+                  (click)="removeQuestion(questionIndex)"
+                  [disabled]="questionDatas.controls.length === 1"
+                >
+                  <fa-icon icon="trash" class="m-r-10"></fa-icon>
+                  {{ 'labels.buttons.Delete' | translate }} {{ 'labels.heading.Question' | translate }}
+                </button>
+              </div>
 
               <mat-form-field fxFlex="48%">
-                <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
-                <input matInput maxlength="255" required formControlName="name">
-                <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
-                  {{'labels.inputs.Name' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+                <mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
+                <input matInput maxlength="32" required formControlName="key" />
+                <mat-error *ngIf="question.get('key').hasError('required')">
+                  {{ 'labels.inputs.Key' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="48%">
-                <mat-label>{{ 'labels.inputs.Country Code' | translate }} </mat-label>
-                <input matInput maxlength="2" required formControlName="countryCode">
-                <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
-                  {{ 'labels.inputs.Country Code' | translate }}   {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
-                </mat-error>
-                <mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
-                  {{ 'labels.inputs.Country Code' | translate }} <strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
+              <mat-form-field fxFlex="48">
+                <mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
+                <input matInput maxlength="255" required formControlName="text" />
+                <mat-error *ngIf="question.get('text').hasError('required')">
+                  {{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
@@ -42,121 +94,98 @@
                 <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
               </mat-form-field>
 
-            </div>
-
-          </mat-card-content>
-
-        </mat-card>
-
-        <div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
-
-          <mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
-
-            <mat-card-content>
-
-              <div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
-
-                <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
-                  <h2 class="mat-h2">{{'labels.heading.Question' | translate}} {{ questionIndex + 1 }}</h2>
-                  <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
-                    <fa-icon icon="trash" class="m-r-10"></fa-icon>
-                    {{'labels.buttons.Delete' | translate }} {{'labels.heading.Question' | translate}}
-                  </button>
-                </div>
-
-                <mat-form-field fxFlex="48%">
-                  <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
-                  <input matInput maxlength="32" required formControlName="key">
-                  <mat-error *ngIf="question.get('key').hasError('required')">
-                    {{'labels.inputs.Key' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
-                  </mat-error>
-                </mat-form-field>
-
-                <mat-form-field fxFlex="48">
-                  <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
-                  <input matInput maxlength="255" required formControlName="text">
-                  <mat-error *ngIf="question.get('text').hasError('required')">
-                    {{'labels.inputs.Text' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
-                  </mat-error>
-                </mat-form-field>
-
-                <mat-form-field fxFlex="98%">
-                  <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-                  <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-                </mat-form-field>
+              <mat-divider [inset]="true"></mat-divider>
 
-                <mat-divider [inset]="true"></mat-divider>
-
-                <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
-                  <h4 class="mat-h4">{{'labels.heading.Options' | translate}}</h4>
-                  <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
-                    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                    {{'labels.buttons.Add' | translate}} {{'labels.inputs.Option' | translate}}
-                  </button>
-                </div>
-
-                <div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
-
-                  <div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
-
-                    <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
-
-                      <mat-form-field fxFlex="43%">
-                        <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
-                        <input matInput required formControlName="text">
-                        <mat-error *ngIf="response.get('text').hasError('required')">
-                          {{'labels.inputs.Text' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
-                        </mat-error>
-                      </mat-form-field>
-
-                      <mat-form-field fxFlex="43%">
-                        <mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
-                        <input matInput required formControlName="value">
-                        <mat-error *ngIf="response.get('value').hasError('required')">
-                          {{'labels.inputs.Value' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
-                        </mat-error>
-                        <mat-error *ngIf="response.get('value').hasError('pattern')">
-                          {{'labels.inputs.Value' | translate}}<strong>{{'labels.commons.must be an integer between -9999 and 9999' | translate}}</strong>
-                        </mat-error>
-                      </mat-form-field>
+              <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
+                <h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
+                <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
+                  <fa-icon icon="plus" class="m-r-10"></fa-icon>
+                  {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Option' | translate }}
+                </button>
+              </div>
 
-                      <div fxFlex="8%">
-                        <div class="delete-wrapper">
-                          <button type="button" color="warn" mat-icon-button  [matTooltip]="('labels.buttons.Delete' | translate)" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
-                            <fa-icon icon="trash" size="lg"></fa-icon>
-                          </button>
-                        </div>
+              <div
+                cdkDropList
+                (cdkDropListDropped)="dropResponse($event, questionIndex)"
+                fxFlexFill
+                fxLayout="row wrap"
+                fxLayoutGap="2%"
+              >
+                <div
+                  cdkDrag
+                  cdkDragLockAxis="y"
+                  fxFlexFill
+                  fxLayout="row wrap"
+                  fxLayoutGap="2%"
+                  formArrayName="responseDatas"
+                  *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
+                >
+                  <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
+                    <mat-form-field fxFlex="43%">
+                      <mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
+                      <input matInput required formControlName="text" />
+                      <mat-error *ngIf="response.get('text').hasError('required')">
+                        {{ 'labels.inputs.Text' | translate }} {{ 'labels.commons.is' | translate }}
+                        <strong>{{ 'labels.commons.required' | translate }}</strong>
+                      </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="43%">
+                      <mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
+                      <input matInput required formControlName="value" />
+                      <mat-error *ngIf="response.get('value').hasError('required')">
+                        {{ 'labels.inputs.Value' | translate }} {{ 'labels.commons.is' | translate }}
+                        <strong>{{ 'labels.commons.required' | translate }}</strong>
+                      </mat-error>
+                      <mat-error *ngIf="response.get('value').hasError('pattern')">
+                        {{ 'labels.inputs.Value' | translate
+                        }}<strong>{{ 'labels.commons.must be an integer between -9999 and 9999' | translate }}</strong>
+                      </mat-error>
+                    </mat-form-field>
+
+                    <div fxFlex="8%">
+                      <div class="delete-wrapper">
+                        <button
+                          type="button"
+                          color="warn"
+                          mat-icon-button
+                          [matTooltip]="'labels.buttons.Delete' | translate"
+                          matTooltipPosition="above"
+                          (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)"
+                          [disabled]="getResponseDatas(questionIndex).controls.length === 1"
+                        >
+                          <fa-icon icon="trash" size="lg"></fa-icon>
+                        </button>
                       </div>
-
                     </div>
-
                   </div>
-
                 </div>
-
               </div>
-
-            </mat-card-content>
-
-            <div>
-
-              <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button type="button" mat-raised-button (click)="cancelSurvey()">{{'labels.buttons.Cancel' | translate}}</button>
-                <button type="button" mat-raised-button color="primary" (click)="addQuestion()">
-                  <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                  {{'labels.buttons.Add' | translate}} {{'labels.heading.Question' | translate}}
-                </button>
-                <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">{{'labels.text.Edit Survey' | translate}}</button>
-              </mat-card-actions>
-
             </div>
+          </mat-card-content>
 
-          </mat-card>
-
-        </div>
-
+          <div>
+            <mat-card-actions
+              *ngIf="isLast"
+              fxLayout="row"
+              fxLayout.xs="column"
+              fxLayoutAlign="center"
+              fxLayoutGap="5px"
+            >
+              <button type="button" mat-raised-button (click)="cancelSurvey()">
+                {{ 'labels.buttons.Cancel' | translate }}
+              </button>
+              <button type="button" mat-raised-button color="primary" (click)="addQuestion()">
+                <fa-icon icon="plus" class="m-r-10"></fa-icon>
+                {{ 'labels.buttons.Add' | translate }} {{ 'labels.heading.Question' | translate }}
+              </button>
+              <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">
+                {{ 'labels.text.Edit Survey' | translate }}
+              </button>
+            </mat-card-actions>
+          </div>
+        </mat-card>
       </div>
-
-    </form>
-
-  </div>
+    </div>
+  </form>
+</div>
diff --git a/src/app/system/manage-surveys/manage-surveys.component.html b/src/app/system/manage-surveys/manage-surveys.component.html
index 58c856d3d2..845c130375 100644
--- a/src/app/system/manage-surveys/manage-surveys.component.html
+++ b/src/app/system/manage-surveys/manage-surveys.component.html
@@ -1,71 +1,84 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Surveys' | translate}}
+    {{ 'labels.buttons.Create Surveys' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="key">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Key' | translate}} </th>
-          <td mat-cell *matCellDef="let survey"> {{ survey.key }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Key' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.key }}</td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.description }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="countryCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Country Code' | translate }} </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.countryCode }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Country Code' | translate }}</th>
+        <td mat-cell *matCellDef="let survey">{{ survey.countryCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let survey">
-            <div [className]="isActive(survey.validFrom, survey.validTo) ? 'enabled' : 'disabled'">
-                <fa-icon matTooltip="{{ !isActive(survey.validFrom, survey.validTo) ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
-            </div>
+          <div [className]="isActive(survey.validFrom, survey.validTo) ? 'enabled' : 'disabled'">
+            <fa-icon
+              matTooltip="{{
+                !isActive(survey.validFrom, survey.validTo)
+                  ? ('labels.inputs.Disabled' | translate)
+                  : ('labels.inputs.Enabled' | translate)
+              }}"
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
+          </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Action' | translate}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Action' | translate }}</th>
         <td mat-cell *matCellDef="let survey">
-          <button mat-button *ngIf="!isActive(survey.validFrom, survey.validTo)" color="accent" (click)="activate(survey); $event.stopPropagation();">
-            <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{'labels.buttons.Activate' | translate }}
+          <button
+            mat-button
+            *ngIf="!isActive(survey.validFrom, survey.validTo)"
+            color="accent"
+            (click)="activate(survey); $event.stopPropagation()"
+          >
+            <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Activate' | translate }}
           </button>
-          <button mat-button *ngIf="isActive(survey.validFrom, survey.validTo)" color="warn" (click)="deactivate(survey); $event.stopPropagation();">
-            <fa-icon icon="lock" class="m-r-10"></fa-icon>{{'labels.buttons.Deactivate' | translate}}
+          <button
+            mat-button
+            *ngIf="isActive(survey.validFrom, survey.validTo)"
+            color="warn"
+            (click)="deactivate(survey); $event.stopPropagation()"
+          >
+            <fa-icon icon="lock" class="m-r-10"></fa-icon>{{ 'labels.buttons.Deactivate' | translate }}
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let survey; columns: displayedColumns;" [routerLink]="[survey.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let survey; columns: displayedColumns" [routerLink]="[survey.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/system/manage-surveys/view-survey/view-survey.component.html b/src/app/system/manage-surveys/view-survey/view-survey.component.html
index 94871bf22e..d813affebe 100644
--- a/src/app/system/manage-surveys/view-survey/view-survey.component.html
+++ b/src/app/system/manage-surveys/view-survey/view-survey.component.html
@@ -1,33 +1,32 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'" (click)="onEdit()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate }}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container m-b-20">
   <mat-card>
     <mat-card-header fxLayout="column">
-      <mat-card-title>{{'labels.buttons.Survey' | translate }}</mat-card-title>
+      <mat-card-title>{{ 'labels.buttons.Survey' | translate }}</mat-card-title>
       <mat-divider [inset]="true"></mat-divider>
     </mat-card-header>
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>{{'labels.inputs.Key' | translate}}:</b>
+          <b>{{ 'labels.inputs.Key' | translate }}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
-          {{surveyData.key}}
+          {{ surveyData.key }}
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>{{'labels.inputs.Name' | translate}}:</b>
+          <b>{{ 'labels.inputs.Name' | translate }}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
-          {{surveyData.name}}
+          {{ surveyData.name }}
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
@@ -35,7 +34,7 @@
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
-          {{surveyData.countryCode}}
+          {{ surveyData.countryCode }}
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
@@ -43,15 +42,11 @@
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
-          {{surveyData.description}}
+          {{ surveyData.description }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <div class="container m-b-20">
@@ -64,21 +59,21 @@
       <div class="survey_questions" *ngFor="let questionData of surveyData.questionDatas; index as i">
         <mat-card>
           <mat-card-content>
-            <div>{{'labels.heading.Question' | translate}}: {{i+1}}</div>
+            <div>{{ 'labels.heading.Question' | translate }}: {{ i + 1 }}</div>
             <div fxLayout="row" id="key_text">
               <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-                <b>{{'labels.inputs.Key' | translate}}:</b>
+                <b>{{ 'labels.inputs.Key' | translate }}:</b>
               </div>
 
               <div fxFlex="40%" fxFlex.lt-md="50%">
-                {{questionData.key}}
+                {{ questionData.key }}
               </div>
               <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-                <b>{{'labels.inputs.Text' | translate}}:</b>
+                <b>{{ 'labels.inputs.Text' | translate }}:</b>
               </div>
 
               <div fxFlex="40%" fxFlex.lt-md="50%">
-                {{questionData.text}}
+                {{ questionData.text }}
               </div>
             </div>
             <div fxLayout="row" id="description">
@@ -87,18 +82,20 @@
               </div>
 
               <div fxFlex="40%" fxFlex.lt-md="50%">
-                {{questionData.description}}
+                {{ questionData.description }}
               </div>
             </div>
             <div fxLayout="column" id="questionaire">
-              <div><b>{{'labels.inputs.Option' | translate}}: </b></div>
+              <div>
+                <b>{{ 'labels.inputs.Option' | translate }}: </b>
+              </div>
               <table id="response">
                 <tr>
-                  <th *ngFor="let column of displayedColumns">{{column | titlecase}}</th>
+                  <th *ngFor="let column of displayedColumns">{{ column | titlecase }}</th>
                 </tr>
                 <tr *ngFor="let row of questionData.responseDatas">
                   <td *ngFor="let column of displayedColumns">
-                    {{row[column]}}
+                    {{ row[column] }}
                   </td>
                 </tr>
               </table>
diff --git a/src/app/system/roles-and-permissions/add-role/add-role.component.html b/src/app/system/roles-and-permissions/add-role/add-role.component.html
index a8c2d8400b..9bf41cabc8 100644
--- a/src/app/system/roles-and-permissions/add-role/add-role.component.html
+++ b/src/app/system/roles-and-permissions/add-role/add-role.component.html
@@ -1,18 +1,14 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="roleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="roleForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Role Name' | translate }}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Role Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -20,21 +16,21 @@
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput required formControlName="description"></textarea>
             <mat-error *ngIf="roleForm.controls.description.hasError('required')">
-              {{ 'labels.inputs.Role Description' | translate }}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+              {{ 'labels.inputs.Role Description' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
-        </mat-card-content>
-
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-          <button mat-raised-button color="primary" [disabled]="!roleForm.valid">{{'labels.buttons.Submit' | translate}}</button>
-        </mat-card-actions>
-
-      </form>
-
-    </mat-card>
-
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!roleForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </mat-card-actions>
+    </form>
+  </mat-card>
 </div>
diff --git a/src/app/system/roles-and-permissions/edit-role/edit-role.component.html b/src/app/system/roles-and-permissions/edit-role/edit-role.component.html
index ed5201a84d..ea9b1922d9 100644
--- a/src/app/system/roles-and-permissions/edit-role/edit-role.component.html
+++ b/src/app/system/roles-and-permissions/edit-role/edit-role.component.html
@@ -1,37 +1,32 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="roleForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
-          <div fxLayout="column">
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Role Name' | translate }}</mat-label>
-              <input matInput disabled formControlName="name">
-            </mat-form-field>
-
-            <mat-form-field>
-              <mat-label>{{ 'labels.inputs.Role Description' | translate }}</mat-label>
-              <input matInput required formControlName="description">
-              <mat-error *ngIf="roleForm.controls.description.hasError('required')">
-                {{ 'labels.inputs.Description' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
-              </mat-error>
-            </mat-form-field>
-
-          </div>
-
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Role Name' | translate }}</mat-label>
+            <input matInput disabled formControlName="name" />
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Role Description' | translate }}</mat-label>
+            <input matInput required formControlName="description" />
+            <mat-error *ngIf="roleForm.controls.description.hasError('required')">
+              {{ 'labels.inputs.Description' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!roleForm.valid || roleForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!roleForm.valid || roleForm.pristine">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/roles-and-permissions/roles-and-permissions.component.html b/src/app/system/roles-and-permissions/roles-and-permissions.component.html
index 94862cd845..42e6234e2a 100644
--- a/src/app/system/roles-and-permissions/roles-and-permissions.component.html
+++ b/src/app/system/roles-and-permissions/roles-and-permissions.component.html
@@ -2,87 +2,135 @@
   <div #buttonAddRole class="in-block">
     <button mat-raised-button color="primary">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Add Role' | translate}}
+      {{ 'labels.buttons.Add Role' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #tableRolesandPermissions class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
-        <td mat-cell *matCellDef="let role"> {{ role.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
+        <td mat-cell *matCellDef="let role">{{ role.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
-        <td mat-cell *matCellDef="let role"> {{ role.description }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
+        <td mat-cell *matCellDef="let role">{{ role.description }}</td>
       </ng-container>
 
       <ng-container matColumnDef="disabled">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let role">
           <div [className]="role.disabled === true ? 'false' : 'true'">
-            <fa-icon [matTooltip]="role.disabled === true ? (('labels.inputs.Disabled' | translate)) : (('labels.inputs.Enabled' | translate))" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon
+              [matTooltip]="
+                role.disabled === true ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate)
+              "
+              matTooltipPosition="right"
+              icon="circle"
+              size="lg"
+            ></fa-icon>
           </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let role;" >
-          <button *ngIf="role.name !== 'Super user'" mat-icon-button color="primary" (click)="routeEdit($event)" [routerLink]="[role.id, 'edit']">
-            <fa-icon icon="edit"> {{'labels.buttons.Edit' | translate }} </fa-icon>
+        <td mat-cell *matCellDef="let role">
+          <button
+            *ngIf="role.name !== 'Super user'"
+            mat-icon-button
+            color="primary"
+            (click)="routeEdit($event)"
+            [routerLink]="[role.id, 'edit']"
+          >
+            <fa-icon icon="edit"> {{ 'labels.buttons.Edit' | translate }} </fa-icon>
           </button>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonAddRole let-popover="popover">
-  <h2>{{'labels.buttons.Add Role' | translate}}</h2>
-  <p class="mw300">{{'labels.text.To create a new role' | translate}}.</p>
+  <h2>{{ 'labels.buttons.Add Role' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.To create a new role' | translate }}.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter roles' | translate }}.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter roles' | translate }}.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonAddRole, buttonAddRole, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableRolesandPermissions, tableRolesandPermissions, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonAddRole, buttonAddRole, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateTableRolesandPermissions, tableRolesandPermissions, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateTableRolesandPermissions let-popover="popover">
-  <h4 class="mw300">{{'labels.heading.List of roles defined within the organization' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895364/Manage+Roles+and+Permissions" target="_blank">{{'labels.inputs.Manage Roles and Permission' | translate}}</a></h4>
+  <h4 class="mw300">
+    {{ 'labels.heading.List of roles defined within the organization' | translate }}:
+    <a
+      href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895364/Manage+Roles+and+Permissions"
+      target="_blank"
+      >{{ 'labels.inputs.Manage Roles and Permission' | translate }}</a
+    >
+  </h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/system/roles-and-permissions/view-role/view-role.component.html b/src/app/system/roles-and-permissions/view-role/view-role.component.html
index 8591eaa3d4..373aea5bca 100644
--- a/src/app/system/roles-and-permissions/view-role/view-role.component.html
+++ b/src/app/system/roles-and-permissions/view-role/view-role.component.html
@@ -1,36 +1,53 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" (click)="editRoles(); backupCheckValues();" [disabled]="rolePermissionService.name === 'Super user'">
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="editRoles(); backupCheckValues()"
+    [disabled]="rolePermissionService.name === 'Super user'"
+  >
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.text.Edit Role' | translate }}
   </button>
 
-  <button *ngIf="!isRoleEnable(rolePermissionService.disabled)" mat-raised-button color="danger" (click)="disableRolesConfirmation()" [disabled]="rolePermissionService.name === 'Super user'">
+  <button
+    *ngIf="!isRoleEnable(rolePermissionService.disabled)"
+    mat-raised-button
+    color="danger"
+    (click)="disableRolesConfirmation()"
+    [disabled]="rolePermissionService.name === 'Super user'"
+  >
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Disable' | translate }} {{ 'labels.inputs.Role' | translate }}
   </button>
 
-  <button *ngIf="isRoleEnable(rolePermissionService.disabled)" mat-raised-button color="primary" (click)="enableRolesConfirmation()" [disabled]="rolePermissionService.name === 'Super user'">
+  <button
+    *ngIf="isRoleEnable(rolePermissionService.disabled)"
+    mat-raised-button
+    color="primary"
+    (click)="enableRolesConfirmation()"
+    [disabled]="rolePermissionService.name === 'Super user'"
+  >
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Enable' | translate }} {{ 'labels.inputs.Role' | translate }}
   </button>
 
-  <button mat-raised-button color="warn" (click)="deleteRole()" [disabled]="rolePermissionService.name === 'Super user'">
+  <button
+    mat-raised-button
+    color="warn"
+    (click)="deleteRole()"
+    [disabled]="rolePermissionService.name === 'Super user'"
+  >
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate }} {{ 'labels.inputs.Role' | translate }}
+    {{ 'labels.buttons.Delete' | translate }} {{ 'labels.inputs.Role' | translate }}
   </button>
-
 </div>
 
 <div class="container m-b-20">
-
   <mat-card class="mat-elevation-z8">
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>{{'labels.inputs.Name' | translate}}:</b>
+          <b>{{ 'labels.inputs.Name' | translate }}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
@@ -44,77 +61,79 @@
         <div fxFlex="60%" fxFlex.lt-md="50%">
           {{ rolePermissionService.description }}
         </div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
 
 <div class="mat-elevation-z8 container">
-
   <mat-card>
-
     <ng-container>
-
       <div fxLayout="row" class="permissionSelected">
         <div fxFlex="75">
           <h3>
-            {{'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong>
+            {{ 'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong>
           </h3>
         </div>
 
-        <div fxFlex= "25" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="5px" *ngIf="!isDisabled" class="selectDeselect">
-          <button mat-raised-button color="primary" (click)="selectAll()">{{'labels.buttons.Select All' | translate }}</button>
-          <button mat-raised-button color="default" (click)="deselectAll()">{{'labels.buttons.Deselect All' | translate }}</button>
+        <div
+          fxFlex="25"
+          fxLayout="row"
+          fxLayout.xs="column"
+          fxLayoutAlign="end"
+          fxLayoutGap="5px"
+          *ngIf="!isDisabled"
+          class="selectDeselect"
+        >
+          <button mat-raised-button color="primary" (click)="selectAll()">
+            {{ 'labels.buttons.Select All' | translate }}
+          </button>
+          <button mat-raised-button color="default" (click)="deselectAll()">
+            {{ 'labels.buttons.Deselect All' | translate }}
+          </button>
         </div>
-
       </div>
 
       <div fxLayout="row">
-
         <div fxFlex="30" fxLayout="column">
           <mat-list>
-            <mat-list-item [ngClass]="selectedItem === grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
+            <mat-list-item
+              [ngClass]="selectedItem === grouping ? 'active' : 'inactive'"
+              *ngFor="let grouping of groupings"
+              (click)="showPermissions(grouping)"
+            >
               <span class="groupingName">
                 {{ formatName(grouping) }}
               </span>
             </mat-list-item>
           </mat-list>
-
         </div>
 
         <mat-divider [vertical]="true"></mat-divider>
 
         <div fxFlex="70" fxLayout="column" class="listPermission">
-
           <form [formGroup]="formGroup" (submit)="submit()">
-
             <div *ngFor="let permission of permissions.permissions" class="displayPermissions">
-                <div formArrayName="roster">
-                  <div [formGroupName]="permission.id">
-                    <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
+              <div formArrayName="roster">
+                <div [formGroupName]="permission.id">
+                  <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
                     {{ permissionName(permission.code) }}
                   </mat-checkbox>
-                  </div>
                 </div>
               </div>
-
-            </form>
+            </div>
+          </form>
         </div>
-
       </div>
     </ng-container>
 
     <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!isDisabled">
       <mat-card-actions>
-        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" (click)="submit()">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
     </div>
-
   </mat-card>
-
 </div>
diff --git a/src/app/system/system.component.html b/src/app/system/system.component.html
index 66af2f1635..88786359cf 100644
--- a/src/app/system/system.component.html
+++ b/src/app/system/system.component.html
@@ -1,22 +1,19 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <div #datatables>
             <mat-list-item>
               <mat-icon matListIcon [routerLink]="['data-tables']">
                 <fa-icon icon="table" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['data-tables']">{{'labels.heading.Manage Data tables' | translate}}</h4>
+              <h4 matLine [routerLink]="['data-tables']">{{ 'labels.heading.Manage Data tables' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['data-tables']">{{'labels.text.Add new extra fields to any entity' | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['data-tables']">
+                {{ 'labels.text.Add new extra fields to any entity' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -25,10 +22,12 @@ <h4 matLine [routerLink]="['data-tables']">{{'labels.heading.Manage Data tables'
               <mat-icon matListIcon [routerLink]="['codes']">
                 <fa-icon icon="list-ul" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['codes']">{{'labels.heading.Manage Codes' | translate}}</h4>
+              <h4 matLine [routerLink]="['codes']">{{ 'labels.heading.Manage Codes' | translate }}</h4>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['codes']">{{'labels.text.Codes are used to define drop down values' | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['codes']">
+                {{ 'labels.text.Codes are used to define drop down values' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -37,10 +36,14 @@ <h4 matLine [routerLink]="['codes']">{{'labels.heading.Manage Codes' | translate
               <mat-icon matListIcon [routerLink]="['roles-and-permissions']">
                 <fa-icon icon="key" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['roles-and-permissions']">{{'labels.heading.Manage Roles and Permissions' | translate}}</h4>
+              <h4 matLine [routerLink]="['roles-and-permissions']">
+                {{ 'labels.heading.Manage Roles and Permissions' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['roles-and-permissions']">{{'labels.text.Define or modify roles and associated permissions' | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['roles-and-permissions']">
+                {{ 'labels.text.Define or modify roles and associated permissions' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -49,10 +52,14 @@ <h4 matLine [routerLink]="['roles-and-permissions']">{{'labels.heading.Manage Ro
               <mat-icon matListIcon [routerLink]="['configure-mc-tasks']">
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
-              <h4 matLine [routerLink]="['configure-mc-tasks']">{{'labels.heading.Configure Maker Checker Tasks' | translate}}</h4>
+              <h4 matLine [routerLink]="['configure-mc-tasks']">
+                {{ 'labels.heading.Configure Maker Checker Tasks' | translate }}
+              </h4>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
               <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['configure-mc-tasks']">{{'labels.text.Define or modify Maker Checker tasks' | translate}}</p>
+              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['configure-mc-tasks']">
+                {{ 'labels.text.Define or modify Maker Checker tasks' | translate }}
+              </p>
             </mat-list-item>
           </div>
 
@@ -60,196 +67,257 @@ <h4 matLine [routerLink]="['configure-mc-tasks']">{{'labels.heading.Configure Ma
             <mat-icon matListIcon [routerLink]="['hooks']">
               <fa-icon icon="anchor" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['hooks']">{{'labels.heading.Manage Hooks' | translate}}</h4>
+            <h4 matLine [routerLink]="['hooks']">{{ 'labels.heading.Manage Hooks' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['hooks']">{{'labels.text.Define Hooks' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['hooks']">
+              {{ 'labels.text.Define Hooks' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['entity-to-entity-mapping']">
               <fa-icon icon="road" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['entity-to-entity-mapping']">{{'labels.heading.Entity to Entity Mapping' | translate}}</h4>
+            <h4 matLine [routerLink]="['entity-to-entity-mapping']">
+              {{ 'labels.heading.Entity to Entity Mapping' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['entity-to-entity-mapping']">{{'labels.text.Define or modify entity to entity mappings' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['entity-to-entity-mapping']">
+              {{ 'labels.text.Define or modify entity to entity mappings' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['surveys']">
               <fa-icon icon="file-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['surveys']">{{'labels.heading.Manage Surveys' | translate}}</h4>
+            <h4 matLine [routerLink]="['surveys']">{{ 'labels.heading.Manage Surveys' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['surveys']">{{'labels.text.Manage your Services' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['surveys']">
+              {{ 'labels.text.Manage your Services' | translate }}
+            </p>
           </mat-list-item>
 
-          <mat-list-item  *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
+          <mat-list-item *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
             <mat-icon matListIcon [routerLink]="['external-events']">
               <fa-icon icon="anchor" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['external-events']">{{'labels.heading.Manage External Events' | translate}}</h4>
+            <h4 matLine [routerLink]="['external-events']">
+              {{ 'labels.heading.Manage External Events' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['external-events']">{{'labels.text.External Events configuration, to enable or disable' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['external-events']">
+              {{ 'labels.text.External Events configuration, to enable or disable' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['audit-trails']">
               <fa-icon icon="money-check" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['audit-trails']">{{'labels.heading.Audit Trails' | translate}}</h4>
+            <h4 matLine [routerLink]="['audit-trails']">{{ 'labels.heading.Audit Trails' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['audit-trails']">{{'labels.text.Audit logs of all the activities' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['audit-trails']">
+              {{ 'labels.text.Audit logs of all the activities' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['reports']">
               <fa-icon icon="file-word" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['reports']">{{'labels.heading.Manage Reports' | translate}}</h4>
+            <h4 matLine [routerLink]="['reports']">{{ 'labels.heading.Manage Reports' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['reports']">{{'labels.text.Add new report and classify reports' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['reports']">
+              {{ 'labels.text.Add new report and classify reports' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['manage-jobs']">
               <fa-icon icon="clock" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['manage-jobs']">{{'labels.heading.Manage Jobs' | translate}}</h4>
+            <h4 matLine [routerLink]="['manage-jobs']">{{ 'labels.heading.Manage Jobs' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-jobs']">{{'labels.text.Manage Schedule and Workflow jobs, modify jobs' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-jobs']">
+              {{ 'labels.text.Manage Schedule and Workflow jobs, modify jobs' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['configurations']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['configurations']">{{'labels.heading.Configurations' | translate}}</h4>
+            <h4 matLine [routerLink]="['configurations']">{{ 'labels.heading.Configurations' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="!arrowBooleans[11]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="arrowBooleans[11]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['configurations']">{{'labels.text.Global configurations, Cache and Business Date' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['configurations']">
+              {{ 'labels.text.Global configurations, Cache and Business Date' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['account-number-preferences']">
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['account-number-preferences']">{{'labels.heading.Account Number Preferences' | translate}}</h4>
+            <h4 matLine [routerLink]="['account-number-preferences']">
+              {{ 'labels.heading.Account Number Preferences' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="!arrowBooleans[12]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="arrowBooleans[12]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['account-number-preferences']">{{'labels.text.Preferences for generating account numbers for client' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['account-number-preferences']">
+              {{ 'labels.text.Preferences for generating account numbers for client' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['external-services']">
               <fa-icon icon="cog" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['external-services']">{{'labels.heading.External Services' | translate}}</h4>
+            <h4 matLine [routerLink]="['external-services']">{{ 'labels.heading.External Services' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="!arrowBooleans[13]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="arrowBooleans[13]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['external-services']">{{'labels.text.External Services Configuration' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['external-services']">
+              {{ 'labels.text.External Services Configuration' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon>
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>{{'labels.heading.Two-Factor Configuration' | translate}}</h4>
+            <h4 matLine>{{ 'labels.heading.Two-Factor Configuration' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="!arrowBooleans[14]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="arrowBooleans[14]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine *ngIf="arrowBooleans[14]">{{'labels.text.Two-factor authentication configuration' | translate}}</p>
+            <p matLine *ngIf="arrowBooleans[14]">
+              {{ 'labels.text.Two-factor authentication configuration' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateDatatables let-popover="popover">
-  <h2>{{'labels.heading.Manage Data Tables' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Mifos X data-tables allow the user to add custom fields' | translate}}</p>
+  <h2>{{ 'labels.heading.Manage Data Tables' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Mifos X data-tables allow the user to add custom fields' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepDatatables()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepDatatables()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepDatatables()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepDatatables()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateCodes let-popover="popover">
-  <h2>{{'labels.heading.Manage Codes' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Selection you can create new drop-downs and edit' | translate}}</p>
+  <h2>{{ 'labels.heading.Manage Codes' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Selection you can create new drop-downs and edit' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepCodes()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepCodes()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepCodes()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepCodes()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateRolesandPermission let-popover="popover">
-  <h2>{{'labels.heading.Manage Roles and Permissions' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Roles and Permissions allow the administrator to control access' | translate}}</p>
+  <h2>{{ 'labels.heading.Manage Roles and Permissions' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Roles and Permissions allow the administrator to control access' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepRolesandPermission()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepRolesandPermission()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepRolesandPermission()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepRolesandPermission()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateMakerCheckerTable let-popover="popover">
-  <h2>{{'labels.heading.Configure Maker-Checker Tasks' | translate}}</h2>
-  <p class="mw300">{{'labels.text.“Maker-Checker” principle requires every tasks' | translate}}</p>
+  <h2>{{ 'labels.heading.Configure Maker-Checker Tasks' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.“Maker-Checker” principle requires every tasks' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepMakerCheckerTable()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepMakerCheckerTable()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepMakerCheckerTable()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepMakerCheckerTable()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateConfigurations let-popover="popover">
-  <h2>{{'labels.heading.Configuration' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Configurations page allows you to further customize' | translate}}</p>
+  <h2>{{ 'labels.heading.Configuration' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Configurations page allows you to further customize' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepConfigurations()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepConfigurations()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepConfigurations()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepConfigurations()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateSchedulerJobs let-popover="popover">
-  <h2>{{'labels.heading.Manage Scheduler Jobs' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Scheduler Jobs can set batch jobs' | translate}}</p>
+  <h2>{{ 'labels.heading.Manage Scheduler Jobs' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Scheduler Jobs can set batch jobs' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepSchedulerJobs()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepSchedulerJobs()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepSchedulerJobs()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepSchedulerJobs()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateManageReports let-popover="popover">
-  <h2>{{'labels.heading.Manage Reports' | translate}}</h2>
-  <p class="mw300">{{'labels.text.Add customized reports and edit core reports' | translate}}</p>
+  <h2>{{ 'labels.heading.Manage Reports' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Add customized reports and edit core reports' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStepManageReports()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageReports()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStepManageReports()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStepManageReports()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html
index d2d2fdd654..8b90565429 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html
@@ -1,46 +1,57 @@
 <div class="tab-container mat-typography" *ngIf="checkerData">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="{{'labels.text.Search by user' | translate}}" (keyup)="applyFilter($event.target.value)">
+        <input
+          matInput
+          placeholder="{{ 'labels.text.Search by user' | translate }}"
+          (keyup)="applyFilter($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div fxFlex="60%" fxLayoutGap="0.5rem">
       <button mat-raised-button color="success" (click)="approveChecker()">
-        <fa-icon icon="check" class="m-r-10"></fa-icon>{{'labels.buttons.Approve' | translate}}
+        <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>
       <button mat-raised-button color="warn" (click)="deleteChecker()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate}}
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
       </button>
       <button mat-raised-button color="reject" (click)="rejectChecker()">
-        <fa-icon icon="times" class="m-r-10"></fa-icon>{{'labels.buttons.Reject' | translate}}
+        <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
       </button>
     </div>
   </div>
 
   <form [formGroup]="makerCheckerSearchForm">
-
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
       <mat-form-field fxFlex="31%" (click)="makerDateTimeFromPicker.open()">
-        <mat-label>{{'labels.inputs.From Date' | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="makerDateTimeFromPicker"
-          formControlName="makerDateTimeFrom">
+        <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="makerDateTimeFromPicker"
+          formControlName="makerDateTimeFrom"
+        />
         <mat-datepicker-toggle matSuffix [for]="makerDateTimeFromPicker"></mat-datepicker-toggle>
         <mat-datepicker #makerDateTimeFromPicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%" (click)="makerDateTimetoPicker.open()">
-        <mat-label>{{'labels.inputs.To Date' | translate}}</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="makerDateTimetoPicker"
-          formControlName="makerDateTimeto">
+        <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="makerDateTimetoPicker"
+          formControlName="makerDateTimeto"
+        />
         <mat-datepicker-toggle matSuffix [for]="makerDateTimetoPicker"></mat-datepicker-toggle>
         <mat-datepicker #makerDateTimetoPicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Action' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
         <mat-select formControlName="actionName">
           <mat-option *ngFor="let action of makerCheckerTemplate.actionNames" [value]="action">
             {{ action }}
@@ -49,7 +60,7 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
+        <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
         <mat-select formControlName="entityName">
           <mat-option *ngFor="let entity of makerCheckerTemplate.entityNames" [value]="entity">
             {{ entity }}
@@ -58,82 +69,83 @@
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>{{'labels.inputs.Resource ID' | translate}}</mat-label>
-        <input matInput formControlName="resourceId">
+        <mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label>
+        <input matInput formControlName="resourceId" />
       </mat-form-field>
 
-      <button mat-raised-button color="primary" id="search-button" (click)="search()">{{'labels.buttons.Search' | translate}}</button>
-
+      <button mat-raised-button color="primary" id="search-button" (click)="search()">
+        {{ 'labels.buttons.Search' | translate }}
+      </button>
     </div>
-
   </form>
 
-  <table mat-table [dataSource]="dataSource" *ngIf="!(noSearchedData)">
-
+  <table mat-table [dataSource]="dataSource" *ngIf="!noSearchedData">
     <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        <mat-checkbox
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+          [aria-label]="checkboxLabel()"
+        >
         </mat-checkbox>
       </th>
       <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+          [aria-label]="checkboxLabel(row)"
+        >
         </mat-checkbox>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.ID' | translate}} </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.id }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.ID' | translate }}</th>
+      <td mat-cell *matCellDef="let makerChecker">{{ makerChecker.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="madeOnDate">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Made on Date' | translate}} </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.madeOnDate  | dateFormat }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Made on Date' | translate }}</th>
+      <td mat-cell *matCellDef="let makerChecker">{{ makerChecker.madeOnDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Status' | translate}} </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.processingResult }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+      <td mat-cell *matCellDef="let makerChecker">{{ makerChecker.processingResult }}</td>
     </ng-container>
 
     <ng-container matColumnDef="user">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.User' | translate}} </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.maker }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.User' | translate }}</th>
+      <td mat-cell *matCellDef="let makerChecker">{{ makerChecker.maker }}</td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Action' | translate}} </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.actionName }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Action' | translate }}</th>
+      <td mat-cell *matCellDef="let makerChecker">{{ makerChecker.actionName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="entity">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity' | translate}} </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.entityName }} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity' | translate }}</th>
+      <td mat-cell *matCellDef="let makerChecker">{{ makerChecker.entityName }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'view']" class="select-row">
-    </tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id, 'view']" class="select-row"></tr>
   </table>
 
   <div class="alert" *ngIf="noSearchedData">
-
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check fa-2x"></i>
-      {{'labels.text.No checker inbox data available for this search' | translate}}
+      {{ 'labels.text.No checker inbox data available for this search' | translate }}
     </div>
-
   </div>
-
 </div>
 
 <div class="alert" *ngIf="!checkerData">
-
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check fa-2x"></i>
-    {{'labels.text.No checker inbox data available for this account' | translate}}
+    {{ 'labels.text.No checker inbox data available for this account' | translate }}
   </div>
-
 </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html
index ce62ee2138..74e2fd88f5 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html
@@ -1,76 +1,78 @@
 <div class="tab-container mat-typography" *ngIf="showData">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="{{'labels.text.Filter by name' | translate}}"
-          (keyup)="applyFilter($event.target.value)">
+        <input
+          matInput
+          placeholder="{{ 'labels.text.Filter by name' | translate }}"
+          (keyup)="applyFilter($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'ACTIVATE_CLIENT'" (click)="approveClients()">
-        <fa-icon icon="check" class="m-r-10"></fa-icon>{{'labels.buttons.Approve' | translate}}
+        <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>
     </div>
   </div>
 
   <ng-container *ngFor="let client of groupedClients | keyvalue">
-
-    <h3> {{client.key}} </h3>
+    <h3>{{ client.key }}</h3>
 
     <ng-container *ngIf="client.value.length > 0">
-
-      <table mat-table [dataSource]="client.value|accountsFilter:'clientApproval'">
-
+      <table mat-table [dataSource]="client.value | accountsFilter: 'clientApproval'">
         <ng-container matColumnDef="select">
           <th mat-header-cell *matHeaderCellDef>
-            <mat-checkbox (change)="$event ? masterToggle(client.value) : null"
+            <mat-checkbox
+              (change)="$event ? masterToggle(client.value) : null"
               [checked]="selection.hasValue() && isAllSelected(client.value)"
               [indeterminate]="selection.hasValue() && !isAllSelected(client.value)"
-              [aria-label]="checkboxLabel(client.value)">
+              [aria-label]="checkboxLabel(client.value)"
+            >
             </mat-checkbox>
           </th>
           <td mat-cell *matCellDef="let row">
-            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-              [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+              [aria-label]="checkboxLabel(row)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.name' | translate}} </th>
-          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{
-            element.displayName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
+          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]">
+            {{ element.displayName }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="accountNumber">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Account Number' | translate}} </th>
-          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{
-            element.accountNo }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account Number' | translate }}</th>
+          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]">
+            {{ element.accountNo }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="staff">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Staff' | translate}} </th>
-          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{
-            element.staffName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Staff' | translate }}</th>
+          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]">
+            {{ element.staffName }}
+          </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
-        </tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
       </table>
-
     </ng-container>
-
   </ng-container>
-
 </div>
 
-<div class="alert" *ngIf="!(showData)">
-
+<div class="alert" *ngIf="!showData">
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    {{'labels.text.No pending loans for approval' | translate}}
+    {{ 'labels.text.No pending loans for approval' | translate }}
   </div>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html
index 20a6e65fe1..f746e2e44b 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html
@@ -1,78 +1,91 @@
 <div class="tab-container mat-typography" *ngIf="showData">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="{{'labels.text.Filter by name' | translate}}" (keyup)="applyFilter($event.target.value)">
+        <input
+          matInput
+          placeholder="{{ 'labels.text.Filter by name' | translate }}"
+          (keyup)="applyFilter($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="approveLoan()">
-        <fa-icon icon="check" class="m-r-10"></fa-icon>{{'labels.buttons.Approve' | translate}}
+        <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>
     </div>
   </div>
 
   <ng-container *ngFor="let office of officesArray">
-
     <h3 class="mat-h3">{{ office.name }}</h3>
 
     <ng-container *ngIf="office.loans.length > 0">
-
       <table mat-table [dataSource]="office.loans">
-
         <ng-container matColumnDef="select">
           <th mat-header-cell *matHeaderCellDef>
-            <mat-checkbox (change)="$event ? masterToggle(office.loans) : null"
+            <mat-checkbox
+              (change)="$event ? masterToggle(office.loans) : null"
               [checked]="selection.hasValue() && isAllSelected(office.loans)"
-              [indeterminate]="selection.hasValue() && !isAllSelected(office.loans)" [aria-label]="checkboxLabel(office.loans)">
+              [indeterminate]="selection.hasValue() && !isAllSelected(office.loans)"
+              [aria-label]="checkboxLabel(office.loans)"
+            >
             </mat-checkbox>
           </th>
           <td mat-cell *matCellDef="let row">
-            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-              [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+              [aria-label]="checkboxLabel(row)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="clientName">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client' | translate}} </th>
-          <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'general']">
-            {{ loan.clientName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+          <td
+            mat-cell
+            *matCellDef="let loan"
+            class="view-details"
+            [routerLink]="['../../clients', loan.clientId, 'general']"
+          >
+            {{ loan.clientName }}
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="loan">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan' | translate}} </th>
-          <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans-accounts', 'loan.id']">
-            {{ loan.loanProductName}}({{loan.accountNo}}) </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan' | translate }}</th>
+          <td
+            mat-cell
+            *matCellDef="let loan"
+            class="view-details"
+            [routerLink]="['../../clients', loan.clientId, 'loans-accounts', 'loan.id']"
+          >
+            {{ loan.loanProductName }}({{ loan.accountNo }})
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
-          <td mat-cell *matCellDef="let loan"> {{ loan.principal | formatNumber}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.principal | formatNumber }}</td>
         </ng-container>
 
         <ng-container matColumnDef="loanPurpose">
-          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Purpose' | translate}} </th>
-          <td mat-cell *matCellDef="let loan"> {{ loan.loanPurposeName }} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Purpose' | translate }}</th>
+          <td mat-cell *matCellDef="let loan">{{ loan.loanPurposeName }}</td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
-        </tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
       </table>
-
     </ng-container>
-
   </ng-container>
-
 </div>
 
-<div class="alert" *ngIf="!(showData)">
-
+<div class="alert" *ngIf="!showData">
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    {{'labels.text.No pending loans for approval' | translate}}
+    {{ 'labels.text.No pending loans for approval' | translate }}
   </div>
-
 </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html
index 10d47d953b..9ee7a707b0 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html
@@ -1,65 +1,92 @@
 <div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="{{'labels.text.Filter by name' | translate}}" (keyup)="applyFilter($event.target.value)">
+        <input
+          matInput
+          placeholder="{{ 'labels.text.Filter by name' | translate }}"
+          (keyup)="applyFilter($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="disburseLoan()">
-        <fa-icon icon="check" class="m-r-10"></fa-icon>{{'labels.menus.Disburse' | translate}}
+        <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.menus.Disburse' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource">
-
     <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        <mat-checkbox
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+          [aria-label]="checkboxLabel()"
+        >
         </mat-checkbox>
       </th>
       <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+          [aria-label]="checkboxLabel(row)"
+        >
         </mat-checkbox>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="client">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client Name' | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'general']"> {{loan.clientName}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+      <td
+        mat-cell
+        *matCellDef="let loan"
+        class="view-details"
+        [routerLink]="['../../clients', loan.clientId, 'general']"
+      >
+        {{ loan.clientName }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="loanAccountNumber">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Account' | translate}}# </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans-accounts', loan.id, 'general']"> {{loan.accountNo}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}#</th>
+      <td
+        mat-cell
+        *matCellDef="let loan"
+        class="view-details"
+        [routerLink]="['../../clients', loan.clientId, 'loans-accounts', loan.id, 'general']"
+      >
+        {{ loan.accountNo }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="loanProduct">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Product' | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans-accounts', loan.id, 'general']"> {{loan.loanProductName}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Product' | translate }}</th>
+      <td
+        mat-cell
+        *matCellDef="let loan"
+        class="view-details"
+        [routerLink]="['../../clients', loan.clientId, 'loans-accounts', loan.id, 'general']"
+      >
+        {{ loan.loanProductName }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="principal">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Principal' | translate}} </th>
-      <td mat-cell *matCellDef="let loan"> {{loan.principal | formatNumber}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Principal' | translate }}</th>
+      <td mat-cell *matCellDef="let loan">{{ loan.principal | formatNumber }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
-    </tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
   </table>
-
 </div>
 
 <div class="alert" *ngIf="loans.length === 0">
-
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    {{'labels.text.No pending loan available for disbursal' | translate}}
+    {{ 'labels.text.No pending loan available for disbursal' | translate }}
   </div>
-
 </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html
index b5b03356f5..d18decdeaa 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html
@@ -1,75 +1,103 @@
 <div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="search-box" fxFlex="40%">
       <mat-form-field fxFlex="90%">
-        <input matInput placeholder="{{'labels.text.Filter by name' | translate}}" (keyup)="applyFilter($event.target.value)">
+        <input
+          matInput
+          placeholder="{{ 'labels.text.Filter by name' | translate }}"
+          (keyup)="applyFilter($event.target.value)"
+        />
       </mat-form-field>
     </div>
     <div fxFlex="60%">
-      <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
-        (click)="bulkLoanReschedule('Approve')">
-        <fa-icon icon="check" class="m-r-10"></fa-icon>{{'labels.buttons.Approve' | translate}}
+      <button
+        mat-raised-button
+        color="success"
+        *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
+        (click)="bulkLoanReschedule('Approve')"
+      >
+        <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>
-      <button mat-raised-button color="reject" *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
-        (click)="bulkLoanReschedule('Reject')">
-        <fa-icon icon="times" class="m-r-10"></fa-icon>{{'labels.buttons.Reject' | translate}}
+      <button
+        mat-raised-button
+        color="reject"
+        *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
+        (click)="bulkLoanReschedule('Reject')"
+      >
+        <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
       </button>
     </div>
   </div>
 
   <table mat-table [dataSource]="dataSource">
-
     <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        <mat-checkbox
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+          [aria-label]="checkboxLabel()"
+        >
         </mat-checkbox>
       </th>
       <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+          [aria-label]="checkboxLabel(row)"
+        >
         </mat-checkbox>
       </td>
     </ng-container>
 
     <ng-container matColumnDef="client">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client' | translate}} </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId , 'general']"> {{loan.clientName}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client' | translate }}</th>
+      <td
+        mat-cell
+        *matCellDef="let loan"
+        class="view-details"
+        [routerLink]="['../../clients', loan.clientId, 'general']"
+      >
+        {{ loan.clientName }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="rescheduleRequestNo">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Reschedule Request' | translate}}# </th>
-      <td mat-cell *matCellDef="let loan"> {{loan.id}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Reschedule Request' | translate }}#</th>
+      <td mat-cell *matCellDef="let loan">{{ loan.id }}</td>
     </ng-container>
 
     <ng-container matColumnDef="loanAccountNo">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Loan Account' | translate}}# </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId , 'loans', loan.loanId, 'general']"> {{loan.loanAccountNumber}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Account' | translate }}#</th>
+      <td
+        mat-cell
+        *matCellDef="let loan"
+        class="view-details"
+        [routerLink]="['../../clients', loan.clientId, 'loans', loan.loanId, 'general']"
+      >
+        {{ loan.loanAccountNumber }}
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="rescheduleForm">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Reschedule Form' | translate}} </th>
-      <td mat-cell *matCellDef="let loan"> {{loan.rescheduleFromDate  | dateFormat}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Reschedule Form' | translate }}</th>
+      <td mat-cell *matCellDef="let loan">{{ loan.rescheduleFromDate | dateFormat }}</td>
     </ng-container>
 
     <ng-container matColumnDef="rescheduleReason">
-      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Reschedule Reason' | translate}} </th>
-      <td mat-cell *matCellDef="let loan"> {{loan.rescheduleReasonCodeValue.name}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Reschedule Reason' | translate }}</th>
+      <td mat-cell *matCellDef="let loan">{{ loan.rescheduleReasonCodeValue.name }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
-    </tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
   </table>
-
 </div>
 
 <div class="alert" *ngIf="loans.length === 0">
-
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    {{'labels.text.No pending rescheduled loan available for this account' | translate}}
+    {{ 'labels.text.No pending rescheduled loan available for this account' | translate }}
   </div>
-
 </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html
index 88c3e3aa40..68e039d8de 100644
--- a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html
@@ -1,36 +1,60 @@
 <div class="container">
-
   <mat-card class="tasks-card">
-
     <mat-card-content>
-
       <nav mat-tab-nav-bar class="navigation-tabs">
-        <a mat-tab-link [routerLink]="['./checker-inbox']" routerLinkActive #checkerInbox="routerLinkActive"
-        [active]="checkerInbox.isActive" *mifosxHasPermission="'ALL_FUNCTIONS_READ'">
-        {{'labels.inputs.Checker Inbox' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./checker-inbox']"
+          routerLinkActive
+          #checkerInbox="routerLinkActive"
+          [active]="checkerInbox.isActive"
+          *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
+        >
+          {{ 'labels.inputs.Checker Inbox' | translate }}
         </a>
-        <a mat-tab-link [routerLink]="['./client-approval']" routerLinkActive #clientApproval="routerLinkActive"
-          [active]="clientApproval.isActive" *mifosxHasPermission="'READ_CLIENT'">
-          {{'labels.inputs.Client Approval' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./client-approval']"
+          routerLinkActive
+          #clientApproval="routerLinkActive"
+          [active]="clientApproval.isActive"
+          *mifosxHasPermission="'READ_CLIENT'"
+        >
+          {{ 'labels.inputs.Client Approval' | translate }}
         </a>
-        <a mat-tab-link [routerLink]="['./loan-approval']" routerLinkActive #loanApproval="routerLinkActive"
-          [active]="loanApproval.isActive" *mifosxHasPermission="'READ_LOAN'">
-          {{'labels.inputs.Loan Approval' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./loan-approval']"
+          routerLinkActive
+          #loanApproval="routerLinkActive"
+          [active]="loanApproval.isActive"
+          *mifosxHasPermission="'READ_LOAN'"
+        >
+          {{ 'labels.inputs.Loan Approval' | translate }}
         </a>
-        <a mat-tab-link [routerLink]="['./loan-disbursal']" routerLinkActive #loanDisbursal="routerLinkActive"
-          [active]="loanDisbursal.isActive" *mifosxHasPermission="'READ_LOAN'">
-          {{'labels.inputs.Loan Disbursal' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./loan-disbursal']"
+          routerLinkActive
+          #loanDisbursal="routerLinkActive"
+          [active]="loanDisbursal.isActive"
+          *mifosxHasPermission="'READ_LOAN'"
+        >
+          {{ 'labels.inputs.Loan Disbursal' | translate }}
         </a>
-        <a mat-tab-link [routerLink]="['./reschedule-loan']" routerLinkActive #rescheduleLoan="routerLinkActive"
-          [active]="rescheduleLoan.isActive" *mifosxHasPermission="'RESCHEDULE_LOAN'">
-          {{'labels.inputs.Reschedule Loan' | translate}}
+        <a
+          mat-tab-link
+          [routerLink]="['./reschedule-loan']"
+          routerLinkActive
+          #rescheduleLoan="routerLinkActive"
+          [active]="rescheduleLoan.isActive"
+          *mifosxHasPermission="'RESCHEDULE_LOAN'"
+        >
+          {{ 'labels.inputs.Reschedule Loan' | translate }}
         </a>
       </nav>
 
       <router-outlet></router-outlet>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/tasks/view-checker-inbox/view-checker-inbox.component.html b/src/app/tasks/view-checker-inbox/view-checker-inbox.component.html
index 49ac32586b..17e12dfc83 100644
--- a/src/app/tasks/view-checker-inbox/view-checker-inbox.component.html
+++ b/src/app/tasks/view-checker-inbox/view-checker-inbox.component.html
@@ -1,73 +1,69 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="1%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="success" (click)="approveChecker()">
-    <fa-icon icon="check" class="m-r-10"></fa-icon>{{'labels.buttons.Approve' | translate}}
+    <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteChecker()">
-    <fa-icon icon="trash" class="m-r-10"></fa-icon>{{'labels.buttons.Delete' | translate}}
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
   </button>
   <button mat-raised-button color="reject" (click)="rejectChecker()">
-    <fa-icon icon="times" class="m-r-10"></fa-icon>{{'labels.buttons.Reject' | translate}}
+    <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" fxLayout.lt-md="column">
-
-        <h2 class="mat-h2" fxFlexFill> {{'labels.heading.View Checker Inbox' | translate}} </h2>
+        <h2 class="mat-h2" fxFlexFill>{{ 'labels.heading.View Checker Inbox' | translate }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
+        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.ID' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.ID' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.id }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Status' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Status' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.processingResult }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.User' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.User' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.maker }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Action' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Action' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.actionName }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Entity' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Entity' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.entityName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="checkerInboxDetail.resourceId">
-          <span fxFlex="40%">{{'labels.inputs.Resource ID' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Resource ID' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.resourceId }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">{{'labels.inputs.Date' | translate}}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.madeOnDate  | dateFormat}}</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Date' | translate }}:</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.madeOnDate | dateFormat }}</span>
         </div>
 
         <div fxFlexFill *ngIf="checkerInboxDetail.officeName">
-          <span fxFlex="40%">{{'labels.inputs.Office' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.officeName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="checkerInboxDetail.savingsAccountNo">
-          <span fxFlex="40%">{{'labels.inputs.Savings Account Number' | translate}}:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
           <span fxFlex="60%">{{ checkerInboxDetail.savingsAccountNo }}</span>
         </div>
 
@@ -77,26 +73,18 @@ <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
         </div>
 
         <ng-container *ngIf="displayJSONData">
-
-          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Command' | translate}}</h3>
+          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Command' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <ng-container *ngFor="let json of jsondata | keyvalue">
-
-          <div fxFlexFill>
-            <span fxFlex="40%">{{ json.key }}:</span>
-            <span fxFlex="60%">{{ json.value }}</span>
-          </div>
-
+            <div fxFlexFill>
+              <span fxFlex="40%">{{ json.key }}:</span>
+              <span fxFlex="60%">{{ json.value }}</span>
+            </div>
+          </ng-container>
         </ng-container>
-
-        </ng-container>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/templates/create-template/create-template.component.html b/src/app/templates/create-template/create-template.component.html
index d742400713..5685bae963 100644
--- a/src/app/templates/create-template/create-template.component.html
+++ b/src/app/templates/create-template/create-template.component.html
@@ -1,153 +1,158 @@
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="2%">
-
     <form [formGroup]="templateForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
               <mat-option *ngFor="let entity of createTemplateData.entities" [value]="entity.id">
                 {{ entity.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="templateForm.controls.entity.hasError('required')">
-              {{'labels.inputs.Entity' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of createTemplateData.types" [value]="type.id">
                 {{ type.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="templateForm.controls.type.hasError('required')">
-              {{'labels.inputs.Type' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Type' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
-            <input matInput required formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput required formControlName="name" />
             <mat-error *ngIf="templateForm.controls.name.hasError('required')">
-              {{'labels.inputs.name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
-
     </form>
 
     <div role="toggle" fxFlex="13%">
-
       <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
-        {{'labels.buttons.Advance Options' | translate}}</button>
-
+        {{ 'labels.buttons.Advance Options' | translate }}
+      </button>
     </div>
 
     <ng-container role="mappers" *ngIf="showAdvanceOptions">
-
       <div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
-
         <mat-form-field fxFlex="43%">
-          <mat-label>{{'labels.inputs.Mapper Key' | translate}}</mat-label>
-          <input matInput [formControl]="mapper.mapperskey">
+          <mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
+          <input matInput [formControl]="mapper.mapperskey" />
         </mat-form-field>
 
         <mat-form-field fxFlex="43%">
-          <mat-label>{{'labels.inputs.Mapper Value' | translate}}</mat-label>
-          <input matInput [formControl]="mapper.mappersvalue">
+          <mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
+          <input matInput [formControl]="mapper.mappersvalue" />
         </mat-form-field>
 
-        <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
-          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{'labels.buttons.Add' | translate}}
+        <button
+          *ngIf="i === 0"
+          class="mapper-button"
+          fxFlex="8%"
+          mat-raised-button
+          color="primary"
+          (click)="addMapper()"
+        >
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
         </button>
-        <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
-          <fa-icon icon="minus" class="m-r-10"></fa-icon>{{'labels.buttons.Remove' | translate}}
+        <button
+          *ngIf="!(i === 0)"
+          class="mapper-button"
+          fxFlex="9%"
+          mat-raised-button
+          color="primary"
+          (click)="removeMapper(i)"
+        >
+          <fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
         </button>
-
       </div>
-
     </ng-container>
 
     <div role="editor">
-
       <ckeditor #ckEditor [editor]="Editor"></ckeditor>
-
     </div>
 
     <div role="template-parameters">
-
       <mat-accordion>
-
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
-
           <mat-expansion-panel-header>
             <mat-panel-title>
-              {{'labels.inputs.Client Parameters' | translate}}
+              {{ 'labels.inputs.Client Parameters' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-            <button mat-stroked-button color="primary" class="parameter"
-              *ngFor="let label of clientParameterLabels" (click)="addText(label)">
+            <button
+              mat-stroked-button
+              color="primary"
+              class="parameter"
+              *ngFor="let label of clientParameterLabels"
+              (click)="addText(label)"
+            >
               {{ label }}
             </button>
           </div>
-
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-
           <mat-expansion-panel-header>
             <mat-panel-title>
-              {{'labels.inputs.Loan Parameters' | translate}}
+              {{ 'labels.inputs.Loan Parameters' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-            <button mat-stroked-button color="primary" class="parameter"
-              *ngFor="let label of loanParameterLabels" (click)="addText(label)">
+            <button
+              mat-stroked-button
+              color="primary"
+              class="parameter"
+              *ngFor="let label of loanParameterLabels"
+              (click)="addText(label)"
+            >
               {{ label }}
             </button>
           </div>
-
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-
           <mat-expansion-panel-header>
             <mat-panel-title>
-              {{'labels.inputs.Repayment Schedule Parameters' | translate}}
+              {{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-            <button mat-stroked-button color="primary" class="parameter"
-              *ngFor="let label of repaymentParameterLabels" (click)="addText(label)">
+            <button
+              mat-stroked-button
+              color="primary"
+              class="parameter"
+              *ngFor="let label of repaymentParameterLabels"
+              (click)="addText(label)"
+            >
               {{ label }}
             </button>
           </div>
-
         </mat-expansion-panel>
-
       </mat-accordion>
-
     </div>
 
     <mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-      <button mat-raised-button color="primary" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" (click)="submit()">{{ 'labels.buttons.Submit' | translate }}</button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/templates/edit-template/edit-template.component.html b/src/app/templates/edit-template/edit-template.component.html
index e3874d2a26..6e7bd3f49c 100644
--- a/src/app/templates/edit-template/edit-template.component.html
+++ b/src/app/templates/edit-template/edit-template.component.html
@@ -1,15 +1,10 @@
 <div class="container">
-
   <mat-card fxLayout="column" fxLayoutGap="2%">
-
     <form [formGroup]="templateForm">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select formControlName="entity">
               <mat-option *ngFor="let entity of editTemplateData.entities" [value]="entity.id">
                 {{ entity.name }}
@@ -18,7 +13,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select formControlName="type">
               <mat-option *ngFor="let type of editTemplateData.types" [value]="type.id">
                 {{ type.name }}
@@ -27,117 +22,125 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
-            <input matInput formControlName="name">
+            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
+            <input matInput formControlName="name" />
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
-
     </form>
 
     <div role="toggle" fxFlex="13%">
-
-      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">{{'labels.buttons.Advance Options' | translate}}</button>
-
+      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
+        {{ 'labels.buttons.Advance Options' | translate }}
+      </button>
     </div>
 
     <ng-container role="mappers" *ngIf="showAdvanceOptions">
-
       <div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
-
         <mat-form-field fxFlex="43%">
-          <mat-label>{{'labels.inputs.Mapper Key' | translate}}</mat-label>
-          <input matInput [formControl]="mapper.mapperskey">
+          <mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
+          <input matInput [formControl]="mapper.mapperskey" />
         </mat-form-field>
 
         <mat-form-field fxFlex="43%">
-          <mat-label>{{'labels.inputs.Mapper Value' | translate}}</mat-label>
-          <input matInput [formControl]="mapper.mappersvalue">
+          <mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
+          <input matInput [formControl]="mapper.mappersvalue" />
         </mat-form-field>
 
-        <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
-          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{'labels.buttons.Add' | translate}}
+        <button
+          *ngIf="i === 0"
+          class="mapper-button"
+          fxFlex="8%"
+          mat-raised-button
+          color="primary"
+          (click)="addMapper()"
+        >
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
         </button>
-        <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
-          <fa-icon icon="minus" class="m-r-10"></fa-icon>{{'labels.buttons.Remove' | translate}}
+        <button
+          *ngIf="!(i === 0)"
+          class="mapper-button"
+          fxFlex="9%"
+          mat-raised-button
+          color="primary"
+          (click)="removeMapper(i)"
+        >
+          <fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
         </button>
-
       </div>
-
     </ng-container>
 
     <div role="editor">
-
       <ckeditor #ckEditor [editor]="Editor" [data]="editTemplateData.template.text"></ckeditor>
-
     </div>
 
     <div role="template-parameters">
-
       <mat-accordion>
-
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
-
           <mat-expansion-panel-header>
             <mat-panel-title>
-              {{'labels.inputs.Client Parameters' | translate}}
+              {{ 'labels.inputs.Client Parameters' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-            <button mat-stroked-button color="primary" class="parameter"
-              *ngFor="let label of clientParameterLabels" (click)="addText(label)">
+            <button
+              mat-stroked-button
+              color="primary"
+              class="parameter"
+              *ngFor="let label of clientParameterLabels"
+              (click)="addText(label)"
+            >
               {{ label }}
             </button>
           </div>
-
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-
           <mat-expansion-panel-header>
             <mat-panel-title>
-              {{'labels.inputs.Loan Parameters' | translate}}
+              {{ 'labels.inputs.Loan Parameters' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-            <button mat-stroked-button color="primary" class="parameter"
-              *ngFor="let label of loanParameterLabels" (click)="addText(label)">
+            <button
+              mat-stroked-button
+              color="primary"
+              class="parameter"
+              *ngFor="let label of loanParameterLabels"
+              (click)="addText(label)"
+            >
               {{ label }}
             </button>
           </div>
-
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-
           <mat-expansion-panel-header>
             <mat-panel-title>
-              {{'labels.inputs.Repayment Schedule Parameters' | translate}}
+              {{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
-            <button mat-stroked-button color="primary" class="parameter"
-              *ngFor="let label of repaymentParameterLabels" (click)="addText(label)">
+            <button
+              mat-stroked-button
+              color="primary"
+              class="parameter"
+              *ngFor="let label of repaymentParameterLabels"
+              (click)="addText(label)"
+            >
               {{ label }}
             </button>
           </div>
-
         </mat-expansion-panel>
-
       </mat-accordion>
-
     </div>
 
     <mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-      <button mat-raised-button color="primary" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" (click)="submit()">{{ 'labels.buttons.Submit' | translate }}</button>
     </mat-card-actions>
-
   </mat-card>
-
 </div>
diff --git a/src/app/templates/templates.component.html b/src/app/templates/templates.component.html
index e8b3b396ee..777aa2e186 100644
--- a/src/app/templates/templates.component.html
+++ b/src/app/templates/templates.component.html
@@ -1,45 +1,39 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TEMPLATE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Create Template' | translate}}
+    {{ 'labels.buttons.Create Template' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="entity">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity' | translate}} </th>
-        <td mat-cell *matCellDef="let template"> {{ template.entity }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
+        <td mat-cell *matCellDef="let template">{{ template.entity }}</td>
       </ng-container>
 
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Type' | translate}} </th>
-        <td mat-cell *matCellDef="let template"> {{ template.type }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let template">{{ template.type }}</td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-        <td mat-cell *matCellDef="let template"> {{ template.name }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+        <td mat-cell *matCellDef="let template">{{ template.name }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
diff --git a/src/app/templates/view-template/view-template.component.html b/src/app/templates/view-template/view-template.component.html
index 8e6720ca81..689cff3d5d 100644
--- a/src/app/templates/view-template/view-template.component.html
+++ b/src/app/templates/view-template/view-template.component.html
@@ -1,27 +1,21 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TEMPLATE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_TEMPLATE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
-
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.name' | translate}}
+          {{ 'labels.inputs.name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -29,7 +23,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Entity' | translate}}
+          {{ 'labels.inputs.Entity' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -37,7 +31,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Type' | translate}}
+          {{ 'labels.inputs.Type' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -45,15 +39,11 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Text' | translate}}
+          {{ 'labels.inputs.Text' | translate }}
         </div>
 
         <div fxFlex="50%" [innerHTML]="templateData.text"></div>
-
       </div>
-
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/app/users/create-user/create-user.component.html b/src/app/users/create-user/create-user.component.html
index 3beef273aa..13aa129695 100644
--- a/src/app/users/create-user/create-user.component.html
+++ b/src/app/users/create-user/create-user.component.html
@@ -1,110 +1,133 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="userForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div #userFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
-            <input matInput required formControlName="username">
+            <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+            <input matInput required formControlName="username" />
             <mat-error *ngIf="userForm.controls.username.hasError('required')">
-              {{'labels.inputs.Username' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-            <input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email">
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+            <input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email" />
             <mat-error *ngIf="userForm.controls.email.hasError('email')">
-              {{'labels.inputs.Email' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.invalid' | translate}}</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{"labels.commons.invalid' | translate}}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.email.hasError('required')">
-              {{'labels.inputs.Email' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.First Name' | translate}}</mat-label>
-            <input matInput required formControlName="firstname">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
             <mat-error *ngIf="userForm.controls.firstname.hasError('pattern')">
-              {{'labels.inputs.First Name' | translate}} <strong>{{"labels.commons.cannot begin with a special character or number" | translate}}</strong>
+              {{ 'labels.inputs.First Name' | translate }}
+              <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.firstname.hasError('required')">
-              {{'labels.inputs.First Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Last Name' | translate}}</mat-label>
-            <input matInput required formControlName="lastname">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
             <mat-error *ngIf="userForm.controls.lastname.hasError('pattern')">
-              {{'labels.inputs.Last Name' | translate}} <strong>{{"labels.commons.cannot begin with a special character or number" | translate}}</strong>
+              {{ 'labels.inputs.Last Name' | translate }}
+              <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.lastname.hasError('required')">
-              {{'labels.inputs.Last Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" class="password-never-expires-wrapper">
-            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires" >
-              {{'labels.inputs.Password never expires' | translate}}
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
+              {{ 'labels.inputs.Password never expires' | translate }}
             </mat-checkbox>
           </div>
 
           <div fxFlex="48%" class="send-password-to-email-wrapper">
             <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail">
-              {{'labels.inputs.Send password to email address' | translate}}
+              {{ 'labels.inputs.Send password to email address' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
-            <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
-            <input matInput required type="password" formControlName="password">
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+            <input matInput required type="password" formControlName="password" />
             <mat-error *ngIf="userForm.controls.password.hasError('required')">
-              {{'labels.inputs.Password' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.password.hasError('minlength')">
-              {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.12 characters long' | translate }}</strong>
+              {{ 'labels.commons.Password should be at least' | translate }}
+              <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.password.hasError('maxlength')">
-              {{'labels.commons.Password should not be more than' | translate }} <strong>{{'labels.commons.50 characters long' | translate }}</strong>
+              {{ 'labels.commons.Password should not be more than' | translate }}
+              <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
             </mat-error>
-            <mat-error *ngIf="userForm.controls.password.hasError('pattern') && !(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))">
-              {{'labels.commons.Password should include a' | translate }} <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }} <strong>{{'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
+            <mat-error
+              *ngIf="
+                userForm.controls.password.hasError('pattern') &&
+                !(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))
+              "
+            >
+              {{ 'labels.commons.Password should include a' | translate }}
+              <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
+              <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{
+                'labels.commons.lowercase and special character' | translate
+              }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
-            <mat-label>{{'labels.inputs.Repeat Password' | translate}}</mat-label>
-            <input matInput required type="password" formControlName="repeatPassword">
+            <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
+            <input matInput required type="password" formControlName="repeatPassword" />
             <mat-error *ngIf="userForm.controls.repeatPassword.hasError('required')">
-              {{'labels.inputs.Password' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
-          <p fxFlex="98%" class="reset-password-error" *ngIf="userForm.errors?.passwordsDoNotMatch &&
-          (!userForm.controls.password.hasError('required') && !userForm.controls.repeatPassword.hasError('required'))">
-          {{'labels.inputs.Passwords' | translate}} <strong>{{'labels.commons.do not match' | translate}}</strong>
+          <p
+            fxFlex="98%"
+            class="reset-password-error"
+            *ngIf="
+              userForm.errors?.passwordsDoNotMatch &&
+              !userForm.controls.password.hasError('required') &&
+              !userForm.controls.repeatPassword.hasError('required')
+            "
+          >
+            {{ 'labels.inputs.Passwords' | translate }} <strong>{{ 'labels.commons.do not match' | translate }}</strong>
           </p>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officesData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="userForm.controls.officeId.hasError('required')">
-              {{'labels.inputs.Office' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -113,40 +136,52 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Roles' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
             <mat-select required formControlName="roles" multiple>
               <mat-option *ngFor="let role of rolesData" [value]="role.id">
                 {{ role.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="userForm.controls.roles.hasError('required')">
-              {{"labels.commons.At least one role" | translate}} <strong>{{"labels.commons.must be selected" | translate}}</strong>
+              {{ 'labels.commons.At least one role' | translate }}
+              <strong>{{ 'labels.commons.must be selected' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!userForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!userForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
 
 <ng-template #templateUserFormRef let-popover="popover">
-  <h2>{{'labels.heading.Create User' | translate}}</h2>
-  <p class="mw400">{{'labels.text.Filling Details' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141740/Users" target="_blank">{{'labels.inputs.Users' | translate}}</a></p>
+  <h2>{{ 'labels.heading.Create User' | translate }}</h2>
+  <p class="mw400">
+    {{ 'labels.text.Filling Details' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141740/Users" target="_blank">{{
+      'labels.inputs.Users' | translate
+    }}</a>
+  </p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create User' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create User' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
-
diff --git a/src/app/users/edit-user/edit-user.component.html b/src/app/users/edit-user/edit-user.component.html
index d09acc2d37..34fc9f766e 100644
--- a/src/app/users/edit-user/edit-user.component.html
+++ b/src/app/users/edit-user/edit-user.component.html
@@ -1,74 +1,77 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="editUserForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
-            <input matInput required formControlName="username"/>
+            <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+            <input matInput required formControlName="username" />
             <mat-error *ngIf="editUserForm.controls.username.hasError('required')">
-              {{'labels.inputs.Username' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Email' | translate}}</mat-label>
-            <input matInput required formControlName="email">
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+            <input matInput required formControlName="email" />
             <mat-error *ngIf="editUserForm.controls.email.hasError('email')">
-              {{'labels.inputs.Email' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.invalid' | translate}}</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{"labels.commons.invalid' | translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editUserForm.controls.email.hasError('required')">
-              {{'labels.inputs.Email' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.First Name' | translate}}</mat-label>
-            <input matInput required formControlName="firstname"/>
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
             <mat-error *ngIf="editUserForm.controls.firstname.hasError('pattern')">
-              {{'labels.inputs.First Name' | translate}} <strong>{{"labels.commons.cannot begin with a special character or number" | translate}}</strong>
+              {{ 'labels.inputs.First Name' | translate }}
+              <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editUserForm.controls.firstname.hasError('required')">
-              {{'labels.inputs.First Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Last Name' | translate}}</mat-label>
-            <input matInput required formControlName="lastname"/>
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
             <mat-error *ngIf="editUserForm.controls.lastname.hasError('pattern')">
-              {{'labels.inputs.Last Name' | translate}} <strong>{{"labels.commons.cannot begin with a special character or number" | translate}}</strong>
+              {{ 'labels.inputs.Last Name' | translate }}
+              <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editUserForm.controls.lastname.hasError('required')">
-              {{'labels.inputs.Last Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="password-never-expires-wrapper" fxFlex="48%">
-            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires" >
-              {{'labels.inputs.Password never expires' | translate}}
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
+              {{ 'labels.inputs.Password never expires' | translate }}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Office' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId" (selectionChange)="officeChanged($event.value)">
               <mat-option *ngFor="let office of officesData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editUserForm.controls.officeId.hasError('required')">
-              {{'labels.inputs.Office' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Staff' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -77,28 +80,28 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>{{'labels.inputs.Roles' | translate}}</mat-label>
+            <mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
             <mat-select required formControlName="roles" multiple>
               <mat-option *ngFor="let role of rolesData" [value]="role.id">
                 {{ role.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editUserForm.controls.roles.hasError('required')">
-              {{"labels.commons.At least one role" | translate}} <strong>{{"labels.commons.must be selected" | translate}}</strong>
+              {{ 'labels.commons.At least one role' | translate }}
+              <strong>{{ 'labels.commons.must be selected' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!editUserForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="!editUserForm.valid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index efe25ce536..250471f0ce 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -2,79 +2,107 @@
   <div #buttonCreateUser class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Create User' | translate}}
+      {{ 'labels.buttons.Create User' | translate }}
     </button>
   </div>
 </div>
 
 <div class="container">
-
   <div #filter fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
   <div #usersTable class="mat-elevation-z8">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="firstname">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.First Name' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.firstname }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.First Name' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.firstname }}</td>
       </ng-container>
 
       <ng-container matColumnDef="lastname">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Last Name' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.lastname }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Last Name' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.lastname }}</td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Email' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.email }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Email' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.email }}</td>
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate}} </th>
-        <td mat-cell *matCellDef="let user"> {{ user.officeName }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.officeName }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
   </div>
-
 </div>
 
 <ng-template #templateButtonCreateUser let-popover="popover">
-  <h2>{{'labels.buttons.Create User' | translate}}</h2>
-  <p class="mw300">{{'labels.text.This option allows you to create new users in your organization' | translate }}.</p>
+  <h2>{{ 'labels.buttons.Create User' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.This option allows you to create new users in your organization' | translate }}.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>{{'labels.heading.Search bar to filter users' | translate }}.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter users' | translate }}.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateUser, buttonCreateUser, 'bottom', true)">{{ 'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUsersTable, usersTable, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonCreateUser, buttonCreateUser, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateUsersTable, usersTable, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
 
 <ng-template #templateUsersTable let-popover="popover">
-  <h4>{{'labels.heading.List of Users with their details' | translate }}.</h4>
+  <h4>{{ 'labels.heading.List of Users with their details' | translate }}.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
   </div>
 </ng-template>
diff --git a/src/app/users/view-user/view-user.component.html b/src/app/users/view-user/view-user.component.html
index 7fc06c43ef..c4dae3d869 100644
--- a/src/app/users/view-user/view-user.component.html
+++ b/src/app/users/view-user/view-user.component.html
@@ -1,28 +1,24 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="delete()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Delete' | translate}}
+    {{ 'labels.buttons.Delete' | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
     <fa-icon icon="cog" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Change Password' | translate}}
+    {{ 'labels.buttons.Change Password' | translate }}
   </button>
 </div>
 
 <div class="container">
-
   <mat-card>
-
     <mat-card-content>
-
       <div fxLayout="row wrap" class="content">
-
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Login Name' | translate}}
+          {{ 'labels.inputs.Login Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -30,7 +26,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.First Name' | translate}}
+          {{ 'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -38,16 +34,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Last Name' | translate}}
+          {{ 'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
           {{ userData.lastname }}
         </div>
 
-
         <div fxFlex="50%" class="mat-body-strong" *ngIf="userData.email">
-          {{'labels.inputs.Email' | translate}}
+          {{ 'labels.inputs.Email' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="userData.email">
@@ -55,7 +50,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Office' | translate}}
+          {{ 'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -63,7 +58,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          {{'labels.inputs.Roles' | translate}}
+          {{ 'labels.inputs.Roles' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -71,14 +66,13 @@
             {{ role.name }}
           </span>
         </div>
-
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'labels.buttons.Back' | translate}}</button>
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
       </div>
     </mat-card-content>
-
   </mat-card>
-
 </div>
diff --git a/src/index.html b/src/index.html
index 8d350d2ca4..73a1221d41 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,52 +1,50 @@
 <!doctype html>
 <html lang="en" class="h-full bg-gray-100">
-<head>
-  <meta charset="utf-8"/>
-  <title>{{'APP_NAME' | translate}}</title>
-  <base href="/"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="mobile-web-app-capable" content="yes">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{'APP_NAME' | translate}}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
 
-  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
-  <link rel="icon" type="image/png" href="assets/images/MifosX_logo.png" sizes="182x184">
-  <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png" sizes="182x184"/>
-  <link rel="manifest" href="manifest.json"/>
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/png" href="assets/images/MifosX_logo.png" sizes="182x184" />
+    <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png" sizes="182x184" />
+    <link rel="manifest" href="manifest.json" />
 
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet">
-  <!-- Load environment variables -->
-  <script src="assets/env.js"></script>
-</head>
-<body class="h-full">
-  <!--[if lt IE 10]>
-    <p>
-      You are using an <strong>outdated</strong> browser.
-      Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
-    </p>
-  <![endif]-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet" />
+    <!-- Load environment variables -->
+    <script src="assets/env.js"></script>
+  </head>
+  <body class="h-full">
+    <!--[if lt IE 10]>
+      <p>
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
+      </p>
+    <![endif]-->
 
-  <noscript>
-    <p>
-      This page requires JavaScript to work properly. Please enable JavaScript in your browser.
-    </p>
-  </noscript>
+    <noscript>
+      <p>This page requires JavaScript to work properly. Please enable JavaScript in your browser.</p>
+    </noscript>
 
-  <script>
-    // This hides the address bar on mobile browsers
-    // https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
-    window.addEventListener('load',function() { window.scrollTo(0, 1); });
-  </script>
+    <script>
+      // This hides the address bar on mobile browsers
+      // https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
+      window.addEventListener('load', function () {
+        window.scrollTo(0, 1);
+      });
+    </script>
 
-  <mifosx-web-app>
-    <div class="loader-wrapper">
-      <div class="bottom triangle"></div>
-      <div class="top triangle"></div>
-      <div class="left triangle"></div>
-      <div class="right triangle"></div>
-    </div>
-  </mifosx-web-app>
-
-
-</body>
+    <mifosx-web-app>
+      <div class="loader-wrapper">
+        <div class="bottom triangle"></div>
+        <div class="top triangle"></div>
+        <div class="left triangle"></div>
+        <div class="right triangle"></div>
+      </div>
+    </mifosx-web-app>
+  </body>
 </html>