refactor: loans module (#1237)

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -131,7 +131,7 @@
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
       <button mat-raised-button color="primary" [disabled]="!makeAccountTransferForm.valid" *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
         (click)="submit()">Submit</button>
     </mat-card-actions>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -186,7 +186,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
       fromOfficeId: this.accountTransferTemplateData.fromClient.officeId
     };
     this.accountTransfersService.createAccountTransfer(makeAccountTransferData).subscribe(() => {
-      this.router.navigate(['../../'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

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

@@ -229,8 +229,7 @@ const routes: Routes = [
             ]
           },
           {
-            path: 'loans',
+            path: 'loans-accounts',
-            data: { title: extract('Loans'), breadcrumb: 'loans', routeParamBreadcrumb: false },
             loadChildren: () => import('../loans/loans.module').then(m => m.LoansModule)
           },
           {

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

@@ -62,7 +62,7 @@
       <button mat-raised-button [matMenuTriggerFor]="Applications">
         <i class="fa fa-file"></i>Applications</button>
       <mat-menu #Applications="matMenu">
-        <button mat-menu-item [routerLink]="['loans', 'create-loans-account']">New Loan Account</button>
+        <button mat-menu-item [routerLink]="['loans-accounts', 'create']">New Loan Account</button>
         <button mat-menu-item [routerLink]="['savings-accounts', 'create']">New Savings Account</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">New Share Account</button>
         <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'" [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit Account</button>

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -82,7 +82,7 @@
 
   </table>
 
-  <!-- loans overview table -->
+  <!-- loans accounts overview table -->
   <div class="heading-content">
     <div fxLayout="column" fxFlex="50%">
       <div class="heading-name">
@@ -137,20 +137,20 @@
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
         <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary" matTooltip="Make Repayment" matTooltipPosition="above"
-        (click)="routeEdit($event)" [routerLink]="['../','loans', element.id, 'actions', 'make-repayment']">
+        (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Make Repayment']">
           <i class="fa fa-dollar"></i>
         </button>
         <span *ngIf="element.status.pendingApproval">
           <button class="account-action-button" mat-raised-button color="primary" matTooltip="Approve"
             matTooltipPosition="above" *mifosxHasPermission="'APPROVE_LOAN'" (click)="routeEdit($event)"
-            [routerLink]="['../','loans', element.id, 'actions', 'approve']">
+            [routerLink]="['../','loans-accounts', element.id, 'actions', 'Approve']">
             <i class="fa fa-check"></i>
           </button>
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid">
           <button class="account-action-button" mat-raised-button color="primary" matTooltip="Disburse" 
             matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'" 
-            (click)="routeEdit($event)" [routerLink]="['../','loans', element.id, 'actions', 'disburse']">
+            (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Disburse']">
             <i class="fa fa-flag"></i>
           </button>
         </span>
@@ -166,7 +166,7 @@
 
     <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openLoansColumns;"
-      [routerLink]="['../', 'loans', row.id, 'general']" class="select-row"></tr>
+      [routerLink]="['../', 'loans-accounts', row.id, 'general']" class="select-row"></tr>
 
   </table>
 
@@ -215,7 +215,7 @@
 
     <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: closedLoansColumns;"
-    [routerLink]="['../', 'loans', row.id, 'general']" class="select-row"></tr>
+    [routerLink]="['../', 'loans-accounts', row.id, 'general']" class="select-row"></tr>
 
   </table>
 

src/app/clients/clients-view/general-tab/general-tab.component.ts

@@ -148,7 +148,7 @@ export class GeneralTabComponent {
    */
   routeTransferFund(loanId: any) {
     const queryParams: any = { loanId: loanId, accountType: 'fromloans' };
-    this.router.navigate(['../', 'loans', loanId, 'transfer-funds', 'make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
+    this.router.navigate(['../', 'loans-accounts', loanId, 'transfer-funds', 'make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
   }
 
 }

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html

@@ -104,7 +104,7 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
             <td mat-cell *matCellDef="let loan; let i = index">
-              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans', loan, i)">Add Payment</button>
+              <button mat-raised-button color="primary" (click)="showAndStorePaymentDetails('loans-accounts', loan, i)">Add Payment</button>
             </td>
           </ng-container>
 

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

@@ -134,8 +134,7 @@ const routes: Routes = [
               }
             },
             {
-              path: 'loans',
+              path: 'loans-accounts',
-              data: { title: extract('Loans'), breadcrumb: 'loans', routeParamBreadcrumb: false },
               loadChildren: () => import('../loans/loans.module').then(m => m.LoansModule)
             },
             {

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -136,7 +136,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: openLoansColumns;" [routerLink]="['../', 'loans', row.id, 'general']"></tr>
+      <tr mat-row *matRowDef="let row; columns: openLoansColumns;" [routerLink]="['../', 'loans-accounts', row.id, 'general']"></tr>
 
     </table>
 
@@ -187,7 +187,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: closedLoansColumns;" [routerLink]="['../', 'loans', row.id, 'general']"></tr>
+      <tr mat-row *matRowDef="let row; columns: closedLoansColumns;" [routerLink]="['../', 'loans-accounts', row.id, 'general']"></tr>
 
     </table>
 

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

@@ -26,39 +26,39 @@ export class LoanActionButtonResolver implements Resolve<Object> {
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
         const loanId = route.parent.paramMap.get('loanId');
         const loanActionButton = route.paramMap.get('action');
-        if (loanActionButton === 'assign-loan-officer' || loanActionButton === 'change-loan-officer') {
+        if (loanActionButton === 'Assign Loan Officer' || loanActionButton === 'Change Loan Officer') {
             return this.loansService.getLoanTemplate(loanId);
         // } else if (loanActionButton === 'make-repayment') {
         //     return this.loansService.getLoanActionTemplate(loanId, 'repayment');
-        } else if (loanActionButton === 'waive-interest') {
+        } else if (loanActionButton === 'Waive Interest') {
             return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
-        } else if (loanActionButton === 'write-off') {
+        } else if (loanActionButton === 'Write Off') {
             return this.loansService.getLoanActionTemplate(loanId, 'writeoff');
-        } else if (loanActionButton === 'close') {
+        } else if (loanActionButton === 'Close') {
             return this.loansService.getLoanActionTemplate(loanId, 'close');
-        } else if (loanActionButton === 'close-as-rescheduled') {
+        } else if (loanActionButton === 'Close (as Rescheduled)') {
             return this.loansService.getLoanActionTemplate(loanId, 'close-rescheduled');
-        } else if (loanActionButton === 'reschedule') {
+        } else if (loanActionButton === 'Reschedule') {
             return this.loansService.rescheduleLoanTemplate();
-        } else if (loanActionButton === 'prepay-loan') {
+        } else if (loanActionButton === 'Prepay Loan') {
             return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
-        } else if (loanActionButton === 'add-collateral') {
+        } else if (loanActionButton === 'Add Collateral') {
             return this.loansService.getLoanCollateralTemplate(loanId);
-        } else if (loanActionButton === 'disburse-to-savings') {
+        } else if (loanActionButton === 'Disburse to Savings') {
             return this.loansService.getLoanActionTemplate(loanId, 'disburseToSavings');
-        } else if (loanActionButton === 'recovery-payment') {
+        } else if (loanActionButton === 'Recovery Payment') {
             return this.loansService.getLoanActionTemplate(loanId, 'recoverypayment');
-        } else if (loanActionButton === 'view-guarantors') {
+        } else if (loanActionButton === 'View Guarantors') {
             return this.loansService.getLoanAccountResource(loanId, 'guarantors');
-        } else if (loanActionButton === 'create-guarantor') {
+        } else if (loanActionButton === 'Create Guarantor') {
             return this.loansService.getGuarantorTemplate(loanId);
-        } else if (loanActionButton === 'disburse') {
+        } else if (loanActionButton === 'Disburse') {
             return this.loansService.getLoanActionTemplate(loanId, 'disburse');
-        } else if (loanActionButton === 'loan-screen-reports') {
+        } else if (loanActionButton === 'Loan Screen Reports') {
             return this.loansService.getLoanScreenReportsData();
-        } else if (loanActionButton === 'approve') {
+        } else if (loanActionButton === 'Approve') {
             return this.loansService.getLoanApprovalTemplate(loanId);
-        } else if (loanActionButton === 'add-loan-charge') {
+        } else if (loanActionButton === 'Add Loan Charge') {
             return this.loansService.getLoanChargeTemplateResource(loanId);
         } else {
             return undefined;

src/app/loans/common-resolvers/loan-details.resolver.ts

@@ -24,7 +24,7 @@ export class LoanDetailsResolver implements Resolve<Object> {
      * @returns {Observable<any>}
      */
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+        const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId') || route.parent.parent.paramMap.get('loanId');
         return this.loansService.getLoanAccountAssociationDetails(loanId);
     }
 

src/app/loans/custom-dialog/loans-confirmation-dialog-box/loans-confirmation-dialog-box.component.html

@@ -1,8 +0,0 @@
-<h1 mat-dialog-title>{{data.heading}}</h1>
-<div mat-dialog-content>
-  <p>{{ data.dialogContext }}</p>
-</div>
-<mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
-</mat-dialog-actions>

src/app/loans/custom-dialog/loans-confirmation-dialog-box/loans-confirmation-dialog-box.component.spec.ts

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

src/app/loans/custom-dialog/loans-confirmation-dialog-box/loans-confirmation-dialog-box.component.ts

@@ -1,22 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
-
-@Component({
-  selector: 'mifosx-loans-confirmation-dialog-box',
-  templateUrl: './loans-confirmation-dialog-box.component.html',
-  styleUrls: ['./loans-confirmation-dialog-box.component.scss']
-})
-export class LoansConfirmationDialogBoxComponent implements OnInit {
-
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {any} data Provides a confirmation for all the loans account actions.
-   */
-  constructor(public dialogRef: MatDialogRef<LoansConfirmationDialogBoxComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -33,7 +33,6 @@ import { ExportTransactionsComponent } from './loans-view/transactions/export-tr
 /** Custom Resolvers */
 import { LoanDetailsResolver } from './common-resolvers/loan-details.resolver';
 import { LoanNotesResolver } from './common-resolvers/loan-notes.resolver';
-import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-charges.resolver';
 import { LoanDatatablesResolver } from './common-resolvers/loan-datatables.resolver';
 import { LoanDatatableResolver } from './common-resolvers/loan-datatable.resolver';
 import { LoanActionButtonResolver } from './common-resolvers/loan-action-button.resolver';
@@ -49,10 +48,10 @@ import { LoansAccountTransactionTemplateResolver } from './common-resolvers/loan
 const routes: Routes = [
   {
     path: '',
-    // Component to View All existing Loans Comes Here
+    data: { title: extract('Loans'), breadcrumb: 'Loans', routeParamBreadcrumb: false },
     children: [
       {
-        path: 'create-loans-account',
+        path: 'create',
         data: { title: extract('Create Loans Account'), breadcrumb: 'Create Loans Account' },
         component: CreateLoansAccountComponent,
         resolve: {
@@ -62,7 +61,6 @@ const routes: Routes = [
       {
       path: ':loanId',
       data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
-      // Component For Loan View Comes Here
       children: [
         {
           path: '',
@@ -86,24 +84,15 @@ const routes: Routes = [
               path: 'original-schedule',
               component: OriginalScheduleTabComponent,
               data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-              resolve: {
-                loanDetailsAssociationData: LoanDetailsChargesResolver
-              }
             },
             {
               path: 'repayment-schedule',
               component: RepaymentScheduleTabComponent,
               data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
-              resolve: {
-                loanDetailsAssociationData: LoanDetailsChargesResolver
-              }
             },
             {
               path: 'transactions',
               data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-              resolve: {
-                loanDetailsAssociationData: LoanDetailsChargesResolver
-              },
               children: [
                 {
                   path: '',
@@ -113,6 +102,78 @@ const routes: Routes = [
                 {
                   path: 'export',
                   component: ExportTransactionsComponent
+                }
+              ]
+            },
+            {
+              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',
@@ -145,89 +206,25 @@ const routes: Routes = [
             }
           ]
         },
-            {
-              path: 'loan-collateral',
-              component: LoanCollateralTabComponent,
-              data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-              resolve: {
-                loanDetailsAssociationData: LoanDetailsChargesResolver
-              }
-            },
-            {
-              path: 'loan-tranche-details',
-              component: LoanTrancheDetailsComponent,
-              data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-              resolve: {
-                loanDetailsAssociationData: LoanDetailsChargesResolver
-              }
-            },
-            {
-              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 },
-              resolve: {
-                loanDetailsAssociationData: LoanDetailsChargesResolver
-              }
-            },
         {
           path: 'charges',
           data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
           children: [
             {
               path: '',
-                  component: ChargesTabComponent,
+              redirectTo: '../charges', pathMatch: 'prefix'
-                  resolve: {
-                    loanDetailsAssociationData: LoanDetailsChargesResolver
-                  }
             },
             {
               path: ':id',
               data: { routeParamBreadcrumb: 'id' },
               component: ViewChargeComponent,
               resolve: {
-                    loansAccountCharge: LoansAccountChargeResolver
+                loansAccountCharge: LoansAccountChargeResolver,
+                loanDetailsData: LoanDetailsResolver
               }
             }
           ]
         },
-            {
-              path: 'loan-documents',
-              component: LoanDocumentsTabComponent,
-              data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-              resolve: {
-                loanDocuments: LoanDocumentsResolver,
-                loanDetailsData: LoanDetailsResolver
-              },
-            },
-            {
-              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: 'actions/:action',
           component: LoanAccountActionsComponent,
@@ -239,8 +236,6 @@ const routes: Routes = [
         {
           path: 'transfer-funds',
           loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
-            }
-          ]
         },
         {
           path: 'edit-loans-account',
@@ -261,7 +256,6 @@ const routes: Routes = [
   providers: [
     LoanDetailsResolver,
     LoanNotesResolver,
-    LoanDetailsChargesResolver,
     LoanDatatablesResolver,
     LoanDatatableResolver,
     LoanActionButtonResolver,

src/app/loans/loans-view/charges-tab/charges-tab.component.ts

@@ -52,8 +52,8 @@ export class ChargesTabComponent implements OnInit {
               private datePipe: DatePipe,
               private router: Router,
               public dialog: MatDialog) {
-    this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.data.subscribe(( data: { loanDetailsData: any }) => {
-      this.loanDetails = data.loanDetailsAssociationData;
+      this.loanDetails = data.loanDetailsData;
     });
   }
 
@@ -206,7 +206,7 @@ export class ChargesTabComponent implements OnInit {
   private reload() {
     const clientId = this.loanDetails.clientId;
     const url: string = this.router.url;
-    this.router.navigateByUrl(`/clients/${clientId}/loans`, { skipLocationChange: true })
+    this.router.navigateByUrl(`/clients/${clientId}/loans-accounts`, { skipLocationChange: true })
       .then(() => this.router.navigate([url]));
   }
 

src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.ts

@@ -20,8 +20,8 @@ export class FloatingInterestRatesComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.data.subscribe(( data: { loanDetailsData: any }) => {
-      this.loanDetails = data.loanDetailsAssociationData;
+      this.loanDetails = data.loanDetailsData;
     });
   }
 

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="collateralForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -9,7 +11,8 @@
           <mat-form-field>
             <mat-label>Collateral Type</mat-label>
             <mat-select required formControlName="collateralTypeId">
-            <mat-option *ngFor="let collateral of dataObject.allowedCollateralTypes" [value]="collateral.id"> {{ collateral.name }}</mat-option>
+              <mat-option *ngFor="let collateral of dataObject.allowedCollateralTypes" [value]="collateral.id">
+                {{ collateral.name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
               Collateral type <strong>required</strong>
@@ -34,11 +37,14 @@
 
         <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]="!collateralForm.valid" *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
+            *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

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

@@ -1,3 +1,7 @@
+<div class="container">
+
+  <mat-card>
+
     <form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -47,9 +51,15 @@
         </div>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid" *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
+            *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
+
     </form>
+
+  </mat-card>
+
+</div>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -105,7 +105,7 @@ export class AddLoanChargeComponent implements OnInit {
     loanCharge.locale = 'en';
     loanCharge.dateFormat = dateFormat;
     this.loansService.createLoanCharge(this.loanId, 'charges', loanCharge).subscribe(res => {
-      this.router.navigate(['../../'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 }

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="approveLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -46,7 +48,7 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
           <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
             *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
         </mat-card-actions>
@@ -55,4 +57,6 @@
 
     </form>
 
+  </mat-card>
+
 </div>

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

@@ -88,7 +88,7 @@ export class ApproveLoanComponent implements OnInit {
       local
     };
     this.loanService.loanActionButtons(this.loanId, 'approve', approveLoanFormData).subscribe((response: any) => {
-      this.router.navigate(['../../'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -20,7 +22,8 @@
 
           <mat-form-field>
             <mat-label>Assignment Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required formControlName="assignmentDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required
+              formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #assignOnDatePicker></mat-datepicker>
             <mat-error *ngIf="assignOfficerForm.controls.assignmentDate.hasError('required')">
@@ -32,11 +35,14 @@
 
         <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]="!assignOfficerForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid"
+            *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -68,7 +68,7 @@ export class AssignLoanOfficerComponent implements OnInit {
 
     this.loanService.loanActionButtons(this.loanId, 'assignLoanOfficer', assignForm)
       .subscribe((response: any) => {
-        this.router.navigate([`../../${this.loanId}/general`], { relativeTo: this.route });
+        this.router.navigate([`../../general`], { relativeTo: this.route });
     });
   }
 

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Closed On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
@@ -25,11 +28,14 @@
 
         <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]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,4 +1,7 @@
 <div class="container">
+
+  <mat-card>
+
     <form [formGroup]="newGuarantorForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -153,4 +156,6 @@
       </div>
     </ng-container>
 
+  </mat-card>
+
 </div>

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
     
       <mat-card-content>
@@ -8,7 +10,8 @@
     
           <mat-form-field>
             <mat-label>Disbursement On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementDatePicker" required formControlName="actualDisbursementDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementDatePicker" required
+              formControlName="actualDisbursementDate">
             <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #disbursementDatePicker></mat-datepicker>
             <mat-error *ngIf="disbursementForm.controls.actualDisbursementDate.hasError('required')">
@@ -41,11 +44,14 @@
     
         <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]="!disbursementForm.valid" *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
+            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
         </mat-card-actions>
     
       </mat-card-content>
     
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Disbursed On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="actualDisbursementDatePicker" required formControlName="actualDisbursementDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="actualDisbursementDatePicker" required
+              formControlName="actualDisbursementDate">
             <mat-datepicker-toggle matSuffix [for]="actualDisbursementDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #actualDisbursementDatePicker></mat-datepicker>
             <mat-error *ngIf="disbursementLoanForm.controls.actualDisbursementDate.hasError('required')">
@@ -81,11 +84,14 @@
 
         <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]="!disbursementLoanForm.valid" *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid"
+            *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.scss

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

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="foreclosureForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Transaction Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionsDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionsDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionsDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionsDatePicker></mat-datepicker>
             <mat-error *ngIf="foreclosureForm.controls.transactionDate.hasError('required')">
@@ -50,11 +53,14 @@
 
         <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]="!foreclosureForm.valid" *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
+          <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid"
+            *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,26 +1,22 @@
-<div class="container">
+<mifosx-loans-account-close [dataObject]="actionButtonData" *ngIf="actions['Close']"></mifosx-loans-account-close>
-  <mat-card>
+<mifosx-undo-approval *ngIf="actions['Undo Approval']"></mifosx-undo-approval>
-    <mifosx-loans-account-close [dataObject]="actionButtonData" *ngIf="actions.close"></mifosx-loans-account-close>
+<mifosx-assign-loan-officer *ngIf="actions['Assign Loan Officer']" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
-    <mifosx-undo-approval *ngIf="actions.undo_approval"></mifosx-undo-approval>
+<mifosx-foreclosure *ngIf="actions['Foreclosure']"></mifosx-foreclosure>
-    <mifosx-assign-loan-officer *ngIf="actions.assign_loan_officer" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
+<mifosx-prepay-loan [dataObject]="actionButtonData" *ngIf="actions['Prepay Loan']"></mifosx-prepay-loan>
-    <mifosx-foreclosure *ngIf="actions.foreclosure"></mifosx-foreclosure>
+<mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Make Repayment']"></mifosx-make-repayment>
-    <mifosx-prepay-loan [dataObject]="actionButtonData" *ngIf="actions.prepay_loan"></mifosx-prepay-loan>
+<mifosx-waive-interest [dataObject]="actionButtonData" *ngIf="actions['Waive Interest']"></mifosx-waive-interest>
-    <mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions.make_repayment"></mifosx-make-repayment>
+<mifosx-write-off-page [dataObject]="actionButtonData" *ngIf="actions['Write Off']"></mifosx-write-off-page>
-    <mifosx-waive-interest [dataObject]="actionButtonData" *ngIf="actions.waive_interest"></mifosx-waive-interest>
+<mifosx-close-as-rescheduled [dataObject]="actionButtonData" *ngIf="actions['Close (as Rescheduled)']"></mifosx-close-as-rescheduled>
-    <mifosx-write-off-page [dataObject]="actionButtonData" *ngIf="actions.write_off"></mifosx-write-off-page>
+<mifosx-loan-reschedule [dataObject]="actionButtonData" *ngIf="actions['Reschedule']"></mifosx-loan-reschedule>
-    <mifosx-close-as-rescheduled [dataObject]="actionButtonData" *ngIf="actions.close_as_rescheduled"></mifosx-close-as-rescheduled>
+<mifosx-recovery-repayment [dataObject]="actionButtonData" *ngIf="actions['Recovery Payment']"></mifosx-recovery-repayment>
-    <mifosx-loan-reschedule [dataObject]="actionButtonData" *ngIf="actions.reschedule"></mifosx-loan-reschedule>
+<mifosx-view-guarantors [dataObject]="actionButtonData" *ngIf="actions['View Guarantors']"></mifosx-view-guarantors>
-    <mifosx-recovery-repayment [dataObject]="actionButtonData" *ngIf="actions.recovery_payment"></mifosx-recovery-repayment>
+<mifosx-create-guarantor [dataObject]="actionButtonData" *ngIf="actions['Create Guarantor']"></mifosx-create-guarantor>
-    <mifosx-view-guarantors [dataObject]="actionButtonData" *ngIf="actions.view_guarantors"></mifosx-view-guarantors>
+<mifosx-disburse-loan-account [dataObject]="actionButtonData" *ngIf="actions['Disburse To Savings']"></mifosx-disburse-loan-account>
-    <mifosx-create-guarantor [dataObject]="actionButtonData" *ngIf="actions.create_guarantor"></mifosx-create-guarantor>
+<mifosx-reject-loan *ngIf="actions['Reject']"></mifosx-reject-loan>
-    <mifosx-disburse-loan-account [dataObject]="actionButtonData" *ngIf="actions.disburse_to_savings"></mifosx-disburse-loan-account>
+<mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions['Disburse']"></mifosx-disburse>
-    <mifosx-reject-loan *ngIf="actions.reject"></mifosx-reject-loan>
+<mifosx-withdrawn-by-client *ngIf="actions['Withdrawn by Client']"></mifosx-withdrawn-by-client>
-    <mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions.disburse"></mifosx-disburse>
+<mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions['Add Collateral']"></mifosx-add-collateral>
-    <mifosx-withdrawn-by-client *ngIf="actions.withdrawn_by_client"></mifosx-withdrawn-by-client>
+<mifosx-undo-disbursal *ngIf="actions['Undo Disbursal']"></mifosx-undo-disbursal>
-    <mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions.add_collateral"></mifosx-add-collateral>
+<mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions['Loan Screen Reports']"></mifosx-loan-screen-reports>
-    <mifosx-undo-disbursal *ngIf="actions.undo_disbursal"></mifosx-undo-disbursal>
+<mifosx-approve-loan *ngIf="actions['Approve']" ></mifosx-approve-loan>
-    <mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions.loan_screen_reports"></mifosx-loan-screen-reports>
+<mifosx-add-loan-charge *ngIf="actions['Add Loan Charge']"></mifosx-add-loan-charge>
-    <mifosx-approve-loan *ngIf="actions.approve" ></mifosx-approve-loan>
-    <mifosx-add-loan-charge *ngIf="actions.add_loan_charge"></mifosx-add-loan-charge>
-  </mat-card>
-</div>

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

@@ -1,3 +0,0 @@
-.container {
-    padding: 3%;
-}

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

@@ -13,50 +13,50 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class LoanAccountActionsComponent {
 
   /** flag object to store possible actions and render appropriate UI to the user */
-  actions: { close: boolean,
+  actions: { 'Close': boolean,
-            undo_approval: boolean,
+            'Undo Approval': boolean,
-            write_off: boolean,
+            'Write Off': boolean,
-            add_collateral: boolean,
+            'Add Collateral': boolean,
-            assign_loan_officer: boolean,
+            'Assign Loan Officer': boolean,
-            foreclosure: boolean,
+            'Foreclosure': boolean,
-            prepay_loan: boolean,
+            'Prepay Loan': boolean,
-            reject: boolean,
+            'Reject': boolean,
-            disburse_to_savings: boolean,
+            'Disburse To Savings': boolean,
-            make_repayment: boolean,
+            'Make Repayment': boolean,
-            waive_interest: boolean,
+            'Waive Interest': boolean,
-            close_as_rescheduled: boolean,
+            'Close (as Rescheduled)': boolean,
-            reschedule: boolean,
+            'Reschedule': boolean,
-            recovery_payment: boolean,
+            'Recovery Payment': boolean,
-            view_guarantors: boolean,
+            'View Guarantors': boolean,
-            create_guarantor: boolean,
+            'Create Guarantor': boolean,
-            disburse: boolean,
+            'Disburse': boolean,
-            withdrawn_by_client: boolean,
+            'Withdrawn by Client': boolean,
-            undo_disbursal: boolean,
+            'Undo Disbursal': boolean,
-            loan_screen_reports: boolean,
+            'Loan Screen Reports': boolean,
-            approve: boolean,
+            'Approve': boolean,
-            add_loan_charge: boolean } = {
+            'Add Loan Charge': boolean } = {
-              close: false,
+              'Close': false,
-              undo_approval: false,
+              'Undo Approval': false,
-              write_off: false,
+              'Write Off':  false,
-              add_collateral: false,
+              'Add Collateral':  false,
-              assign_loan_officer: false,
+              'Assign Loan Officer':  false,
-              foreclosure: false,
+              'Foreclosure':  false,
-              prepay_loan: false,
+              'Prepay Loan':  false,
-              reject: false,
+              'Reject':  false,
-              disburse_to_savings: false,
+              'Disburse To Savings':  false,
-              make_repayment: false,
+              'Make Repayment':  false,
-              waive_interest: false,
+              'Waive Interest':  false,
-              close_as_rescheduled: false,
+              'Close (as Rescheduled)':  false,
-              reschedule: false,
+              'Reschedule':  false,
-              recovery_payment: false,
+              'Recovery Payment':  false,
-              view_guarantors: false,
+              'View Guarantors':  false,
-              create_guarantor: false,
+              'Create Guarantor':  false,
-              disburse: false,
+              'Disburse':  false,
-              withdrawn_by_client: false,
+              'Withdrawn by Client':  false,
-              undo_disbursal: false,
+              'Undo Disbursal':  false,
-              loan_screen_reports: false,
+              'Loan Screen Reports':  false,
-              approve: false,
+              'Approve':  false,
-              add_loan_charge: false };
+              'Add Loan Charge':  false };
 
   actionButtonData: any;
   actionName: any;
@@ -73,13 +73,13 @@ export class LoanAccountActionsComponent {
 
     this.route.params.subscribe(params => {
       this.actionName = params['action'];
-      if (this.actionName === 'change-loan-officer') {
+      if (this.actionName === 'Change Loan Officer') {
-        this.actionName = 'assign-loan-officer';
+        this.actionName = 'Assign Loan Officer';
       }
       for (const key of Object.keys(this.actions)) {
         this.actions[key] = false;
       }
-      this.actions[this.actionName.replace(/-/g, '_')] = true;
+      this.actions[this.actionName] = true;
     });
   }
 

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="rescheduleLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Reschedule from Installment On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rescheduleDatePicker" required formControlName="rescheduleFromDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rescheduleDatePicker" required
+              formControlName="rescheduleFromDate">
             <mat-datepicker-toggle matSuffix [for]="rescheduleDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rescheduleDatePicker></mat-datepicker>
             <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleFromDate.hasError('required')">
@@ -30,7 +33,8 @@
 
           <mat-form-field>
             <mat-label>Submitted On</mat-label>
-          <input matInput [min]="minDate" [matDatepicker]="submittedDatePicker" required formControlName="submittedOnDate">
+            <input matInput [min]="minDate" [matDatepicker]="submittedDatePicker" required
+              formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedDatePicker></mat-datepicker>
             <mat-error *ngIf="rescheduleLoanForm.controls.submittedOnDate.hasError('required')">
@@ -48,7 +52,8 @@
           <ng-container *ngIf="changeRepaymentDate.value">
             <mat-form-field>
               <mat-label>Installment Rescheduled to</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="installmentrescheduledDatePicker" formControlName="adjustedDueDate">
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="installmentrescheduledDatePicker"
+                formControlName="adjustedDueDate">
               <mat-datepicker-toggle matSuffix [for]="installmentrescheduledDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #installmentrescheduledDatePicker></mat-datepicker>
             </mat-form-field>
@@ -89,11 +94,14 @@
 
         <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]="!rescheduleLoanForm.valid" *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid"
+            *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -80,7 +80,7 @@ export class LoanRescheduleComponent implements OnInit {
 
       // TODO: needs to be updated
       // mentioned in Community App:
-      // location.path('/loans/' + scope.loanId + '/viewreschedulerequest/'+ data.resourceId);
+      // location.path('/loans-accounts/' + scope.loanId + '/viewreschedulerequest/'+ data.resourceId);
         this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }

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

@@ -25,7 +25,7 @@
             </mat-card-content>
 
             <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+                <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
                 </button>

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Closed On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeLoanForm.controls.transactionDate.hasError('required')">
@@ -25,11 +28,14 @@
 
         <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]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Transaction Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="repaymentLoanForm.controls.transactionDate.hasError('required')">
@@ -81,11 +84,14 @@
 
         <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]="!repaymentLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

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

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

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Transaction Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transactionDatePicker></mat-datepicker>
             <mat-error *ngIf="prepayLoanForm.controls.transactionDate.hasError('required')">
@@ -94,11 +97,14 @@
 
         <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]="!prepayLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.scss

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

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="recoveryRepaymentLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -90,4 +92,6 @@
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.scss

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

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="rejectLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Rejected On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required formControlName="rejectedOnDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required
+              formControlName="rejectedOnDate">
             <mat-datepicker-toggle matSuffix [for]="rejectedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectLoanForm.controls.rejectedOnDate.hasError('required')">
@@ -25,11 +28,14 @@
 
         <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]="!rejectLoanForm.valid" *mifosxHasPermission="'REJECT_LOAN'" >Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid"
+            *mifosxHasPermission="'REJECT_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

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

@@ -1,17 +1,22 @@
 <div class="container">
 
+  <mat-card>
+
     <mat-card-content>
 
-    <mat-form-field fxLayoutAlign="center">
+      <mat-form-field fxFlex>
         <mat-label>Note</mat-label>
         <textarea matInput [formControl]="note"></textarea>
       </mat-form-field>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
-    </mat-card-actions>
-
     </mat-card-content>
 
+    <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" (click)="submit()"
+        *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
+    </mat-card-actions>
+
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,17 +1,22 @@
 <div class="container">
 
+  <mat-card>
+
     <mat-card-content>
 
-    <mat-form-field fxLayoutAlign="center">
+      <mat-form-field fxFlex>
         <mat-label>Note</mat-label>
         <textarea matInput [formControl]="note"></textarea>
       </mat-form-field>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
-    </mat-card-actions>
-
     </mat-card-content>
 
+    <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" (click)="submit()"
+        *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
+    </mat-card-actions>
+
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,3 +1,7 @@
+<div class="container">
+
+  <mat-card>
+
     <div class="viewGuarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%">
@@ -76,7 +80,8 @@
         </div>
       </div>
 
-  <table fxFlexFill mat-table [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
+      <table fxFlexFill mat-table
+        [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
         <!-- <ng-container *ngIf="expression"> -->
         <ng-container matColumnDef="fullname">
           <th mat-header-cell *matHeaderCellDef> Name </th>
@@ -150,14 +155,17 @@
           <th mat-header-cell *matHeaderCellDef> Action </th>
           <td mat-cell *matCellDef="let guarantor; let id = index">
             <span *ngIf="!guarantor.guarantorFundingDetails">
-          <button mat-raised-button class="account-action-button" color="primary" *mifosxHasPermission="'READ_SAVINGSACCOUNT'" (click)="viewGuarantorDetails(guarantor)">
+              <button mat-raised-button class="account-action-button" color="primary"
+                *mifosxHasPermission="'READ_SAVINGSACCOUNT'" (click)="viewGuarantorDetails(guarantor)">
                 <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
               </button>
-          <button mat-raised-button class="account-action-button" color="primary" *ngIf="guarantor.status && guarantor.guarantorType.id == 3 && guarantor.id">
+              <button mat-raised-button class="account-action-button" color="primary"
+                *ngIf="guarantor.status && guarantor.guarantorType.id == 3 && guarantor.id">
                 <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
               </button>
               <span *ngIf="guarantor.status">
-          <button mat-raised-button class="account-action-button" color="warn" *mifosxHasPermission='"DELETE_GUARANTOR"' (click)="deleteGuarantor(guarantor.id)">
+                <button mat-raised-button class="account-action-button" color="warn"
+                  *mifosxHasPermission='"DELETE_GUARANTOR"' (click)="deleteGuarantor(guarantor.id)">
                   <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
                 </button>
               </span>
@@ -172,3 +180,7 @@
 
       </table>
     </div>
+
+  </mat-card>
+
+</div>

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.scss

@@ -29,3 +29,7 @@ table {
 .headingName {
   display: block;
 }
+
+.container {
+    max-width: 73rem;
+}

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

@@ -76,7 +76,7 @@ export class ViewGuarantorsComponent implements OnInit {
   private reload() {
     const clientId = this.dataObject.clientId;
     const url: string = this.router.url;
-    this.router.navigateByUrl(`/clients/${clientId}/loans`, { skipLocationChange: true })
+    this.router.navigateByUrl(`/clients/${clientId}/loans-accounts`, { skipLocationChange: true })
       .then(() => this.router.navigate([url]));
   }
 

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="loanInterestForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Interest waived on</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="interestDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #interestDatePicker></mat-datepicker>
             <mat-error *ngIf="loanInterestForm.controls.transactionDate.hasError('required')">
@@ -33,11 +36,14 @@
 
         <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]="!loanInterestForm.valid" *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid"
+            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <form [formGroup]="withdrawnByClientLoanForm" (ngSubmit)="submit()">
 
       <mat-card-content>
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Withdrawn On</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required formControlName="withdrawnOnDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required
+              formControlName="withdrawnOnDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawnOnDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawnByClientLoanForm.controls.withdrawnOnDate.hasError('required')">
@@ -25,11 +28,14 @@
 
         <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]="!withdrawnByClientLoanForm.valid" *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
+          <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid"
+            *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
         </mat-card-actions>
 
       </mat-card-content>
 
     </form>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

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

@@ -1,5 +1,7 @@
 <div class="container">
 
+  <mat-card>
+
     <mat-card-content>
 
       <form [formGroup]="writeOffForm" (ngSubmit)="submit()">
@@ -8,7 +10,8 @@
 
           <mat-form-field>
             <mat-label>Write off on</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="writeOffDatePicker" required formControlName="transactionDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="writeOffDatePicker" required
+              formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="writeOffDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #writeOffDatePicker></mat-datepicker>
             <mat-error *ngIf="writeOffForm.controls.transactionDate.hasError('required')">
@@ -31,10 +34,13 @@
       </form>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
+        <button mat-raised-button color="primary" (click)="submit()"
+          *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
       </mat-card-actions>
 
     </mat-card-content>
 
+  </mat-card>
+
 </div>

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts

@@ -18,8 +18,8 @@ export class LoanCollateralTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loanDetails = data.loanDetailsAssociationData;
+      this.loanDetails = data.loanDetailsData;
     });
   }
 

src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts

@@ -51,8 +51,10 @@ export class LoanDocumentsTabComponent implements OnInit {
   constructor(private route: ActivatedRoute,
     private loansService: LoansService,
     public dialog: MatDialog) {
-    this.route.data.subscribe((data: { loanDocuments: any, loanDetailsData: any }) => {
+    this.route.data.subscribe((data: { loanDocuments: any }) => {
       this.getLoanDocumentsData(data.loanDocuments);
+    });
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
       this.loanDetailsData = data.loanDetailsData;
     });
   }

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.ts

@@ -20,8 +20,8 @@ export class LoanTrancheDetailsComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loanDetails = data.loanDetailsAssociationData;
+      this.loanDetails = data.loanDetailsData;
     });
   }
 

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

@@ -132,9 +132,6 @@ export class LoansViewComponent implements OnInit {
         this.router.navigate(['transfer-funds/make-account-transfer'], { relativeTo: this.route, queryParams: queryParams });
         break;
       default:
-        button = button.replace(/\s/g, '-').toLowerCase();
-        button = button.replace(/\(/g, '');
-        button = button.replace(/\)/g, '');
         this.router.navigate(['actions', button], { relativeTo: this.route });
         break;
     }
@@ -179,7 +176,7 @@ export class LoansViewComponent implements OnInit {
   private reload() {
     const clientId = this.clientId;
     const url: string = this.router.url;
-    this.router.navigateByUrl(`/clients/${clientId}/loans`, { skipLocationChange: true })
+    this.router.navigateByUrl(`/clients/${clientId}/loans-accounts`, { skipLocationChange: true })
       .then(() => this.router.navigate([url]));
   }
 

src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.ts

@@ -18,8 +18,8 @@ export class OriginalScheduleTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.originalScheduleDetails = data.loanDetailsAssociationData.originalSchedule;
+      this.originalScheduleDetails = data.loanDetailsData.originalSchedule;
     });
   }
 

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.ts

@@ -20,8 +20,8 @@ export class RepaymentScheduleTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.repaymentScheduleDetails = data.loanDetailsAssociationData.repaymentSchedule;
+      this.repaymentScheduleDetails = data.loanDetailsData.repaymentSchedule;
     });
   }
 

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

@@ -65,7 +65,7 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}">
-          <button class="account-action-button" *ngIf="!transaction.manuallyReversedession" mat-raised-button color="primary" (click)="routeEdit($event)"
+          <button class="account-action-button" *ngIf="!transaction.manuallyReversed" mat-raised-button color="primary" (click)="routeEdit($event)"
             [routerLink]="[transaction.id, 'reciept']" matTooltip="View Receipts">
             <i class="fa fa-file-text"></i>
           </button>

src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts

@@ -28,10 +28,10 @@ export class TransactionsTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
               private router: Router) {
-    this.route.parent.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.transactions = data.loanDetailsAssociationData.transactions;
+      this.transactions = data.loanDetailsData.transactions;
-      this.tempTransaction = data.loanDetailsAssociationData.transactions;
+      this.tempTransaction = data.loanDetailsData.transactions;
-      this.status = data.loanDetailsAssociationData.status.value;
+      this.status = data.loanDetailsData.status.value;
     });
   }
 

src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.ts

@@ -44,8 +44,8 @@ export class ExportTransactionsComponent implements OnInit {
               private formBuilder: FormBuilder,
               private datePipe: DatePipe,
               private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { loanDetailsAssociationData: any }) => {
+    this.route.parent.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loansAccountId = data.loanDetailsAssociationData.accountNo;
+      this.loansAccountId = data.loanDetailsData.accountNo;
     });
   }
 

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

@@ -1,7 +1,7 @@
 <mat-card class="container">
 
   <div class="back-button">
-    <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
+    <button type="button" color="primary" mat-raised-button [routerLink]="['../../../general']">
       <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;Back</button>
   </div>
 

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss

@@ -1,6 +1,5 @@
 .container {
   max-width: 37rem;
-  padding-bottom: 2%;
   .content {
     div {
       margin: 1rem 0;

src/app/loans/loans-view/view-charge/view-charge.component.ts

@@ -45,10 +45,8 @@ export class ViewChargeComponent {
               private datePipe: DatePipe,
               private router: Router,
               public dialog: MatDialog) {
-    this.route.data.subscribe((data: { loansAccountCharge: any }) => {
+    this.route.data.subscribe((data: { loansAccountCharge: any, loanDetailsData: any }) => {
       this.chargeData = data.loansAccountCharge;
-    });
-    this.route.parent.parent.data.subscribe((data: { loanDetailsData: any }) => {
       this.loansAccountData = data.loanDetailsData;
     });
   }

src/app/loans/loans.module.ts

@@ -64,7 +64,6 @@ import { EditTransactionComponent } from './loans-view/transactions/edit-transac
 /** Dialog Components */
 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 { LoansConfirmationDialogBoxComponent } from './custom-dialog/loans-confirmation-dialog-box/loans-confirmation-dialog-box.component';
 import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
 
 /**
@@ -112,7 +111,6 @@ import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-ac
     ViewGuarantorsComponent,
     CreateGuarantorComponent,
     LoansAccountViewGuarantorDetailsDialogComponent,
-    LoansConfirmationDialogBoxComponent,
     DisburseLoanAccountComponent,
     RejectLoanComponent,
     DisburseComponent,

src/app/notifications/notifications-page/notifications-page.component.ts

@@ -29,7 +29,7 @@ export class NotificationsPageComponent implements OnInit {
   routeMap: any = {
     'client' : '/clients/',
     'group' : '/groups/',
-    'loan' : '/loans/',
+    'loan': '/loans-accounts/',
     'center' : '/centers/',
     'shareAccount' : '/shares-accounts/',
     'fixedDeposit' : '/fixed-deposits-accounts/',

src/app/search/search-page/search-page.component.ts

@@ -54,7 +54,7 @@ export class SearchPageComponent {
         this.router.navigate(['clients', entity.parentId, 'savings-accounts', entity.entityId]);
         break;
       case 'LOAN':
-        this.router.navigate(['clients', entity.parentId, 'loans', entity.entityId]);
+        this.router.navigate(['clients', entity.parentId, 'loans-accounts', entity.entityId]);
         break;
     }
   }

src/app/shared/notifications-tray/notifications-tray.component.ts

@@ -34,7 +34,7 @@ export class NotificationsTrayComponent implements OnInit, OnDestroy {
   routeMap: any = {
     'client' : '/clients/',
     'group' : '/groups/',
-    'loan' : '/loans/',
+    'loan': '/loans-accounts/',
     'center' : '/centers/',
     'shareAccount' : '/shares-accounts/',
     'fixedDeposit' : '/fixed-deposits-accounts/',

src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html

@@ -43,7 +43,7 @@
 
         <ng-container matColumnDef="loan">
           <th mat-header-cell *matHeaderCellDef> Loan </th>
-          <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans', 'loan.id']">
+          <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans-accounts', 'loan.id']">
             {{ loan.loanProductName}}({{loan.accountNo}}) </td>
         </ng-container>
 

src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html

@@ -35,12 +35,12 @@
 
     <ng-container matColumnDef="loanAccountNumber">
       <th mat-header-cell *matHeaderCellDef> Loan Account# </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans', loan.id, 'general']"> {{loan.accountNo}} </td>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans-accounts', loan.id, 'general']"> {{loan.accountNo}} </td>
     </ng-container>
 
     <ng-container matColumnDef="loanProduct">
       <th mat-header-cell *matHeaderCellDef> Loan Product </th>
-      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans', loan.id, 'general']"> {{loan.loanProductName}} </td>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans-accounts', loan.id, 'general']"> {{loan.loanProductName}} </td>
     </ng-container>
 
     <ng-container matColumnDef="principal">