New Loan transactions

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -30,8 +30,16 @@ export class LoanActionButtonResolver implements Resolve<Object> {
             return this.loansService.getLoanTemplate(loanId);
         } else if (loanActionButton === 'Make Repayment') {
             return this.loansService.getLoanActionTemplate(loanId, 'repayment');
+        } else if (loanActionButton === 'Goodwill Credit') {
+          return this.loansService.getLoanActionTemplate(loanId, 'goodwillCredit');
+        } else if (loanActionButton === 'Payout Refund') {
+          return this.loansService.getLoanActionTemplate(loanId, 'payoutRefund');
+        } else if (loanActionButton === 'Merchant Issued Refund') {
+          return this.loansService.getLoanActionTemplate(loanId, 'merchantIssuedRefund');
+        } else if (loanActionButton === 'Credit Balance Refund') {
+          return this.loansService.getLoanActionTemplate(loanId, 'creditBalanceRefund');
         } else if (loanActionButton === 'Waive Interest') {
-            return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
+          return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
         } else if (loanActionButton === 'Write Off') {
             return this.loansService.getLoanActionTemplate(loanId, 'writeoff');
         } else if (loanActionButton === 'Close') {

src/app/loans/loans-routing.module.ts

@@ -231,7 +231,7 @@ const routes: Routes = [
         {
           path: 'actions/:action',
           component: LoanAccountActionsComponent,
-          data: { title: extract('Loan Account Actions'), routeParamBreadcrumb: 'action' },
+          data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
           resolve: {
             actionButtonData: LoanActionButtonResolver
           }

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html

@@ -4,6 +4,10 @@
 <mifosx-foreclosure *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['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-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>

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts

@@ -34,7 +34,12 @@ export class LoanAccountActionsComponent {
             'Undo Disbursal': boolean,
             'Loan Screen Reports': boolean,
             'Approve': boolean,
-            'Add Loan Charge': boolean } = {
+            'Add Loan Charge': boolean,
+            'Goodwill Credit': boolean,
+            'Merchant Issued Refund': boolean,
+            'Payout Refund': boolean,
+            'Credit Balance Refund': boolean
+         } = {
               'Close': false,
               'Undo Approval': false,
               'Write Off':  false,
@@ -56,7 +61,12 @@ export class LoanAccountActionsComponent {
               'Undo Disbursal':  false,
               'Loan Screen Reports':  false,
               'Approve':  false,
-              'Add Loan Charge':  false };
+              'Add Loan Charge':  false,
+              'Goodwill Credit': false,
+              'Merchant Issued Refund': false,
+              'Payout Refund': false,
+              'Credit Balance Refund': false
+          };
 
   actionButtonData: any;
   actionName: any;

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html

@@ -0,0 +1,54 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="creditBalanceLoanForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field (click)="transactionDatePicker.open()">
+            <mat-label>Transaction Date</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')">
+              Transaction Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="creditBalanceLoanForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>External Id</mat-label>
+            <input matInput formControlName="externalId">
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></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']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+        </mat-card-actions>
+
+      </mat-card-content>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.scss

@@ -0,0 +1,7 @@
+.expandcollapsebutton {
+  margin-top: -7px;
+}
+
+.container {
+  max-width: 37rem;
+}

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.spec.ts

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

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loan-credit-balance-refund',
+  templateUrl: './loan-credit-balance-refund.component.html',
+  styleUrls: ['./loan-credit-balance-refund.component.scss']
+})
+export class LoanCreditBalanceRefundComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Credit Balance Loan Form */
+  creditBalanceLoanForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loanService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private dateUtils: Dates,
+    private settingsService: SettingsService) {
+      this.loanId = this.route.parent.snapshot.params['loanId'];
+    }
+
+  /**
+   * Creates the Credit Balance loan form
+   * and initialize with the required values
+   */
+  ngOnInit() {
+    this.maxDate = this.settingsService.businessDate;
+    this.createCreditBalanceLoanForm();
+    this.setCreditBalanceLoanDetails();
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createCreditBalanceLoanForm() {
+    this.creditBalanceLoanForm = this.formBuilder.group({
+      'transactionDate': [new Date(), Validators.required],
+      'transactionAmount': ['', Validators.required],
+      'externalId': '',
+      'note': ''
+    });
+  }
+
+  setCreditBalanceLoanDetails() {
+    this.creditBalanceLoanForm.patchValue({
+      transactionAmount: this.dataObject.amount
+    });
+  }
+
+  /** Submits the Credit Balance form */
+  submit() {
+    const creditBalanceLoanFormData = this.creditBalanceLoanForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const prevTransactionDate: Date = this.creditBalanceLoanForm.value.transactionDate;
+    if (creditBalanceLoanFormData.transactionDate instanceof Date) {
+      creditBalanceLoanFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
+    }
+    const data = {
+      ...creditBalanceLoanFormData,
+      dateFormat,
+      locale
+    };
+    const command = this.dataObject.type.code.split('.')[1];
+    this.loanService.submitLoanActionButton(this.loanId, data, command)
+      .subscribe((response: any) => {
+        this.router.navigate(['../../transactions'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts

@@ -111,7 +111,8 @@ export class MakeRepaymentComponent implements OnInit {
       dateFormat,
       locale
     };
-    this.loanService.submitLoanActionButton(this.loanId, data, 'repayment')
+    const command = this.dataObject.type.code.split('.')[1];
+    this.loanService.submitLoanActionButton(this.loanId, data, command)
       .subscribe((response: any) => {
         this.router.navigate(['../../transactions'], { relativeTo: this.route });
     });

src/app/loans/loans-view/loan-accounts-button-config.ts

@@ -6,6 +6,11 @@ export class LoansAccountButtonConfiguration {
         taskPermissionName?: string,
     }[];
 
+    optionPaymentArray: {
+      name: string,
+      taskPermissionName?: string,
+    }[];
+
     buttonsArray: {
         name: string,
         icon: string,
@@ -25,6 +30,10 @@ export class LoansAccountButtonConfiguration {
         return this.optionArray;
     }
 
+    get optionsPayment() {
+      return this.optionPaymentArray;
+  }
+
     setButtons(status: string) {
         switch (status) {
             case 'Active':
@@ -48,7 +57,7 @@ export class LoansAccountButtonConfiguration {
                         name: 'Undo Disbursal',
                         icon: 'fa fa-undo',
                         taskPermissionName: 'DISBURSALUNDO_LOAN',
-                    },
+                    }
                 ];
                 break;
             case 'Submitted and pending approval':
@@ -101,6 +110,11 @@ export class LoansAccountButtonConfiguration {
                         icon: 'fa fa-exchange',
                         taskPermissionName: 'CREATE_ACCOUNTTRANSFER',
                     },
+                    {
+                        name: 'Credit Balance Refund',
+                        icon: 'fa fa-dollar',
+                        taskPermissionName: 'CREATE_CREDIT_BALANCE_REFUND',
+                    }
                 ];
                 break;
             case 'Closed (written off)':
@@ -112,6 +126,25 @@ export class LoansAccountButtonConfiguration {
                     },
                 ];
                 break;
+            case 'Closed (obligations met)':
+                this.buttonsArray = [
+                  {
+                    name: 'Goodwill Credit',
+                    icon: 'fa fa-dollar',
+                    taskPermissionName: 'CREATE_GOODWILL_TRANSACTION',
+                  },
+                  {
+                      name: 'Payout Refund',
+                      icon: 'fa fa-dollar',
+                      taskPermissionName: 'CREATE_PAYOUT_REFUND',
+                  },
+                  {
+                      name: 'Merchant Issued Refund',
+                      icon: 'fa fa-dollar',
+                      taskPermissionName: 'CREATE_MERCHANT_ISSUED_REFUND',
+                  }
+                ];
+                break;
             default:
                 this.buttonsArray = [];
         }
@@ -158,6 +191,20 @@ export class LoansAccountButtonConfiguration {
                         taskPermissionName: 'RECOVERGUARANTEES_LOAN',
                     },
                 ];
+                this.optionPaymentArray = [
+                    {
+                        name: 'Goodwill Credit',
+                        taskPermissionName: 'CREATE_GOODWILL_TRANSACTION',
+                    },
+                    {
+                        name: 'Payout Refund',
+                        taskPermissionName: 'CREATE_PAYOUT_REFUND',
+                    },
+                    {
+                        name: 'Merchant Issued Refund',
+                        taskPermissionName: 'CREATE_MERCHANT_ISSUED_REFUND',
+                    }
+                ];
                 break;
             case 'Submitted and pending approval':
                 this.optionArray = [
@@ -186,6 +233,7 @@ export class LoansAccountButtonConfiguration {
                         taskPermissionName: 'READ_LOAN',
                     },
                 ];
+                this.optionPaymentArray = [];
                 break;
             case 'Approved':
                 this.optionArray = [
@@ -206,9 +254,11 @@ export class LoansAccountButtonConfiguration {
                         taskPermissionName: 'READ_LOAN',
                     },
                 ];
+                this.optionPaymentArray = [];
                 break;
             default:
                 this.optionArray = [];
+                this.optionPaymentArray = [];
         }
     }
 

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

@@ -2,124 +2,149 @@
 
   <mat-card-header fxLayout="column" class="header">
 
-	<mat-card-title-group class="header-title-group">
+    <mat-card-title-group class="header-title-group">
 
-	<div class="profile-image-container">
+      <div class="profile-image-container">
-		<div>
+        <div>
-			<img mat-card-md-image class="profile-image" matTooltip="Loans Account"
+          <img mat-card-md-image class="profile-image" matTooltip="Loans Account"
-				[src]="'assets/images/loans_account_placeholder.png'">
+            [src]="'assets/images/loans_account_placeholder.png'">
-		</div>
+        </div>
-	</div>
+      </div>
 
-	  <div class="mat-typography loan-card-title">
+      <div class="mat-typography loan-card-title">
-	    <mat-card-title>
+        <mat-card-title>
-		  <div fxLayout="row" fxLayout.lt-md="column">
+          <div fxLayout="row" fxLayout.lt-md="column">
 
-			<div fxFlex="50%">
+            <div fxFlex="50%">
-				<h3>
+              <h3>
-				  <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}" [ngClass]="loanDetailsData.inArrears?'status-active-overdue':(loanDetailsData.status.code|statusLookup)"></i>
+                <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}"
-				  Loan Product: {{loanDetailsData.loanProductName}}(#{{loanDetailsData.accountNo}})
+                  [ngClass]="loanDetailsData.inArrears?'status-active-overdue':(loanDetailsData.status.code|statusLookup)"></i>
-				  <br/>
+                Loan Product: {{loanDetailsData.loanProductName}}(#{{loanDetailsData.accountNo}})
-				  <span *ngIf="loanDetailsData.clientName" > Client Name: {{loanDetailsData.clientName}} </span> <br/>
+                <br />
-				  <span *ngIf="loanDetailsData.group" > Group Name: {{loanDetailsData.group.name}} </span>
+                <span *ngIf="loanDetailsData.clientName"> Client Name: {{loanDetailsData.clientName}} </span> <br />
-				</h3>
+                <span *ngIf="loanDetailsData.group"> Group Name: {{loanDetailsData.group.name}} </span>
-			</div>
+              </h3>
+            </div>
 
-			<div *ngIf="loanDetailsData.summary" class="loansOverview mat-typography" fxFlex="50%">
+            <div *ngIf="loanDetailsData.summary" class="loansOverview mat-typography" fxFlex="50%">
-			  <h3> Loan Account OverView </h3>
+              <h3> Loan Account OverView </h3>
-				<span>Current Balance: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.summary.totalOutstanding | number}}</span><br>
+              <span>Current Balance: {{loanDetailsData.currency.displaySymbol}}
-				  <span>Arrears By: {{loanDetailsData.summary.totalOverdue | number}}
+                {{loanDetailsData.summary.totalOutstanding | number}}</span><br>
-				  <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">Not Provided</span>
+              <span>Arrears By: {{loanDetailsData.summary.totalOverdue | number}}
-				</span><br>
+                <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">Not Provided</span>
-			</div>
+              </span><br>
+            </div>
 
-		  </div>
+          </div>
-		</mat-card-title>
+        </mat-card-title>
-	  </div>
+      </div>
-	</mat-card-title-group>
+    </mat-card-title-group>
 
-	<mat-card-actions class="loan-actions">
+    <mat-card-actions class="loan-actions">
 
-	  <ng-container *ngFor="let item of buttonConfig.singleButtons" class="loan-span">
+      <ng-container *ngFor="let item of buttonConfig.singleButtons" class="loan-span">
-		<button mat-raised-button *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
+        <button mat-raised-button *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
-		  <i class="{{item.icon}}"></i> {{item.name}} </button>
+          <i class="{{item.icon}}"></i> {{item.name}} </button>
-	  </ng-container>
+      </ng-container>
 
-	  <ng-container *ngIf="buttonConfig.options.length" class="loan-span">
+      <ng-container *ngIf="buttonConfig.optionsPayment.length" class="loan-span">
-		<button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <button mat-raised-button [matMenuTriggerFor]="Payments">Payments</button>
-		  <mat-menu #More="matMenu">
+        <mat-menu #Payments="matMenu">
-			<span *ngFor="let item of buttonConfig.options">
+          <span *ngFor="let item of buttonConfig.optionsPayment">
-			  <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">{{item.name}}</button>
+            <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
-			</span>
+              (click)="loanAction(item.name)">{{item.name}}</button>
-		  </mat-menu>
+          </span>
-	  </ng-container>
+        </mat-menu>
+      </ng-container>
 
-	</mat-card-actions>
+      <ng-container *ngIf="buttonConfig.options.length" class="loan-span">
+        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <mat-menu #More="matMenu">
+          <span *ngFor="let item of buttonConfig.options">
+            <button mat-menu-item *mifosxHasPermission="item.taskPermissionName"
+              (click)="loanAction(item.name)">{{item.name}}</button>
+          </span>
+        </mat-menu>
+      </ng-container>
+
+    </mat-card-actions>
 
   </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">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-		General
+        [active]="general.isActive">
-	  </a>
+        General
-	  <a mat-tab-link [routerLink]="['./accountdetail']" routerLinkActive #accountdetail="routerLinkActive" [active]="accountdetail.isActive">
+      </a>
-		Account Details
+      <a mat-tab-link [routerLink]="['./accountdetail']" routerLinkActive #accountdetail="routerLinkActive"
-	  </a>
+        [active]="accountdetail.isActive">
-	  <ng-container *ngIf="loanDetailsData.originalSchedule">
+        Account Details
-		<a mat-tab-link [routerLink]="['./original-schedule']" routerLinkActive #originalSchedule="routerLinkActive" [active]="originalSchedule.isActive">
+      </a>
-		  Original Schedule
+      <ng-container *ngIf="loanDetailsData.originalSchedule">
-		</a>
+        <a mat-tab-link [routerLink]="['./original-schedule']" routerLinkActive #originalSchedule="routerLinkActive"
-	  </ng-container>
+          [active]="originalSchedule.isActive">
-	  <a mat-tab-link [routerLink]="['./repayment-schedule']" routerLinkActive #repaymentSchedule="routerLinkActive" [active]="repaymentSchedule.isActive">
+          Original Schedule
-		Repayment Schedule
+        </a>
-	  </a>
-	  <ng-container *ngIf="loanDetailsData.transactions">
-		<a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive" [active]="transactions.isActive">
-		  Transactions
-		</a>
-	  </ng-container>
-	  <ng-container *ngIf="loanDetailsData.collateral">
-		<a mat-tab-link [routerLink]="['./loan-collateral']" routerLinkActive #loanCollateralDetails="routerLinkActive"
-	  	  [active]="loanCollateralDetails.isActive">
-	      Loan Collateral Details
-		</a>
-	  </ng-container>
-	  <ng-container *ngIf="loanDetailsData.multiDisburseLoan">
-		<a mat-tab-link [routerLink]="['./loan-tranche-details']" routerLinkActive #loanTrancheDetails="routerLinkActive" [active]="loanTrancheDetails.isActive">
-		  Loan Tranche Details
-		</a>
       </ng-container>
-	  <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
+      <a mat-tab-link [routerLink]="['./repayment-schedule']" routerLinkActive #repaymentSchedule="routerLinkActive"
-		<a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive" [active]="overduecharges.isActive">
+        [active]="repaymentSchedule.isActive">
-			Overdue Charges
+        Repayment Schedule
-		</a>
+      </a>
-	  </ng-container>
+      <ng-container *ngIf="loanDetailsData.transactions">
-	  <ng-container *ngIf="loanDetailsData.isLoanProductLinkedToFloatingRate">
+        <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-		<a mat-tab-link [routerLink]="['./floating-interest-rates']" routerLinkActive #floatingInterestRates="routerLinkActive" [active]="floatingInterestRates.isActive">
+          [active]="transactions.isActive">
-			Floating Interest Rates
+          Transactions
-		</a>
+        </a>
-	  </ng-container>
+      </ng-container>
-	  <ng-container *ngIf="loanDetailsData.charges">
+      <ng-container *ngIf="loanDetailsData.collateral">
-		<a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive" [active]="charges.isActive">
+        <a mat-tab-link [routerLink]="['./loan-collateral']" routerLinkActive #loanCollateralDetails="routerLinkActive"
-		  Charges
+          [active]="loanCollateralDetails.isActive">
-		</a>
+          Loan Collateral Details
-	  </ng-container>
+        </a>
-		<a mat-tab-link [routerLink]="['./loan-documents']" routerLinkActive #loanDocuments="routerLinkActive" [active]="loanDocuments.isActive">
+      </ng-container>
-			Loan Documents
+      <ng-container *ngIf="loanDetailsData.multiDisburseLoan">
-		</a>
+        <a mat-tab-link [routerLink]="['./loan-tranche-details']" routerLinkActive
-	  <a mat-tab-link *mifosxHasPermission="'READ_LOANNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive">
+          #loanTrancheDetails="routerLinkActive" [active]="loanTrancheDetails.isActive">
-		Notes
+          Loan Tranche Details
-	  </a>
+        </a>
-	<ng-container *ngIf="loanDetailsData.clientId">
+      </ng-container>
-		<a mat-tab-link [routerLink]="['./standing-instruction']" routerLinkActive #standingInstruction="routerLinkActive"
+      <ng-container *ngIf="loanDetailsData.overdueCharges.length > 0">
-			[active]="standingInstruction.isActive">
+        <a mat-tab-link [routerLink]="['./overdue-charges']" routerLinkActive #overduecharges="routerLinkActive"
-			Standing Instruction
+          [active]="overduecharges.isActive">
-		</a>
+          Overdue Charges
-	</ng-container>
+        </a>
-	  <ng-container *ngFor="let loanDatatable of loanDatatables">
+      </ng-container>
-        <a mat-tab-link *mifosxHasPermission="'READ_' + loanDatatable.registeredTableName" [routerLink]="['./datatables',loanDatatable.registeredTableName]"
+      <ng-container *ngIf="loanDetailsData.isLoanProductLinkedToFloatingRate">
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+        <a mat-tab-link [routerLink]="['./floating-interest-rates']" routerLinkActive
+          #floatingInterestRates="routerLinkActive" [active]="floatingInterestRates.isActive">
+          Floating Interest Rates
+        </a>
+      </ng-container>
+      <ng-container *ngIf="loanDetailsData.charges">
+        <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
+          [active]="charges.isActive">
+          Charges
+        </a>
+      </ng-container>
+      <a mat-tab-link [routerLink]="['./loan-documents']" routerLinkActive #loanDocuments="routerLinkActive"
+        [active]="loanDocuments.isActive">
+        Loan Documents
+      </a>
+      <a mat-tab-link *mifosxHasPermission="'READ_LOANNOTE'" [routerLink]="['./notes']" routerLinkActive
+        #notes="routerLinkActive" [active]="notes.isActive">
+        Notes
+      </a>
+      <ng-container *ngIf="loanDetailsData.clientId">
+        <a mat-tab-link [routerLink]="['./standing-instruction']" routerLinkActive
+          #standingInstruction="routerLinkActive" [active]="standingInstruction.isActive">
+          Standing Instruction
+        </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>
       </ng-container>

src/app/loans/loans.module.ts

@@ -64,6 +64,7 @@ import { EditTransactionComponent } from './loans-view/transactions/edit-transac
 import { LoansAccountViewGuarantorDetailsDialogComponent } from './custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component';
 import { LoansAccountAddCollateralDialogComponent } from './custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
+import { LoanCreditBalanceRefundComponent } from './loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component';
 
 /**
  * Loans Module
@@ -126,7 +127,8 @@ import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-ac
     ViewTransactionComponent,
     EditTransactionComponent,
     ViewRecieptComponent,
-    ExportTransactionsComponent
+    ExportTransactionsComponent,
+    LoanCreditBalanceRefundComponent
   ],
   providers: [ ],
 })