Loan account with Term variations details tab

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html

@@ -0,0 +1,29 @@
+<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>
+    
+        <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="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>

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.scss

@@ -0,0 +1,12 @@
+table {
+    width: 100%;
+}
+
+.container {
+    padding-top: 1%;
+    padding-bottom: 2%;
+
+    .delete-button {
+        margin-left: 1%;
+    }
+}

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanTermVariationsTabComponent } from './loan-term-variations-tab.component';
+
+describe('LoanTermVariationsTabComponent', () => {
+  let component: LoanTermVariationsTabComponent;
+  let fixture: ComponentFixture<LoanTermVariationsTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoanTermVariationsTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoanTermVariationsTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loan-term-variations-tab',
+  templateUrl: './loan-term-variations-tab.component.html',
+  styleUrls: ['./loan-term-variations-tab.component.scss']
+})
+export class LoanTermVariationsTabComponent implements OnInit {
+
+  /** Loan Details Data */
+  loanTermVariationsData: any[] = [];
+
+  loanId: number;
+
+  loanDTermVariationsColumns: string[] = ['termType', 'applicableFrom', 'value', 'specificToInstallment'];
+
+  constructor(private route: ActivatedRoute) {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
+      this.loanTermVariationsData = data.loanDetailsData.loanTermVariations;
+    });
+    this.loanId = this.route.parent.parent.snapshot.params['loanId'];
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/loans/loans-view/loans-view.component.html

@@ -173,6 +173,12 @@
           {{"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>
+      </ng-container>
       <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
         <a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive"
           [active]="overduecharges.isActive">