feat: add checker inbox and tasks (#1218)

- add checker inbox
- add client approval
- add loan disbursal
- add loan approval
- add reschedule loan

Fixes: #252, #1217

src/app/app.module.ts

@@ -37,6 +37,7 @@ import { ReportsModule } from './reports/reports.module';
 import { NotificationsModule } from './notifications/notifications.module';
 import { CollectionsModule } from './collections/collections.module';
 import { ProfileModule } from './profile/profile.module';
+import { TasksModule } from './tasks/tasks.module';
 
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
@@ -73,6 +74,7 @@ import { AppRoutingModule } from './app-routing.module';
     UsersModule,
     NotificationsModule,
     CollectionsModule,
+    TasksModule,
     AppRoutingModule,
   ],
   declarations: [WebAppComponent, NotFoundComponent],

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

@@ -95,7 +95,7 @@ export class CentersViewComponent implements OnInit {
    */
   private centersUnassignStaff() {
     const unAssignStaffDialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: { heading: 'Unassign Staff', dialogContext: 'Are you sure you want Unassign Staff ?' }
+      data: { heading: 'Unassign Staff', dialogContext: 'Are you sure you want Unassign Staff' }
     });
     unAssignStaffDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
       if (response.confirm) {

src/app/core/shell/sidenav/sidenav.component.html

@@ -63,6 +63,12 @@
           </mat-icon>
           <a matLine>Navigation</a>
         </mat-list-item>
+        <mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']">
+          <mat-icon matListIcon>
+            <i class="fa fa-check"></i>
+          </mat-icon>
+          <a matLine>Checker Inbox and Tasks</a>
+        </mat-list-item>
         <mat-list-item [routerLink]="['/collections/individual-collection-sheet']">
           <mat-icon matListIcon>
             <i class="fa fa-tasks "></i>

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

@@ -145,7 +145,7 @@ export class LoansViewComponent implements OnInit {
    */
   private recoverFromGuarantor() {
     const recoverFromGuarantorDialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: { heading: 'Recover from Guarantor', dialogContext: 'Are you sure you want recover from Guarantor ?', type: 'Mild' }
+      data: { heading: 'Recover from Guarantor', dialogContext: 'Are you sure you want recover from Guarantor', type: 'Mild' }
     });
     recoverFromGuarantorDialogRef.afterClosed().subscribe((response: any) => {
       if (response.confirm) {

src/app/pipes/accounts-filter.pipe.ts

@@ -78,6 +78,11 @@ export class AccountsFilterPipe implements PipeTransform {
           return accounts;
         }
       }
+      if (type === 'clientApproval') {
+        accounts = accounts.filter((account: any) => {
+          return (account.active === false && account.status.value === 'Pending');
+        });
+      }
       return accounts;
     }
   }

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

@@ -0,0 +1,139 @@
+<div class="tab-container mat-typography" *ngIf="checkerData">
+
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box" fxFlex="40%">
+      <mat-form-field fxFlex="90%">
+        <input matInput placeholder="Search by user" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+    <div fxFlex="60%" fxLayoutGap="0.5rem">
+      <button mat-raised-button color="success" (click)="approveChecker()">
+        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+      </button>
+      <button mat-raised-button color="warn" (click)="deleteChecker()">
+        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+      </button>
+      <button mat-raised-button color="reject" (click)="rejectChecker()">
+        <fa-icon icon="times"></fa-icon>&nbsp;&nbsp;Reject
+      </button>
+    </div>
+  </div>
+
+  <form [formGroup]="makerCheckerSearchForm">
+
+    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>From Date</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="makerDateTimeFromPicker"
+          formControlName="makerDateTimeFrom">
+        <mat-datepicker-toggle matSuffix [for]="makerDateTimeFromPicker"></mat-datepicker-toggle>
+        <mat-datepicker #makerDateTimeFromPicker></mat-datepicker>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>To Date</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="makerDateTimetoPicker"
+          formControlName="makerDateTimeto">
+        <mat-datepicker-toggle matSuffix [for]="makerDateTimetoPicker"></mat-datepicker-toggle>
+        <mat-datepicker #makerDateTimetoPicker></mat-datepicker>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Action</mat-label>
+        <mat-select formControlName="actionName">
+          <mat-option *ngFor="let action of makerCheckerTemplate.actionNames" [value]="action">
+            {{ action }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Entity</mat-label>
+        <mat-select formControlName="entityName">
+          <mat-option *ngFor="let entity of makerCheckerTemplate.entityNames" [value]="entity">
+            {{ entity }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Resource ID</mat-label>
+        <input matInput formControlName="resourceId">
+      </mat-form-field>
+
+      <button mat-raised-button color="primary" id="search-button" (click)="search()">Search</button>
+
+    </div>
+
+  </form>
+
+  <table mat-table [dataSource]="dataSource" *ngIf="!(noSearchedData)">
+
+    <ng-container matColumnDef="select">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        </mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let row">
+        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        </mat-checkbox>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef> ID </th>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.id }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="madeOnDate">
+      <th mat-header-cell *matHeaderCellDef> Made on Date </th>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.madeOnDate | date }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.processingResult }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="user">
+      <th mat-header-cell *matHeaderCellDef> User </th>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.maker }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <th mat-header-cell *matHeaderCellDef> Action </th>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.actionName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="entity">
+      <th mat-header-cell *matHeaderCellDef> Entity </th>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.entityName }} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+    </tr>
+  </table>
+
+  <div class="alert" *ngIf="noSearchedData">
+
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check fa-2x"></i>
+      No checker inbox data available for this search.
+    </div>
+
+  </div>
+
+</div>
+
+<div class="alert" *ngIf="!checkerData">
+
+  <div class="message">
+    <i class="fa fa-exclamation-circle alert-check fa-2x"></i>
+    No checker inbox data available for this account.
+  </div>
+
+</div>

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss

@@ -0,0 +1,42 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  .mat-raised-button.mat-success {
+    color: #fff;
+    background-color: #008000ab;
+  }
+  .mat-raised-button.mat-reject {
+    color: #fff;
+    background-color: #FFCA00;
+  }
+  #search-button {
+    height: 2.5rem;
+    margin-top: 1rem;
+  }
+  .view-details{
+    cursor: pointer;
+  }
+}
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.spec.ts

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

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.ts

@@ -0,0 +1,206 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+import { TasksService } from '../../tasks.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+/** Dialog Components */
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+@Component({
+  selector: 'mifosx-checker-inbox',
+  templateUrl: './checker-inbox.component.html',
+  styleUrls: ['./checker-inbox.component.scss']
+})
+export class CheckerInboxComponent implements OnInit {
+
+  /** Data to be displayed */
+  searchData: any;
+  /** Maker Checker Template */
+  makerCheckerTemplate: any;
+  /** Checks if there is any data based on the search */
+  noSearchedData = false;
+  /** Checks if there is any checker data */
+  checkerData = false;
+  /** Maker Checker Search Form */
+  makerCheckerSearchForm: FormGroup;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** DataSource */
+  dataSource: MatTableDataSource<any>;
+  /** Selecting rows from table */
+  selection: SelectionModel<any>;
+  /** Displayed Column in table */
+  displayedColumns: string[] = ['select', 'id', 'madeOnDate', 'status', 'user', 'action', 'entity'];
+
+  /**
+   * Retrieves the maker checker data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {router} router Router.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {TasksService} tasksService Tasks Service.
+   * @param {FormBuilder} formBuilder Form Builder.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private datePipe: DatePipe,
+    private router: Router,
+    private tasksService: TasksService,
+    private settingsService: SettingsService,
+    private formBuilder: FormBuilder) {
+    this.route.data.subscribe((data: { makerCheckerResource: any, makerCheckerTemplate: any }) => {
+      this.searchData = data.makerCheckerResource;
+      if (this.searchData.length > 0) {
+        this.checkerData = true;
+      }
+      this.makerCheckerTemplate = data.makerCheckerTemplate;
+      this.dataSource = new MatTableDataSource(this.searchData);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  ngOnInit() {
+    this.createMakerCheckerSearchForm();
+  }
+
+  /**
+   * Creates the standing instruction form.
+   */
+  createMakerCheckerSearchForm() {
+    this.makerCheckerSearchForm = this.formBuilder.group({
+      'makerDateTimeFrom': [''],
+      'makerDateTimeto': [''],
+      'actionName': [''],
+      'entityName': [''],
+      'resourceId': ['']
+    });
+  }
+
+  search() {
+    const dateFormat = this.settingsService.dateFormat;
+    const makerCheckerSearchParams = {
+      ...this.makerCheckerSearchForm.value,
+      makerDateTimeFrom: this.datePipe.transform(this.makerCheckerSearchForm.value.makerDateTimeFrom, dateFormat),
+      makerDateTimeto: this.datePipe.transform(this.makerCheckerSearchForm.value.makerDateTimeto, dateFormat)
+    };
+    this.tasksService.getMakerCheckerData(makerCheckerSearchParams).subscribe((response: any) => {
+      this.searchData = response;
+      if (this.searchData.length === 0) {
+        this.noSearchedData = true;
+      } else {
+        this.noSearchedData = false;
+      }
+      this.dataSource = new MatTableDataSource(this.searchData);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach((row: any) => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  approveChecker() {
+    const approveCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Approve Checker', dialogContext: 'Are you sure you want to approve checker' }
+    });
+    approveCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkCheckerApproveorReject('approve');
+      }
+    });
+  }
+
+  rejectChecker() {
+    const rejectCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Reject Checker', dialogContext: 'Are you sure you want to reject checker' }
+    });
+    rejectCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkCheckerApproveorReject('reject');
+      }
+    });
+  }
+
+  deleteChecker() {
+    const deleteCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Delete Checker', dialogContext: 'Are you sure you want to delete checker' }
+    });
+    deleteCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkDeleteChecker();
+      }
+    });
+  }
+
+  bulkCheckerApproveorReject(action: any) {
+    const selectedAccounts = this.selection.selected.length;
+    const listSelectedAccounts = this.selection.selected;
+    let approvedAccounts = 0;
+    listSelectedAccounts.forEach((element: any) => {
+      this.tasksService.executeMakerCheckerAction(element.id, action).subscribe((response: any) => {
+        approvedAccounts++;
+        if (selectedAccounts === approvedAccounts) {
+          this.reload();
+        }
+      });
+    });
+  }
+
+  bulkDeleteChecker() {
+    const selectedAccounts = this.selection.selected.length;
+    const listSelectedAccounts = this.selection.selected;
+    let approvedAccounts = 0;
+    listSelectedAccounts.forEach((element: any) => {
+      this.tasksService.deleteMakerChecker(element.id).subscribe((response: any) => {
+        approvedAccounts++;
+        if (selectedAccounts === approvedAccounts) {
+          this.reload();
+        }
+      });
+    });
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Refetches data for the component
+   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   */
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
+  }
+
+}

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

@@ -0,0 +1,71 @@
+<div class="tab-container mat-typography" *ngIf="showData">
+
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box" fxFlex="40%">
+      <mat-form-field fxFlex="90%">
+        <input matInput placeholder="Filter by name" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+    <div fxFlex="60%">
+      <button mat-raised-button color="success" *mifosxHasPermission="'ACTIVATE_CLIENT'"
+        (click)="approveClients()">
+        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+      </button>
+    </div>
+  </div>
+
+  <ng-container *ngFor="let client of groupedClients | keyvalue">
+
+    <h3> {{client.key}} </h3>
+
+    <ng-container *ngIf="client.value.length > 0">
+
+      <table mat-table [dataSource]="client.value|accountsFilter:'clientApproval'">
+
+        <ng-container matColumnDef="select">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox (change)="$event ? masterToggle(client.value) : null" [checked]="selection.hasValue() && isAllSelected(client.value)"
+              [indeterminate]="selection.hasValue() && !isAllSelected(client.value)" [aria-label]="checkboxLabel(client.value)">
+            </mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let row">
+            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+            </mat-checkbox>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{ element.displayName }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="accountNumber">
+          <th mat-header-cell *matHeaderCellDef> AccountNumber </th>
+          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{ element.accountNo }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="staff">
+          <th mat-header-cell *matHeaderCellDef> Staff </th>
+          <td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{ element.staffName }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+        </tr>
+      </table>
+
+    </ng-container>
+
+  </ng-container>
+
+</div>
+
+<div class="alert" *ngIf="!(showData)">
+
+  <div class="message">
+    <i class="fa fa-exclamation-circle alert-check"></i>
+    No pending loans for approval.
+  </div>
+
+</div>

src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.scss

@@ -0,0 +1,35 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  .mat-raised-button.mat-success {
+    color: #fff;
+    background-color: #008000ab;
+  }
+
+  .view-details{
+    cursor: pointer;
+  }
+}
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}

src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.spec.ts

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

src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.ts

@@ -0,0 +1,159 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as _ from 'lodash';
+import { DatePipe } from '@angular/common';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Dialog Imports */
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+
+/** Custom Services */
+import { TasksService } from '../../tasks.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-client-approval',
+  templateUrl: './client-approval.component.html',
+  styleUrls: ['./client-approval.component.scss']
+})
+export class ClientApprovalComponent {
+
+  /** Grouped Clients Data */
+  groupedClients: any;
+  /** Checks to show the data */
+  showData = false;
+  /** Batch Requests */
+  batchRequests: any[];
+  /** Datasource */
+  dataSource: MatTableDataSource<any>;
+  /** Row Selection Data */
+  selection: SelectionModel<any>;
+  /** Displayed Columns */
+  displayedColumns: string[] = ['select', 'name', 'accountNumber', 'staff'];
+
+  /**
+   * Retrieves the grouped client data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {router} router Router.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {TasksService} tasksService Tasks Service.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private datePipe: DatePipe,
+    private router: Router,
+    private settingsService: SettingsService,
+    private tasksService: TasksService) {
+    this.route.data.subscribe((data: { groupedClientData: any }) => {
+      this.groupedClients = _.groupBy(data.groupedClientData.pageItems, 'officeName');
+      if (Object.keys(this.groupedClients).length) {
+        this.showData = true;
+      }
+      this.dataSource = new MatTableDataSource(data.groupedClientData.pageItems);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected(dataSource2: any) {
+    if (dataSource2) {
+      const numSelected = this.selection.selected;
+      return _.difference(dataSource2, numSelected).length === 0;
+    }
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle(dataSource3: any) {
+    if (dataSource3) {
+      this.isAllSelected(dataSource3) ?
+        dataSource3.forEach((row: any) => this.selection.deselect(row)) :
+        dataSource3.forEach((row: any) => this.selection.select(row));
+    }
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected(row) ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  approveClients() {
+    const formfields: FormfieldBase[] = [
+      new DatepickerBase({
+        controlName: 'actDate',
+        label: 'Date',
+        value: new Date(),
+        type: 'datetime-local',
+        required: true
+      }),
+    ];
+    const data = {
+      title: 'Enter Clients Activation Date',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const clientApprovalDialogRef = this.dialog.open(FormDialogComponent, { data });
+    clientApprovalDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        this.bulkClientApproval(response.data);
+      }
+    });
+  }
+
+  bulkClientApproval(submittedData: any) {
+    const dateFormat = this.settingsService.dateFormat;
+    const activationDate = this.datePipe.transform(submittedData.value.actDate, dateFormat);
+    const locale = this.settingsService.language.code;
+    const formData = {
+      dateFormat,
+      activationDate,
+      locale
+    };
+    const selectedAccounts = this.selection.selected.length;
+    const listSelectedAccounts = this.selection.selected;
+    let activatedAccounts = 0;
+    this.batchRequests = [];
+    let reqId = 1;
+    listSelectedAccounts.forEach((element: any) => {
+      const url = 'clients/' + element.id + '?command=activate';
+      const bodyData = JSON.stringify(formData);
+      const batchData = { requestId: reqId++, relativeUrl: url, method: 'POST', body: bodyData };
+      this.batchRequests.push(batchData);
+    });
+    this.tasksService.submitBatchData(this.batchRequests).subscribe((response: any) => {
+      response.forEach((responseEle: any) => {
+        if (responseEle.statusCode = '200') {
+          activatedAccounts++;
+          responseEle.body = JSON.parse(responseEle.body);
+          if (selectedAccounts === activatedAccounts) {
+            this.reload();
+          }
+        }
+      });
+    });
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Refetches data for the component
+   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   */
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
+  }
+
+}

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

@@ -0,0 +1,78 @@
+<div class="tab-container mat-typography" *ngIf="showData">
+
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box" fxFlex="40%">
+      <mat-form-field fxFlex="90%">
+        <input matInput placeholder="Filter by name" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+    <div fxFlex="60%">
+      <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="approveLoan()">
+        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+      </button>
+    </div>
+  </div>
+
+  <ng-container *ngFor="let office of officesArray">
+
+    <h3 class="mat-h3">{{ office.name }}</h3>
+
+    <ng-container *ngIf="office.loans.length > 0">
+
+      <table mat-table [dataSource]="office.loans">
+
+        <ng-container matColumnDef="select">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox (change)="$event ? masterToggle(office.loans) : null"
+              [checked]="selection.hasValue() && isAllSelected(office.loans)"
+              [indeterminate]="selection.hasValue() && !isAllSelected(office.loans)" [aria-label]="checkboxLabel(office.loans)">
+            </mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let row">
+            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+            </mat-checkbox>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="clientName">
+          <th mat-header-cell *matHeaderCellDef> Client </th>
+          <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'general']">
+            {{ loan.clientName }} </td>
+        </ng-container>
+
+        <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']">
+            {{ loan.loanProductName}}({{loan.accountNo}}) </td>
+        </ng-container>
+
+        <ng-container matColumnDef="amount">
+          <th mat-header-cell *matHeaderCellDef> Amount </th>
+          <td mat-cell *matCellDef="let loan"> {{ loan.principal | number}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="loanPurpose">
+          <th mat-header-cell *matHeaderCellDef> Loan Purpose </th>
+          <td mat-cell *matCellDef="let loan"> {{ loan.loanPurposeName }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+        </tr>
+      </table>
+
+    </ng-container>
+
+  </ng-container>
+
+</div>
+
+<div class="alert" *ngIf="!(showData)">
+
+  <div class="message">
+    <i class="fa fa-exclamation-circle alert-check"></i>
+    No pending loans for approval.
+  </div>
+
+</div>

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

@@ -0,0 +1,35 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  .mat-raised-button.mat-success {
+    color: #fff;
+    background-color: #008000ab;
+  }
+
+  .view-details{
+    cursor: pointer;
+  }
+}
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}

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

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

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

@@ -0,0 +1,192 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as _ from 'lodash';
+import { DatePipe } from '@angular/common';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Dialog Imports */
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+/** Custom Services */
+import { TasksService } from '../../tasks.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loan-approval',
+  templateUrl: './loan-approval.component.html',
+  styleUrls: ['./loan-approval.component.scss']
+})
+export class LoanApprovalComponent {
+  // settingsService: SettingsService;
+  /** Offices Data */
+  offices: any;
+  /** Loans Data */
+  loans: any;
+  /** Checks whether to show data or not */
+  showData = false;
+  /** Data source for loans approval table. */
+  dataSource: MatTableDataSource<any>;
+  /** Row Selection Data */
+  selection: SelectionModel<any>;
+  /** Map data */
+  idToNodeMap = {};
+  /** Grouped Office Data */
+  officesArray: any[];
+  /** List of Requests */
+  batchRequests: any[];
+  /** Displayed Columns */
+  displayedColumns: string[] = ['select', 'clientName', 'loan', 'amount', 'loanPurpose'];
+
+  /**
+   * Retrieves the offices and loans data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {router} router Router.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {TasksService} tasksService Tasks Service.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private datePipe: DatePipe,
+    private router: Router,
+    private settingsService: SettingsService,
+    private tasksService: TasksService) {
+    this.route.data.subscribe((data: { officesData: any, loansData: any }) => {
+      this.offices = data.officesData;
+      this.loans = data.loansData.pageItems;
+      this.setOfficeData();
+    });
+  }
+
+  /** Group Office Data */
+  setOfficeData() {
+    this.offices.forEach((officeEle: any) => {
+      officeEle.loans = [];
+      this.idToNodeMap[officeEle.id] = officeEle;
+    });
+    this.loans.forEach((loanEle: any) => {
+      if (loanEle.status.pendingApproval) {
+        let tempOffice = {};
+        if (loanEle.clientOfficeId) {
+          tempOffice = this.idToNodeMap[loanEle.clientOfficeId];
+          tempOffice['loans'].push(loanEle);
+        } else {
+          if (loanEle.group) {
+            tempOffice = this.idToNodeMap[loanEle.group.officeId];
+            tempOffice['loans'].push(loanEle);
+          }
+        }
+      }
+    });
+    const finalArray: any[] = [];
+    this.offices.forEach((officeEle: any) => {
+      if (officeEle.loans && officeEle.loans.length > 0) {
+        this.showData = true;
+        finalArray.push(officeEle);
+      }
+    });
+    this.officesArray = finalArray;
+    this.dataSource = new MatTableDataSource(this.officesArray);
+    this.selection = new SelectionModel(true, []);
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected(dataSource2: any) {
+    if (dataSource2) {
+      const numSelected = this.selection.selected;
+      return _.difference(dataSource2, numSelected).length === 0;
+    }
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle(dataSource3: any) {
+    if (dataSource3) {
+      this.isAllSelected(dataSource3) ?
+        dataSource3.forEach((row: any) => this.selection.deselect(row)) :
+        dataSource3.forEach((row: any) => this.selection.select(row));
+    }
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected(row) ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  approveLoan() {
+    const approveLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Approve Loan', dialogContext: 'Are you sure you want to Approve Loan' }
+    });
+    approveLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkLoanApproval();
+      }
+    });
+  }
+
+  bulkLoanApproval() {
+    const dateFormat = this.settingsService.dateFormat;
+    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const locale = this.settingsService.language.code;
+    const formData = {
+      dateFormat,
+      approvedOnDate,
+      locale
+    };
+    const selectedAccounts = this.selection.selected.length;
+    const listSelectedAccounts = this.selection.selected;
+    let approvedAccounts = 0;
+    this.batchRequests = [];
+    let reqId = 1;
+    listSelectedAccounts.forEach((element: any) => {
+      const url = 'loans/' + element.id + '?command=approve';
+      const bodyData = JSON.stringify(formData);
+      const batchData = { requestId: reqId++, relativeUrl: url, method: 'POST', body: bodyData };
+      this.batchRequests.push(batchData);
+    });
+    this.tasksService.submitBatchData(this.batchRequests).subscribe((response: any) => {
+      response.forEach((responseEle: any) => {
+        if (responseEle.statusCode = '200') {
+          approvedAccounts++;
+          responseEle.body = JSON.parse(responseEle.body);
+          if (selectedAccounts === approvedAccounts) {
+            this.loanResource();
+          }
+        }
+      });
+      this.reload();
+    });
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  loanResource() {
+    this.tasksService.getAllLoans().subscribe((response: any) => {
+      this.loans = response.pageItems;
+      this.loans = this.loans.filter((account: any) => {
+        return (account.status.waitingForDisbursal === true);
+      });
+      this.dataSource = new MatTableDataSource(this.loans);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  /**
+   * Refetches data for the component
+   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   */
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
+  }
+
+}

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

@@ -0,0 +1,65 @@
+<div class="tab-container mat-typography" *ngIf="loans.length > 0">
+
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box" fxFlex="40%">
+      <mat-form-field fxFlex="90%">
+        <input matInput placeholder="Filter by name" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+    <div fxFlex="60%">
+      <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="disburseLoan()">
+        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Disburse
+      </button>
+    </div>
+  </div>
+
+  <table mat-table [dataSource]="dataSource">
+
+    <ng-container matColumnDef="select">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        </mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let row">
+        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        </mat-checkbox>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="client">
+      <th mat-header-cell *matHeaderCellDef> Client Name </th>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'general']"> {{loan.clientName}} </td>
+    </ng-container>
+
+    <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>
+    </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>
+    </ng-container>
+
+    <ng-container matColumnDef="principal">
+      <th mat-header-cell *matHeaderCellDef> Principal </th>
+      <td mat-cell *matCellDef="let loan"> {{loan.principal | number}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+    </tr>
+  </table>
+
+</div>
+
+<div class="alert" *ngIf="loans.length === 0">
+
+  <div class="message">
+    <i class="fa fa-exclamation-circle alert-check"></i>
+    No pending loan available for disbursal.
+  </div>
+
+</div>

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

@@ -0,0 +1,35 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  .mat-raised-button.mat-success {
+    color: #fff;
+    background-color: #008000ab;
+  }
+
+  .view-details{
+    cursor: pointer;
+  }
+}
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}

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

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

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

@@ -0,0 +1,140 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import { DatePipe } from '@angular/common';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Dialog Imports */
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+/** Custom Services */
+import { TasksService } from '../../tasks.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loan-disbursal',
+  templateUrl: './loan-disbursal.component.html',
+  styleUrls: ['./loan-disbursal.component.scss']
+})
+export class LoanDisbursalComponent {
+
+  /** Loans Data */
+  loans: any;
+  /** Batch Requests */
+  batchRequests: any[];
+  /** Datasource for loans disbursal table */
+  dataSource: MatTableDataSource<any>;
+  /** Row Selection */
+  selection: SelectionModel<any>;
+  /** Displayed Columns for loan disbursal data */
+  displayedColumns: string[] = ['select', 'client', 'loanAccountNumber', 'loanProduct', 'principal'];
+
+  /**
+   * Retrieves the loans data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {router} router Router.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {TasksService} tasksService Tasks Service.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private datePipe: DatePipe,
+    private settingsService: SettingsService,
+    private tasksService: TasksService) {
+    this.route.data.subscribe((data: { loansData: any }) => {
+      this.loans = data.loansData.pageItems;
+      this.loans = this.loans.filter((account: any) => {
+        return (account.status.waitingForDisbursal === true);
+      });
+      this.dataSource = new MatTableDataSource(this.loans);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach((row: any) => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  disburseLoan() {
+    const disburseLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Loan Disbursal', dialogContext: 'Are you sure you want to Disburse Loan' }
+    });
+    disburseLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkLoanDisbursal();
+      }
+    });
+  }
+
+  bulkLoanDisbursal() {
+    const dateFormat = this.settingsService.dateFormat;
+    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const locale = this.settingsService.language.code;
+    const formData = {
+      dateFormat,
+      approvedOnDate,
+      locale
+    };
+    const selectedAccounts = this.selection.selected.length;
+    const listSelectedAccounts = this.selection.selected;
+    let approvedAccounts = 0;
+    this.batchRequests = [];
+    let reqId = 1;
+    listSelectedAccounts.forEach((element: any) => {
+      const url = 'loans/' + element.id + '?command=disburse';
+      const bodyData = JSON.stringify(formData);
+      const batchData = { requestId: reqId++, relativeUrl: url, method: 'POST', body: bodyData };
+      this.batchRequests.push(batchData);
+    });
+    this.tasksService.submitBatchData(this.batchRequests).subscribe((response: any) => {
+      console.log(response);
+      response.forEach((responseEle: any) => {
+        if (responseEle.statusCode = '200') {
+          approvedAccounts++;
+          responseEle.body = JSON.parse(responseEle.body);
+          if (selectedAccounts === approvedAccounts) {
+            this.loanResource();
+          }
+        }
+      });
+    });
+  }
+
+  loanResource() {
+    this.tasksService.getAllLoans().subscribe((response: any) => {
+      this.loans = response.pageItems;
+      this.loans = this.loans.filter((account: any) => {
+        return (account.status.waitingForDisbursal === true);
+      });
+      this.dataSource = new MatTableDataSource(this.loans);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+}

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

@@ -0,0 +1,71 @@
+<div class="tab-container mat-typography" *ngIf="loans.length > 0">
+
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box" fxFlex="40%">
+      <mat-form-field fxFlex="90%">
+        <input matInput placeholder="Filter by name" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+    <div fxFlex="60%">
+      <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
+        (click)="approveBulkLoanReschedule()">
+        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+      </button>
+    </div>
+  </div>
+
+  <table mat-table [dataSource]="dataSource">
+
+    <ng-container matColumnDef="select">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        </mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let row">
+        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        </mat-checkbox>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="client">
+      <th mat-header-cell *matHeaderCellDef> Client </th>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId , 'general']"> {{loan.clientName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="rescheduleRequestNo">
+      <th mat-header-cell *matHeaderCellDef> Reschedule Request# </th>
+      <td mat-cell *matCellDef="let loan"> {{loan.id}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="loanAccountNo">
+      <th mat-header-cell *matHeaderCellDef> Loan Account# </th>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId , 'loans', loan.loanId, 'general']"> {{loan.loanAccountNumber}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="rescheduleForm">
+      <th mat-header-cell *matHeaderCellDef> Reschedule Form </th>
+      <td mat-cell *matCellDef="let loan"> {{loan.rescheduleFromDate | date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="rescheduleReason">
+      <th mat-header-cell *matHeaderCellDef> Reschedule Reason </th>
+      <td mat-cell *matCellDef="let loan"> {{loan.rescheduleReasonCodeValue.name}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+    </tr>
+  </table>
+
+</div>
+
+<div class="alert" *ngIf="loans.length === 0">
+
+  <div class="message">
+    <i class="fa fa-exclamation-circle alert-check"></i>
+    No pending rescheduled loan available for this account.
+  </div>
+
+</div>

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.scss

@@ -0,0 +1,35 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  .mat-raised-button.mat-success {
+    color: #fff;
+    background-color: #008000ab;
+  }
+
+  .view-details{
+    cursor: pointer;
+  }
+}
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.spec.ts

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

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.ts

@@ -0,0 +1,132 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import { DatePipe } from '@angular/common';
+import * as _ from 'lodash';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Dialog Imports */
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+/** Custom Services */
+import { TasksService } from '../../tasks.service';
+import { SettingsRoutingModule } from 'app/settings/settings-routing.module';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-reschedule-loan',
+  templateUrl: './reschedule-loan.component.html',
+  styleUrls: ['./reschedule-loan.component.scss']
+})
+export class RescheduleLoanComponent implements OnInit {
+
+  /** Loans Data */
+  loans: any;
+  /** Datasource */
+  dataSource: MatTableDataSource<any>;
+  /** Rows Selection Data */
+  selection: SelectionModel<any>;
+  /** Batch Requests */
+  batchRequests: any[];
+  /** Displayed Columns */
+  displayedColumns: string[] = ['select', 'client', 'rescheduleRequestNo', 'loanAccountNo', 'rescheduleForm', 'rescheduleReason'];
+
+  /**
+   * Retrieves the reschedule loan data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {router} router Router.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {TasksService} tasksService Tasks Service.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private datePipe: DatePipe,
+    private router: Router,
+    private settingsService: SettingsService,
+    private tasksService: TasksService) {
+    this.route.data.subscribe((data: { recheduleLoansData: any }) => {
+      this.loans = data.recheduleLoansData;
+      this.dataSource = new MatTableDataSource(this.loans);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach((row: any) => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  approveBulkLoanReschedule() {
+    const rescheduleLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Reschedule Loan', dialogContext: 'Are you sure you want to Reschedule Loan' }
+    });
+    rescheduleLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkLoanRescheduleApproval();
+      }
+    });
+  }
+
+  bulkLoanRescheduleApproval() {
+    const dateFormat = this.settingsService.dateFormat;
+    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const locale = this.settingsService.language.code;
+    const formData = {
+      dateFormat,
+      approvedOnDate,
+      locale
+    };
+    const listSelectedAccounts = this.selection.selected;
+    this.batchRequests = [];
+    let reqId = 1;
+    listSelectedAccounts.forEach((element: any) => {
+      const url = 'rescheduleloans/' + element.id + '?command=approve';
+      const bodyData = JSON.stringify(formData);
+      const batchData = { requestId: reqId++, relativeUrl: url, method: 'POST', body: bodyData };
+      this.batchRequests.push(batchData);
+    });
+    this.tasksService.submitBatchData(this.batchRequests).subscribe((response: any) => {
+      console.log(response);
+      this.reload();
+    });
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Refetches data fot the component
+   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   */
+  reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
+  }
+
+}

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html

@@ -0,0 +1,36 @@
+<div class="container">
+
+  <mat-card class="tasks-card">
+
+    <mat-card-content>
+
+      <nav mat-tab-nav-bar class="navigation-tabs">
+        <a mat-tab-link [routerLink]="['./checker-inbox']" routerLinkActive #checkerInbox="routerLinkActive"
+        [active]="checkerInbox.isActive" *mifosxHasPermission="'ALL_FUNCTIONS_READ'">
+          Checker Inbox
+        </a>
+        <a mat-tab-link [routerLink]="['./client-approval']" routerLinkActive #clientApproval="routerLinkActive"
+          [active]="clientApproval.isActive" *mifosxHasPermission="'READ_CLIENT'">
+          Client Approval
+        </a>
+        <a mat-tab-link [routerLink]="['./loan-approval']" routerLinkActive #loanApproval="routerLinkActive"
+          [active]="loanApproval.isActive" *mifosxHasPermission="'READ_LOAN'">
+          Loan Approval
+        </a>
+        <a mat-tab-link [routerLink]="['./loan-disbursal']" routerLinkActive #loanDisbursal="routerLinkActive"
+          [active]="loanDisbursal.isActive" *mifosxHasPermission="'READ_LOAN'">
+          Loan Disbursal
+        </a>
+        <a mat-tab-link [routerLink]="['./reschedule-loan']" routerLinkActive #rescheduleLoan="routerLinkActive"
+          [active]="rescheduleLoan.isActive" *mifosxHasPermission="'RESCHEDULE_LOAN'">
+          Reschedule Loan
+        </a>
+      </nav>
+
+      <router-outlet></router-outlet>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.spec.ts

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

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.ts

@@ -0,0 +1,16 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+
+/**
+ * Checker Inbox and Tasks Component
+ */
+@Component({
+  selector: 'mifosx-checker-inbox-and-tasks',
+  templateUrl: './checker-inbox-and-tasks.component.html',
+  styleUrls: ['./checker-inbox-and-tasks.component.scss']
+})
+export class CheckerInboxAndTasksComponent {
+
+  constructor() { }
+
+}

src/app/tasks/common-resolvers/getGroupedClientsData.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Grouped Client Data data resolver.
+ */
+@Injectable()
+export class GetGroupedClientsData implements Resolve<Object> {
+
+  /**
+   * @param {TasksService} tasksService Tasks service.
+   */
+  constructor(private tasksService: TasksService) {}
+
+  /**
+   * Returns the grouped client data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.tasksService.getGroupedClientsData();
+  }
+
+}

src/app/tasks/common-resolvers/getLoans.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Loans data resolver.
+ */
+@Injectable()
+export class GetLoans implements Resolve<Object> {
+
+    /**
+     * @param {TasksService} tasksService Tasks service.
+     */
+    constructor(private tasksService: TasksService) { }
+
+    /**
+     * Returns all the loans data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.tasksService.getAllLoans();
+    }
+
+}

src/app/tasks/common-resolvers/getOffices.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Offices data resolver.
+ */
+@Injectable()
+export class GetOffices implements Resolve<Object> {
+
+    /**
+     * @param {TasksService} tasksService Tasks service.
+     */
+    constructor(private tasksService: TasksService) { }
+
+    /**
+     * Returns the offices data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.tasksService.getAllOffices();
+    }
+
+}

src/app/tasks/common-resolvers/getRescheduleLoans.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Pending Reschedule Loans data resolver.
+ */
+@Injectable()
+export class GetRescheduleLoans implements Resolve<Object> {
+
+    /**
+     * @param {TasksService} tasksService Tasks service.
+     */
+    constructor(private tasksService: TasksService) { }
+
+    /**
+     * Returns the pending reschedule data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.tasksService.getPendingRescheduleLoans();
+    }
+
+}

src/app/tasks/common-resolvers/getmakercheckers.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Maker Checker Data data resolver.
+ */
+@Injectable()
+export class GetMakerCheckers implements Resolve<Object> {
+
+  /**
+   * @param {TasksService} tasksService Tasks service.
+   */
+  constructor(private tasksService: TasksService) {}
+
+  /**
+   * Returns the maker checker data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.tasksService.getMakerCheckerData();
+  }
+
+}

src/app/tasks/common-resolvers/makerCheckerTemplate.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TasksService } from '../tasks.service';
+
+/**
+ * Maker Checker Template resolver.
+ */
+@Injectable()
+export class MakerCheckerTemplate implements Resolve<Object> {
+
+    /**
+     * @param {TasksService} tasksService Tasks service.
+     */
+    constructor(private tasksService: TasksService) { }
+
+    /**
+     * Returns the maker checker template data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.tasksService.getMakerCheckerTemplate();
+    }
+
+}

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

@@ -0,0 +1,94 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+/** Routing Imports */
+import { Route } from '../core/route/route.service';
+
+/** Translation Imports */
+import { extract } from '../core/i18n/i18n.service';
+
+/** Custom Components */
+import { CheckerInboxAndTasksComponent } from './checker-inbox-and-tasks/checker-inbox-and-tasks.component';
+import { CheckerInboxComponent } from './checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component';
+import { ClientApprovalComponent } from './checker-inbox-and-tasks-tabs/client-approval/client-approval.component';
+import { LoanApprovalComponent } from './checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component';
+import { LoanDisbursalComponent } from './checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component';
+import { RescheduleLoanComponent } from './checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
+
+/** Custom Resolvers */
+import { GetMakerCheckers } from './common-resolvers/getmakercheckers.resolver';
+import { GetGroupedClientsData } from './common-resolvers/getGroupedClientsData.resolver';
+import { GetOffices } from './common-resolvers/getOffices.resolver';
+import { GetLoans } from './common-resolvers/getLoans.resolver';
+import { GetRescheduleLoans } from './common-resolvers/getRescheduleLoans.resolver';
+import { MakerCheckerTemplate } from './common-resolvers/makerCheckerTemplate.resolver';
+
+/** Tasks Routes */
+const routes: Routes = [
+  Route.withShell([
+    {
+      path: 'checker-inbox-and-tasks',
+      component: CheckerInboxAndTasksComponent,
+      data: { title: extract('Checker Inbox & Tasks'), breadcrumb: 'Checker Inbox & Tasks' },
+      children: [
+        {
+          path: 'checker-inbox',
+          component: CheckerInboxComponent,
+          data: { title: extract('Checker Inbox') },
+          resolve: {
+            makerCheckerResource: GetMakerCheckers,
+            makerCheckerTemplate: MakerCheckerTemplate
+          },
+        },
+        {
+          path: 'client-approval',
+          component: ClientApprovalComponent,
+          data: { title: extract('Client Approval') },
+          resolve: {
+            groupedClientData: GetGroupedClientsData
+          },
+        },
+        {
+          path: 'loan-approval',
+          component: LoanApprovalComponent,
+          data: { title: extract('Laon Approval') },
+          resolve: {
+            officesData: GetOffices,
+            loansData: GetLoans
+          },
+        },
+        {
+          path: 'loan-disbursal',
+          component: LoanDisbursalComponent,
+          data: { title: extract('Loan Disbursal') },
+          resolve: {
+            loansData: GetLoans
+          }
+        },
+        {
+          path: 'reschedule-loan',
+          component: RescheduleLoanComponent,
+          data: { title: extract('Reschedule Loan') },
+          resolve: {
+            recheduleLoansData: GetRescheduleLoans
+          }
+        }
+      ]
+    }
+  ])
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: [
+    GetMakerCheckers,
+    GetGroupedClientsData,
+    GetOffices,
+    GetLoans,
+    GetRescheduleLoans,
+    MakerCheckerTemplate
+  ]
+})
+export class TasksRoutingModule { }

src/app/tasks/tasks.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+/** Custom Modules */
+import { SharedModule } from 'app/shared/shared.module';
+import { PipesModule } from '../pipes/pipes.module';
+import { TasksRoutingModule } from './tasks-routing.module';
+import { DirectivesModule } from '../directives/directives.module';
+
+/** Custom Components */
+import { CheckerInboxAndTasksComponent } from './checker-inbox-and-tasks/checker-inbox-and-tasks.component';
+import { CheckerInboxComponent } from './checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component';
+import { ClientApprovalComponent } from './checker-inbox-and-tasks-tabs/client-approval/client-approval.component';
+import { LoanApprovalComponent } from './checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component';
+import { LoanDisbursalComponent } from './checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component';
+import { RescheduleLoanComponent } from './checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
+
+/**
+ * Tasks Module
+ */
+@NgModule({
+  imports: [
+    SharedModule,
+    TasksRoutingModule,
+    DirectivesModule,
+    PipesModule
+  ],
+  declarations: [
+    CheckerInboxAndTasksComponent,
+    CheckerInboxComponent,
+    ClientApprovalComponent,
+    LoanApprovalComponent,
+    LoanDisbursalComponent,
+    RescheduleLoanComponent
+  ],
+  providers: [DatePipe]
+})
+export class TasksModule { }

src/app/tasks/tasks.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TasksService } from './tasks.service';
+
+describe('TasksService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TasksService = TestBed.get(TasksService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/tasks/tasks.service.ts

@@ -0,0 +1,105 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/**
+ * Tasks Service
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class TasksService {
+
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
+
+  /**
+   * Get Maker Checker Data
+   * @param {searchData} SearchData search the maker checker data.
+   */
+  getMakerCheckerData(searchData?: any): Observable<any> {
+    let httpParams = new HttpParams();
+    if (searchData) {
+      const propNames = Object.getOwnPropertyNames(searchData);
+      for (let i = 0; i < propNames.length; i++) {
+        const propName = propNames[i];
+        if (!(searchData[propName] === '' || searchData[propName] === undefined || searchData[propName] === null)) {
+          httpParams = httpParams.set(propName, searchData[propName]);
+        }
+      }
+    }
+    return this.http.get('/makercheckers', { params: httpParams });
+  }
+
+  /**
+   * Get Maker Checker Template
+   */
+  getMakerCheckerTemplate(): Observable<any> {
+    return this.http.get('/makercheckers');
+  }
+
+  /**
+   * Get Grouped Clients Data
+   */
+  getGroupedClientsData(): Observable<any> {
+    const httpParams = new HttpParams().set('limit', '1000')
+                                       .set('sqlSearch', 'c.status_enum=100');
+    return this.http.get('/clients', { params: httpParams});
+  }
+
+  /**
+   * Get all Offices Data
+   */
+  getAllOffices(): Observable<any> {
+    return this.http.get('/offices');
+  }
+
+  /**
+   * Get all Loans Data
+   */
+  getAllLoans(): Observable<any> {
+    const httpParams = new HttpParams().set('limit', '1000')
+                                       .set('sqlSearch', 'l.loan_status_id in (100,200)');
+    return this.http.get('/loans', { params: httpParams });
+  }
+
+  /**
+   * Get Pending Rescheduled Loans
+   */
+  getPendingRescheduleLoans(): Observable<any> {
+    const httpParams = new HttpParams().set('command', 'pending');
+    return this.http.get('/rescheduleloans', { params: httpParams });
+  }
+
+  /**
+   * Submit data in batches.
+   * @param {data} Data to be submitted
+   */
+  submitBatchData(data: any): Observable<any> {
+    return this.http.post('/batches', data);
+  }
+
+  /**
+   * Execute Maker Checker Approve and Reject Action.
+   * @param {makerCheckerId} MakerCheckerId
+   * @param {command} Command
+   */
+  executeMakerCheckerAction(makerCheckerId: any, command: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/makercheckers/${makerCheckerId}`, {}, { params: httpParams });
+  }
+
+  /**
+   * Execute Maker Checker Delete Action
+   * @param {makerCheckerId} MakerCheckerId
+   */
+  deleteMakerChecker(makerCheckerId: any): Observable<any> {
+    return this.http.delete(`/makercheckers/${makerCheckerId}`);
+  }
+
+}