Enhancement in loan and savings account views (#1690)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.ts

@@ -41,7 +41,7 @@ export class ActivateSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.ts

@@ -49,7 +49,7 @@ export class AddChargeSavingsAccountComponent implements OnInit {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.savingsChargeOptions = data.savingsAccountActionData.chargeOptions;
     });
-    this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.savingAccountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.ts

@@ -45,7 +45,7 @@ export class ApplyAnnualFeesSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.savingsAccountData = data.savingsAccountActionData;
     });

src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.ts

@@ -41,7 +41,7 @@ export class ApproveSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.ts

@@ -51,7 +51,7 @@ export class CloseSavingsAccountComponent implements OnInit {
       this.paymentTypeOptions = data.savingsAccountActionData[0].paymentTypeOptions;
       this.transactionAmount = data.savingsAccountActionData[1].summary.accountBalance;
     });
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts

@@ -49,7 +49,7 @@ export class ManageSavingsAccountComponent implements OnInit {
     private settingsService: SettingsService) {
     this.transactionCommand = this.route.snapshot.params['name'].toLowerCase().replaceAll(' ', '');
     this.transactionType[this.transactionCommand] = true;
-    this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.savingAccountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.ts

@@ -41,7 +41,7 @@ export class PostInterestAsOnSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.ts

@@ -41,7 +41,7 @@ export class RejectSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/saving-account-actions.component.html

@@ -7,7 +7,7 @@
 <mifosx-savings-account-unassign-staff *ngIf="actions['Unassign Staff']"></mifosx-savings-account-unassign-staff>
 <mifosx-withdraw-by-client-savings-account *ngIf="actions['Withdraw 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-savings-transactions [currencyCode]="currencyCode" *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 *ngIf="actions['Hold Amount'] || actions['Block Account']"></mifosx-manage-savings-account>

src/app/savings/saving-account-actions/saving-account-actions.component.ts

@@ -49,10 +49,15 @@ export class SavingAccountActionsComponent {
     'Unblock Account': false
   };
 
+  currencyCode: string;
+
   /**
    * @param {ActivatedRoute} route Activated Route
    */
   constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
+      this.currencyCode = data.savingsAccountActionData.currency.code;
+    });
     const name = this.route.snapshot.params['name'];
     this.actions[name] = true;
   }

src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.ts

@@ -45,7 +45,7 @@ export class SavingsAccountAssignStaffComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       this.savingsAccountData = data.savingsAccountActionData;
     });

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -20,9 +20,11 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
+        <mat-form-field appearance="fill">
           <mat-label>Transaction Amount</mat-label>
-          <input type="number" formControlName="transactionAmount" required matInput />
+          <span matTextSuffix class="m-l-10">{{ currencyCode }}</span>
+          <span fxFlex="auto"></span>
+          <input type="number" class="right-input" formControlName="transactionAmount" required matInput />
           <mat-error *ngIf="savingAccountTransactionForm.controls.transactionAmount.hasError('required')">
             Transaction Amount is <strong>required</strong>
           </mat-error>
@@ -30,7 +32,7 @@
 
         <mat-form-field>
           <mat-label>Payment Type</mat-label>
-          <mat-select formControlName="paymentTypeId">
+          <mat-select required formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
             </mat-option>

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss

@@ -1,3 +1,15 @@
+.expandcollapsebutton {
+  margin-top: -7px;
+}
+
 .container {
-  width: 37rem;
+  max-width: 37rem;
+}
+
+.right-input {
+text-align: right;
+}
+
+.right-label {
+padding-right: 25px !important;
 }

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -18,6 +18,8 @@ import { Dates } from 'app/core/utils/dates';
 })
 export class SavingsAccountTransactionsComponent implements OnInit {
 
+  @Input() currencyCode: string;
+
   /** Minimum Due Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Due Date allowed. */
@@ -61,7 +63,7 @@ export class SavingsAccountTransactionsComponent implements OnInit {
     });
     this.transactionCommand = this.route.snapshot.params['name'].toLowerCase();
     this.transactionType[this.transactionCommand] = true;
-    this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.savingAccountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**
@@ -77,8 +79,8 @@ export class SavingsAccountTransactionsComponent implements OnInit {
    */
   createSavingAccountTransactionForm() {
     this.savingAccountTransactionForm = this.formBuilder.group({
-      'transactionDate': ['', Validators.required],
-      'transactionAmount': ['', Validators.required],
+      'transactionDate': [this.settingsService.businessDate, Validators.required],
+      'transactionAmount': [0, Validators.required],
       'paymentTypeId': [''],
       'note': ['']
     });
@@ -89,7 +91,6 @@ export class SavingsAccountTransactionsComponent implements OnInit {
    */
   addPaymentDetails() {
     this.addPaymentDetailsFlag = !this.addPaymentDetailsFlag;
-    /*
     if (this.addPaymentDetailsFlag) {
       this.savingAccountTransactionForm.addControl('accountNumber', new FormControl(''));
       this.savingAccountTransactionForm.addControl('checkNumber', new FormControl(''));
@@ -103,8 +104,6 @@ export class SavingsAccountTransactionsComponent implements OnInit {
       this.savingAccountTransactionForm.removeControl('receiptNumber');
       this.savingAccountTransactionForm.removeControl('bankNumber');
     }
-
-    */
   }
 
   /**

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.ts

@@ -41,7 +41,7 @@ export class SavingsAccountUnassignStaffComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.ts

@@ -31,7 +31,7 @@ export class UndoApprovalSavingsAccountComponent implements OnInit {
               private savingsService: SavingsService,
               private route: ActivatedRoute,
               private router: Router) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.ts

@@ -41,7 +41,7 @@ export class WithdrawByClientSavingsAccountComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
-    this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.accountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -38,11 +38,6 @@
     <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">Currency in multiples of</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyMultiple').value }}</span>
-  </div>
-
   <div fxFlexFill>
     <span fxFlex="40%">Nominal Annual Interest Rate:</span>
     <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate }}</span>

src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html

@@ -12,11 +12,6 @@
       <input type="number" matInput formControlName="decimal">
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>Currency in multiples of</mat-label>
-      <input type="number" matInput formControlName="currencyMultiple" >
-    </mat-form-field>
-
     <mat-form-field fxFlex="48%">
       <mat-label>Nominal Annual Interest Rate</mat-label>
       <input type="number" matInput formControlName="nominalAnnualInterestRate" required>

src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.ts

@@ -50,7 +50,6 @@ export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
       this.savingsAccountTermsForm.patchValue({
         'currencyCode': this.savingsAccountProductTemplate.currency.code,
         'decimal': this.savingsAccountProductTemplate.currency.decimalPlaces,
-        'currencyMultiple': this.savingsAccountProductTemplate.currency.inMultiplesOf,
         'minBalanceForInterestCalculation': this.savingsAccountProductTemplate.minBalanceForInterestCalculation,
         'nominalAnnualInterestRate': this.savingsAccountProductTemplate.nominalAnnualInterestRate,
         'interestCompoundingPeriodType': this.savingsAccountProductTemplate.interestCompoundingPeriodType.id,
@@ -99,7 +98,6 @@ export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
       'decimal': [{value: '',  disabled: true}],
       'nominalAnnualInterestRate': ['', Validators.required],
       'interestCompoundingPeriodType': ['', Validators.required],
-      'currencyMultiple': [{value: '', disabled: true}],
       'interestPostingPeriodType': ['', Validators.required],
       'interestCalculationType': ['', Validators.required],
       'interestCalculationDaysInYearType': ['', Validators.required],
@@ -146,7 +144,10 @@ export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
    * Returns savings account terms form value.
    */
   get savingsAccountTerms() {
-    return this.savingsAccountTermsForm.getRawValue();
+    const payload = this.savingsAccountTermsForm.getRawValue();
+    delete payload.currencyCode;
+    delete payload.decimal;
+    return payload;
   }
 
 }

src/app/savings/savings-account-view/charges-tab/charges-tab.component.ts

@@ -135,7 +135,7 @@ export class ChargesTabComponent implements OnInit {
           dateFormat,
           locale
         };
-        this.savingsService.executeSavingsAccountChargesCommand(this.savingsAccountData.id, 'pay', dataObject, chargeId)
+        this.savingsService.executeSavingsAccountChargesCommand(this.savingsAccountData.id, 'paycharge', dataObject, chargeId)
           .subscribe(() => {
             this.reload();
           });

src/app/savings/savings-account-view/notes-tab/notes-tab.component.ts

@@ -19,7 +19,7 @@ export class NotesTabComponent implements OnInit {
     private authenticationService: AuthenticationService) {
     const savedCredentials = this.authenticationService.getCredentials();
     this.username = savedCredentials.username;
-    this.entityId = this.route.parent.snapshot.params['savingAccountId'];
+    this.entityId = this.route.snapshot.params['savingAccountId'];
     this.route.data.subscribe((data: { savingAccountNotes: any }) => {
       this.entityNotes = data.savingAccountNotes;
     });

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -75,7 +75,7 @@
     <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%"
-        *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateSummary">
+        *ngIf="isActive; else alternateSummary">
         <h4 class="table-headers">Account Summary</h4>
         <table>
           <tbody>
@@ -301,7 +301,7 @@
 
     </div>
 
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
         [active]="transactions.isActive">
         Transactions

src/app/savings/savings-account-view/savings-account-view.component.ts

@@ -33,6 +33,8 @@ export class SavingsAccountViewComponent implements OnInit {
   /** Entity Type */
   entityType: string;
 
+  isActive = false;
+
   /**
    * Fetches savings account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
@@ -65,6 +67,7 @@ export class SavingsAccountViewComponent implements OnInit {
    */
   setConditionalButtons() {
     const status = this.savingsAccountData.status.value;
+    this.isActive = (status === 'Active');
     const subStatus = this.savingsAccountData.subStatus;
     this.buttonConfig = new SavingsButtonsConfiguration(status, subStatus);
     if (this.savingsAccountData.clientId) {

src/app/savings/savings-account-view/savings-documents-tab/savings-documents-tab.component.ts

@@ -30,7 +30,7 @@ export class SavingsDocumentsTabComponent implements OnInit {
     this.route.data.subscribe((data: { savingsDocuments: any }) => {
       this.setSavingsDocumentsData(data.savingsDocuments);
     });
-    this.entityId = this.route.parent.snapshot.params['savingAccountId'];
+    this.entityId = this.route.snapshot.params['savingAccountId'];
   }
 
   ngOnInit() {

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -1,16 +1,16 @@
 <div class="tab-container mat-typography">
 
-  <div fxLayout="row" fxLayoutAlign="start">
-    <div class="m-b-10">
-      <h3>All Transactions</h3>
-    </div>
-    <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
-      <button mat-raised-button color="primary" [routerLink]="['/accounting', 'journal-entries']">View Journal Entries</button>
-      <button mat-raised-button color="primary" [routerLink]="['export']">Export</button>
-    </div>
-  </div>
+  <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
 
-  <div class="mat-elevation-z1 m-b-25">
+    <div fxLayout="row" fxLayoutAlign="start">
+      <div class="m-b-10">
+        <h3>All Transactions</h3>
+      </div>
+      <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
+        <button mat-raised-button color="primary" [routerLink]="['/accounting', 'journal-entries']">View Journal Entries</button>
+        <button mat-raised-button color="primary" [routerLink]="['export']">Export</button>
+      </div>
+    </div>
 
     <table mat-table [dataSource]="dataSource" matSort>
 
@@ -62,4 +62,10 @@
 
   </div>
 
+  <div class="alert" [hidden]="accountWithTransactions">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      No transaction was found
+    </div>
+  </div>
 </div>

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -20,12 +20,14 @@ export class TransactionsTabComponent implements OnInit {
   /** Transactions Data */
   transactionsData: any;
   /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'viewReciept'];
+  displayedColumns: string[] = ['id', 'date', 'transactionType', 'debit', 'credit', 'balance', 'viewReciept'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
+  accountWithTransactions = false;
+
   /**
    * Retrieves savings account data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
@@ -40,6 +42,7 @@ export class TransactionsTabComponent implements OnInit {
 
   ngOnInit() {
     this.dataSource = new MatTableDataSource(this.transactionsData);
+    this.accountWithTransactions = (this.transactionsData.length > 0);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
   }

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

@@ -34,11 +34,14 @@
           </mat-select>
         </mat-form-field>
 
-        <div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
-          <mat-label fxFlexAlign="center">Show Payment Details</mat-label>
-          <button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
-            <fa-icon [icon]="!addPaymentDetailsFlag ? 'plus-circle' : 'minus-circle'" size="lg"></fa-icon>
-          </button>
+        <div fxFlexFill>
+          <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">Show Payment Details</span>
+              </div>
+            </mat-slide-toggle>
+          </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
@@ -72,10 +75,9 @@
         </mat-card-actions>
 
       </mat-card-content>
-      
+
     </form>
 
   </mat-card>
 
 </div>
-  

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.ts

@@ -33,7 +33,7 @@ export class EditTransactionComponent implements OnInit {
     position: number
   }[];
   /** Flag to enable payment details fields. */
-  addPaymentDetailsFlag: Boolean = false;
+  showPaymentDetails: Boolean = false;
   /** saving account's Id */
   savingAccountId: string;
   /** Transaction Template */
@@ -58,7 +58,7 @@ export class EditTransactionComponent implements OnInit {
       this.transactionTemplateData = data.savingsAccountTransactionTemplate;
       this.paymentTypeOptions = this.transactionTemplateData.paymentTypeOptions;
     });
-    this.savingAccountId = this.route.parent.snapshot.params['savingAccountId'];
+    this.savingAccountId = this.route.snapshot.params['savingAccountId'];
   }
 
   /**
@@ -89,8 +89,8 @@ export class EditTransactionComponent implements OnInit {
    * Method to add payment detail fields to the UI.
    */
   addPaymentDetails() {
-    this.addPaymentDetailsFlag = !this.addPaymentDetailsFlag;
-    if (this.addPaymentDetailsFlag) {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
       this.editTransactionForm.addControl('accountNumber', new FormControl(''));
       this.editTransactionForm.addControl('checkNumber', new FormControl(''));
       this.editTransactionForm.addControl('routingCode', new FormControl(''));

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -50,14 +50,6 @@
           {{ transactionData.date | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
-          Amount
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.currency.displaySymbol }} {{ transactionData.amount | number }} ({{ transactionData.currency.code }})
-        </div>
-
         <div fxFlex="50%" class="mat-body-strong">
           Currency
         </div>
@@ -66,6 +58,14 @@
           {{ transactionData.currency.name }}
         </div>
 
+        <div fxFlex="50%" class="mat-body-strong">
+          Amount
+        </div>
+
+        <div fxFlex="50%">
+          {{ transactionData.amount | currency }} {{ transactionData.currency.code }}
+        </div>
+
         <div fxFlex="50%" class="mat-body-strong">
           Note
         </div>

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts

@@ -44,7 +44,7 @@ export class ViewTransactionComponent {
               public dialog: MatDialog,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { savingsAccountTransaction: any }) => {
-      this.accountId = this.route.parent.snapshot.params['savingAccountId'];
+      this.accountId = this.route.snapshot.params['savingAccountId'];
       this.transactionData = data.savingsAccountTransaction;
     });
   }

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -91,7 +91,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amount }}
+          {{ chargeData.amount | number }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -99,7 +99,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountPaid }}
+          {{ chargeData.amountPaid | number }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -107,7 +107,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountWaived }}
+          {{ chargeData.amountWaived | number }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -115,11 +115,14 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountOutstanding }}
+          {{ chargeData.amountOutstanding | number }}
         </div>
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>

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

@@ -59,82 +59,16 @@ const routes: Routes = [
       {
         path: ':savingAccountId',
         data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
+        component: SavingsAccountViewComponent,
+        resolve: {
+          savingsAccountData: SavingsAccountViewResolver,
+          savingsDatatables: SavingsDatatablesResolver
+        },
         children: [
           {
             path: '',
-            component: SavingsAccountViewComponent,
-            resolve: {
-              savingsAccountData: SavingsAccountViewResolver,
-              savingsDatatables: SavingsDatatablesResolver
-            },
-            children: [
-              {
-                path: '',
-                redirectTo: 'transactions',
-                pathMatch: 'full'
-              },
-              {
-                path: 'transactions',
-                data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-                children: [
-                  {
-                    path: '',
-                    component: TransactionsTabComponent
-                  },
-                  {
-                    path: 'export',
-                    component: ExportTransactionsComponent
-                  }
-                ]
-              },
-              {
-                path: 'charges',
-                component: ChargesTabComponent,
-                data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
-              },
-              {
-                path: 'standing-instructions',
-                component: StandingInstructionsTabComponent,
-                data: { title: extract('Savings Account SIH'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-              },
-              {
-                path: 'notes',
-                component: NotesTabComponent,
-                data: { title: extract('Savings Account Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-                resolve: {
-                  savingAccountNotes: SavingNotesResolver
-                }
-              },
-              {
-                path: 'documents',
-                component: SavingsDocumentsTabComponent,
-                data: { title: extract('Savings Account Documents'), breadcrumb: 'Documents', routeParamBreadcrumb: false },
-                resolve: {
-                  savingsDocuments: SavingDocumentsResolver
-                }
-              },
-              {
-                path: 'datatables',
-                children: [
-                  {
-                    path: ':datatableName',
-                    component: DatatableTabsComponent,
-                    data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
-                    resolve: {
-                      savingsDatatable: SavingsDatatableResolver
-                    }
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            path: 'edit',
-            data: { title: extract('Edit Savings Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
-            component: EditSavingsAccountComponent,
-            resolve: {
-              savingsAccountAndTemplate: SavingsAccountAndTemplateResolver
-            }
+            redirectTo: 'transactions',
+            pathMatch: 'full'
           },
           {
             path: 'transactions',
@@ -142,102 +76,129 @@ const routes: Routes = [
             children: [
               {
                 path: '',
-                redirectTo: '../transactions', pathMatch: 'prefix'
+                component: TransactionsTabComponent
               },
               {
-                path: 'account-transfers',
-                loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
-              },
-              {
-                path: ':id',
-                data: { routeParamBreadcrumb: 'id' },
-                children: [
-                  {
-                    path: '',
-                    component: ViewTransactionComponent,
-                    resolve: {
-                      savingsAccountTransaction: SavingsAccountTransactionResolver
-                    }
-                  },
-                  {
-                    path: 'edit',
-                    component: EditTransactionComponent,
-                    data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
-                    resolve: {
-                      savingsAccountTransactionTemplate: SavingsAccountTransactionTemplateResolver
-                    }
-                  },
-                  {
-                    path: 'reciept',
-                    component: ViewRecieptComponent,
-                    data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                    resolve: {
-                      savingsTransactionReciept: SavingsTransactionRecieptResolver
-                    }
-                  }
-                ]
+                path: 'export',
+                component: ExportTransactionsComponent
               }
             ]
           },
           {
             path: 'charges',
-            data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-            children: [
-              {
-                path: '',
-                redirectTo: '../charges', pathMatch: 'prefix'
-              },
-              {
-                path: ':id',
-                data: { routeParamBreadcrumb: 'id' },
-                component: ViewChargeComponent,
-                resolve: {
-                  savingsAccountData: SavingsAccountViewResolver,
-                  savingsAccountCharge: SavingsAccountChargeResolver
-                }
-              }
-            ]
+            component: ChargesTabComponent,
+            data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false }
           },
           {
-            path: 'actions/:name',
-            data: { title: extract('Savings Account Actions'), breadcrumb: 'Savings Account Actions', routeParamBreadcrumb: 'name' },
-            component: SavingAccountActionsComponent,
+            path: 'standing-instructions',
+            component: StandingInstructionsTabComponent,
+            data: { title: extract('Savings Account SIH'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'notes',
+            component: NotesTabComponent,
+            data: { title: extract('Savings Account Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
             resolve: {
-              savingsAccountActionData: SavingsAccountActionsResolver
+              savingAccountNotes: SavingNotesResolver
             }
           },
           {
             path: 'documents',
+            component: SavingsDocumentsTabComponent,
             data: { title: extract('Savings Account Documents'), breadcrumb: 'Documents', routeParamBreadcrumb: false },
-            children: [
-              {
-                path: '',
-                redirectTo: '../documents', pathMatch: 'prefix'
-              },
-            ]
+            resolve: {
+              savingsDocuments: SavingDocumentsResolver
+            }
           },
           {
-            path: 'notes',
-            data: { title: extract('Savings Account Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            path: 'datatables',
             children: [
               {
-                path: '',
-                redirectTo: '../notes', pathMatch: 'prefix'
-              },
+                path: ':datatableName',
+                component: DatatableTabsComponent,
+                data: { title: extract('View Data Table'), routeParamBreadcrumb: 'datatableName' },
+                resolve: {
+                  savingsDatatable: SavingsDatatableResolver
+                }
+              }
             ]
-          },
-          {
-            path: 'transfer-funds',
-            loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
           }
         ]
       },
+      {
+        path: ':savingAccountId/edit',
+        data: { title: extract('Edit Savings Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+        component: EditSavingsAccountComponent,
+        resolve: {
+          savingsAccountAndTemplate: SavingsAccountAndTemplateResolver
+        }
+      },
+      {
+        path: ':savingAccountId/transactions/:id',
+        data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+        children: [
+          {
+            path: '',
+            component: ViewTransactionComponent,
+            resolve: {
+              savingsAccountTransaction: SavingsAccountTransactionResolver
+            }
+          },
+          {
+            path: 'edit',
+            component: EditTransactionComponent,
+            data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            resolve: {
+              savingsAccountTransactionTemplate: SavingsAccountTransactionTemplateResolver
+            }
+          },
+          {
+            path: 'reciept',
+            component: ViewRecieptComponent,
+            data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+            resolve: {
+              savingsTransactionReciept: SavingsTransactionRecieptResolver
+            }
+          }
+        ]
+      },
+      {
+        path: ':savingAccountId/charges',
+        data: { title: extract('Savings Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+        children: [
+          {
+            path: '',
+            redirectTo: '../charges', pathMatch: 'prefix'
+          },
+          {
+            path: ':id',
+            data: { routeParamBreadcrumb: 'id' },
+            component: ViewChargeComponent,
+            resolve: {
+              savingsAccountData: SavingsAccountViewResolver,
+              savingsAccountCharge: SavingsAccountChargeResolver
+            }
+          }
+        ]
+      },
+      {
+        path: ':savingAccountId/actions/:name',
+        data: { title: extract('Savings Account Actions'), breadcrumb: 'Savings Account Actions', routeParamBreadcrumb: 'name' },
+        component: SavingAccountActionsComponent,
+        resolve: {
+          savingsAccountActionData: SavingsAccountActionsResolver
+        }
+      },
+      {
+        path: 'transfer-funds',
+        loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+      },
       {
         path: 'gsim-account',
         children: [
           {
             path: 'create',
-            data: { title: extract('Create GSIM Application'), breadcrumb: 'Create GSIM Application'},
+            data: { title: extract('Create GSIM Application'), breadcrumb: 'Create GSIM Application' },
             component: CreateGsimAccountComponent,
             resolve: {
               groupsData: GroupViewResolver,
@@ -246,7 +207,7 @@ const routes: Routes = [
           },
           {
             path: ':savingAccountId',
-            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId'},
+            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
             children: [
               {
                 path: '',
@@ -269,17 +230,17 @@ const routes: Routes = [
   exports: [RouterModule],
   declarations: [],
   providers: [SavingsAccountViewResolver,
-              SavingsDatatablesResolver,
-              SavingsDatatableResolver,
-              SavingsAccountTemplateResolver,
-              SavingsAccountAndTemplateResolver,
-              SavingsAccountTransactionResolver,
-              SavingsAccountChargeResolver,
-              SavingsAccountActionsResolver,
-              SavingsTransactionRecieptResolver,
-              SavingsAccountTransactionTemplateResolver,
-              GSIMAccountsResolver,
-              GroupAccountsResolver,
-              GSIMViewResolver]
+    SavingsDatatablesResolver,
+    SavingsDatatableResolver,
+    SavingsAccountTemplateResolver,
+    SavingsAccountAndTemplateResolver,
+    SavingsAccountTransactionResolver,
+    SavingsAccountChargeResolver,
+    SavingsAccountActionsResolver,
+    SavingsTransactionRecieptResolver,
+    SavingsAccountTransactionTemplateResolver,
+    GSIMAccountsResolver,
+    GroupAccountsResolver,
+    GSIMViewResolver]
 })
-export class SavingsRoutingModule {}
+export class SavingsRoutingModule { }