Enhancement in loan and savings account views (#1690)

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

src/app/loans/common-resolvers/glim-loan-template.resolver.ts

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

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

@@ -24,7 +24,7 @@ export class LoanActionButtonResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanId = route.parent.paramMap.get('loanId');
+    const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
     const loanActionButton = route.paramMap.get('action');
     if (loanActionButton === 'Assign Loan Officer' || loanActionButton === 'Change Loan Officer') {
       return this.loansService.getLoanTemplate(loanId);

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

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

src/app/loans/common-resolvers/loan-delinquency-tags.resolver.ts

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

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

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

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

@@ -24,8 +24,8 @@ 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') || route.parent.parent.paramMap.get('loanId');
-        return this.loansService.getLoanAccountAssociationDetails(loanId);
+      const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+      return this.loansService.getLoanAccountAssociationDetails(loanId);
     }
 
 }

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

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

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

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

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

@@ -22,8 +22,8 @@ export class LoanReschedulesResolver implements Resolve<boolean> {
      * @returns {Observable<any>}
      */
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanId = route.parent.paramMap.get('loanId');
-        return this.loansService.loanRescheduleRequests(loanId);
+      const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+      return this.loansService.loanRescheduleRequests(loanId);
     }
 
 }

src/app/loans/common-resolvers/loans-account-and-template.resolver.ts

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

src/app/loans/common-resolvers/loans-account-charge.resolver.ts

@@ -25,9 +25,9 @@ export class LoansAccountChargeResolver implements Resolve<Object> {
      * @returns {Observable<any>}
      */
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanAccountId = route.parent.parent.paramMap.get('loanId');
-        const chargeId = route.paramMap.get('id');
-        return this.loansService.getLoansAccountCharge(loanAccountId, chargeId);
+      const loanId = route.paramMap.get('loanId');
+      const chargeId = route.paramMap.get('id');
+      return this.loansService.getLoansAccountCharge(loanId, chargeId);
     }
 
 }

src/app/loans/common-resolvers/loans-account-transaction-template.resolver.ts

@@ -25,9 +25,9 @@ export class LoansAccountTransactionTemplateResolver implements Resolve<Object>
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanAccountId = route.parent.parent.parent.paramMap.get('loanId');
+    const loanId = route.paramMap.get('loanId');
     const transactionId = route.paramMap.get('id');
-    return this.loansService.getLoansAccountTransactionTemplate(loanAccountId, transactionId);
+    return this.loansService.getLoansAccountTransactionTemplate(loanId, transactionId);
   }
 
 }

src/app/loans/common-resolvers/loans-account-transaction.resolver.ts

@@ -25,9 +25,9 @@ export class LoansAccountTransactionResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanAccountId = route.parent.parent.parent.paramMap.get('loanId');
+    const loanId = route.paramMap.get('loanId');
     const transactionId = route.paramMap.get('id');
-    return this.loansService.getLoansAccountTransaction(loanAccountId, transactionId);
+    return this.loansService.getLoansAccountTransaction(loanId, transactionId);
   }
 
 }

src/app/loans/edit-loans-account/edit-loans-account.component.ts

@@ -48,7 +48,7 @@ export class EditLoansAccountComponent implements OnInit {
     this.route.data.subscribe((data: { loansAccountAndTemplate: any }) => {
       this.loansAccountAndTemplate = data.loansAccountAndTemplate;
     });
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {

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

@@ -55,6 +55,7 @@ import { LoanDelinquencyTagsResolver } from './common-resolvers/loan-delinquency
 import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
 import { LoanReschedulesResolver } from './common-resolvers/loan-reschedules.resolver';
 import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/reschedule-loan-tab.component';
+import { AdjustLoanChargeComponent } from './loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -73,246 +74,253 @@ const routes: Routes = [
       {
         path: ':loanId',
         data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
+        component: LoansViewComponent,
+        resolve: {
+          loanDetailsData: LoanDetailsResolver,
+          loanDatatables: LoanDatatablesResolver
+        },
         children: [
           {
             path: '',
-            component: LoansViewComponent,
+            redirectTo: 'general',
+            pathMatch: 'full'
+          },
+          {
+            path: 'general',
+            component: GeneralTabComponent,
+            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
             resolve: {
               loanDetailsData: LoanDetailsResolver,
               loanDatatables: LoanDatatablesResolver
             },
-            children: [
-              {
-                path: '',
-                redirectTo: 'general',
-                pathMatch: 'full'
-              },
-              {
-                path: 'general',
-                component: GeneralTabComponent,
-                data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-              },
-              {
-                path: 'accountdetail',
-                component: AccountDetailsComponent,
-                data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-              },
-              {
-                path: 'original-schedule',
-                component: OriginalScheduleTabComponent,
-                data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-              },
-              {
-                path: 'repayment-schedule',
-                component: RepaymentScheduleTabComponent,
-                data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
-              },
-              {
-                path: 'transactions',
-                data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-                children: [
-                  {
-                    path: '',
-                    component: TransactionsTabComponent
-
-                  },
-                  {
-                    path: 'export',
-                    component: ExportTransactionsComponent
-                  }
-                ]
-              },
-              {
-                path: 'delinquencytags',
-                data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
-                resolve: {
-                  loanDelinquencyTagsData: LoanDelinquencyTagsResolver
-                },
-                children: [
-                  {
-                    path: '',
-                    component: LoanDelinquencyTagsTabComponent
-                  },
-                ]
-              },
-              {
-                path: 'loan-reschedules',
-                data: {},
-                resolve: {
-                  loanRescheduleData: LoanReschedulesResolver
-                },
-                children: [
-                  {
-                    path: '',
-                    component: RescheduleLoanTabComponent
-                  }
-                ]
-              },
-              {
-                path: 'loan-collateral',
-                component: LoanCollateralTabComponent,
-                data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-              },
-              {
-                path: 'loan-tranche-details',
-                component: LoanTrancheDetailsComponent,
-                data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-              },
-              {
-                path: 'overdue-charges',
-                component: OverdueChargesTabComponent,
-                data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-              },
-              {
-                path: 'floating-interest-rates',
-                component: FloatingInterestRatesComponent,
-                data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
-              },
-              {
-                path: 'charges',
-                data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-                component: ChargesTabComponent,
-              },
-              {
-                path: 'loan-documents',
-                component: LoanDocumentsTabComponent,
-                data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-                resolve: {
-                  loanDocuments: LoanDocumentsResolver
-                },
-              },
-              {
-                path: 'notes',
-                component: NotesTabComponent,
-                data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-                resolve: {
-                  loanNotes: LoanNotesResolver
-                },
-              },
-              {
-                path: 'standing-instruction',
-                component: StandingInstructionsTabComponent,
-                data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-              },
-              {
-                path: 'datatables',
-                children: [{
-                  path: ':datatableName',
-                  component: DatatableTabComponent,
-                  data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-                  resolve: {
-                    loanDatatable: LoanDatatableResolver
-                  }
-                }]
-              },
-            ],
+          },
+          {
+            path: 'accountdetail',
+            component: AccountDetailsComponent,
+            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'original-schedule',
+            component: OriginalScheduleTabComponent,
+            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'repayment-schedule',
+            component: RepaymentScheduleTabComponent,
+            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
           },
           {
             path: 'transactions',
             data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            children: [
+              {
+                path: '',
+                component: TransactionsTabComponent
+
+              },
+              {
+                path: 'export',
+                component: ExportTransactionsComponent
+              }
+            ]
+          },
+          {
+            path: 'delinquencytags',
+            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
             resolve: {
-              loanDetailsAssociationData: LoanDetailsResolver
+              loanDelinquencyTagsData: LoanDelinquencyTagsResolver
             },
             children: [
               {
                 path: '',
-                redirectTo: '../transactions', pathMatch: 'prefix'
+                component: LoanDelinquencyTagsTabComponent
               },
+            ]
+          },
+          {
+            path: 'loan-reschedules',
+            data: {},
+            resolve: {
+              loanRescheduleData: LoanReschedulesResolver
+            },
+            children: [
               {
-                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: '',
+                component: RescheduleLoanTabComponent
               }
             ]
           },
+          {
+            path: 'loan-collateral',
+            component: LoanCollateralTabComponent,
+            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'loan-tranche-details',
+            component: LoanTrancheDetailsComponent,
+            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+          },
+          {
+            path: 'overdue-charges',
+            component: OverdueChargesTabComponent,
+            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'floating-interest-rates',
+            component: FloatingInterestRatesComponent,
+            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+          },
           {
             path: 'charges',
             data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-            children: [
-              {
-                path: '',
-                redirectTo: '../charges', pathMatch: 'prefix'
-              },
-              {
-                path: ':id',
-                data: { routeParamBreadcrumb: 'id' },
-                component: ViewChargeComponent,
-                resolve: {
-                  loansAccountCharge: LoansAccountChargeResolver,
-                  loanDetailsData: LoanDetailsResolver
-                }
+            component: ChargesTabComponent,
+          },
+          {
+            path: 'loan-documents',
+            component: LoanDocumentsTabComponent,
+            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+            resolve: {
+              loanDocuments: LoanDocumentsResolver
+            },
+          },
+          {
+            path: 'notes',
+            component: NotesTabComponent,
+            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+            resolve: {
+              loanNotes: LoanNotesResolver
+            },
+          },
+          {
+            path: 'standing-instruction',
+            component: StandingInstructionsTabComponent,
+            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+          },
+          {
+            path: 'datatables',
+            children: [{
+              path: ':datatableName',
+              component: DatatableTabComponent,
+              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+              resolve: {
+                loanDatatable: LoanDatatableResolver
               }
-            ]
+            }]
           },
+        ],
+      },
+      {
+        path: ':loanId/transactions/:id',
+        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'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+            path: '',
+            data: { routeParamBreadcrumb: 'id' },
+            component: ViewTransactionComponent,
             resolve: {
-              actionButtonData: LoanActionButtonResolver
+              loansAccountTransaction: LoansAccountTransactionResolver
             }
           },
           {
-            path: 'transfer-funds',
-            loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
-          },
-          {
-            path: 'edit-loans-account',
-            data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
-            component: EditLoansAccountComponent,
+            path: 'edit',
+            component: EditTransactionComponent,
+            data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
             resolve: {
-              loansAccountAndTemplate: LoansAccountAndTemplateResolver
+              loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
             }
           },
+          {
+            path: 'reciept',
+            component: ViewRecieptComponent,
+            data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+            resolve: {
+              loansTransactionReciept: LoansTransactionRecieptResolver
+            }
+          }
         ]
       },
       {
-        path: 'glim-account',
+        path: ':loanId/edit-loans-account',
+        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+        component: EditLoansAccountComponent,
+        resolve: {
+          loansAccountAndTemplate: LoansAccountAndTemplateResolver
+        }
+      },
+      {
+        path: ':loanId/charges',
+        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
         children: [
           {
-            path: 'create',
-            data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
-            component: CreateGlimAccountComponent,
-            resolve: {
-              loansAccountTemplate: GLIMLoanTemplateResolver,
-              gsimData: GSIMAccountsResolver,
-              groupsData: GroupViewResolver,
-            },
+            path: '',
+            redirectTo: '../charges', pathMatch: 'prefix'
           },
           {
-            path: ':glimId',
-            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
-            component: GlimAccountComponent,
+            path: ':id',
+            data: { routeParamBreadcrumb: 'id' },
+            component: ViewChargeComponent,
             resolve: {
-              glimData: GLIMViewResolver,
-              groupsData: GroupAccountsResolver
-            },
+              loansAccountCharge: LoansAccountChargeResolver,
+              loanDetailsData: LoanDetailsResolver
+            }
+          },
+          {
+            path: ':id/adjustment',
+            data: { routeParamBreadcrumb: 'id', breadcrumb: 'Adjustment' },
+            component: AdjustLoanChargeComponent,
+            resolve: {
+              loansAccountCharge: LoansAccountChargeResolver,
+              loanDetailsData: LoanDetailsResolver
+            }
           }
         ]
+      },
+      {
+        path: ':loanId/actions/:action',
+        component: LoanAccountActionsComponent,
+        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', 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('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+        component: EditLoansAccountComponent,
+        resolve: {
+          loansAccountAndTemplate: LoansAccountAndTemplateResolver
+        }
+      },
+    ]
+  },
+  {
+    path: 'glim-account',
+    children: [
+      {
+        path: 'create',
+        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
+        component: CreateGlimAccountComponent,
+        resolve: {
+          loansAccountTemplate: GLIMLoanTemplateResolver,
+          gsimData: GSIMAccountsResolver,
+          groupsData: GroupViewResolver,
+        },
+      },
+      {
+        path: ':glimId',
+        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+        component: GlimAccountComponent,
+        resolve: {
+          glimData: GLIMViewResolver,
+          groupsData: GroupAccountsResolver
+        },
       }
     ]
   }

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

@@ -1,83 +1,93 @@
 <div class="tab-container">
 
-    <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort>
 
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
-      </ng-container>
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let charge"> {{ charge.name }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="feepenalty">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Fee/Penalty </th>
-        <td mat-cell *matCellDef="let charge">
-          <span *ngIf="charge.penalty">Penalty</span>
-          <span *ngIf="!charge.penalty">Fee</span>
-        </td>
-      </ng-container>
+    <ng-container matColumnDef="feepenalty">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Fee/Penalty </th>
+      <td mat-cell *matCellDef="let charge">
+        <span *ngIf="charge.penalty">Penalty</span>
+        <span *ngIf="!charge.penalty">Fee</span>
+      </td>
+    </ng-container>
 
-      <ng-container matColumnDef="paymentdueat">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Payment due at </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
-      </ng-container>
+    <ng-container matColumnDef="paymentdueat">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Payment due at </th>
+      <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="dueDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
-      </ng-container>
+    <ng-container matColumnDef="dueDate">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
+      <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="calculationtype">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Calculation Type </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
-      </ng-container>
+    <ng-container matColumnDef="calculationtype">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Calculation Type </th>
+      <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="due">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
-        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }} {{ charge.amount| number }} </td>
-      </ng-container>
+    <ng-container matColumnDef="due">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
+      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }} {{ charge.amount|
+        number }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="paid">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
-        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
-      </ng-container>
+    <ng-container matColumnDef="paid">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
+      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid|
+        number }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
-        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
-      </ng-container>
+    <ng-container matColumnDef="waived">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
+      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived|
+        number }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="outstanding">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
-        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
-      </ng-container>
+    <ng-container matColumnDef="outstanding">
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
+      <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{
+        charge.amountOutstanding| number }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
-        <td mat-cell class="center" *matCellDef="let charge">
-          <span *ngIf="status === 'Submitted and pending approval'">
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
-              (click)="routeEdit($event); editCharge(charge)">
-              <i class="fa fa-pencil"></i>
-            </button>
-            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
-              (click)="routeEdit($event); deleteCharge(charge.id)">
-              <i class="fa fa-trash"></i>
-            </button>
-          </span>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge" *ngIf="charge.chargePayable && !charge.paid && status=='Active'"
-               (click)="routeEdit($event); payCharge(charge.id)">
-              <i class="fa fa-dollar"></i>
-            </button>
-            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge" *ngIf="!charge.actionFlag"
-              (click)="routeEdit($event); waiveCharge(charge.id)">
-              <i class="fa fa-flag"></i>
-            </button>
-        </td>
-      </ng-container>
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
+      <td mat-cell class="center" *matCellDef="let charge">
+        <span *ngIf="status === 'Submitted and pending approval'">
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
+            (click)="routeEdit($event); editCharge(charge)">
+            <i class="fa fa-pencil"></i>
+          </button>
+          <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
+            (click)="routeEdit($event); deleteCharge(charge.id)">
+            <i class="fa fa-trash"></i>
+          </button>
+        </span>
+        <button class="account-action-button" mat-raised-button color="accent" matTooltip="Adjust Charge"
+          *ngIf="!charge.paid && status=='Active'"
+          (click)="routeEdit($event); adjustCharge(charge.id)">
+          <i class="fa fa-pencil"></i>
+        </button>
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
+          *ngIf="charge.chargePayable && !charge.paid && status=='Active'"
+          (click)="routeEdit($event); payCharge(charge.id)">
+          <i class="fa fa-dollar"></i>
+        </button>
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
+          *ngIf="!charge.actionFlag" (click)="routeEdit($event); waiveCharge(charge.id)">
+          <i class="fa fa-flag"></i>
+        </button>
+      </td>
+    </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
-    </table>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+  </table>
 
-    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
 </div>

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

@@ -60,7 +60,6 @@ export class ChargesTabComponent implements OnInit {
     });
   }
 
-
   ngOnInit() {
     this.chargesData = this.loanDetails.charges;
     this.status = this.loanDetails.status.value;
@@ -78,6 +77,14 @@ export class ChargesTabComponent implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
+  /**
+   * Asjust the Loan charge.
+   * @param {any} chargeId Charge Id
+   */
+  adjustCharge(chargeId: string) {
+    this.router.navigate([`${chargeId}/adjustment`], { relativeTo: this.route });
+  }
+
   /**
    * Pays the charge.
    * @param {any} chargeId Charge Id

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

@@ -58,7 +58,7 @@ export class AddCollateralComponent implements OnInit {
     this.collateralForm.patchValue({
       'collateralTypeId': collateralTypeId
     });
-    const loanId = this.route.parent.snapshot.params['loanId'];
+    const loanId = this.route.snapshot.params['loanId'];
     const collateralForm = this.collateralForm.value;
     collateralForm.locale = 'en';
     this.loanService.createLoanCollateral(loanId, collateralForm).subscribe((response: any) => {

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

@@ -60,7 +60,7 @@ export class AddLoanChargeComponent implements OnInit {
     this.route.data.subscribe((data: { actionButtonData: any }) => {
       this.loanChargeOptions = data.actionButtonData.chargeOptions;
     });
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   /**

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

@@ -0,0 +1,91 @@
+<div class="container mat-elevation-z8">
+
+  <mat-card>
+
+    <form [formGroup]="adjustLoanChargeForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field appearance="fill">
+            <mat-label>Amount</mat-label>
+            <span matTextSuffix class="m-l-10">{{ loanDetailsData.currency.code }}</span>
+            <span fxFlex="auto"></span>
+            <input type="number" matInput required class="right-input" formControlName="amount">
+            <mat-error *ngIf="adjustLoanChargeForm.controls.amount.hasError('required')">
+              Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>External Id</mat-label>
+            <input matInput formControlName="externalId">
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>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="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle>
+                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">Show Payment Details</span>
+                </div>
+              </mat-slide-toggle>
+            </span>
+          </div>
+
+          <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" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          </mat-form-field>
+
+        </div>
+
+        <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]="!adjustLoanChargeForm.valid"
+            *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'">Submit</button>
+        </mat-card-actions>
+
+      </mat-card-content>
+
+    </form>
+
+  </mat-card>
+
+</div>

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

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

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

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

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

@@ -0,0 +1,116 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LoansService } from 'app/loans/loans.service';
+import { OrganizationService } from 'app/organization/organization.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-adjust-loan-charge',
+  templateUrl: './adjust-loan-charge.component.html',
+  styleUrls: ['./adjust-loan-charge.component.scss']
+})
+export class AdjustLoanChargeComponent implements OnInit {
+  /** Loan Id */
+  loanId: string;
+  chargeId: string;
+
+  /** Payment Type Options */
+  paymentTypes: any = [];
+  chargeData: any = [];
+  loanDetailsData: any = [];
+
+  /** Show payment details */
+  showPaymentDetails = false;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Repayment Loan Form */
+  adjustLoanChargeForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loanService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private settingsService: SettingsService,
+    private organizationService: OrganizationService) {
+      this.loanId = this.route.snapshot.params['loanId'];
+      this.chargeId = this.route.snapshot.params['id'];
+      this.route.data.subscribe((data: { loansAccountCharge: any, loanDetailsData: any }) => {
+        this.chargeData = data.loansAccountCharge;
+        this.loanDetailsData = data.loanDetailsData;
+      });
+    }
+
+  /**
+   * Creates the repayment loan form
+   * and initialize with the required values
+   */
+  ngOnInit() {
+    this.maxDate = this.settingsService.maxAllowedDate;
+    this.createAdjustLoanChargeForm();
+    this.setRepaymentLoanDetails();
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createAdjustLoanChargeForm() {
+    this.adjustLoanChargeForm = this.formBuilder.group({
+      'amount': [this.chargeData.amount, Validators.required],
+      'externalId': '',
+      'paymentTypeId': '',
+      'note': ''
+    });
+  }
+
+  setRepaymentLoanDetails() {
+    this.organizationService.getPaymentTypes().subscribe((paymentTypes: any) => {
+      this.paymentTypes = paymentTypes;
+    });
+  }
+
+  /**
+   * Add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
+      this.adjustLoanChargeForm.addControl('accountNumber', new FormControl(''));
+      this.adjustLoanChargeForm.addControl('checkNumber', new FormControl(''));
+      this.adjustLoanChargeForm.addControl('routingCode', new FormControl(''));
+      this.adjustLoanChargeForm.addControl('receiptNumber', new FormControl(''));
+      this.adjustLoanChargeForm.addControl('bankNumber', new FormControl(''));
+    } else {
+      this.adjustLoanChargeForm.removeControl('accountNumber');
+      this.adjustLoanChargeForm.removeControl('checkNumber');
+      this.adjustLoanChargeForm.removeControl('routingCode');
+      this.adjustLoanChargeForm.removeControl('receiptNumber');
+      this.adjustLoanChargeForm.removeControl('bankNumber');
+    }
+  }
+
+  /** Submits the repayment form */
+  submit() {
+    const adjustLoanChargeFormData = this.adjustLoanChargeForm.value;
+    const locale = this.settingsService.language.code;
+    const data = {
+      ...adjustLoanChargeFormData,
+      locale
+    };
+    const command = 'adjustment';
+    this.loanService.executeLoansAccountChargesCommand(this.loanId, command, data, this.chargeId)
+      .subscribe((response: any) => {
+        this.router.navigate(['../..'], { relativeTo: this.route });
+    });
+  }
+
+}

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

@@ -47,7 +47,7 @@ export class ApproveLoanComponent implements OnInit {
     this.route.data.subscribe((data: { actionButtonData: any }) => {
       this.loanData = data.actionButtonData;
     });
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {

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

@@ -38,7 +38,7 @@ export class AssignLoanOfficerComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   /**

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

@@ -38,7 +38,7 @@ export class CloseAsRescheduledComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   /**

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

@@ -51,7 +51,7 @@ export class CreateGuarantorComponent implements OnInit, AfterViewInit {
     private dateUtils: Dates,
     private clientsService: ClientsService,
     private settingsService: SettingsService) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {

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

@@ -72,7 +72,7 @@ export class DisburseToSavingsAccountComponent implements OnInit {
       dateFormat,
       locale
     };
-    const loanId = this.route.parent.snapshot.params['loanId'];
+    const loanId = this.route.snapshot.params['loanId'];
     this.loanService.loanActionButtons(loanId, 'disbursetosavings', data).subscribe((response: any) => {
       this.router.navigate(['../../general'], { relativeTo: this.route });
     });

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

@@ -45,7 +45,7 @@ export class DisburseComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
 

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

@@ -42,7 +42,7 @@ export class EditRepaymentScheduleComponent implements OnInit {
     private dialog: MatDialog,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
     this.getRepaymentSchedule();
   }
 

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

@@ -36,7 +36,7 @@ export class ForeclosureComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   ngOnInit() {

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

@@ -35,7 +35,7 @@ export class LoanCreditBalanceRefundComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   /**

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

@@ -42,7 +42,7 @@ export class LoanRescheduleComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   ngOnInit() {

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

@@ -43,7 +43,7 @@ export class LoanScreenReportsComponent implements OnInit {
     private route: ActivatedRoute,
     private sanitizer: DomSanitizer,
     private renderer: Renderer2) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   /**

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

@@ -39,7 +39,7 @@ export class LoansAccountCloseComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   /**

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

@@ -45,7 +45,7 @@ export class MakeRepaymentComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   /**
@@ -63,7 +63,7 @@ export class MakeRepaymentComponent implements OnInit {
    */
   createRepaymentLoanForm() {
     this.repaymentLoanForm = this.formBuilder.group({
-      'transactionDate': [new Date(), Validators.required],
+      'transactionDate': [this.settingsService.businessDate, Validators.required],
       'transactionAmount': ['', Validators.required],
       'externalId': '',
       'paymentTypeId': '',
@@ -83,7 +83,6 @@ export class MakeRepaymentComponent implements OnInit {
    */
   addPaymentDetails() {
     this.showPaymentDetails = !this.showPaymentDetails;
-    console.log(this.showPaymentDetails);
     if (this.showPaymentDetails) {
       this.repaymentLoanForm.addControl('accountNumber', new FormControl(''));
       this.repaymentLoanForm.addControl('checkNumber', new FormControl(''));

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

@@ -52,7 +52,7 @@ export class PrepayLoanComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-      this.loanId = this.route.parent.snapshot.params['loanId'];
+      this.loanId = this.route.snapshot.params['loanId'];
     }
 
   /**

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

@@ -45,7 +45,7 @@ export class RecoveryRepaymentComponent implements OnInit {
     private router: Router,
     private dateUtils: Dates,
     private settingsService: SettingsService) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   /**

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

@@ -40,7 +40,7 @@ export class RejectLoanComponent implements OnInit {
               private loanService: LoansService,
               private dateUtils: Dates,
               private settingsService: SettingsService ) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {

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

@@ -36,7 +36,7 @@ export class UndoApprovalComponent implements OnInit {
    * Submits undo approval form.
    */
   submit() {
-    const loanId = this.route.parent.snapshot.params['loanId'];
+    const loanId = this.route.snapshot.params['loanId'];
     this.loanService.loanActionButtons(loanId, 'undoapproval', { 'note': this.note.value }).subscribe((response: any) => {
       this.router.navigate(['../../general'], {relativeTo: this.route});
     });

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

@@ -33,7 +33,7 @@ export class UndoDisbursalComponent implements OnInit {
               private loansService: LoansService,
               private router: Router,
               private route: ActivatedRoute) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   /**

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

@@ -37,7 +37,7 @@ export class ViewGuarantorsComponent implements OnInit {
               public loansService: LoansService,
               private route: ActivatedRoute,
               private router: Router) {
-    this.loanId = this.route.parent.snapshot.params['loanId'];
+    this.loanId = this.route.snapshot.params['loanId'];
   }
 
   ngOnInit() {

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

@@ -73,7 +73,7 @@ export class WaiveInterestComponent implements OnInit {
       dateFormat,
       locale
     };
-    const loanId = this.route.parent.snapshot.params['loanId'];
+    const loanId = this.route.snapshot.params['loanId'];
     this.loanService.submitLoanActionButton(loanId, data, 'waiveinterest').subscribe((response: any) => {
       this.router.navigate(['../../general'], {relativeTo: this.route});
     });

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

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

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

@@ -76,7 +76,7 @@ export class WriteOffPageComponent implements OnInit {
       dateFormat,
       locale
     };
-    const loanId = this.route.parent.snapshot.params['loanId'];
+    const loanId = this.route.snapshot.params['loanId'];
     delete data.amount;
     this.loanService.submitLoanActionButton(loanId, data, 'writeoff').subscribe((response: any) => {
       this.router.navigate(['../../general'], {relativeTo: this.route});

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

@@ -30,7 +30,7 @@ export class LoanDocumentsTabComponent implements OnInit {
   constructor(private route: ActivatedRoute,
     private loansService: LoansService,
     private settingsService: SettingsService) {
-      this.entityId = this.route.parent.snapshot.params['loanId'];
+      this.entityId = this.route.snapshot.params['loanId'];
 
     this.route.data.subscribe((data: { loanDocuments: any }) => {
       this.getLoanDocumentsData(data.loanDocuments);

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

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

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

@@ -91,9 +91,10 @@ export class TransactionsTabComponent implements OnInit {
    * MERCHANT_ISSUED_REFUND:21
    * PAYOUT_REFUND:22
    * GOODWILL_CREDIT:23
+   * CHARGE_ADJUSTMENT:26
    */
   showTransactions(transactionsData: any) {
-    if ([1, 2, 4, 9, 20, 21, 22, 23].includes(transactionsData.type.id)) {
+    if ([1, 2, 4, 9, 20, 21, 22, 23, 26].includes(transactionsData.type.id)) {
       this.router.navigate([transactionsData.id], { relativeTo: this.route });
     }
   }

src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html

@@ -39,11 +39,14 @@
           </mat-select>
         </mat-form-field>
 
-        <div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
-          <mat-label fxFlexAlign="center">Show Payment Details</mat-label>
-          <button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
-            <fa-icon [icon]="!addPaymentDetailsFlag ? 'plus-circle' : 'minus-circle'" size="lg"></fa-icon>
-          </button>
+        <div fxFlexFill>
+          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+            <mat-slide-toggle>
+              <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                <span class="m-l-10">Show Payment Details</span>
+              </div>
+            </mat-slide-toggle>
+          </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">

src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.ts

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

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

@@ -119,7 +119,7 @@ export class ViewTransactionComponent implements OnInit {
    * Undo the loans transaction
    */
   undoTransaction() {
-    const accountId = this.route.parent.parent.parent.snapshot.params['loanId'];
+    const accountId = this.route.snapshot.params['loanId'];
     const undoTransactionAccountDialogRef = this.dialog.open(ConfirmationDialogComponent, {
       data: { heading: 'Undo Transaction', dialogContext: `Are you sure you want undo the transaction ${this.transactionData.id}` }
     });
@@ -141,7 +141,7 @@ export class ViewTransactionComponent implements OnInit {
   }
 
   chargebackTransaction() {
-    const accountId = this.route.parent.parent.parent.snapshot.params['loanId'];
+    const accountId = this.route.snapshot.params['loanId'];
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'paymentTypeId',

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

@@ -11,11 +11,19 @@
     </button>
   </span>
   <span *ngIf="allowWaive">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
+    <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'"
+      (click)="waiveCharge()">
       <fa-icon icon="flag" class="m-r-10"></fa-icon>
       Waive
     </button>
   </span>
+  <span>
+    <button mat-raised-button color="accent" *mifosxHasPermission="'ADJUSTMENT_LOANCHARGE'"
+      (click)="adjustmentCharge()">
+      <fa-icon icon="pen" class="m-r-10"></fa-icon>
+      Adjustment
+    </button>
+  </span>
 </div>
 
 <div *ngIf="loansAccountData.status.value === 'Submitted and pending approval'" fxLayout="row" fxLayoutAlign="end"

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

@@ -178,6 +178,10 @@ export class ViewChargeComponent {
     return this.chargeData.paid ? 'paid' : 'not-paid';
   }
 
+  adjustmentCharge(): void {
+    this.router.navigate(['adjustment'], { relativeTo: this.route});
+  }
+
   /**
    * Refetches data fot the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.

src/app/loans/loans.module.ts

@@ -73,6 +73,7 @@ import { EditRepaymentScheduleComponent } from './loans-view/loan-account-action
 import { DisburseToSavingsAccountComponent } from './loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component';
 import { LoansAccountDatatableStepComponent } from './loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component';
 import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/reschedule-loan-tab.component';
+import { AdjustLoanChargeComponent } from './loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component';
 
 /**
  * Loans Module
@@ -144,7 +145,8 @@ import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/res
     EditRepaymentScheduleComponent,
     DisburseToSavingsAccountComponent,
     LoansAccountDatatableStepComponent,
-    RescheduleLoanTabComponent
+    RescheduleLoanTabComponent,
+    AdjustLoanChargeComponent
   ],
   providers: [ ],
 })