Fix in products view routes (#1643)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
2023-01-13 12:09:06 -06:00
parent f330e91aa4
commit a56347d400
236 changed files with 944 additions and 940 deletions
@@ -8,47 +8,47 @@
        </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"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
        Add
      </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> Name </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.name + ', ' + charge.currency.displaySymbol }}
        </td>
      </ng-container>
-  
+
      <ng-container matColumnDef="chargeCalculationType">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.chargeCalculationType.value }}
        </td>
      </ng-container>
-  
+
      <ng-container matColumnDef="amount">
        <th mat-header-cell *matHeaderCellDef> Amount </th>
        <td mat-cell *matCellDef="let charge">
-          {{ charge.amount }} 
+          {{ 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> Collected On </th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.chargeTimeType.value }}
        </td>
      </ng-container>
-  
+
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let charge">
@@ -58,32 +58,32 @@
          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
            {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
          </span>
-          <span 
+          <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 === 'Annual Fee'
-                    || charge.chargeTimeType.value === 'Specified due date'" 
+                    || 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> Repayments Every </th>
        <td mat-cell *matCellDef="let charge">
-          {{ charge.feeInterval || 'Not Provided' }} 
-          <button mat-icon-button color="primary" 
+          {{ 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> Actions </th>
        <td mat-cell *matCellDef="let charge">
@@ -92,15 +92,15 @@
          </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>
@@ -110,13 +110,13 @@
                <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
            </td>
        </ng-container>
-    
+
        <!-- Position Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Client ID </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>
-    
+
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef> Client Name </th>
@@ -147,19 +147,19 @@
            </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"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      Previous
    </button>
    <button mat-raised-button matStepperNext>
@@ -167,4 +167,3 @@
      <fa-icon icon="arrow-right"></fa-icon>
    </button>
  </div>
-  
@@ -1,7 +1,7 @@
 <form [formGroup]="loansAccountDetailsForm">

    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  
+
      <mat-form-field fxFlex="48%">
        <mat-label>Product Name</mat-label>
        <mat-select formControlName="productId" required>
@@ -13,7 +13,7 @@
          Product Name is <strong>required</strong>
        </mat-error>
      </mat-form-field>
-  
+
      <mat-form-field fxFlex="48%">
        <mat-label>Loan officer</mat-label>
        <mat-select formControlName="loanOfficerId">
@@ -22,8 +22,8 @@
          </mat-option>
        </mat-select>
      </mat-form-field>
-  
-  
+
+
      <mat-form-field fxFlex="48%">
        <mat-label>Fund</mat-label>
        <mat-select formControlName="fundId">
@@ -32,7 +32,7 @@
          </mat-option>
        </mat-select>
      </mat-form-field>
-  
+
      <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
        <mat-label>Submitted on</mat-label>
        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
@@ -43,7 +43,7 @@
          Submitted on is <strong>required</strong>
        </mat-error>
      </mat-form-field>
-  
+
      <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
        <mat-label>Disbursement on</mat-label>
        <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
@@ -54,13 +54,13 @@
          Disbursement on is <strong>required</strong>
        </mat-error>
      </mat-form-field>
-  
-      
-  
+
+
+
      <mat-divider fxFlex="98%"></mat-divider>
-  
+
      <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
-  
+
      <mat-form-field fxFlex="48%">
        <mat-label>Link savings</mat-label>
        <mat-select formControlName="linkAccountId">
@@ -69,14 +69,14 @@
          </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"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
        Previous
      </button>
      <button mat-raised-button matStepperNext>
@@ -84,6 +84,5 @@
        <fa-icon icon="arrow-right"></fa-icon>
      </button>
    </div>
-  
+
  </form>
-  
@@ -1,66 +1,66 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">

    <h3 class="mat-h3" fxFlexFill>Details</h3>
-  
+
    <mat-divider fxFlexFill></mat-divider>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Product:</span>
      <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
      <span fxFlex="40%">Loan officer:</span>
      <span
        fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
      <span fxFlex="40%">Loan purpose:</span>
      <span
        fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.fundId">
      <span fxFlex="40%">Fund:</span>
      <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Submitted on:</span>
      <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Disbursement on:</span>
      <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.externalId">
      <span fxFlex="40%">External id:</span>
      <span fxFlex="60%">{{ loansAccount.externalId }}</span>
    </div>
-  
+
    <h3 class="mat-h3" fxFlexFill>Terms</h3>
-  
+
    <mat-divider fxFlexFill></mat-divider>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Principal:</span>
      <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Loan term:</span>
      <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
        {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Number of repayments:</span>
      <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Repaid every:</span>
      <span fxFlex="60%">{{loansAccount.repaymentEvery}}
@@ -68,137 +68,137 @@
        {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
        {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
      <span fxFlex="40%">First repayment on:</span>
      <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
      <span fxFlex="40%">Interest charged from:</span>
      <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
      <span fxFlex="40%">Nominal interest rate:</span>
      <span
        fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.interestType">
      <span fxFlex="40%">Interest method: </span>
      <span fxFlex="60%">{{loansAccount.interestType}}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
      <span fxFlex="40%">Is Equal Amortization:</span>
      <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Amortization</span>
      <span
        fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Interest calculation period: </span>
      <span
        fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
      <span fxFlex="40%">Calculate interest for exact days in partial period:</span>
      <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
      <span fxFlex="40%">Arrears tolerance: </span>
      <span
        fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
      <span fxFlex="40%">Interest free period: </span>
      <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Repayment strategy: </span>
      <span
        fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
    </div>
-  
+
    <h3 class="mat-h3" fxFlexFill>Moratorium</h3>
-  
+
    <mat-divider fxFlexFill></mat-divider>
-  
+
    <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
      <span fxFlex="40%">On principal payment: </span>
      <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
      <span fxFlex="40%">On interest payment: </span>
      <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
      <span fxFlex="40%">On Arrears Aging: </span>
      <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccount.isTopup">
      <span fxFlex="40%">Is Topup Loan? </span>
      <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
    </div>
-  
+
    <div fxFlexFill>
      <span fxFlex="40%">Recalculate Interest: </span>
      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
    </div>
-  
+
    <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
      <span fxFlex="40%">Days in month: </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>Charges</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> Name </th>
          <td mat-cell *matCellDef="let charge">
            {{ charge.name + ', ' + charge.currency.displaySymbol }}
          </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="chargeCalculationType">
          <th mat-header-cell *matHeaderCellDef> Type </th>
          <td mat-cell *matCellDef="let charge">
            {{ charge.chargeCalculationType.value }}
          </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="amount">
          <th mat-header-cell *matHeaderCellDef> Amount </th>
          <td mat-cell *matCellDef="let charge">
            {{ charge.amount }}
          </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="chargeTimeType">
          <th mat-header-cell *matHeaderCellDef> Collected On </th>
          <td mat-cell *matCellDef="let charge">
            {{ charge.chargeTimeType.value }}
          </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="date">
          <th mat-header-cell *matHeaderCellDef> Date </th>
          <td mat-cell *matCellDef="let charge">
@@ -216,52 +216,52 @@
            </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">Overdue Charges</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> Name </th>
          <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef> Type </th>
          <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="amount">
          <th mat-header-cell *matHeaderCellDef> Amount </th>
          <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
        </ng-container>
-  
+
        <ng-container matColumnDef="collectedon">
          <th mat-header-cell *matHeaderCellDef> Collected On </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"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      Previous
    </button>
    <button mat-raised-button [routerLink]="['../']">
@@ -271,4 +271,3 @@
      Submit
    </button>
  </div>
-  
@@ -112,12 +112,12 @@

    </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"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
        Previous
      </button>
      <button mat-raised-button matStepperNext>
@@ -11,7 +11,7 @@

  <div fxFlex="48%" fxFlexAlign="center">
    <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
      Add
    </button>
  </div>
@@ -120,7 +120,7 @@

 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
  <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    Previous
  </button>
  <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
@@ -39,7 +39,7 @@

  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
    <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      Previous
    </button>
    <button mat-raised-button matStepperNext>
@@ -91,7 +91,7 @@

  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
    <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      Previous
    </button>
    <button mat-raised-button matStepperNext>
@@ -261,7 +261,7 @@

 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
  <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    Previous
  </button>
  <button mat-raised-button [routerLink]="['../']">
@@ -10,7 +10,7 @@

 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
  <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    Previous
  </button>
  <button mat-raised-button matStepperNext>
@@ -379,7 +379,7 @@
      <div fxLayout="column" fxFlex="50%">
        <div fxLayout="row" fxLayoutAlign="flex-end">
          <button mat-raised-button color="primary" (click)="addCollateral()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
          </button>
        </div>
      </div>
@@ -422,7 +422,7 @@

  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
    <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
      Previous
    </button>
    <button mat-raised-button matStepperNext>
@@ -72,242 +72,250 @@ const routes: Routes = [
      },
      {
        path: ':loanId',
-        component: LoansViewComponent,
        data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
        resolve: {
-          loanDetailsData: LoanDetailsResolver,
-          loanDatatables: LoanDatatablesResolver
+          loanDetailsData: LoanDetailsResolver
        },
        children: [
          {
            path: '',
-            redirectTo: 'general',
-            pathMatch: 'full'
-          },
-          {
-            path: 'general',
-            component: GeneralTabComponent,
-            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'accountdetail',
-            component: AccountDetailsComponent,
-            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'original-schedule',
-            component: OriginalScheduleTabComponent,
-            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'repayment-schedule',
-            component: RepaymentScheduleTabComponent,
-            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+            component: LoansViewComponent,
+            resolve: {
+              loanDetailsData: LoanDetailsResolver,
+              loanDatatables: LoanDatatablesResolver
+            },
+            children: [
+              {
+                path: '',
+                redirectTo: 'general',
+                pathMatch: 'full'
+              },
+              {
+                path: 'general',
+                component: GeneralTabComponent,
+                data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'accountdetail',
+                component: AccountDetailsComponent,
+                data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'original-schedule',
+                component: OriginalScheduleTabComponent,
+                data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'repayment-schedule',
+                component: RepaymentScheduleTabComponent,
+                data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'transactions',
+                data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                children: [
+                  {
+                    path: '',
+                    component: TransactionsTabComponent
+
+                  },
+                  {
+                    path: 'export',
+                    component: ExportTransactionsComponent
+                  }
+                ]
+              },
+              {
+                path: 'delinquencytags',
+                data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+                resolve: {
+                  loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: LoanDelinquencyTagsTabComponent
+                  },
+                ]
+              },
+              {
+                path: 'loan-reschedules',
+                data: {},
+                resolve: {
+                  loanRescheduleData: LoanReschedulesResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: RescheduleLoanTabComponent
+                  }
+                ]
+              },
+              {
+                path: 'loan-collateral',
+                component: LoanCollateralTabComponent,
+                data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'loan-tranche-details',
+                component: LoanTrancheDetailsComponent,
+                data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'overdue-charges',
+                component: OverdueChargesTabComponent,
+                data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'floating-interest-rates',
+                component: FloatingInterestRatesComponent,
+                data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'charges',
+                data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+                component: ChargesTabComponent,
+              },
+              {
+                path: 'loan-documents',
+                component: LoanDocumentsTabComponent,
+                data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+                resolve: {
+                  loanDocuments: LoanDocumentsResolver
+                },
+              },
+              {
+                path: 'notes',
+                component: NotesTabComponent,
+                data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+                resolve: {
+                  loanNotes: LoanNotesResolver
+                },
+              },
+              {
+                path: 'standing-instruction',
+                component: StandingInstructionsTabComponent,
+                data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'datatables',
+                children: [{
+                  path: ':datatableName',
+                  component: DatatableTabComponent,
+                  data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                  resolve: {
+                    loanDatatable: LoanDatatableResolver
+                  }
+                }]
+              },
+            ],
          },
          {
            path: 'transactions',
            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-            children: [
-              {
-                path: '',
-                component: TransactionsTabComponent
-
-              },
-              {
-                path: 'export',
-                component: ExportTransactionsComponent
-              }
-            ]
-          },
-          {
-            path: 'delinquencytags',
-            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
            resolve: {
-              loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+              loanDetailsAssociationData: LoanDetailsResolver
            },
            children: [
              {
                path: '',
-                component: LoanDelinquencyTagsTabComponent
+                redirectTo: '../transactions', pathMatch: 'prefix'
              },
-            ]
-          },
-          {
-            path: 'loan-reschedules',
-            data: {},
-            resolve: {
-              loanRescheduleData: LoanReschedulesResolver
-            },
-            children: [
              {
-                path: '',
-                component: RescheduleLoanTabComponent
+                path: ':id',
+                data: { routeParamBreadcrumb: 'id' },
+                children: [
+                  {
+                    path: '',
+                    component: ViewTransactionComponent,
+                    resolve: {
+                      loansAccountTransaction: LoansAccountTransactionResolver
+                    }
+                  },
+                  {
+                    path: 'edit',
+                    component: EditTransactionComponent,
+                    data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                    resolve: {
+                      loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                    }
+                  },
+                  {
+                    path: 'reciept',
+                    component: ViewRecieptComponent,
+                    data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+                    resolve: {
+                      loansTransactionReciept: LoansTransactionRecieptResolver
+                    }
+                  }
+                ]
              }
            ]
          },
-          {
-            path: 'loan-collateral',
-            component: LoanCollateralTabComponent,
-            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'loan-tranche-details',
-            component: LoanTrancheDetailsComponent,
-            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'overdue-charges',
-            component: OverdueChargesTabComponent,
-            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'floating-interest-rates',
-            component: FloatingInterestRatesComponent,
-            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
-          },
          {
            path: 'charges',
            data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-            component: ChargesTabComponent,
-          },
-          {
-            path: 'loan-documents',
-            component: LoanDocumentsTabComponent,
-            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-            resolve: {
-              loanDocuments: LoanDocumentsResolver
-            },
-          },
-          {
-            path: 'notes',
-            component: NotesTabComponent,
-            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-            resolve: {
-              loanNotes: LoanNotesResolver
-            },
-          },
-          {
-            path: 'standing-instruction',
-            component: StandingInstructionsTabComponent,
-            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'datatables',
-            children: [{
-              path: ':datatableName',
-              component: DatatableTabComponent,
-              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-              resolve: {
-                loanDatatable: LoanDatatableResolver
-              }
-            }]
-          },
-        ],
-      },
-      {
-        path: 'transactions',
-        data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-        resolve: {
-          loanDetailsAssociationData: LoanDetailsResolver
-        },
-        children: [
-          {
-            path: '',
-            redirectTo: '../transactions', pathMatch: 'prefix'
-          },
-          {
-            path: ':id',
-            data: { routeParamBreadcrumb: 'id' },
            children: [
              {
                path: '',
-                component: ViewTransactionComponent,
-                resolve: {
-                  loansAccountTransaction: LoansAccountTransactionResolver
-                }
+                redirectTo: '../charges', pathMatch: 'prefix'
              },
              {
-                path: 'edit',
-                component: EditTransactionComponent,
-                data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                path: ':id',
+                data: { routeParamBreadcrumb: 'id' },
+                component: ViewChargeComponent,
                resolve: {
-                  loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
-                }
-              },
-              {
-                path: 'reciept',
-                component: ViewRecieptComponent,
-                data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                resolve: {
-                  loansTransactionReciept: LoansTransactionRecieptResolver
+                  loansAccountCharge: LoansAccountChargeResolver,
+                  loanDetailsData: LoanDetailsResolver
                }
              }
            ]
-          }
-        ]
-      },
-      {
-        path: 'charges',
-        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-        children: [
-          {
-            path: '',
-            redirectTo: '../charges', pathMatch: 'prefix'
          },
          {
-            path: ':id',
-            data: { routeParamBreadcrumb: 'id' },
-            component: ViewChargeComponent,
+            path: 'actions/:action',
+            component: LoanAccountActionsComponent,
+            data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
            resolve: {
-              loansAccountCharge: LoansAccountChargeResolver,
-              loanDetailsData: LoanDetailsResolver
+              actionButtonData: LoanActionButtonResolver
            }
-          }
+          },
+          {
+            path: 'transfer-funds',
+            loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+          },
+          {
+            path: 'edit-loans-account',
+            data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+            component: EditLoansAccountComponent,
+            resolve: {
+              loansAccountAndTemplate: LoansAccountAndTemplateResolver
+            }
+          },
        ]
      },
      {
-        path: 'actions/:action',
-        component: LoanAccountActionsComponent,
-        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
-        resolve: {
-          actionButtonData: LoanActionButtonResolver
-        }
-      },
-      {
-        path: 'transfer-funds',
-        loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
-      },
-      {
-        path: 'edit-loans-account',
-        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
-        component: EditLoansAccountComponent,
-        resolve: {
-          loansAccountAndTemplate: LoansAccountAndTemplateResolver
-        }
-      },
-    ]
-  },
-  {
-    path: 'glim-account',
-    children: [
-      {
-        path: 'create',
-        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
-        component: CreateGlimAccountComponent,
-        resolve: {
-          loansAccountTemplate: GLIMLoanTemplateResolver,
-          gsimData: GSIMAccountsResolver,
-          groupsData: GroupViewResolver,
-        },
-      },
-      {
-        path: ':glimId',
-        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        component: GlimAccountComponent,
-        resolve: {
-          glimData: GLIMViewResolver,
-          groupsData: GroupAccountsResolver
-        },
+        path: 'glim-account',
+        children: [
+          {
+            path: 'create',
+            data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
+            component: CreateGlimAccountComponent,
+            resolve: {
+              loansAccountTemplate: GLIMLoanTemplateResolver,
+              gsimData: GSIMAccountsResolver,
+              groupsData: GroupViewResolver,
+            },
+          },
+          {
+            path: ':glimId',
+            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+            component: GlimAccountComponent,
+            resolve: {
+              glimData: GLIMViewResolver,
+              groupsData: GroupAccountsResolver
+            },
+          }
+        ]
      }
    ]
  }
@@ -25,7 +25,7 @@
        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
          <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-            <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
+            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report
          </button>
        </mat-card-actions>

@@ -43,7 +43,7 @@

    <div fxLayoutAlign="end">
      <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="file" class="m-r-10"></fa-icon>
        Print
      </button>
    </div>
@@ -156,16 +156,16 @@
            <span *ngIf="!guarantor.guarantorFundingDetails">
              <button mat-raised-button class="account-action-button" color="primary"
                *mifosxHasPermission="'READ_SAVINGSACCOUNT'" (click)="viewGuarantorDetails(guarantor)">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <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">
-                <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+                <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)">
-                  <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="trash" class="m-r-10"></fa-icon>
                </button>
              </span>
            </span>
@@ -10,7 +10,7 @@
  <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"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
    </button>
    <button mat-raised-button color="primary" *ngIf="!pristine"
      (click)="editDisbursementData()">
@@ -192,7 +192,9 @@
        </a>
      </ng-container>
    </nav>
+
    <router-outlet></router-outlet>
+
  </mat-card-content>

 </mat-card>
@@ -40,21 +40,6 @@
      </td>
    </ng-container>

-    <ng-container matColumnDef="updatedOnDate">
-      <th mat-header-cell *matHeaderCellDef> Updated On </th>
-      <td mat-cell *matCellDef="let item">
-        <span *ngIf="item.statusEnum.pendingApproval">
-          {{ item.timeline.submittedOnDate | dateFormat }}
-        </span>
-        <span *ngIf="item.statusEnum.approved">
-          {{ item.timeline.approvedOnDate | dateFormat }}
-        </span>
-        <span *ngIf="item.statusEnum.rejected">
-          {{ item.timeline.rejectedOnDate | dateFormat }}
-        </span>
-      </td>
-    </ng-container>
-
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> Actions </th>
      <td mat-cell *matCellDef="let item">
@@ -14,7 +14,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 export class RescheduleLoanTabComponent implements OnInit {

  loanRescheduleData: any;
-  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'updatedOnDate', 'actions'];
+  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'actions'];
  clientId: any;

  constructor(private route: ActivatedRoute,
@@ -27,7 +27,7 @@
  <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
    <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
    <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs"></fa-icon>&nbsp;&nbsp;Generate Report &nbsp;</button>
+    <fa-icon icon="cogs" class="m-r-10"></fa-icon>Generate Report &nbsp;</button>
  </div>

 </form>