feat: add create cashier component (#1064)

Fixes: #161

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html

@@ -0,0 +1,82 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="allocateCashForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <input matInput required formControlName="office">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Teller Name</mat-label>
+            <input matInput required formControlName="tellerName">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Cashier</mat-label>
+            <input matInput required formControlName="cashier">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Assignment Period</mat-label>
+            <input matInput formControlName="assignmentPeriod">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
+            <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #cashDatePicker></mat-datepicker>
+            <mat-error *ngIf="allocateCashForm.controls.txnDate.hasError('required')">
+              Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Currency</mat-label>
+            <mat-select required formControlName="currencyCode">
+              <mat-option *ngFor="let currency of cashierData.currencyOptions" [value]="currency.code">
+                {{ currency.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="allocateCashForm.controls.currencyCode.hasError('required')">
+              Currency <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Amount</mat-label>
+            <input matInput required formControlName="txnAmount">
+            <mat-error *ngIf="allocateCashForm.controls.txnAmount.hasError('required')">
+              Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Notes/Comments</mat-label>
+            <input matInput required formControlName="txnNote">
+            <mat-error *ngIf="allocateCashForm.controls.txnNote.hasError('required')">
+              Notes/Comments <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!allocateCashForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.spec.ts

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

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.ts

@@ -0,0 +1,84 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services. */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Allocate Cash component.
+ */
+@Component({
+  selector: 'mifosx-allocate-cash',
+  templateUrl: './allocate-cash.component.html',
+  styleUrls: ['./allocate-cash.component.scss']
+})
+export class AllocateCashComponent implements OnInit {
+
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Cashier data. */
+  cashierData: any;
+  /** Cashier Form. */
+  allocateCashForm: FormGroup;
+
+  /**
+   * Get cashier data from `Resolver`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route ActivateRoute.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {OrganizationService} organizationService Organization Service.
+   * @param {Router} router Router.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private datePipe: DatePipe,
+              private organizationService: OrganizationService,
+              private router: Router) {
+    this.route.data.subscribe((data: { cashierTemplate: any}) => {
+      this.cashierData = data.cashierTemplate;
+    });
+  }
+
+  ngOnInit() {
+    this.setCashierForm();
+  }
+
+  /**
+   * Set Cashier form.
+   */
+  setCashierForm() {
+    this.allocateCashForm = this.formBuilder.group({
+      'office': [{value: this.cashierData.officeName, disabled: true}],
+      'tellerName': [{value: this.cashierData.tellerName, disabled: true}],
+      'cashier': [{value: this.cashierData.cashierName, disabled: true}],
+      'assignmentPeriod': [{value: this.datePipe.transform(this.cashierData.startDate, 'dd MMMM yyyy') + ' - ' + this.datePipe.transform(this.cashierData.endDate, 'dd MMMM yyyy'), disabled: true}],
+      'txnDate': [new Date(), Validators.required],
+      'currencyCode': ['', Validators.required],
+      'txnAmount': ['', Validators.required],
+      'txnNote': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submits Allocate Cash form.
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const txnDate = this.allocateCashForm.value.txnDate;
+    this.allocateCashForm.patchValue({
+      txnDate: this.datePipe.transform(txnDate, dateFormat)
+    });
+    const allocateCashForm = this.allocateCashForm.value;
+    allocateCashForm.dateFormat = dateFormat;
+    allocateCashForm.locale = 'en';
+    this.organizationService.allocateCash(this.cashierData.tellerId, this.cashierData.cashierId, allocateCashForm).subscribe((response: any) => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -38,10 +38,12 @@
       <ng-container matColumnDef="vaultActions">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Vault Actions </th>
         <td mat-cell *matCellDef="let cashier">
-          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="Allocate Cash">
+          <button class="cashier-action-button" mat-raised-button color="accent" matTooltip="Allocate Cash"
+            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'allocate']">
             <i class="fa fa-arrow-up"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="Settle Cash">
+          <button class="cashier-action-button" mat-raised-button color="warn" matTooltip="Settle Cash"
+            (click)="routeEdit($event)" [routerLink]="[cashier.id, 'settle']">
             <i class="fa fa-arrow-down"></i>
           </button>
           <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html

@@ -0,0 +1,77 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="createCashierForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <input matInput required autofocus [value]="cashierTemplate.officeName" disabled>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Teller Name</mat-label>
+            <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Cashier</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of cashierTemplate.staffOptions" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="createCashierForm.controls.staffId.hasError('required')">
+              Cashier <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Description/Notes</mat-label>
+            <input matInput autofocus formControlName="description">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
+            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #fromDatePicker></mat-datepicker>
+            <mat-error *ngIf="createCashierForm.controls.startDate.hasError('required')">
+              From Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #toDatePicker></mat-datepicker>
+            <mat-error *ngIf="createCashierForm.controls.endDate.hasError('required')">
+              To Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <div fxFlex="48%" style="padding-top: 10px;">
+            <mat-checkbox labelPosition="before" formControlName="isFullDay">
+              Full Day?
+            </mat-checkbox>
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!createCashierForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.spec.ts

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

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.ts

@@ -0,0 +1,83 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services. */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Create Cashier component.
+ */
+@Component({
+  selector: 'mifosx-create-cashier',
+  templateUrl: './create-cashier.component.html',
+  styleUrls: ['./create-cashier.component.scss']
+})
+export class CreateCashierComponent implements OnInit {
+
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Cashier Template. */
+  cashierTemplate: any;
+  /** Create cashier form. */
+  createCashierForm: FormGroup;
+
+  /**
+   * Fetches cashier template from `resolve`
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {OrganizationService} organizationService Organization Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private organizationService: OrganizationService ) {
+    this.route.data.subscribe((data: { cashierTemplate: any }) => {
+      this.cashierTemplate = data.cashierTemplate;
+    });
+  }
+
+  ngOnInit() {
+    this.setCreateCashierForm();
+  }
+
+  /**
+   * Sets Create Charge Form.
+   */
+  setCreateCashierForm() {
+    this.createCashierForm = this.formBuilder.group({
+      'staffId': ['', Validators.required],
+      'description': [''],
+      'startDate': ['', Validators.required],
+      'endDate': ['', Validators.required],
+      'isFullDay': [false]
+    });
+  }
+
+  /**
+   * Submits Create cashier form.
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const startDate = this.createCashierForm.value.startDate;
+    const endDate = this.createCashierForm.value.endDate;
+    this.createCashierForm.patchValue({
+      'startDate': this.datePipe.transform(startDate, dateFormat),
+      'endDate': this.datePipe.transform(endDate, dateFormat)
+    });
+    const createCashierForm = this.createCashierForm.value;
+    createCashierForm.locale = 'en';
+    createCashierForm.dateFormat = dateFormat;
+    this.organizationService.createCashier(this.cashierTemplate.tellerId, createCashierForm).subscribe((response: any) => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}

src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html

@@ -0,0 +1,83 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="editCashierForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <input matInput required autofocus [value]="cashierData.template.officeName" disabled>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Teller Name</mat-label>
+            <input matInput required autofocus [value]="cashierData.data.tellerName" disabled>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%" *ngIf="isStaffId">
+            <mat-label>Cashier</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of cashierData.template.staffOptions" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%" *ngIf="!isStaffId">
+            <mat-label>Cashier</mat-label>
+            <mat-select formControlName="staffId" *ngIf="!isStaffId">
+              <mat-option [value]="cashierData.data.staffId">
+                Select Option
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Description/Notes</mat-label>
+            <input matInput autofocus formControlName="description">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>From</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="startDate">
+            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #fromDatePicker></mat-datepicker>
+            <mat-error *ngIf="editCashierForm.controls.startDate.hasError('required')">
+              From Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>To</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">
+            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #toDatePicker></mat-datepicker>
+            <mat-error *ngIf="editCashierForm.controls.endDate.hasError('required')">
+              To Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <div fxFlex="48%" style="padding-top: 10px;">
+            <mat-checkbox labelPosition="before" formControlName="isFullDay">
+              Full Day?
+            </mat-checkbox>
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!editCashierForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.spec.ts

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

src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.ts

@@ -0,0 +1,88 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services. */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Edit Cashier component.
+ */
+@Component({
+  selector: 'mifosx-edit-cashier',
+  templateUrl: './edit-cashier.component.html',
+  styleUrls: ['./edit-cashier.component.scss']
+})
+export class EditCashierComponent implements OnInit {
+
+  /** Cashier Data. */
+  cashierData: any = new Object();
+  /** Edit cashier form. */
+  editCashierForm: FormGroup;
+  /** Is Staff ID present. */
+  isStaffId = true;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+
+  /**
+   *
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {OrganizationService} organizationService Organization Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private organizationService: OrganizationService ) {
+    this.route.data.subscribe((data: { cashier: any, cashierTemplate: any }) => {
+      this.cashierData.data = data.cashier;
+      this.cashierData.template = data.cashierTemplate;
+      this.isStaffId = this.cashierData.template.staffOptions.some((element: any) => element.id === this.cashierData.data.staffId);
+    });
+  }
+
+  ngOnInit() {
+    this.setEditChargeForm();
+  }
+
+  /**
+   * Sets Edit Charge Form.
+   */
+  setEditChargeForm() {
+    this.editCashierForm = this.formBuilder.group({
+      'staffId': [{value: this.cashierData.data.staffId, disabled: true}],
+      'description': [this.cashierData.data.description],
+      'startDate': [this.cashierData.data.startDate && new Date(this.cashierData.data.startDate), Validators.required],
+      'endDate': [this.cashierData.data.endDate && new Date(this.cashierData.data.endDate), Validators.required],
+      'isFullDay': [this.cashierData.data.isFullDay, Validators.required]
+    });
+  }
+
+  /**
+   * Submits edit cashier form.
+   */
+  submit() {
+    const dateFormat = 'yyyy-MM-dd';
+    const startDate = this.editCashierForm.value.startDate;
+    const endDate = this.editCashierForm.value.endDate;
+    this.editCashierForm.patchValue({
+      'startDate': this.datePipe.transform(startDate, dateFormat),
+      'endDate': this.datePipe.transform(endDate, dateFormat)
+    });
+    const editCashierForm = this.editCashierForm.value;
+    editCashierForm.locale = 'en';
+    editCashierForm.dateFormat = dateFormat;
+    editCashierForm.staffId = this.cashierData.data.staffId;
+    this.organizationService.updateCashier(this.cashierData.data.tellerId, this.cashierData.data.id, editCashierForm).subscribe((response: any) => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}

src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html

@@ -0,0 +1,82 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="settleCashForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <input matInput required formControlName="office">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Teller Name</mat-label>
+            <input matInput required formControlName="tellerName">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Cashier</mat-label>
+            <input matInput required formControlName="cashier">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Assignment Period</mat-label>
+            <input matInput formControlName="assignmentPeriod">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
+            <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #cashDatePicker></mat-datepicker>
+            <mat-error *ngIf="settleCashForm.controls.txnDate.hasError('required')">
+              Date <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Currency</mat-label>
+            <mat-select required formControlName="currencyCode">
+              <mat-option *ngFor="let currency of cashierData.currencyOptions" [value]="currency.code">
+                {{ currency.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="settleCashForm.controls.currencyCode.hasError('required')">
+              Currency <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Amount</mat-label>
+            <input matInput required formControlName="txnAmount">
+            <mat-error *ngIf="settleCashForm.controls.txnAmount.hasError('required')">
+              Amount <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Notes/Comments</mat-label>
+            <input matInput required formControlName="txnNote">
+            <mat-error *ngIf="settleCashForm.controls.txnNote.hasError('required')">
+              Notes/Comments <strong>is required</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!settleCashForm.valid">Settle Cash</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.spec.ts

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

src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { OrganizationService } from 'app/organization/organization.service';
+
+@Component({
+  selector: 'mifosx-settle-cash',
+  templateUrl: './settle-cash.component.html',
+  styleUrls: ['./settle-cash.component.scss']
+})
+export class SettleCashComponent implements OnInit {
+
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Cashier data. */
+  cashierData: any;
+  /** Cashier Form. */
+  settleCashForm: FormGroup;
+
+  /**
+   * Get cashier data from `Resolver`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route ActivateRoute.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {OrganizationService} organizationService Organization Service.
+   * @param {Router} router Router.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private datePipe: DatePipe,
+              private organizationService: OrganizationService,
+              private router: Router) {
+    this.route.data.subscribe((data: { cashierTemplate: any}) => {
+      this.cashierData = data.cashierTemplate;
+    });
+  }
+
+  ngOnInit() {
+    this.setCashierForm();
+  }
+
+  /**
+   * Set Cashier form.
+   */
+  setCashierForm() {
+    this.settleCashForm = this.formBuilder.group({
+      'office': [{value: this.cashierData.officeName, disabled: true}],
+      'tellerName': [{value: this.cashierData.tellerName, disabled: true}],
+      'cashier': [{value: this.cashierData.cashierName, disabled: true}],
+      'assignmentPeriod': [{value: this.datePipe.transform(this.cashierData.startDate, 'dd MMMM yyyy') + ' - ' + this.datePipe.transform(this.cashierData.endDate, 'dd MMMM yyyy'), disabled: true}],
+      'txnDate': [new Date(), Validators.required],
+      'currencyCode': ['', Validators.required],
+      'txnAmount': ['', Validators.required],
+      'txnNote': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submits Settle Cash form.
+   */
+  submit() {
+    const dateFormat = 'dd MMMM yyyy';
+    const txnDate = this.settleCashForm.value.txnDate;
+    this.settleCashForm.patchValue({
+      txnDate: this.datePipe.transform(txnDate, dateFormat)
+    });
+    const settleCashForm = this.settleCashForm.value;
+    settleCashForm.dateFormat = dateFormat;
+    settleCashForm.locale = 'en';
+    this.organizationService.settleCash(this.cashierData.tellerId, this.cashierData.cashierId, settleCashForm).subscribe((response: any) => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -0,0 +1,127 @@
+<div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
+  <button mat-raised-button color="accent" [routerLink]="['../allocate']">
+      <fa-icon icon="arrow-up"></fa-icon>&nbsp;&nbsp;
+      Allocate Cash
+  </button>
+  <button mat-raised-button color="warn" [routerLink]="['../settle']">
+      <fa-icon icon="arrow-down"></fa-icon>&nbsp;&nbsp;
+      Settle Cash
+  </button>
+</div>
+
+<div class="container m-b-20" *ngIf="cashierData">
+
+    <mat-card class="mat-elevation-z8">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" class="content">
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Branch
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.officeName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Teller
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.tellerName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Cashier
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.cashierName }}
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+            Net Cash
+          </div>
+
+          <div fxFlex="25%" fxFlex.lt-md="50%">
+            {{ cashierData.netCash | number }} [{{currencySelector.value}}]
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+    </mat-card>
+
+</div>
+
+<div class="container">
+
+  <mat-card fxLayout="column" fxLayoutGap="2%" class="mat-elevation-z8">
+
+    <div fxLayout="row" fxLayoutGap="2%">
+
+      <mat-form-field fxFlex>
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+  
+      <mat-form-field>
+        <mat-label> Select Currency </mat-label>
+        <mat-select [formControl]="currencySelector" required>
+          <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
+            {{ currency.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+    </div>
+
+    <div *ngIf="cashierData">
+
+      <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
+
+        <ng-container matColumnDef="date">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | date }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="transactions">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Transactions </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="allocation">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | number}}) </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="cashIn">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | number}})  </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="cashOut">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | number}}) </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="settlement">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | number}})</th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | number) : '-' }} </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
+  
+      </table>
+  
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>  
+
+    </div>
+    
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/transactions/transactions.component.scss

@@ -0,0 +1,13 @@
+.content {
+  div {
+    line-height: 3rem;
+
+    &.header {
+      font-weight: 500;
+    }
+  }
+}
+
+table {
+  width: 100%;
+}

src/app/organization/tellers/cashiers/transactions/transactions.component.spec.ts

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

src/app/organization/tellers/cashiers/transactions/transactions.component.ts

@@ -0,0 +1,91 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl } from '@angular/forms';
+
+/** Custom Services */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * Cashier Transactions Component.
+ */
+@Component({
+  selector: 'mifosx-transactions',
+  templateUrl: './transactions.component.html',
+  styleUrls: ['./transactions.component.scss']
+})
+export class TransactionsComponent implements OnInit {
+
+  /** Currency selector. */
+  currencySelector = new FormControl();
+  /** Cashier Id */
+  cashierId: any;
+  /** Teller Id */
+  tellerId: any;
+  /** Cashier data. */
+  cashierData: any;
+  /** Currencys data. */
+  currencyData: any;
+  /** Columns to be displayed in transactions table. */
+  displayedColumns: string[] = ['date', 'transactions', 'allocation', 'cashIn', 'cashOut', 'settlement'];
+  /** Data source for transactions table. */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for transactions table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for transactions table. */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * Retrieves the currencies data from `resolve`.
+   * @param {OrganizationService} organizationService Organization Service.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private organizationService: OrganizationService,
+              private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { currencies: any }) => {
+      this.currencyData = data.currencies.selectedCurrencyOptions;
+    });
+    this.tellerId = this.route.parent.parent.parent.snapshot.params['id'];
+    this.cashierId = this.route.parent.snapshot.params['id'];
+  }
+
+  /**
+   * Filters data in transactions table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Retrieves transactions data on changing currency.
+   */
+  ngOnInit() {
+    this.onChangeCurrency();
+  }
+
+  /**
+   * Retrieves the transactions data on changing currency and sets the transactions table.
+   */
+  onChangeCurrency() {
+    this.currencySelector.valueChanges.subscribe((currencyCode: any) => {
+      this.organizationService.getCashierSummaryAndTransactions(this.tellerId, this.cashierId, currencyCode)
+        .subscribe((response: any) => {
+          this.cashierData = response;
+          this.setTransactions();
+        });
+    });
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for transactions table.
+   */
+  setTransactions() {
+    this.dataSource = new MatTableDataSource(this.cashierData.cashierTransactions.pageItems);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+}

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html

@@ -0,0 +1,75 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
+  </button>
+  <button mat-raised-button color="warn" (click)="deleteCashier()">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
+  </button>
+</div>
+
+
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" class="content">
+
+        <div fxFlex="50%" class="header">
+          Name
+        </div>
+
+        <div fxFlex="50%">
+          {{ cashierData.staffName}}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Teller
+        </div>
+
+        <div fxFlex="50%">
+          {{ cashierData.tellerName }}
+        </div>
+
+        <div fxFlex="50%" class="header" *ngIf="cashierData.description !== ''">
+          Description
+        </div>
+
+        <div fxFlex="50%" *ngIf="cashierData.description !== ''">
+          {{ cashierData.description }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Start Date
+        </div>
+
+        <div fxFlex="50%">
+          {{ cashierData.startDate | date }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          End Date
+        </div>
+
+        <div fxFlex="50%">
+          {{ cashierData.endDate | date }}
+        </div>
+
+        <div fxFlex="50%" class="header">
+          Full Day?
+        </div>
+
+        <div fxFlex="50%">
+          {{ cashierData.isFullDay }}
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.scss

@@ -0,0 +1,14 @@
+.container {
+    max-width: 37rem;
+
+    .content {
+      div {
+        margin: 1rem 0;
+        word-wrap: break-word;
+
+        &.header {
+          font-weight: 500;
+        }
+      }
+    }
+}

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.spec.ts

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

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.ts

@@ -0,0 +1,57 @@
+/** Angular Imports. */
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Dialogs */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { MatDialog } from '@angular/material';
+
+/** Custom Services */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/**
+ * View Cashier component.
+ */
+@Component({
+  selector: 'mifosx-view-cashier',
+  templateUrl: './view-cashier.component.html',
+  styleUrls: ['./view-cashier.component.scss']
+})
+export class ViewCashierComponent {
+
+  /** Cashier data. */
+  cashierData: any;
+
+  /**
+   * Get cashier data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router
+   * @param {OrganizationService} organizationService Organization Service
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private organizationService: OrganizationService,
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { cashier: any }) => {
+      this.cashierData = data.cashier;
+    });
+  }
+
+  /**
+   * Deletes the cashier.
+   */
+  deleteCashier() {
+    const deleteCashierDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `Cashier id: ${this.cashierData.id}` }
+    });
+    deleteCashierDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.organizationService.deleteCashier(this.cashierData.tellerId, this.cashierData.id).subscribe(() => {
+          this.router.navigate(['../'], {relativeTo: this.route});
+        });
+      }
+    });
+  }
+
+}