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',
-            data: { title: extract('Loans'), breadcrumb: 'loans', routeParamBreadcrumb: false },
+            path: 'loans-accounts',
             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',
-              data: { title: extract('Loans'), breadcrumb: 'loans', routeParamBreadcrumb: false },
+              path: 'loans-accounts',
               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,35 +102,6 @@ const routes: Routes = [
                 {
                   path: 'export',
                   component: ExportTransactionsComponent
-                },
-                {
-                  path: ':id',
-                  data: { routeParamBreadcrumb: 'id' },
-                  children: [
-                    {
-                      path: '',
-                      component: ViewTransactionComponent,
-                      resolve: {
-                        loansAccountTransaction: LoansAccountTransactionResolver
-                      }
-                    },
-                    {
-                      path: 'edit',
-                      component: EditTransactionComponent,
-                      data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
-                      resolve: {
-                        loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
-                      }
-                    },
-                    {
-                      path: 'reciept',
-                      component: ViewRecieptComponent,
-                      data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                      resolve: {
-                        loansTransactionReciept: LoansTransactionRecieptResolver
-                      }
-                    }
-                  ]
                 }
               ]
             },
@@ -149,17 +109,11 @@ 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',
@@ -170,38 +124,18 @@ const routes: Routes = [
               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,
-                  resolve: {
-                    loanDetailsAssociationData: LoanDetailsChargesResolver
-                  }
-                },
-                {
-                  path: ':id',
-                  data: { routeParamBreadcrumb: 'id' },
-                  component: ViewChargeComponent,
-                  resolve: {
-                    loansAccountCharge: LoansAccountChargeResolver
-                  }
-                }
-              ]
+              component: ChargesTabComponent,
             },
             {
               path: 'loan-documents',
               component: LoanDocumentsTabComponent,
               data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
               resolve: {
-                loanDocuments: LoanDocumentsResolver,
-                loanDetailsData: LoanDetailsResolver
+                loanDocuments: LoanDocumentsResolver
               },
             },
             {
@@ -228,20 +162,81 @@ const routes: Routes = [
                 }
               }]
             },
+          ],
+        },
+        {
+          path: 'transactions',
+          data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsResolver
+          },
+          children: [
             {
-              path: 'actions/:action',
-              component: LoanAccountActionsComponent,
-              data: { title: extract('Loan Account Actions'), routeParamBreadcrumb: 'action' },
-              resolve: {
-                actionButtonData: LoanActionButtonResolver
-              }
+              path: '',
+              redirectTo: '../transactions', pathMatch: 'prefix'
             },
             {
-              path: 'transfer-funds',
-              loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+              path: ':id',
+              data: { routeParamBreadcrumb: 'id' },
+              children: [
+                {
+                  path: '',
+                  component: ViewTransactionComponent,
+                  resolve: {
+                    loansAccountTransaction: LoansAccountTransactionResolver
+                  }
+                },
+                {
+                  path: 'edit',
+                  component: EditTransactionComponent,
+                  data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  resolve: {
+                    loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                  }
+                },
+                {
+                  path: 'reciept',
+                  component: ViewRecieptComponent,
+                  data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+                  resolve: {
+                    loansTransactionReciept: LoansTransactionRecieptResolver
+                  }
+                }
+              ]
             }
           ]
         },
+        {
+          path: 'charges',
+          data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+          children: [
+            {
+              path: '',
+              redirectTo: '../charges', pathMatch: 'prefix'
+            },
+            {
+              path: ':id',
+              data: { routeParamBreadcrumb: 'id' },
+              component: ViewChargeComponent,
+              resolve: {
+                loansAccountCharge: LoansAccountChargeResolver,
+                loanDetailsData: LoanDetailsResolver
+              }
+            }
+          ]
+        },
+        {
+          path: 'actions/:action',
+          component: LoanAccountActionsComponent,
+          data: { title: extract('Loan Account Actions'), routeParamBreadcrumb: 'action' },
+          resolve: {
+            actionButtonData: LoanActionButtonResolver
+          }
+        },
+        {
+          path: 'transfer-funds',
+          loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+        },
         {
           path: 'edit-loans-account',
           data: { title: extract('Edit Loans Account'), breadcrumb: 'Edit Loans Account', routeParamBreadcrumb: 'Edit' },
@@ -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.loanDetails = data.loanDetailsAssociationData;
+    this.route.parent.data.subscribe(( data: { loanDetailsData: any }) => {
+      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.loanDetails = data.loanDetailsAssociationData;
+    this.route.parent.data.subscribe(( data: { loanDetailsData: any }) => {
+      this.loanDetails = data.loanDetailsData;
     });
   }
 

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

@@ -1,44 +1,50 @@
 <div class="container">
 
-  <form [formGroup]="collateralForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="collateralForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <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-select>
-          <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
-            Collateral type <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Value</mat-label>
-          <input matInput required formControlName="value">
-          <mat-error *ngIf="collateralForm.controls.value.hasError('required')">
-            Value is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+          <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-select>
+            <mat-error *ngIf="collateralForm.controls.collateralTypeId.hasError('required')">
+              Collateral type <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Description</mat-label>
-          <textarea matInput formControlName="description"></textarea>
-        </mat-form-field>
-      
+          <mat-form-field>
+            <mat-label>Value</mat-label>
+            <input matInput required formControlName="value">
+            <mat-error *ngIf="collateralForm.controls.value.hasError('required')">
+              Value is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Description</mat-label>
+            <textarea matInput formControlName="description"></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" [disabled]="!collateralForm.valid" *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
-      </mat-card-actions>
 
-    </mat-card-content>
+        </div>
+
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
+            *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
+        </mat-card-actions>
+
+      </mat-card-content>
+
+    </form>
+
+  </mat-card>
 
-  </form>
-  
 </div>

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

@@ -1,55 +1,65 @@
-<form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
+<div class="container">
 
-  <mat-card-content>
+  <mat-card>
 
-    <div fxLayout="column">
-      <mat-form-field>
-        <mat-label>Charge</mat-label>
-        <mat-select required formControlName="chargeId">
-          <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
-            {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
-          Charge is <strong>required</strong>
-        </mat-error>
-      </mat-form-field>
+    <form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
 
-      <mat-form-field>
-        <mat-label>Amount</mat-label>
-        <input type=number required matInput formControlName="amount" />
-        <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
-          Amount is <strong>required</strong>
-        </mat-error>
-      </mat-form-field>
+      <mat-card-content>
 
-      <mat-form-field>
-        <mat-label>Charge Calculation</mat-label>
-        <input matInput formControlName="chargeCalculation" />
-      </mat-form-field>
+        <div fxLayout="column">
+          <mat-form-field>
+            <mat-label>Charge</mat-label>
+            <mat-select required formControlName="chargeId">
+              <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
+                {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
+              Charge is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      <mat-form-field>
-        <mat-label>Charge Time</mat-label>
-        <input matInput formControlName="chargeTime" />
-      </mat-form-field>
+          <mat-form-field>
+            <mat-label>Amount</mat-label>
+            <input type=number required matInput formControlName="amount" />
+            <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
+              Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      <mat-form-field *ngIf="loanChargeForm.controls['dueDate']">
-        <mat-label>Due On</mat-label>
-        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
-          formControlName="dueDate">
-        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #dueDatePicker></mat-datepicker>
-        <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
-          Due Date is <strong>required</strong>
-        </mat-error>
-      </mat-form-field>
+          <mat-form-field>
+            <mat-label>Charge Calculation</mat-label>
+            <input matInput formControlName="chargeCalculation" />
+          </mat-form-field>
 
-    </div>
+          <mat-form-field>
+            <mat-label>Charge Time</mat-label>
+            <input matInput formControlName="chargeTime" />
+          </mat-form-field>
 
-    <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid" *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
-    </mat-card-actions>
+          <mat-form-field *ngIf="loanChargeForm.controls['dueDate']">
+            <mat-label>Due On</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
+              formControlName="dueDate">
+            <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #dueDatePicker></mat-datepicker>
+            <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
+              Due Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-  </mat-card-content>
-</form>
+        </div>
+
+        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</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,58 +1,62 @@
 <div class="container">
 
-  <form [formGroup]="approveLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="approveLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Approved On</mat-label>
-          <input matInput [min]="minDate" [matDatepicker]="approvedDatePicker" required
-            formControlName="approvedOnDate">
-          <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #approvedDatePicker></mat-datepicker>
-          <mat-error *ngIf="approveLoanForm.controls.approvedOnDate.hasError('required')">
-            Approved Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Expected disbursement on</mat-label>
-          <input matInput [min]="minDate" [matDatepicker]="disbursementDatePicker"
-            formControlName="expectedDisbursementDate">
-          <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #disbursementDatePicker></mat-datepicker>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Approved On</mat-label>
+            <input matInput [min]="minDate" [matDatepicker]="approvedDatePicker" required
+              formControlName="approvedOnDate">
+            <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #approvedDatePicker></mat-datepicker>
+            <mat-error *ngIf="approveLoanForm.controls.approvedOnDate.hasError('required')">
+              Approved Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Approved Amount</mat-label>
-          <input matInput type="number" formControlName="approvedLoanAmount">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Expected disbursement on</mat-label>
+            <input matInput [min]="minDate" [matDatepicker]="disbursementDatePicker"
+              formControlName="expectedDisbursementDate">
+            <mat-datepicker-toggle matSuffix [for]="disbursementDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #disbursementDatePicker></mat-datepicker>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input matInput type="number" required formControlName="approvedLoanAmount" required>
-          <mat-error *ngIf="approveLoanForm.controls.approvedLoanAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Approved Amount</mat-label>
+            <input matInput type="number" formControlName="approvedLoanAmount">
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput type="number" required formControlName="approvedLoanAmount" required>
+            <mat-error *ngIf="approveLoanForm.controls.approvedLoanAmount.hasError('required')">
+              Transaction Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
-          *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!approveLoanForm.valid"
+            *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
+        </mat-card-actions>
 
-  </form>
+      </mat-card-content>
+
+    </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,42 +1,48 @@
 <div class="container">
 
-  <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label> To Loan Officer</mat-label>
-          <mat-select required formControlName="toLoanOfficerId">
-            <mat-option *ngFor="let loanOfficer of loanOfficers" [value]="loanOfficer.id">
-              {{ loanOfficer.displayName }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="assignOfficerForm.controls.toLoanOfficerId.hasError('required')">
-            Loan Officer is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Assignment Date</mat-label>
-          <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')">
-            Assignment Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label> To Loan Officer</mat-label>
+            <mat-select required formControlName="toLoanOfficerId">
+              <mat-option *ngFor="let loanOfficer of loanOfficers" [value]="loanOfficer.id">
+                {{ loanOfficer.displayName }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="assignOfficerForm.controls.toLoanOfficerId.hasError('required')">
+              Loan Officer is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Assignment Date</mat-label>
+            <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')">
+              Assignment Date <strong>is required</strong>
+            </mat-error>
+          </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" [disabled]="!assignOfficerForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!assignOfficerForm.valid"
+            *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+        </mat-card-actions>
 
-  </form>
+      </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,35 +1,41 @@
 <div class="container">
 
-  <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Closed On</mat-label>
-          <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')">
-            Closed Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Closed On</mat-label>
+            <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')">
+              Closed Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="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" [disabled]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
+        </mat-card-actions>
 
-  </form>
+      </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,156 +1,161 @@
 <div class="container">
-  <form [formGroup]="newGuarantorForm" (ngSubmit)="submit()">
 
-    <mat-card-content>
+  <mat-card>
 
-      <div fxLayout="column">
+    <form [formGroup]="newGuarantorForm" (ngSubmit)="submit()">
 
-        <mat-checkbox labelPosition="before" formControlName="existingClient">
-          Existing Client
-        </mat-checkbox>
+      <mat-card-content>
 
-        <ng-container *ngIf="!showClientDetailsForm">
+        <div fxLayout="column">
 
-          <mat-form-field fxFlex="30%">
-            <mat-label>Name</mat-label>
-            <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete">
-            <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
-              Name <strong>is required</strong>
-            </mat-error>
-          </mat-form-field>
+          <mat-checkbox labelPosition="before" formControlName="existingClient">
+            Existing Client
+          </mat-checkbox>
 
-          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient"
-            (optionSelected)='clientSelected($event.option.value)'>
-            <mat-option *ngFor="let client of clientsData" [value]="client">
-              {{ client.displayName }}
-            </mat-option>
-          </mat-autocomplete>
+          <ng-container *ngIf="!showClientDetailsForm">
 
-          <mat-form-field>
-            <mat-label>Relationship</mat-label>
-            <mat-select formControlName="clientRelationshipTypeId">
-              <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
-                {{ relationType.name }}
+            <mat-form-field fxFlex="30%">
+              <mat-label>Name</mat-label>
+              <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete">
+              <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
+                Name <strong>is required</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient"
+              (optionSelected)='clientSelected($event.option.value)'>
+              <mat-option *ngFor="let client of clientsData" [value]="client">
+                {{ client.displayName }}
               </mat-option>
-            </mat-select>
-          </mat-form-field>
-
-          <ng-container *ngIf="accountOptions.length > 0">
+            </mat-autocomplete>
 
             <mat-form-field>
-              <mat-label>Account</mat-label>
-              <mat-select formControlName="savingsId">
-                <mat-option *ngFor="let accountOption of accountOptions" [value]="accountOption.id">
-                  {{ accountOption.productName }} - {{ accountOption.accountNo }}
+              <mat-label>Relationship</mat-label>
+              <mat-select formControlName="clientRelationshipTypeId">
+                <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
+                  {{ relationType.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <ng-container *ngIf="accountOptions.length > 0">
+
+              <mat-form-field>
+                <mat-label>Account</mat-label>
+                <mat-select formControlName="savingsId">
+                  <mat-option *ngFor="let accountOption of accountOptions" [value]="accountOption.id">
+                    {{ accountOption.productName }} - {{ accountOption.accountNo }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+
+              <mat-form-field>
+                <mat-label>Amount</mat-label>
+                <input type="number" matInput required formControlName="amount" required>
+              </mat-form-field>
+
+            </ng-container>
+
+          </ng-container>
+
+          <ng-container *ngIf="showClientDetailsForm">
+
+            <mat-form-field>
+              <mat-label>Relationship</mat-label>
+              <mat-select formControlName="clientRelationshipTypeId">
+                <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
+                  {{ relationType.name }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Amount</mat-label>
-              <input type="number" matInput required formControlName="amount" required>
+              <mat-label>First Name</mat-label>
+              <input matInput required formControlName="firstname" required>
+              <mat-error *ngIf="newGuarantorForm.controls.firstname.hasError('required')">
+                First Name <strong>is required</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Last Name</mat-label>
+              <input matInput required formControlName="lastname" required>
+              <mat-error *ngIf="newGuarantorForm.controls.lastname.hasError('required')">
+                Last Name <strong>is required</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Date Of Birth</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dobDatePicker" formControlName="dob">
+              <mat-datepicker-toggle matSuffix [for]="dobDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #dobDatePicker></mat-datepicker>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Address Line 1</mat-label>
+              <input matInput formControlName="addressLine1">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Address Line 2</mat-label>
+              <input matInput formControlName="addressLine2">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>City</mat-label>
+              <input matInput formControlName="city">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Zip</mat-label>
+              <input matInput formControlName="zip">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Mobile</mat-label>
+              <input type="number" matInput formControlName="mobileNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Residence Phone #</mat-label>
+              <input type="number" matInput formControlName="housePhoneNumber">
             </mat-form-field>
 
           </ng-container>
 
-        </ng-container>
+        </div>
 
-        <ng-container *ngIf="showClientDetailsForm">
+        <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]="!newGuarantorForm.valid"
+            *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
+        </mat-card-actions>
 
-          <mat-form-field>
-            <mat-label>Relationship</mat-label>
-            <mat-select formControlName="clientRelationshipTypeId">
-              <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
-                {{ relationType.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+      </mat-card-content>
 
-          <mat-form-field>
-            <mat-label>First Name</mat-label>
-            <input matInput required formControlName="firstname" required>
-            <mat-error *ngIf="newGuarantorForm.controls.firstname.hasError('required')">
-              First Name <strong>is required</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Last Name</mat-label>
-            <input matInput required formControlName="lastname" required>
-            <mat-error *ngIf="newGuarantorForm.controls.lastname.hasError('required')">
-              Last Name <strong>is required</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Date Of Birth</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dobDatePicker" formControlName="dob">
-            <mat-datepicker-toggle matSuffix [for]="dobDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #dobDatePicker></mat-datepicker>
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Address Line 1</mat-label>
-            <input matInput formControlName="addressLine1">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Address Line 2</mat-label>
-            <input matInput formControlName="addressLine2">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>City</mat-label>
-            <input matInput formControlName="city">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Zip</mat-label>
-            <input matInput formControlName="zip">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Mobile</mat-label>
-            <input type="number" matInput formControlName="mobileNumber">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Residence Phone #</mat-label>
-            <input type="number" matInput formControlName="housePhoneNumber">
-          </mat-form-field>
-
-        </ng-container>
+    </form>
 
+    <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">
+      <div class="mat-table">
+        <div class="mat-header-row">
+          <div class="mat-header-cell">Client Details</div>
+        </div>
+        <div class="mat-row">
+          <div class="mat-cell">Name</div>
+          <div class="mat-cell">{{newGuarantorForm.controls.name.value.displayName}}</div>
+        </div>
+        <div class="mat-row">
+          <div class="mat-cell">Id</div>
+          <div class="mat-cell">{{newGuarantorForm.controls.name.value.id}}</div>
+        </div>
+        <div class="mat-row">
+          <div class="mat-cell">Office</div>
+          <div class="mat-cell">{{newGuarantorForm.controls.name.value.officeName}}</div>
+        </div>
       </div>
+    </ng-container>
 
-      <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]="!newGuarantorForm.valid"
-          *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
-      </mat-card-actions>
-
-    </mat-card-content>
-
-  </form>
-
-  <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">
-    <div class="mat-table">
-      <div class="mat-header-row">
-        <div class="mat-header-cell">Client Details</div>
-      </div>
-      <div class="mat-row">
-        <div class="mat-cell">Name</div>
-        <div class="mat-cell">{{newGuarantorForm.controls.name.value.displayName}}</div>
-      </div>
-      <div class="mat-row">
-        <div class="mat-cell">Id</div>
-        <div class="mat-cell">{{newGuarantorForm.controls.name.value.id}}</div>
-      </div>
-      <div class="mat-row">
-        <div class="mat-cell">Office</div>
-        <div class="mat-cell">{{newGuarantorForm.controls.name.value.officeName}}</div>
-      </div>
-    </div>
-  </ng-container>
+  </mat-card>
 
 </div>

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

@@ -1,51 +1,57 @@
 <div class="container">
 
-  <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
-
-      <div fxLayout="column">
-
-        <mat-form-field>
-          <mat-label>Disbursement On</mat-label>
-          <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')">
-            Disbursement Date is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+    <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
     
-        <mat-form-field>
-          <mat-label>Transaction amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="disbursementForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field *ngIf="dataObject.fixedEmiAmount !== null || dataObject.fixedEmiAmount !== undefined">
-          <mat-label>Fixed EMI amount</mat-label>
-          <input matInput required formControlName="fixedEmiAmount">
-          <mat-error *ngIf="disbursementForm.controls.fixedEmiAmount.hasError('required')">
-            Fixed EMI Amount is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
+      <mat-card-content>
     
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+        <div fxLayout="column">
+    
+          <mat-form-field>
+            <mat-label>Disbursement On</mat-label>
+            <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')">
+              Disbursement Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+    
+          <mat-form-field>
+            <mat-label>Transaction amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="disbursementForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+    
+          <mat-form-field *ngIf="dataObject.fixedEmiAmount !== null || dataObject.fixedEmiAmount !== undefined">
+            <mat-label>Fixed EMI amount</mat-label>
+            <input matInput required formControlName="fixedEmiAmount">
+            <mat-error *ngIf="disbursementForm.controls.fixedEmiAmount.hasError('required')">
+              Fixed EMI Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+    
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
+    
+        </div>
+    
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
+            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
+        </mat-card-actions>
+    
+      </mat-card-content>
+    
+    </form>
 
-      </div>
-
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!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,91 +1,97 @@
 <div class="container">
 
-  <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Disbursed On</mat-label>
-          <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')">
-            Disbursed On Date<strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="disbursementLoanForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Disbursed On</mat-label>
+            <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')">
+              Disbursed On Date<strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Payment Type</mat-label>
-          <mat-select formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="disbursementLoanForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Payment Type</mat-label>
+            <mat-select formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <div fxFlexFill>
+            <span fxFlex="25%">Show Payment Details</span>
+            <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+                <i class="fa fa-minus"></i>
+              </button>
+              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+                <i class="fa fa-plus"></i>
+              </button>
+            </span>
+          </div>
+
+          <ng-container *ngIf="showPaymentDetails">
+            <mat-form-field>
+              <mat-label> Account #</mat-label>
+              <input matInput formControlName="accountNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Cheque #</mat-label>
+              <input matInput formControlName="checkNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Routing Code</mat-label>
+              <input matInput formControlName="routingCode">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Reciept #</mat-label>
+              <input matInput formControlName="receiptNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Bank #</mat-label>
+              <input matInput formControlName="bankNumber">
+            </mat-form-field>
+          </ng-container>
+
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="25%">Show Payment Details</span>
-          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
-            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-              <i class="fa fa-minus"></i>
-            </button>
-            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-              <i class="fa fa-plus"></i>
-            </button>
-          </span>
         </div>
 
-        <ng-container *ngIf="showPaymentDetails">
-          <mat-form-field>
-            <mat-label> Account #</mat-label>
-            <input matInput formControlName="accountNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Cheque #</mat-label>
-            <input matInput formControlName="checkNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Routing Code</mat-label>
-            <input matInput formControlName="routingCode">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Reciept #</mat-label>
-            <input matInput formControlName="receiptNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Bank #</mat-label>
-            <input matInput formControlName="bankNumber">
-          </mat-form-field>
-        </ng-container>
+        <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>
+        </mat-card-actions>
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+      </mat-card-content>
 
-      </div>
+    </form>
 
-      <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>
-      </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,60 +1,66 @@
 <div class="container">
 
-  <form [formGroup]="foreclosureForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="foreclosureForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Transaction Date</mat-label>
-          <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')">
-            Transaction Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Principal</mat-label>
-          <input matInput required formControlName="outstandingPrincipalPortion">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Date</mat-label>
+            <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')">
+              Transaction Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Interest</mat-label>
-          <input matInput required formControlName="outstandingInterestPortion">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Principal</mat-label>
+            <input matInput required formControlName="outstandingPrincipalPortion">
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Fee Amount</mat-label>
-          <input matInput required formControlName="outstandingFeeChargesPortion">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Interest</mat-label>
+            <input matInput required formControlName="outstandingInterestPortion">
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Penalty Amount</mat-label>
-          <input matInput required formControlName="outstandingPenaltyChargesPortion">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Fee Amount</mat-label>
+            <input matInput required formControlName="outstandingFeeChargesPortion">
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Penalty Amount</mat-label>
+            <input matInput required formControlName="outstandingPenaltyChargesPortion">
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="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" [disabled]="!foreclosureForm.valid" *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!foreclosureForm.valid"
+            *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
+        </mat-card-actions>
 
-  </form>
+      </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">
-  <mat-card>
-    <mifosx-loans-account-close [dataObject]="actionButtonData" *ngIf="actions.close"></mifosx-loans-account-close>
-    <mifosx-undo-approval *ngIf="actions.undo_approval"></mifosx-undo-approval>
-    <mifosx-assign-loan-officer *ngIf="actions.assign_loan_officer" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
-    <mifosx-foreclosure *ngIf="actions.foreclosure"></mifosx-foreclosure>
-    <mifosx-prepay-loan [dataObject]="actionButtonData" *ngIf="actions.prepay_loan"></mifosx-prepay-loan>
-    <mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions.make_repayment"></mifosx-make-repayment>
-    <mifosx-waive-interest [dataObject]="actionButtonData" *ngIf="actions.waive_interest"></mifosx-waive-interest>
-    <mifosx-write-off-page [dataObject]="actionButtonData" *ngIf="actions.write_off"></mifosx-write-off-page>
-    <mifosx-close-as-rescheduled [dataObject]="actionButtonData" *ngIf="actions.close_as_rescheduled"></mifosx-close-as-rescheduled>
-    <mifosx-loan-reschedule [dataObject]="actionButtonData" *ngIf="actions.reschedule"></mifosx-loan-reschedule>
-    <mifosx-recovery-repayment [dataObject]="actionButtonData" *ngIf="actions.recovery_payment"></mifosx-recovery-repayment>
-    <mifosx-view-guarantors [dataObject]="actionButtonData" *ngIf="actions.view_guarantors"></mifosx-view-guarantors>
-    <mifosx-create-guarantor [dataObject]="actionButtonData" *ngIf="actions.create_guarantor"></mifosx-create-guarantor>
-    <mifosx-disburse-loan-account [dataObject]="actionButtonData" *ngIf="actions.disburse_to_savings"></mifosx-disburse-loan-account>
-    <mifosx-reject-loan *ngIf="actions.reject"></mifosx-reject-loan>
-    <mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions.disburse"></mifosx-disburse>
-    <mifosx-withdrawn-by-client *ngIf="actions.withdrawn_by_client"></mifosx-withdrawn-by-client>
-    <mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions.add_collateral"></mifosx-add-collateral>
-    <mifosx-undo-disbursal *ngIf="actions.undo_disbursal"></mifosx-undo-disbursal>
-    <mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions.loan_screen_reports"></mifosx-loan-screen-reports>
-    <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>
+<mifosx-loans-account-close [dataObject]="actionButtonData" *ngIf="actions['Close']"></mifosx-loans-account-close>
+<mifosx-undo-approval *ngIf="actions['Undo Approval']"></mifosx-undo-approval>
+<mifosx-assign-loan-officer *ngIf="actions['Assign Loan Officer']" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
+<mifosx-foreclosure *ngIf="actions['Foreclosure']"></mifosx-foreclosure>
+<mifosx-prepay-loan [dataObject]="actionButtonData" *ngIf="actions['Prepay Loan']"></mifosx-prepay-loan>
+<mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions['Make Repayment']"></mifosx-make-repayment>
+<mifosx-waive-interest [dataObject]="actionButtonData" *ngIf="actions['Waive Interest']"></mifosx-waive-interest>
+<mifosx-write-off-page [dataObject]="actionButtonData" *ngIf="actions['Write Off']"></mifosx-write-off-page>
+<mifosx-close-as-rescheduled [dataObject]="actionButtonData" *ngIf="actions['Close (as Rescheduled)']"></mifosx-close-as-rescheduled>
+<mifosx-loan-reschedule [dataObject]="actionButtonData" *ngIf="actions['Reschedule']"></mifosx-loan-reschedule>
+<mifosx-recovery-repayment [dataObject]="actionButtonData" *ngIf="actions['Recovery Payment']"></mifosx-recovery-repayment>
+<mifosx-view-guarantors [dataObject]="actionButtonData" *ngIf="actions['View Guarantors']"></mifosx-view-guarantors>
+<mifosx-create-guarantor [dataObject]="actionButtonData" *ngIf="actions['Create Guarantor']"></mifosx-create-guarantor>
+<mifosx-disburse-loan-account [dataObject]="actionButtonData" *ngIf="actions['Disburse To Savings']"></mifosx-disburse-loan-account>
+<mifosx-reject-loan *ngIf="actions['Reject']"></mifosx-reject-loan>
+<mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions['Disburse']"></mifosx-disburse>
+<mifosx-withdrawn-by-client *ngIf="actions['Withdrawn by Client']"></mifosx-withdrawn-by-client>
+<mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions['Add Collateral']"></mifosx-add-collateral>
+<mifosx-undo-disbursal *ngIf="actions['Undo Disbursal']"></mifosx-undo-disbursal>
+<mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions['Loan Screen Reports']"></mifosx-loan-screen-reports>
+<mifosx-approve-loan *ngIf="actions['Approve']" ></mifosx-approve-loan>
+<mifosx-add-loan-charge *ngIf="actions['Add Loan Charge']"></mifosx-add-loan-charge>

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,
-            undo_approval: boolean,
-            write_off: boolean,
-            add_collateral: boolean,
-            assign_loan_officer: boolean,
-            foreclosure: boolean,
-            prepay_loan: boolean,
-            reject: boolean,
-            disburse_to_savings: boolean,
-            make_repayment: boolean,
-            waive_interest: boolean,
-            close_as_rescheduled: boolean,
-            reschedule: boolean,
-            recovery_payment: boolean,
-            view_guarantors: boolean,
-            create_guarantor: boolean,
-            disburse: boolean,
-            withdrawn_by_client: boolean,
-            undo_disbursal: boolean,
-            loan_screen_reports: boolean,
-            approve: boolean,
-            add_loan_charge: boolean } = {
-              close: false,
-              undo_approval: false,
-              write_off: false,
-              add_collateral: false,
-              assign_loan_officer: false,
-              foreclosure: false,
-              prepay_loan: false,
-              reject: false,
-              disburse_to_savings: false,
-              make_repayment: false,
-              waive_interest: false,
-              close_as_rescheduled: false,
-              reschedule: false,
-              recovery_payment: false,
-              view_guarantors: false,
-              create_guarantor: false,
-              disburse: false,
-              withdrawn_by_client: false,
-              undo_disbursal: false,
-              loan_screen_reports: false,
-              approve: false,
-              add_loan_charge: false };
+  actions: { 'Close': boolean,
+            'Undo Approval': boolean,
+            'Write Off': boolean,
+            'Add Collateral': boolean,
+            'Assign Loan Officer': boolean,
+            'Foreclosure': boolean,
+            'Prepay Loan': boolean,
+            'Reject': boolean,
+            'Disburse To Savings': boolean,
+            'Make Repayment': boolean,
+            'Waive Interest': boolean,
+            'Close (as Rescheduled)': boolean,
+            'Reschedule': boolean,
+            'Recovery Payment': boolean,
+            'View Guarantors': boolean,
+            'Create Guarantor': boolean,
+            'Disburse': boolean,
+            'Withdrawn by Client': boolean,
+            'Undo Disbursal': boolean,
+            'Loan Screen Reports': boolean,
+            'Approve': boolean,
+            'Add Loan Charge': boolean } = {
+              'Close': false,
+              'Undo Approval': false,
+              'Write Off':  false,
+              'Add Collateral':  false,
+              'Assign Loan Officer':  false,
+              'Foreclosure':  false,
+              'Prepay Loan':  false,
+              'Reject':  false,
+              'Disburse To Savings':  false,
+              'Make Repayment':  false,
+              'Waive Interest':  false,
+              'Close (as Rescheduled)':  false,
+              'Reschedule':  false,
+              'Recovery Payment':  false,
+              'View Guarantors':  false,
+              'Create Guarantor':  false,
+              'Disburse':  false,
+              'Withdrawn by Client':  false,
+              'Undo Disbursal':  false,
+              'Loan Screen Reports':  false,
+              'Approve':  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') {
-        this.actionName = 'assign-loan-officer';
+      if (this.actionName === 'Change 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,75 +1,80 @@
 <div class="container">
 
-  <form [formGroup]="rescheduleLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="rescheduleLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Reschedule from Installment On</mat-label>
-          <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')">
-            Reschedule Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Reason for Rescheduling</mat-label>
-          <mat-select formControlName="rescheduleReasonId">
-            <mat-option *ngFor="let rescheduleReasonCode of codes" [value]="rescheduleReasonCode.id">
-              {{ rescheduleReasonCode.name }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleReasonId.hasError('required')">
-            Reason for Rescheduling <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field>
-          <mat-label>Submitted On</mat-label>
-          <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')">
-            Submitted On Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
-
-        <mat-form-field>
-          <mat-label>Comments</mat-label>
-          <textarea matInput formControlName="rescheduleReasonComment"></textarea>
-        </mat-form-field>
-
-        <mat-checkbox [formControl]="changeRepaymentDate"> Change Repayment Date </mat-checkbox>
-
-        <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">
-            <mat-datepicker-toggle matSuffix [for]="installmentrescheduledDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #installmentrescheduledDatePicker></mat-datepicker>
-          </mat-form-field>
-        </ng-container>
-
-        <mat-checkbox [formControl]="introduceGracePeriods">  Introduce Mid-term grace periods   </mat-checkbox>
-        
-        <ng-container *ngIf="introduceGracePeriods.value">
-          <mat-form-field>
-            <mat-label>Principal Grace Periods </mat-label>
-            <input matInput formControlName="graceOnPrincipal">
+            <mat-label>Reschedule from Installment On</mat-label>
+            <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')">
+              Reschedule Date <strong>is required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Interest Grace Periods </mat-label>
-            <input matInput formControlName="graceOnInterest">
+            <mat-label>Reason for Rescheduling</mat-label>
+            <mat-select formControlName="rescheduleReasonId">
+              <mat-option *ngFor="let rescheduleReasonCode of codes" [value]="rescheduleReasonCode.id">
+                {{ rescheduleReasonCode.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="rescheduleLoanForm.controls.rescheduleReasonId.hasError('required')">
+              Reason for Rescheduling <strong>is required</strong>
+            </mat-error>
           </mat-form-field>
-        </ng-container>
 
-        <mat-checkbox [formControl]="extendRepaymentPeriod">  Extend Repayment Period  </mat-checkbox>
-        
+          <mat-form-field>
+            <mat-label>Submitted On</mat-label>
+            <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')">
+              Submitted On Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Comments</mat-label>
+            <textarea matInput formControlName="rescheduleReasonComment"></textarea>
+          </mat-form-field>
+
+          <mat-checkbox [formControl]="changeRepaymentDate"> Change Repayment Date </mat-checkbox>
+
+          <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">
+              <mat-datepicker-toggle matSuffix [for]="installmentrescheduledDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #installmentrescheduledDatePicker></mat-datepicker>
+            </mat-form-field>
+          </ng-container>
+
+          <mat-checkbox [formControl]="introduceGracePeriods"> Introduce Mid-term grace periods </mat-checkbox>
+
+          <ng-container *ngIf="introduceGracePeriods.value">
+            <mat-form-field>
+              <mat-label>Principal Grace Periods </mat-label>
+              <input matInput formControlName="graceOnPrincipal">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Interest Grace Periods </mat-label>
+              <input matInput formControlName="graceOnInterest">
+            </mat-form-field>
+          </ng-container>
+
+          <mat-checkbox [formControl]="extendRepaymentPeriod"> Extend Repayment Period </mat-checkbox>
+
           <ng-container *ngIf="extendRepaymentPeriod.value">
             <mat-form-field>
               <mat-label>Number Of new Repayments</mat-label>
@@ -77,7 +82,7 @@
             </mat-form-field>
           </ng-container>
 
-        <mat-checkbox [formControl]="adjustinterestrates">  Adjust interest rates for remainder of loan  </mat-checkbox>
+          <mat-checkbox [formControl]="adjustinterestrates"> Adjust interest rates for remainder of loan </mat-checkbox>
           <ng-container *ngIf="adjustinterestrates.value">
             <mat-form-field>
               <mat-label>New Interest Rate</mat-label>
@@ -85,15 +90,18 @@
             </mat-form-field>
           </ng-container>
 
-      </div>
+        </div>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid" *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
-      </mat-card-actions>
+        <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>
+        </mat-card-actions>
 
-    </mat-card-content>
+      </mat-card-content>
 
-  </form>
+    </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,35 +1,41 @@
 <div class="container">
 
-  <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Closed On</mat-label>
-          <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')">
-            Closed Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Closed On</mat-label>
+            <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')">
+              Closed Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="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" [disabled]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
+        </mat-card-actions>
 
-  </form>
+      </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,91 +1,97 @@
 <div class="container">
 
-  <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Transaction Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
-          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #transactionDatePicker></mat-datepicker>
-          <mat-error *ngIf="repaymentLoanForm.controls.transactionDate.hasError('required')">
-            Transaction Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="repaymentLoanForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
+              formControlName="transactionDate">
+            <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transactionDatePicker></mat-datepicker>
+            <mat-error *ngIf="repaymentLoanForm.controls.transactionDate.hasError('required')">
+              Transaction Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Payment Type</mat-label>
-          <mat-select formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="repaymentLoanForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Payment Type</mat-label>
+            <mat-select formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <div fxFlexFill>
+            <span fxFlex="25%">Show Payment Details</span>
+            <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+                <i class="fa fa-minus"></i>
+              </button>
+              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+                <i class="fa fa-plus"></i>
+              </button>
+            </span>
+          </div>
+
+          <ng-container *ngIf="showPaymentDetails">
+            <mat-form-field>
+              <mat-label> Account #</mat-label>
+              <input matInput formControlName="accountNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Cheque #</mat-label>
+              <input matInput formControlName="checkNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Routing Code</mat-label>
+              <input matInput formControlName="routingCode">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Reciept #</mat-label>
+              <input matInput formControlName="receiptNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Bank #</mat-label>
+              <input matInput formControlName="bankNumber">
+            </mat-form-field>
+          </ng-container>
+
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="25%">Show Payment Details</span>
-          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
-            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-              <i class="fa fa-minus"></i>
-            </button>
-            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-              <i class="fa fa-plus"></i>
-            </button>
-          </span>
         </div>
 
-        <ng-container *ngIf="showPaymentDetails">
-          <mat-form-field>
-            <mat-label> Account #</mat-label>
-            <input matInput formControlName="accountNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Cheque #</mat-label>
-            <input matInput formControlName="checkNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Routing Code</mat-label>
-            <input matInput formControlName="routingCode">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Reciept #</mat-label>
-            <input matInput formControlName="receiptNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Bank #</mat-label>
-            <input matInput formControlName="bankNumber">
-          </mat-form-field>
-        </ng-container>
+        <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>
+        </mat-card-actions>
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+      </mat-card-content>
 
-      </div>
+    </form>
 
-      <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>
-      </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,104 +1,110 @@
 <div class="container">
 
-  <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Transaction Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
-          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #transactionDatePicker></mat-datepicker>
-          <mat-error *ngIf="prepayLoanForm.controls.transactionDate.hasError('required')">
-            Transaction Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="prepayLoanForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
+              formControlName="transactionDate">
+            <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transactionDatePicker></mat-datepicker>
+            <mat-error *ngIf="prepayLoanForm.controls.transactionDate.hasError('required')">
+              Transaction Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Principal</mat-label>
-          <input matInput formControlName="principal">
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="prepayLoanForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Interest Amount</mat-label>
-          <input matInput required formControlName="interestAmount">
-          <mat-error *ngIf="prepayLoanForm.controls.interestAmount.hasError('required')">
-            Interest Amount <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Principal</mat-label>
+            <input matInput formControlName="principal">
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Payment Type</mat-label>
-          <mat-select formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Interest Amount</mat-label>
+            <input matInput required formControlName="interestAmount">
+            <mat-error *ngIf="prepayLoanForm.controls.interestAmount.hasError('required')">
+              Interest Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Payment Type</mat-label>
+            <mat-select formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <div fxFlexFill>
+            <span fxFlex="25%">Show Payment Details</span>
+            <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+                <i class="fa fa-minus"></i>
+              </button>
+              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+                <i class="fa fa-plus"></i>
+              </button>
+            </span>
+          </div>
+
+          <ng-container *ngIf="showPaymentDetails">
+            <mat-form-field>
+              <mat-label> Account #</mat-label>
+              <input matInput formControlName="accountNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Cheque #</mat-label>
+              <input matInput formControlName="checkNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Routing Code</mat-label>
+              <input matInput formControlName="routingCode">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Reciept #</mat-label>
+              <input matInput formControlName="receiptNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Bank #</mat-label>
+              <input matInput formControlName="bankNumber">
+            </mat-form-field>
+          </ng-container>
+
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="25%">Show Payment Details</span>
-          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
-            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-              <i class="fa fa-minus"></i>
-            </button>
-            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-              <i class="fa fa-plus"></i>
-            </button>
-          </span>
         </div>
 
-        <ng-container *ngIf="showPaymentDetails">
-          <mat-form-field>
-            <mat-label> Account #</mat-label>
-            <input matInput formControlName="accountNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Cheque #</mat-label>
-            <input matInput formControlName="checkNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Routing Code</mat-label>
-            <input matInput formControlName="routingCode">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Reciept #</mat-label>
-            <input matInput formControlName="receiptNumber">
-          </mat-form-field>
-  
-          <mat-form-field>
-            <mat-label>Bank #</mat-label>
-            <input matInput formControlName="bankNumber">
-          </mat-form-field>
-        </ng-container>
+        <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>
+        </mat-card-actions>
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+      </mat-card-content>
 
-      </div>
+    </form>
 
-      <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>
-      </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,93 +1,97 @@
 <div class="container">
 
-  <form [formGroup]="recoveryRepaymentLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="recoveryRepaymentLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Transaction Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-            formControlName="transactionDate">
-          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #transactionDatePicker></mat-datepicker>
-          <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionDate.hasError('required')">
-            Transaction Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Transaction Amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
+              formControlName="transactionDate">
+            <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #transactionDatePicker></mat-datepicker>
+            <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionDate.hasError('required')">
+              Transaction Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>Payment Type</mat-label>
-          <mat-select formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Transaction Amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="recoveryRepaymentLoanForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Payment Type</mat-label>
+            <mat-select formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <div fxFlexFill>
+            <span fxFlex="25%">Show Payment Details</span>
+            <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+                <i class="fa fa-minus"></i>
+              </button>
+              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+                <i class="fa fa-plus"></i>
+              </button>
+            </span>
+          </div>
+
+          <ng-container *ngIf="showPaymentDetails">
+            <mat-form-field>
+              <mat-label> Account #</mat-label>
+              <input matInput formControlName="accountNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Cheque #</mat-label>
+              <input matInput formControlName="checkNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Routing Code</mat-label>
+              <input matInput formControlName="routingCode">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Reciept #</mat-label>
+              <input matInput formControlName="receiptNumber">
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Bank #</mat-label>
+              <input matInput formControlName="bankNumber">
+            </mat-form-field>
+          </ng-container>
+
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="25%">Show Payment Details</span>
-          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
-            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-              <i class="fa fa-minus"></i>
-            </button>
-            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-              <i class="fa fa-plus"></i>
-            </button>
-          </span>
         </div>
 
-        <ng-container *ngIf="showPaymentDetails">
-          <mat-form-field>
-            <mat-label> Account #</mat-label>
-            <input matInput formControlName="accountNumber">
-          </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" [disabled]="!recoveryRepaymentLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+        </mat-card-actions>
 
-          <mat-form-field>
-            <mat-label>Cheque #</mat-label>
-            <input matInput formControlName="checkNumber">
-          </mat-form-field>
+      </mat-card-content>
 
-          <mat-form-field>
-            <mat-label>Routing Code</mat-label>
-            <input matInput formControlName="routingCode">
-          </mat-form-field>
+    </form>
 
-          <mat-form-field>
-            <mat-label>Reciept #</mat-label>
-            <input matInput formControlName="receiptNumber">
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Bank #</mat-label>
-            <input matInput formControlName="bankNumber">
-          </mat-form-field>
-        </ng-container>
-
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
-
-      </div>
-
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
-          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-      </mat-card-actions>
-
-    </mat-card-content>
-
-  </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,35 +1,41 @@
 <div class="container">
 
-  <form [formGroup]="rejectLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="rejectLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Rejected On</mat-label>
-          <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')">
-            Rejected Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Rejected On</mat-label>
+            <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')">
+              Rejected Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="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" [disabled]="!rejectLoanForm.valid" *mifosxHasPermission="'REJECT_LOAN'" >Submit</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!rejectLoanForm.valid"
+            *mifosxHasPermission="'REJECT_LOAN'">Submit</button>
+        </mat-card-actions>
 
-  </form>
+      </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-content>
+  <mat-card>
 
-    <mat-form-field fxLayoutAlign="center">
-      <mat-label>Note</mat-label>
-      <textarea matInput [formControl]="note"></textarea>
-    </mat-form-field>
+    <mat-card-content>
+
+      <mat-form-field fxFlex>
+        <mat-label>Note</mat-label>
+        <textarea matInput [formControl]="note"></textarea>
+      </mat-form-field>
+
+    </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>
+      <button mat-raised-button color="primary" (click)="submit()"
+        *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
     </mat-card-actions>
 
-  </mat-card-content>
+  </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-content>
+  <mat-card>
 
-    <mat-form-field fxLayoutAlign="center">
-      <mat-label>Note</mat-label>
-      <textarea matInput [formControl]="note"></textarea>
-    </mat-form-field>
+    <mat-card-content>
+
+      <mat-form-field fxFlex>
+        <mat-label>Note</mat-label>
+        <textarea matInput [formControl]="note"></textarea>
+      </mat-form-field>
+
+    </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>
+      <button mat-raised-button color="primary" (click)="submit()"
+        *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
     </mat-card-actions>
 
-  </mat-card-content>
+  </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,174 +1,186 @@
-<div class="viewGuarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
+<div class="container">
 
-  <div fxFlex="49%">
-    <table>
-      <tbody>
-        <tr>
-          <td>Disbursement Date</td>
-          <td>{{dataObject.timeline.actualDisbursementDate}}<span
-              *ngIf="!dataObject.timeline.actualDisbursementDate">Not Available</span></td>
-        </tr>
-        <tr>
-          <td>Currency</td>
-          <td>{{dataObject.currency.name}}</td>
-        </tr>
-        <tr>
-          <td>Loan Officer</td>
-          <td>{{dataObject.loanOfficerName}} <span *ngIf="!dataObject.loanOfficerName">Unassigned</span>
-            <span *ngIf="dataObject.loanOfficerName">
-              <fa-icon icon="times"></fa-icon>
-            </span></td>
-        </tr>
-        <tr>
-          <td>External Id</td>
-          <td>{{dataObject.externalId}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <mat-card>
 
-  <div fxFlex="49%">
-    <table>
-      <tbody>
-        <tr>
-          <td>Loan Purpose</td>
-          <td>
-            {{dataObject.loanPurposeName}} <span *ngIf="!dataObject.loanPurposeName"> Not Provided </span>
-          </td>
-        </tr>
-        <tr>
-          <td>Approved Amount</td>
-          <td>
-            <span>{{dataObject.approvedPrincipal | number}}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>Disburse Amount</td>
-          <td>
-            <span>{{dataObject.principal | number}}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>Arrears By</td>
-          <td>{{dataObject.summary.totalOverdue | number}}
-            <span *ngIf="dataObject.summary.totalOverdue < 0">Not Provided</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+    <div class="viewGuarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
 
-<div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
+      <div fxFlex="49%">
+        <table>
+          <tbody>
+            <tr>
+              <td>Disbursement Date</td>
+              <td>{{dataObject.timeline.actualDisbursementDate}}<span
+                  *ngIf="!dataObject.timeline.actualDisbursementDate">Not Available</span></td>
+            </tr>
+            <tr>
+              <td>Currency</td>
+              <td>{{dataObject.currency.name}}</td>
+            </tr>
+            <tr>
+              <td>Loan Officer</td>
+              <td>{{dataObject.loanOfficerName}} <span *ngIf="!dataObject.loanOfficerName">Unassigned</span>
+                <span *ngIf="dataObject.loanOfficerName">
+                  <fa-icon icon="times"></fa-icon>
+                </span></td>
+            </tr>
+            <tr>
+              <td>External Id</td>
+              <td>{{dataObject.externalId}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-  <!-- guarantors details table -->
-  <div class="headingContent">
-    <div fxLayout="column" fxFlex="50%">
-      <div class="headingName">
-        <h3>Guarantors Details</h3>
+      <div fxFlex="49%">
+        <table>
+          <tbody>
+            <tr>
+              <td>Loan Purpose</td>
+              <td>
+                {{dataObject.loanPurposeName}} <span *ngIf="!dataObject.loanPurposeName"> Not Provided </span>
+              </td>
+            </tr>
+            <tr>
+              <td>Approved Amount</td>
+              <td>
+                <span>{{dataObject.approvedPrincipal | number}}</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Disburse Amount</td>
+              <td>
+                <span>{{dataObject.principal | number}}</span>
+              </td>
+            </tr>
+            <tr>
+              <td>Arrears By</td>
+              <td>{{dataObject.summary.totalOverdue | number}}
+                <span *ngIf="dataObject.summary.totalOverdue < 0">Not Provided</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
-    <div fxLayout="column" fxFlex="50%">
-      <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button class="f-right" color="primary"
-          (click)="toggleGuarantorsDetailsOverview()">{{showDeletedGuarantorsAccounts?'Hide Deleted Guarantors':'Show Deleted Guarantors'}}</button>
+
+    <div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
+
+      <!-- guarantors details table -->
+      <div class="headingContent">
+        <div fxLayout="column" fxFlex="50%">
+          <div class="headingName">
+            <h3>Guarantors Details</h3>
+          </div>
+        </div>
+        <div fxLayout="column" fxFlex="50%">
+          <div fxLayout="row" fxLayoutAlign="flex-end">
+            <button mat-raised-button class="f-right" color="primary"
+              (click)="toggleGuarantorsDetailsOverview()">{{showDeletedGuarantorsAccounts?'Hide Deleted Guarantors':'Show Deleted Guarantors'}}</button>
+          </div>
+        </div>
       </div>
+
+      <table fxFlexFill mat-table
+        [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
+        <!-- <ng-container *ngIf="expression"> -->
+        <ng-container matColumnDef="fullname">
+          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+              {{guarantor.firstname}} &nbsp; {{guarantor.lastname}}
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="relationship">
+          <th mat-header-cell *matHeaderCellDef> Relationship </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+              {{guarantor.clientRelationshipType.name}}
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="guarantortype">
+          <th mat-header-cell *matHeaderCellDef> Guarantor Type </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+              {{guarantor.guarantorType.value}}
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="depositAccount">
+          <th mat-header-cell *matHeaderCellDef> Deposit Account </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="remainingAmount">
+          <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef> Status </th>
+          <td mat-cell *matCellDef="let guarantor">
+            <span *ngIf="!guarantor.guarantorFundingDetails">
+              <span *ngIf="guarantor.status">
+                Active
+              </span>
+              <span *ngIf="!guarantor.status">
+                Deleted
+              </span>
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <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)">
+                <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">
+                <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)">
+                  <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                </button>
+              </span>
+            </span>
+          </td>
+        </ng-container>
+        <!-- </ng-container> -->
+
+
+        <tr mat-header-row *matHeaderRowDef="guarantorsDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: guarantorsDisplayedColumns"></tr>
+
+      </table>
     </div>
-  </div>
 
-  <table fxFlexFill mat-table [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
-    <!-- <ng-container *ngIf="expression"> -->
-    <ng-container matColumnDef="fullname">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-          {{guarantor.firstname}} &nbsp; {{guarantor.lastname}}
-        </span>
-      </td>
-    </ng-container>
+  </mat-card>
 
-    <ng-container matColumnDef="relationship">
-      <th mat-header-cell *matHeaderCellDef> Relationship </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-          {{guarantor.clientRelationshipType.name}}
-        </span>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="guarantortype">
-      <th mat-header-cell *matHeaderCellDef> Guarantor Type </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-          {{guarantor.guarantorType.value}}
-        </span>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="depositAccount">
-      <th mat-header-cell *matHeaderCellDef> Deposit Account </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-
-        </span>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-
-        </span>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="remainingAmount">
-      <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-
-        </span>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status </th>
-      <td mat-cell *matCellDef="let guarantor">
-        <span *ngIf="!guarantor.guarantorFundingDetails">
-          <span *ngIf="guarantor.status">
-            Active
-          </span>
-          <span *ngIf="!guarantor.status">
-            Deleted
-          </span>
-        </span>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="action">
-      <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)">
-            <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">
-            <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)">
-            <fa-icon icon="trash" ></fa-icon>&nbsp;&nbsp;
-          </button>
-          </span>
-        </span>
-      </td>
-    </ng-container>
-    <!-- </ng-container> -->
-
-
-    <tr mat-header-row *matHeaderRowDef="guarantorsDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: guarantorsDisplayedColumns"></tr>
-
-  </table>
 </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,43 +1,49 @@
 <div class="container">
 
-  <form [formGroup]="loanInterestForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="loanInterestForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Interest waived on</mat-label>
-          <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')">
-            Interest Date is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
-    
-        <mat-form-field>
-          <mat-label>Transaction amount</mat-label>
-          <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="loanInterestForm.controls.transactionAmount.hasError('required')">
-            Transaction Amount is <strong>required</strong>
-          </mat-error>
-        </mat-form-field>
-    
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+        <div fxLayout="column">
 
-      </div>
+          <mat-form-field>
+            <mat-label>Interest waived on</mat-label>
+            <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')">
+              Interest Date is <strong>required</strong>
+            </mat-error>
+          </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" [disabled]="!loanInterestForm.valid" *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
-      </mat-card-actions>
+          <mat-form-field>
+            <mat-label>Transaction amount</mat-label>
+            <input matInput required formControlName="transactionAmount">
+            <mat-error *ngIf="loanInterestForm.controls.transactionAmount.hasError('required')">
+              Transaction Amount is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-    </mat-card-content>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
 
-  </form>
+        </div>
+
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!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,35 +1,41 @@
 <div class="container">
 
-  <form [formGroup]="withdrawnByClientLoanForm" (ngSubmit)="submit()">
+  <mat-card>
 
-    <mat-card-content>
+    <form [formGroup]="withdrawnByClientLoanForm" (ngSubmit)="submit()">
 
-      <div fxLayout="column">
+      <mat-card-content>
 
-        <mat-form-field>
-          <mat-label>Withdrawn On</mat-label>
-          <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')">
-            Withdrawn On Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
+        <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>Withdrawn On</mat-label>
+            <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')">
+              Withdrawn On Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-      </div>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="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" [disabled]="!withdrawnByClientLoanForm.valid" *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
-      </mat-card-actions>
+        </div>
 
-    </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" [disabled]="!withdrawnByClientLoanForm.valid"
+            *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
+        </mat-card-actions>
 
-  </form>
+      </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,40 +1,46 @@
 <div class="container">
 
-  <mat-card-content>
+  <mat-card>
 
-    <form [formGroup]="writeOffForm" (ngSubmit)="submit()">
+    <mat-card-content>
 
-      <div fxLayout="column">
+      <form [formGroup]="writeOffForm" (ngSubmit)="submit()">
 
-        <mat-form-field>
-          <mat-label>Write off on</mat-label>
-          <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')">
-            Write Off Date <strong>is required</strong>
-          </mat-error>
-        </mat-form-field>
-  
-        <mat-form-field>
-          <mat-label>Amount</mat-label>
-          <input matInput formControlName="amount">
-        </mat-form-field>
-  
-        <mat-form-field>
-          <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
-        </mat-form-field>
-        
-      </div>
+        <div fxLayout="column">
 
-    </form>
+          <mat-form-field>
+            <mat-label>Write off on</mat-label>
+            <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')">
+              Write Off Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-      <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
-    </mat-card-actions>
+          <mat-form-field>
+            <mat-label>Amount</mat-label>
+            <input matInput formControlName="amount">
+          </mat-form-field>
 
-  </mat-card-content>
+          <mat-form-field>
+            <mat-label>Note</mat-label>
+            <textarea matInput formControlName="note"></textarea>
+          </mat-form-field>
+
+        </div>
+
+      </form>
+
+      <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="'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.loanDetails = data.loanDetailsAssociationData;
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      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.loanDetails = data.loanDetailsAssociationData;
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      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.originalScheduleDetails = data.loanDetailsAssociationData.originalSchedule;
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      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.repaymentScheduleDetails = data.loanDetailsAssociationData.repaymentSchedule;
+    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      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.transactions = data.loanDetailsAssociationData.transactions;
-      this.tempTransaction = data.loanDetailsAssociationData.transactions;
-      this.status = data.loanDetailsAssociationData.status.value;
+    this.route.parent.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      this.transactions = data.loanDetailsData.transactions;
+      this.tempTransaction = data.loanDetailsData.transactions;
+      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.loansAccountId = data.loanDetailsAssociationData.accountNo;
+    this.route.parent.parent.data.subscribe((data: { loanDetailsData: any }) => {
+      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">