feat: tour integration

Tour Integration
2022-09-02 17:03:13 +05:30
parent 52b7a3274e
commit f1be9ab5b1
119 changed files with 6360 additions and 456 deletions
@@ -1,20 +1,22 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
-    Create Code
-  </button>
+  <div #buttonCreateCode>
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Code
+    </button>
+  </div>
 </div>

 <div class="container">

-  <div fxLayout="row">
+  <div #filter fxLayout="row">
    <mat-form-field fxFlex>
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)">
    </mat-form-field>
  </div>

-  <div class="mat-elevation-z8">
+  <div #tableCodes class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
@@ -37,3 +39,31 @@

  </div>
 </div>
+
+<ng-template #templateButtonCreateCode let-popover="popover">
+  <h2>Manage Codes</h2>
+  <p class="mw300">To create additional codes.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateFilter let-popover="popover">
+  <h4>Search bar to filter codes.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateTableCodes let-popover="popover">
+  <h4>List of all codes in the Mifos system for your organization.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,16 +1,20 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';

@Component({
  selector: 'mifosx-codes',
  templateUrl: './codes.component.html',
  styleUrls: ['./codes.component.scss']
 })
-export class CodesComponent implements OnInit {
+export class CodesComponent implements OnInit, AfterViewInit {

  /** Codes data. */
  codesData: any;
@@ -24,11 +28,26 @@ export class CodesComponent implements OnInit {
  /** Sorter for codes table. */
  @ViewChild(MatSort, { static: true }) sort: MatSort;

+  /* Reference of create code button */
+  @ViewChild('buttonCreateCode') buttonCreateCode: ElementRef<any>;
+  /* Template for popover on create code button */
+  @ViewChild('templateButtonCreateCode') templateButtonCreateCode: TemplateRef<any>;
+  /* Reference of codes table */
+  @ViewChild('tableCodes') tableCodes: ElementRef<any>;
+  /* Template for popover on codes table */
+  @ViewChild('templateTableCodes') templateTableCodes: TemplateRef<any>;
+
  /**
   * Retrieves the codes data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) {
    this.route.data.subscribe(( data: { codes: any }) => {
      this.codesData = data.codes;
    });
@@ -58,4 +77,51 @@ export class CodesComponent implements OnInit {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showSystemCodesPage === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateButtonCreateCode, this.buttonCreateCode.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showSystemCodesList === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateTableCodes, this.tableCodes.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Create Codes Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showSystemCodesPage = false;
+    this.configurationWizardService.showSystemCodesList = false;
+    this.configurationWizardService.showSystemCodesForm = true;
+    this.router.navigate(['/system/codes/create']);
+  }
+
+  /**
+   * Previous Step (manage Codes System Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showSystemCodesPage = false;
+    this.configurationWizardService.showSystemCodesList = false;
+    this.configurationWizardService.showSystemCodes = true;
+    this.router.navigate(['/system']);
+  }
+
 }
@@ -6,7 +6,7 @@

      <mat-card-content>

-          <div fxLayout="column">
+          <div #codeFormRef fxLayout="column">

            <mat-form-field>
              <mat-label>Code Name</mat-label>
@@ -30,3 +30,14 @@
  </mat-card>

 </div>
+
+<ng-template #templateCodeFormRef let-data let-popover="popover">
+  <h2>Create Code</h2>
+  <p class="mw400">To create code, click on create code and enter the code name.<br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">Manage Codes</a></p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">Create Code</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,31 +1,43 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit  } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';

 /** Custom Services */
 import { SystemService } from '../../system.service';
+import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
+import { PopoverRef } from '../../../configuration-wizard/popover/popover-ref';
+import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';

@Component({
  selector: 'mifosx-create-code',
  templateUrl: './create-code.component.html',
  styleUrls: ['./create-code.component.scss']
 })
-export class CreateCodeComponent implements OnInit {
+export class CreateCodeComponent implements OnInit, AfterViewInit {

  /** Code form. */
  codeForm: FormGroup;

+  /* Reference of create code form */
+  @ViewChild('codeFormRef') codeFormRef: ElementRef<any>;
+  /* Template for popover on create code form */
+  @ViewChild('templateCodeFormRef') templateCodeFormRef: TemplateRef<any>;
+
  /**
   * @param {FormBuilder} formBuilder Form Builder.
   * @param {SystemService} systemService Accounting Service.
   * @param {ActivatedRoute} route Activated Route.
   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
  constructor(private formBuilder: FormBuilder,
              private systemService: SystemService,
              private route: ActivatedRoute,
-              private router: Router) { }
+              private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) { }

  /**
   * Creates the code form.
@@ -50,8 +62,53 @@ export class CreateCodeComponent implements OnInit {
  submit() {
    this.systemService.createCode(this.codeForm.value)
      .subscribe((response: any) => {
+        if (this.configurationWizardService.showSystemCodesForm === true) {
+          this.configurationWizardService.showSystemCodesForm = false;
+          this.configurationWizardService.showRolesandPermission = true;
+          this.router.navigate(['/system']);
+        } else {
        this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+        }
    });
  }

+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showSystemCodesForm === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateCodeFormRef, this.codeFormRef.nativeElement, 'right', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Roles and Permission) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showSystemCodesForm = false;
+    this.configurationWizardService.showRolesandPermission = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Previous Step (Manage Codes Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showSystemCodesForm = false;
+    this.configurationWizardService.showSystemCodesList = true;
+    this.router.navigate(['/system/codes']);
+  }
 }
@@ -1,13 +1,13 @@
 <div class="container">

-  <div fxLayout="row">
+  <div #filter fxLayout="row">
    <mat-form-field fxFlex>
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)">
    </mat-form-field>
  </div>

-  <div class="mat-elevation-z8">
+  <div #configurationsTable class="mat-elevation-z8">

    <table mat-table [dataSource]="dataSource" matSort>

@@ -54,3 +54,21 @@
  </div>

 </div>
+
+<ng-template #templateFilter let-data let-popover="popover">
+ <h4>Search bar to filter configurations.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigurationsTable, configurationsTable, 'top', true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateConfigurationsTable let-data let-popover="popover">
+  <h4 class="mw300">Global Configuration options and their current status. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895362/Global+Configuration" target="_blank">Global Configurations</a></h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,20 +1,23 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { AlertService } from 'app/core/alert/alert.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { ActivatedRoute, Router } from '@angular/router';

 /** Custom Services */
 import { SystemService } from '../../system.service';
+import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';

@Component({
  selector: 'mifosx-global-configurations-tab',
  templateUrl: './global-configurations-tab.component.html',
  styleUrls: ['./global-configurations-tab.component.scss']
 })
-export class GlobalConfigurationsTabComponent implements OnInit {
+export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {

  /** Configuration data. */
  configurationData: any;
@@ -28,14 +31,29 @@ export class GlobalConfigurationsTabComponent implements OnInit {
  /** Sorter for configurations table. */
  @ViewChild(MatSort, { static: true }) sort: MatSort;

+  /* Reference of filter */
+  @ViewChild('filter') filter: ElementRef<any>;
+  /* Template for popover on filter */
+  @ViewChild('templateFilter') templateFilter: TemplateRef<any>;
+  /* Reference of configurations table */
+  @ViewChild('configurationsTable') configurationsTable: ElementRef<any>;
+  /* Template for popover on configurations table */
+  @ViewChild('templateConfigurationsTable') templateConfigurationsTable: TemplateRef<any>;
+
  /**
   * Retrieves the configurations data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
   * @param {SystemService} systemService System Service.
   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
-  constructor(private alertService: AlertService,
-              private systemService: SystemService) {
+  constructor(private route: ActivatedRoute,
+              private alertService: AlertService,
+              private systemService: SystemService,
+              private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) {
      this.configurationData = this.systemService.getConfigurations();
  }

@@ -80,4 +98,52 @@ export class GlobalConfigurationsTabComponent implements OnInit {
        }
      });
  }
+
+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+   showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showConfigurationsPage === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateFilter, this.filter.nativeElement, 'bottom', true);
+      });
+    }
+
+    if (this.configurationWizardService.showConfigurationsList === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateConfigurationsTable, this.configurationsTable.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Scheduler Jobs System Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showConfigurationsPage = false;
+    this.configurationWizardService.showConfigurationsList = false;
+    this.configurationWizardService.showSchedulerJobs = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Previous Step (Global Configurations System Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showConfigurationsPage = false;
+    this.configurationWizardService.showConfigurationsList = false;
+    this.configurationWizardService.showConfigurations = true;
+    this.router.navigate(['/system']);
+  }
 }
@@ -1,8 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
+
+  <div #buttonEdit class="in-block">
+    <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      Edit
+    </button>
+  </div>
 </div>

 <div class="container">
@@ -13,7 +16,7 @@

      <div fxLayout="row">

-        <div fxFlex="30" fxLayout="column">
+        <div #mcTable fxFlex="30" fxLayout="column">
          <mat-list>
            <mat-list-item [ngClass]="selectedItem == grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
              <span class="groupingName">
@@ -54,3 +57,22 @@
  </mat-card>

 </div>
+
+<ng-template #templateButtonEdit let-popover="popover">
+  <h2>Edit</h2>
+  <p class="mw300">To add or remove a task from the Maker-Checker list.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateMcTable,mcTable,'top', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateMcTable let-popover="popover">
+  <h4 class="mw300">List of all maker checker tasks. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895359/Configure+Maker-Checker+Tasks" target="_blank">Configure Maker-Checker Tasks</a></h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonEdit,buttonEdit,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,7 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import * as _ from 'lodash';
+
+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
 import { SystemService } from '../system.service';

@Component({
@@ -9,7 +13,7 @@ import { SystemService } from '../system.service';
  templateUrl: './configure-maker-checker-tasks.component.html',
  styleUrls: ['./configure-maker-checker-tasks.component.scss']
 })
-export class ConfigureMakerCheckerTasksComponent implements OnInit {
+export class ConfigureMakerCheckerTasksComponent implements OnInit, AfterViewInit {

  permissionsData: any;
  groupings: string[] = [];
@@ -30,9 +34,29 @@ export class ConfigureMakerCheckerTasksComponent implements OnInit {
    permissions: { code: string }[]
  }[];

+  /* Reference of edit button */
+  @ViewChild('buttonEdit') buttonEdit: ElementRef<any>;
+  /* Template for popover on edit button */
+  @ViewChild('templateButtonEdit') templateButtonEdit: TemplateRef<any>;
+  /* Reference of maker checker taks table */
+  @ViewChild('mcTable') mcTable: ElementRef<any>;
+  /* Template for popover on maker checker taks table */
+  @ViewChild('templateMcTable') templateMcTable: TemplateRef<any>;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
+   */
  constructor(private route: ActivatedRoute,
    private systemService: SystemService,
-    private formBuilder: FormBuilder, ) {
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private configurationWizardService: ConfigurationWizardService,
+    private popoverService: PopoverService ) {
    this.route.data.subscribe((data: { permissions: any }) => {
      this.permissionsData = data.permissions;
    });
@@ -160,4 +184,50 @@ export class ConfigureMakerCheckerTasksComponent implements OnInit {
    });
  }

+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showMakerCheckerTablePage === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateButtonEdit, this.buttonEdit.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showMakerCheckerTableList === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateMcTable, this.mcTable.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Global Configurations System Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showMakerCheckerTablePage = false;
+    this.configurationWizardService.showMakerCheckerTableList = false;
+    this.configurationWizardService.showConfigurations = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Previous Step (Maker Checker Tasks System Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showMakerCheckerTablePage = false;
+    this.configurationWizardService.showMakerCheckerTableList = false;
+    this.configurationWizardService.showMakerCheckerTable = true;
+    this.router.navigate(['/system']);
+  }
 }
@@ -2,7 +2,7 @@

  <mat-card>

-    <form [formGroup]="dataTableForm" (ngSubmit)="submit()">
+    <form #dataTableFormRef [formGroup]="dataTableForm" (ngSubmit)="submit()">

      <mat-card-content>

@@ -116,3 +116,14 @@
  </mat-card>

 </div>
+
+<ng-template #templateDataTableFormRef let-popover="popover">
+  <h2>Create Datatable</h2>
+  <p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52592760/Manage+Data+Tables" target="_blank">Manage Datatables</a></p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();">Create Datatable</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit  } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -9,6 +9,8 @@ import { MatTableDataSource } from '@angular/material/table';

 /** Custom Services */
 import { SystemService } from '../../system.service';
+import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';

 /** Data Imports */
 import { appTableData, entitySubTypeData } from '../app-table-data';
@@ -17,6 +19,9 @@ import { appTableData, entitySubTypeData } from '../app-table-data';
 import { ColumnDialogComponent } from '../column-dialog/column-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';

+/** Custom Dialog Component */
+import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
+
 /**
 * Create Data Table Component.
 */
@@ -25,7 +30,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
  templateUrl: './create-data-table.component.html',
  styleUrls: ['./create-data-table.component.scss']
 })
-export class CreateDataTableComponent implements OnInit {
+export class CreateDataTableComponent implements OnInit, AfterViewInit {

  /** Data Table Form */
  dataTableForm: FormGroup;
@@ -62,6 +67,11 @@ export class CreateDataTableComponent implements OnInit {
  /** Sorter for columns table. */
  @ViewChild(MatSort, { static: true }) sort: MatSort;

+  /* Reference of create datatables form */
+  @ViewChild('dataTableFormRef') dataTableFormRef: ElementRef<any>;
+  /* Template for popover on create datatables form */
+  @ViewChild('templateDataTableFormRef') templateDataTableFormRef: TemplateRef<any>;
+
  /**
   * Retrieves the column codes data from `resolve`.
   * @param {FormBuilder} formBuilder Form Builder.
@@ -69,12 +79,16 @@ export class CreateDataTableComponent implements OnInit {
   * @param {ActivatedRoute} route Activated Route.
   * @param {Router} router Router for navigation.
   * @param {MatDialog} dialog Dialog Reference.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
  constructor(private formBuilder: FormBuilder,
              private systemService: SystemService,
              private route: ActivatedRoute,
              private router: Router,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) {
    this.route.data.subscribe((data: { columnCodes: any }) => {
      this.dataForDialog.columnCodes = data.columnCodes;
    });
@@ -189,9 +203,81 @@ export class CreateDataTableComponent implements OnInit {
   */
  submit() {
    this.dataTableForm.value.columns = this.columnData;
-    this.systemService.createDataTable(this.dataTableForm.value)
-      .subscribe((response: any) => {
+    this.systemService.createDataTable(this.dataTableForm.value).subscribe((response: any) => {
+      if (this.configurationWizardService.showDatatablesForm === true) {
+          this.configurationWizardService.showDatatablesForm = false;
+          this.openDialog();
+      } else {
        this.router.navigate(['../', response.resourceIdentifier], { relativeTo: this.route });
+      }
+    });
+  }
+
+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showDatatablesForm === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateDataTableFormRef, this.dataTableFormRef.nativeElement, 'bottom', true);
      });
+    }
+  }
+
+  /**
+   * Next Step (System Codes Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showDatatablesForm = false;
+    this.configurationWizardService.showSystemCodes = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Previous Step (Manage Datatables Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showDatatablesForm = false;
+    this.configurationWizardService.showDatatablesList = true;
+    this.router.navigate(['/system/data-tables']);
+  }
+
+  /**
+   * Opens dialog if the user wants to create more datatables Configuration Wizard.
+   */
+  openDialog() {
+    const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
+      data: {
+        stepName: 'data table'
+      },
+    });
+    continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
+      if (response.step === 1) {
+          this.configurationWizardService.showDatatablesForm = false;
+          this.router.navigate(['../'], { relativeTo: this.route });
+        } else if (response.step === 2) {
+          this.configurationWizardService.showDatatablesForm = true;
+          this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+          this.router.onSameUrlNavigation = 'reload';
+          this.router.navigate(['/organization/data-tables/create']);
+        } else if (response.step === 3) {
+          this.configurationWizardService.showDatatablesForm = false;
+          this.configurationWizardService.showSystemCodes = true;
+          this.router.navigate(['/system']);
+        }
+    });
  }
 }
+
+
@@ -1,20 +1,22 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DATATABLE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
-    Create Data Table
-  </button>
+  <div #createDatatableRef class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DATATABLE'">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Data Table
+    </button>
+  </div>
 </div>

 <div class="container">

-  <div fxLayout="row" fxLayoutGap="20px">
+  <div #filter fxLayout="row" fxLayoutGap="20px">
    <mat-form-field fxFlex>
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)">
    </mat-form-field>
  </div>

-  <div class="mat-elevation-z8">
+  <div #datatablesList class="mat-elevation-z8">

    <table mat-table [dataSource]="dataSource" matSort>

@@ -38,3 +40,31 @@
  </div>

 </div>
+
+<ng-template #templateCreateDatatableRef let-popover="popover">
+  <h2>Create Data Table</h2>
+  <p class="mw300">This will launch a page that will allow you to create a new data table.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateFilter let-popover="popover">
+  <h4>Search bar to filter datatables.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateDatatableRef,createDatatableRef,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDatatablesList,datatablesList,'top', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateDatatablesList let-popover="popover">
+  <h4>List of all currently available data tables.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep();">Next</button>
+  </div>
+</ng-template>
@@ -1,13 +1,17 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';

 /** rxjs Imports */
 import { of } from 'rxjs';

+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+
 /**
 * Manage Data Tables component.
 */
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
  templateUrl: './manage-data-tables.component.html',
  styleUrls: ['./manage-data-tables.component.scss']
 })
-export class ManageDataTablesComponent implements OnInit {
+export class ManageDataTablesComponent implements OnInit, AfterViewInit {

  /** Data table data. */
  dataTableData: any;
@@ -30,11 +34,26 @@ export class ManageDataTablesComponent implements OnInit {
  /** Sorter for manage data tables table. */
  @ViewChild(MatSort, { static: true }) sort: MatSort;

+  /* Reference of create datatables button */
+  @ViewChild('createDatatableRef') createDatatableRef: ElementRef<any>;
+  /* Template for popover on create datatables button */
+  @ViewChild('templateCreateDatatableRef') templateCreateDatatableRef: TemplateRef<any>;
+  /* Reference of list of datatables */
+  @ViewChild('datatablesList') datatablesList: ElementRef<any>;
+  /* Template for popover on list of datatables */
+  @ViewChild('templateDatatablesList') templateDatatablesList: TemplateRef<any>;
+
  /**
   * Retrieves the data tables data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) {
    this.route.data.subscribe(( data: { dataTables: any }) => {
      this.dataTableData = data.dataTables;
    });
@@ -64,4 +83,50 @@ export class ManageDataTablesComponent implements OnInit {
    this.dataSource.sort = this.sort;
  }

+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showDatatablesPage === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateCreateDatatableRef, this.createDatatableRef.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showDatatablesList === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateDatatablesList, this.datatablesList.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Create data tables Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showDatatablesPage = false;
+    this.configurationWizardService.showDatatablesList = false;
+    this.configurationWizardService.showDatatablesForm = true;
+    this.router.navigate(['/system/data-tables/create']);
+  }
+
+  /**
+   * Previous Step (Manage Datables system Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showDatatablesPage = false;
+    this.configurationWizardService.showDatatablesList = false;
+    this.configurationWizardService.showDatatables = true;
+    this.router.navigate(['/system']);
+  }
 }
@@ -1,20 +1,22 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+  <div #buttonCreateReport class="in-block">
    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_REPORT'">
        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
        Create Report
    </button>
+  </div>
 </div>

 <div class="container">

-    <div fxLayout="row">
+    <div #filter fxLayout="row">
        <mat-form-field fxFlex>
            <mat-label>Filter</mat-label>
            <input matInput (keyup)="applyFilter($event.target.value)">
        </mat-form-field>
    </div>

-    <div class="mat-elevation-z8">
+    <div #reportsTable class="mat-elevation-z8">

        <table mat-table [dataSource]="dataSource" matSort>

@@ -67,3 +69,31 @@

    </div>
 </div>
+
+<ng-template #templateButtonCreateReport let-popover="popover">
+  <h2>Create Report</h2>
+  <p class="mw300">This option allows you to create new report.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateFilter let-popover="popover">
+  <h4>Search bar to filter reports by name.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateReport, buttonCreateReport, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReportsTable,reportsTable, 'top', true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateReportsTable let-popover="popover">
+  <h4 class="mw300">List of all currently available reports. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">Manage Reports</a></h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,9 +1,17 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+
+/* Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+
+/** Custom Dialog Component */
+import { CompletionDialogComponent } from '../../configuration-wizard/completion-dialog/completion-dialog.component';

 /**
 * Manage Reports Component.
@@ -13,7 +21,7 @@ import { MatTableDataSource } from '@angular/material/table';
  templateUrl: './manage-reports.component.html',
  styleUrls: ['./manage-reports.component.scss']
 })
-export class ManageReportsComponent implements OnInit {
+export class ManageReportsComponent implements OnInit, AfterViewInit {

  /** Reports Data. */
  reportsData: any;
@@ -27,11 +35,24 @@ export class ManageReportsComponent implements OnInit {
   /** Sorter for reports table. */
   @ViewChild(MatSort, { static: true }) sort: MatSort;

+   /* Reference of Create Report Button */
+   @ViewChild('buttonCreateReport') buttonCreateReport: ElementRef<any>;
+   /* Template for popover on Create Report Button */
+   @ViewChild('templateButtonCreateReport') templateButtonCreateReport: TemplateRef<any>;
+
  /**
   * Retrieves the reports data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
+   * @param {Matdialog} matdialog Matdialog.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService,
+              private dialog: MatDialog) {
    this.route.data.subscribe((data: { reports: any }) => {
      this.reportsData = data.reports;
    });
@@ -61,4 +82,50 @@ export class ManageReportsComponent implements OnInit {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showManageReports === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateButtonCreateReport, this.buttonCreateReport.nativeElement, 'bottom', true);
+      });
+    }
+  }
+
+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * Next Step (Home) Configuration Wizard Tour Complete.
+   */
+  nextStep() {
+    this.configurationWizardService.showManageReports = false;
+    this.openNextStepDialog();
+  }
+
+  /**
+   * Previous Step (Manage Reports System Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Completed Configuration Wizard Tour Dialog.
+   */
+  openNextStepDialog() {
+    const completionDialogRef = this.dialog.open( CompletionDialogComponent );
+    completionDialogRef.afterClosed().subscribe(() => {
+      this.router.navigate(['/home']);
+    });
+  }
 }
@@ -1,25 +1,28 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutGap="20px">
-  <h2 class="no-m">Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}</h2>
-  <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
-    <fa-icon icon="times-circle"></fa-icon>&nbsp;&nbsp;
-    Suspend
-  </button>
-  <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
-    <fa-icon icon="times-circle"></fa-icon>&nbsp;&nbsp;
-    Activate
-  </button>
+    <div #schedulerStatus>
+    <h2 class="no-m">Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}</h2>
+    </div>
+    <button mat-raised-button class="suspend">
+      <fa-icon icon="times-circle"></fa-icon>&nbsp;&nbsp;
+      Suspend
+    </button>
+    <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
+      <fa-icon icon="times-circle"></fa-icon>&nbsp;&nbsp;
+      Activate
+    </button>
+
 </div>

 <div class="container">

-  <div fxLayout="row" fxLayoutGap="20px">
+  <div #filter fxLayout="row" fxLayoutGap="20px">
    <mat-form-field fxFlex>
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)">
    </mat-form-field>
  </div>

-  <div class="mat-elevation-z8">
+  <div #jobsTable class="mat-elevation-z8">

    <table mat-table [dataSource]="dataSource" matSort>

@@ -95,10 +98,41 @@
 <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
  <button mat-raised-button color="primary" (click)="runSelectedJobs()">
    <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
-    Run Selected Jobs
+    Run Selected Jobs<ng-template #templateSchedulerJobs let-data let-popover="popover">
+  <h2>Template</h2>
+  <p>This is the template I am trying to use. Is that fine.</p>
+  <button (click)="popover.close();nextStepSchedulerJobs()">Next</button>
+</ng-template>
  </button>
  <button mat-raised-button color="primary" (click)="refresh()">
    <fa-icon icon="sync"></fa-icon>&nbsp;&nbsp;
    Refresh
  </button>
 </div>
+
+<ng-template #templateSchedulerStatus let-data let-popover="popover">
+  <h4>Scheduler Status. Button will be used to change the status.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateFilter let-data let-popover="popover">
+  <h4>Search bar to filter jobs.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSchedulerStatus,schedulerStatus, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateJobsTable,jobsTable, 'top', true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateJobsTable let-data let-popover="popover">
+  <h4>List of all scheduled batch jobs <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895356/Manage+Scheduler+Jobs" target="_blank">Schedular Jobs</a></h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,14 +1,23 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
 import { SelectionModel } from '@angular/cdk/collections';
+import { MatDialog } from '@angular/material/dialog';

 /** rxjs Imports */
 import { of } from 'rxjs';
 import { SystemService } from '../system.service';

+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+
+/** Custom Dialog Component */
+import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
+
 /**
 * Manage scheduler jobs component.
 */
@@ -17,7 +26,7 @@ import { SystemService } from '../system.service';
  templateUrl: './manage-scheduler-jobs.component.html',
  styleUrls: ['./manage-scheduler-jobs.component.scss']
 })
-export class ManageSchedulerJobsComponent implements OnInit {
+export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {

  /** Jobs data. */
  jobData: any;
@@ -39,11 +48,34 @@ export class ManageSchedulerJobsComponent implements OnInit {
  /** Sorter for manage scheduler jobs table. */
  @ViewChild(MatSort, { static: true }) sort: MatSort;

+  /* Reference of scheduler status */
+  @ViewChild('schedulerStatus', { static: true }) schedulerStatus: ElementRef<any>;
+  /* Template for popover on scheduler status */
+  @ViewChild('templateSchedulerStatus', { static: true }) templateSchedulerStatus: TemplateRef<any>;
+  /* Reference of jobs table */
+  @ViewChild('jobsTable', { static: true }) jobsTable: ElementRef<any>;
+  /* Template for popover on jobs table */
+  @ViewChild('templateJobsTable') templateJobsTable: TemplateRef<any>;
+
  /**
   * Retrieves the scheduler jobs data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
+   * @param {Matdialog} matdialog Matdialog.
+   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
-  constructor(private systemService: SystemService) {}
+  constructor(private route: ActivatedRoute,
+              private systemService: SystemService,
+              private router: Router,
+              private dialog: MatDialog,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) {
+    this.route.data.subscribe((data: { jobsScheduler: any }) => {
+      this.jobData = data.jobsScheduler[0];
+      this.schedulerData = data.jobsScheduler[1];
+    });
+  }

  /**
   * Filters data in manage scheduler jobs table based on passed value.
@@ -132,4 +164,74 @@ export class ManageSchedulerJobsComponent implements OnInit {
  refresh(): void {
    this.setJobs();
  }
+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showSchedulerJobsPage === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateSchedulerStatus, this.schedulerStatus.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showSchedulerJobsList === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateJobsTable, this.jobsTable.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Opens Dialog for next step.
+   */
+  nextStep() {
+    this.configurationWizardService.showSchedulerJobsPage = false;
+    this.configurationWizardService.showSchedulerJobsList = false;
+    this.openNextStepDialog();
+  }
+
+  /**
+   * Previous Step (Scheduler Jobs) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showSchedulerJobsPage = false;
+    this.configurationWizardService.showSchedulerJobsList = false;
+    this.configurationWizardService.showSchedulerJobs = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Next Step (Accounting) Dialog Configuration Wizard.
+   */
+  openNextStepDialog() {
+    const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
+      data: {
+        nextStepName: 'Setup Accounting',
+        previousStepName: 'System',
+        stepPercentage: 60
+      },
+    });
+    nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
+    if (response.nextStep) {
+      this.configurationWizardService.showSchedulerJobsPage = false;
+      this.configurationWizardService.showSchedulerJobsList = false;
+      this.configurationWizardService.showChartofAccounts = true;
+      this.router.navigate(['/accounting']);
+      } else {
+      this.configurationWizardService.showSchedulerJobsPage = false;
+      this.configurationWizardService.showSchedulerJobsList = false;
+      this.router.navigate(['/home']);
+      }
+    });
+}
 }
@@ -1,20 +1,22 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" [routerLink]="['add']">
-  <button mat-raised-button color="primary">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
-    Add Role
-  </button>
+  <div #buttonAddRole class="in-block">
+    <button mat-raised-button color="primary">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Add Role
+    </button>
+  </div>
 </div>

 <div class="container">

-  <div fxLayout="row" fxLayoutGap="20px">
+  <div #filter fxLayout="row" fxLayoutGap="20px">
    <mat-form-field fxFlex>
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)">
    </mat-form-field>
  </div>

-  <div class="mat-elevation-z8">
+  <div #tableRolesandPermissions class="mat-elevation-z8">

    <table mat-table [dataSource]="dataSource" matSort>

@@ -56,3 +58,31 @@
  </div>

 </div>
+
+<ng-template #templateButtonAddRole let-popover="popover">
+  <h2>Add Role</h2>
+  <p class="mw300">To create a new role.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateFilter let-popover="popover">
+  <h4>Search bar to filter roles.</h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonAddRole, buttonAddRole, 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableRolesandPermissions, tableRolesandPermissions, 'top', true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateTableRolesandPermissions let-popover="popover">
+  <h4 class="mw300">List of roles defined within the organization. or more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895364/Manage+Roles+and+Permissions" target="_blank">Manage Roles and Permission</a></h4>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>
@@ -1,13 +1,17 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';

 /** rxjs Imports */
 import { of } from 'rxjs';

+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+
 /**
 * Roles and Permissions component.
 */
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
  templateUrl: './roles-and-permissions.component.html',
  styleUrls: ['./roles-and-permissions.component.scss']
 })
-export class RolesAndPermissionsComponent implements OnInit {
+export class RolesAndPermissionsComponent implements OnInit, AfterViewInit {

  /** Role data. */
  roleData: any;
@@ -30,11 +34,25 @@ export class RolesAndPermissionsComponent implements OnInit {
  /** Sorter for roles and permissions table. */
  @ViewChild(MatSort, { static: true }) sort: MatSort;

+  /* Reference of add role button */
+  @ViewChild('buttonAddRole') buttonAddRole: ElementRef<any>;
+  /* Template for popovver on add role button */
+  @ViewChild('templateButtonAddRole') templateButtonAddRole: TemplateRef<any>;
+  /* Reference of roles and permission table */
+  @ViewChild('tableRolesandPermissions') tableRolesandPermissions: ElementRef<any>;
+  /* Template for roles and permission table */
+  @ViewChild('templateTableRolesandPermissions') templateTableRolesandPermissions: TemplateRef<any>;
  /**
   * Retrieves the roles data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) {
    this.route.data.subscribe(( data: { roles: any }) => {
      this.roleData = data.roles;
    });
@@ -72,4 +90,51 @@ export class RolesAndPermissionsComponent implements OnInit {
    this.dataSource.sort = this.sort;
  }

+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showRolesandPermissionPage === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateButtonAddRole, this.buttonAddRole.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showRolesandPermissionList === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateTableRolesandPermissions, this.tableRolesandPermissions.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Users) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showRolesandPermissionPage = false;
+    this.configurationWizardService.showRolesandPermissionList = false;
+    this.configurationWizardService.showUsers = true;
+    this.router.navigate(['/users']);
+  }
+
+  /**
+   * Previous Step (Roles and Permission System Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showRolesandPermissionPage = false;
+    this.configurationWizardService.showRolesandPermissionList = false;
+    this.configurationWizardService.showRolesandPermission = true;
+    this.router.navigate(['/system']);
+  }
+
 }
@@ -8,37 +8,45 @@

        <mat-nav-list>

-          <mat-list-item [routerLink]="['data-tables']">
-            <mat-icon matListIcon>
-              <fa-icon icon="table" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine>Manage Data tables</h4>
-            <p matLine>Add new extra fields to any entity in the form of data table</p>
-          </mat-list-item>
+          <div #datatables>
+            <mat-list-item [routerLink]="['data-tables']">
+              <mat-icon matListIcon>
+                <fa-icon icon="table" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>Manage Data tables</h4>
+              <p matLine>Add new extra fields to any entity in the form of data table</p>
+            </mat-list-item>
+          </div>

-          <mat-list-item [routerLink]="['codes']">
-            <mat-icon matListIcon>
-              <fa-icon icon="list-ul" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine>Manage Codes</h4>
-            <p matLine>Codes are used to define drop down values</p>
-          </mat-list-item>
+          <div #codes>
+            <mat-list-item [routerLink]="['codes']">
+              <mat-icon matListIcon>
+                <fa-icon icon="list-ul" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>Manage Codes</h4>
+              <p matLine>Codes are used to define drop down values</p>
+            </mat-list-item>
+          </div>

-          <mat-list-item [routerLink]="['roles-and-permissions']">
-            <mat-icon matListIcon>
-              <fa-icon icon="key" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine>Manage Roles and Permissions</h4>
-            <p matLine>Define or modify roles and associated permissions</p>
-          </mat-list-item>
+          <div #rolesandpermission>
+            <mat-list-item [routerLink]="['roles-and-permissions']">
+              <mat-icon matListIcon>
+                <fa-icon icon="key" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>Manage Roles and Permissions</h4>
+              <p matLine>Define or modify roles and associated permissions</p>
+            </mat-list-item>
+          </div>

-          <mat-list-item [routerLink]="['configure-mc-tasks']">
-            <mat-icon matListIcon>
-              <fa-icon icon="sitemap" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine>Configure Maker Checker Tasks</h4>
-            <p matLine>Define or modify Maker Checker tasks</p>
-          </mat-list-item>
+          <div #makerCheckerTable>
+            <mat-list-item [routerLink]="['configure-mc-tasks']">
+              <mat-icon matListIcon>
+                <fa-icon icon="sitemap" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>Configure Maker Checker Tasks</h4>
+              <p matLine>Define or modify Maker Checker tasks</p>
+            </mat-list-item>
+          </div>

          <mat-list-item [routerLink]="['hooks']">
            <mat-icon matListIcon>
@@ -80,22 +88,27 @@
            <p matLine>Audit logs of all the activities, such as create client, disburse loans etc</p>
          </mat-list-item>

-          <mat-list-item [routerLink]="['reports']">
-            <mat-icon matListIcon>
-              <fa-icon icon="file-word" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine>Manage Reports</h4>
-            <p matLine>Add new report and classify reports</p>
-          </mat-list-item>
+          <div #manageReports>
+            <mat-list-item [routerLink]="['reports']">
+              <mat-icon matListIcon>
+                <fa-icon icon="file-word" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>Manage Reports</h4>
+              <p matLine>Add new report and classify reports</p>
+            </mat-list-item>
+          </div>

-          <mat-list-item [routerLink]="['scheduler-jobs']">
-            <mat-icon matListIcon>
-              <fa-icon icon="clock" size="sm"></fa-icon>
-            </mat-icon>
-            <h4 matLine>Scheduler Jobs</h4>
-            <p matLine>Schedule a job, modify or delete jobs</p>
-          </mat-list-item>
+          <div #schedulerJobs>
+            <mat-list-item [routerLink]="['scheduler-jobs']">
+              <mat-icon matListIcon>
+                <fa-icon icon="clock" size="sm"></fa-icon>
+              </mat-icon>
+              <h4 matLine>Scheduler Jobs</h4>
+              <p matLine>Schedule a job, modify or delete jobs</p>
+            </mat-list-item>
+          </div>

+        <div #configurations>
          <mat-list-item [routerLink]="['configurations']">
            <mat-icon matListIcon>
              <fa-icon icon="cogs" size="sm"></fa-icon>
@@ -103,6 +116,8 @@
            <h4 matLine>Configurations</h4>
            <p matLine>Global configurations, Cache and Business Date settings</p>
          </mat-list-item>
+        </div>
+

          <mat-list-item [routerLink]="['account-number-preferences']">
            <mat-icon matListIcon>
@@ -137,3 +152,73 @@
  </mat-card>

 </div>
+
+<ng-template #templateDatatables let-popover="popover">
+  <h2>Manage Data Tables</h2>
+  <p class="mw300">Mifos X data-tables allow the user to add custom fields in addition to the built-in fields to a client profile, loan/saving account, group, center or an office.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepDatatables()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepDatatables()">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateCodes let-popover="popover">
+  <h2>Manage Codes</h2>
+  <p class="mw300">From this selection you can create new drop-downs and edit their values as well as edit the values for system-generated codes and drop-downs.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepCodes()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepCodes()">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateRolesandPermission let-popover="popover">
+  <h2>Manage Roles and Permissions</h2>
+  <p class="mw300">Roles and Permissions allow the administrator to control access to Mifos based on what roles are assigned to Users and what Permissions are assigned to roles.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepRolesandPermission()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepRolesandPermission()">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateMakerCheckerTable let-popover="popover">
+  <h2>Configure Maker-Checker Tasks</h2>
+  <p class="mw300">The “Maker-Checker” principle requires every tasks to be completed by two people to reduce the chance of errors and misuse. One person initiates the process and the second completes it.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepMakerCheckerTable()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepMakerCheckerTable()">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateConfigurations let-popover="popover">
+  <h2>Configuration</h2>
+  <p class="mw300">The Configurations page allows you to further customize the way your organization uses the Mifos system.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepConfigurations()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepConfigurations()">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateSchedulerJobs let-popover="popover">
+  <h2>Manage Scheduler Jobs</h2>
+  <p class="mw300">By using Scheduler Jobs, you can set batch jobs to be completed at regular intervals. From this page you can schedule, modify or delete jobs.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepSchedulerJobs()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepSchedulerJobs()">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateManageReports let-popover="popover">
+  <h2>Manage Reports</h2>
+  <p class="mw300">You may add customized reports and edit core reports for your organization.</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStepManageReports()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStepManageReports()">Next</button>
+  </div>
+</ng-template>
@@ -1,15 +1,232 @@
-import { Component, OnInit } from '@angular/core';
+/** Angular Imports */
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+/** Custom Services */
+import { PopoverService } from '../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';

@Component({
  selector: 'mifosx-system',
  templateUrl: './system.component.html',
  styleUrls: ['./system.component.scss']
 })
-export class SystemComponent implements OnInit {
+export class SystemComponent implements OnInit, AfterViewInit {

-  constructor() { }
+  /* Reference of manage datatables */
+  @ViewChild('datatables') datatables: ElementRef<any>;
+  /* Template for popover on manage datables */
+  @ViewChild('templateDatatables') templateDatatables: TemplateRef<any>;
+  /* Reference of manage codes */
+  @ViewChild('codes') codes: ElementRef<any>;
+  /* Template for popover on manage codes */
+  @ViewChild('templateCodes') templateCodes: TemplateRef<any>;
+  /* Reference of roles and permission */
+  @ViewChild('rolesandpermission') rolesandpermission: ElementRef<any>;
+  /* Template for popover on roles and permission */
+  @ViewChild('templateRolesandPermission') templateRolesandPermission: TemplateRef<any>;
+  /* Reference of makerchecker tasks */
+  @ViewChild('makerCheckerTable') makerCheckerTable: ElementRef<any>;
+  /* Template for popover on maker checker tasks */
+  @ViewChild('templateMakerCheckerTable') templateMakerCheckerTable: TemplateRef<any>;
+  /* Reference of global configurations */
+  @ViewChild('configurations') configurations: ElementRef<any>;
+  /* Template for popover on configurations */
+  @ViewChild('templateConfigurations') templateConfigurations: TemplateRef<any>;
+  /* Reference of scheduler jobs */
+  @ViewChild('schedulerJobs') schedulerJobs: ElementRef<any>;
+  /* Template for popover on scheduler jobs */
+  @ViewChild('templateSchedulerJobs') templateSchedulerJobs: TemplateRef<any>;
+  /* Reference of manage reports */
+  @ViewChild('manageReports') manageReports: ElementRef<any>;
+  /* Template for popover on manage reports */
+  @ViewChild('templateManageReports') templateManageReports: TemplateRef<any>;
+
+  /**
+   * @param {Router} router Router.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
+   */
+  constructor(private router: Router,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) { }

  ngOnInit() {
  }

+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showDatatables === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateDatatables, this.datatables.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showSystemCodes === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateCodes, this.codes.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showRolesandPermission === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateRolesandPermission, this.rolesandpermission.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showMakerCheckerTable === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateMakerCheckerTable, this.makerCheckerTable.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showConfigurations === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateConfigurations, this.configurations.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showSchedulerJobs === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateSchedulerJobs, this.schedulerJobs.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showManageReports === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateManageReports, this.manageReports.nativeElement, 'bottom', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Manage Datatables Page) Configuration Wizard.
+   */
+  nextStepDatatables() {
+    this.configurationWizardService.showDatatables = false;
+    this.configurationWizardService.showDatatablesPage = true;
+    this.router.navigate(['/system/data-tables']);
+  }
+
+  /**
+   * Previous Step (Define working days Page) Configuration Wizard.
+   */
+  previousStepDatatables() {
+    this.configurationWizardService.showDatatables = false;
+    this.configurationWizardService.showDefineWorkingDays = true;
+    this.router.navigate(['/organization/working-days']);
+  }
+
+  /**
+   * Next Step (Manage Codes Page) Configuration Wizard.
+   */
+  nextStepCodes() {
+    this.configurationWizardService.showSystemCodes = false;
+    this.configurationWizardService.showSystemCodesPage  = true;
+    this.router.navigate(['/system/codes']);
+  }
+
+  /**
+   * Previous Step (Create Datatables Page) Configuration Wizard.
+   */
+  previousStepCodes() {
+    this.configurationWizardService.showSystemCodes = false;
+    this.configurationWizardService.showDatatablesForm = true;
+    this.router.navigate(['/system/data-tables/create']);
+  }
+
+  /**
+   * Next Step (Manage Roles and Permission Page) Configuration Wizard.
+   */
+  nextStepRolesandPermission() {
+    this.configurationWizardService.showRolesandPermission = false;
+    this.configurationWizardService.showRolesandPermissionPage = true;
+    this.router.navigate(['/system/roles-and-permissions']);
+  }
+
+  /**
+   * Previous Step (Create Codes Page) Configuration Wizard.
+   */
+  previousStepRolesandPermission() {
+    this.configurationWizardService.showRolesandPermission = false;
+    this.configurationWizardService.showSystemCodesForm = true;
+    this.router.navigate(['/system/codes/create']);
+  }
+
+  /**
+   * Next Step (Maker Checker Tasks Page) Configuration Wizard.
+   */
+  nextStepMakerCheckerTable() {
+    this.configurationWizardService.showMakerCheckerTable = false;
+    this.configurationWizardService.showMakerCheckerTablePage = true;
+    this.router.navigate(['/system/configure-mc-tasks']);
+  }
+
+  /**
+   * Previous Step (Create User Page) Configuration Wizard.
+   */
+  previousStepMakerCheckerTable() {
+    this.configurationWizardService.showMakerCheckerTable = false;
+    this.configurationWizardService.showUsersForm = true;
+    this.router.navigate(['/users/create']);
+  }
+
+  /**
+   * Next Step (Configurations Page) Configuration Wizard.
+   */
+  nextStepConfigurations() {
+    this.configurationWizardService.showConfigurations = false;
+    this.configurationWizardService.showConfigurationsPage = true;
+    this.router.navigate(['/system/configurations']);
+  }
+
+  /**
+   * Previous Step (Makerchecker Tasks Page) Configuration Wizard.
+   */
+  previousStepConfigurations() {
+    this.configurationWizardService.showConfigurations = false;
+    this.configurationWizardService.showMakerCheckerTableList = true;
+    this.router.navigate(['/system/configure-mc-tasks']);
+  }
+
+  /**
+   * Next Step (Manage Scheduler Jobs Page) Configuration Wizard.
+   */
+  nextStepSchedulerJobs() {
+    this.configurationWizardService.showSchedulerJobs = false;
+    this.configurationWizardService.showSchedulerJobsPage = true;
+    this.router.navigate(['/system/scheduler-jobs']);
+  }
+
+  /**
+   * Previous Step (Global Configurations Page) Configuration Wizard.
+   */
+  previousStepSchedulerJobs() {
+    this.configurationWizardService.showSchedulerJobs = false;
+    this.configurationWizardService.showConfigurationsList = true;
+    this.router.navigate(['/system/global-configurations']);
+  }
+
+  /**
+   * Next Step (Manage Reports Page) Configuration Wizard.
+   */
+  nextStepManageReports() {
+    this.router.navigate(['/system/reports']);
+  }
+
+  /**
+   * Previous Step (Manage Funds Page) Configuration Wizard.
+   */
+  previousStepManageReports() {
+    this.configurationWizardService.showManageReports = false;
+    this.configurationWizardService.showManageFunds = true;
+    this.router.navigate(['/organization/manage-funds']);
+  }
 }