From b2afabc8d0fd6efee48e231f3835a4602a5599d8 Mon Sep 17 00:00:00 2001
From: Karan Takalkar <karant@iitk.ac.in>
Date: Sun, 12 Jul 2020 14:23:33 +0530
Subject: [PATCH] feat: add create cashier component (#1064)

Fixes: #161
---
 .../organization-routing.module.ts            | 42 ++++++----
 src/app/organization/organization.module.ts   | 14 ++--
 src/app/organization/organization.service.ts  | 31 ++++++-
 .../allocate-cash.component.html              |  0
 .../allocate-cash.component.scss              |  0
 .../allocate-cash.component.spec.ts           |  0
 .../allocate-cash/allocate-cash.component.ts  |  0
 .../tellers/cashiers/cashiers.component.html  |  6 +-
 .../create-cashier.component.html             | 77 +++++++++++++++++
 .../create-cashier.component.scss}            |  0
 .../create-cashier.component.spec.ts          | 25 ++++++
 .../create-cashier.component.ts               | 83 +++++++++++++++++++
 .../edit-cashier/edit-cashier.component.html  |  0
 .../edit-cashier/edit-cashier.component.scss} |  0
 .../edit-cashier.component.spec.ts            |  0
 .../edit-cashier/edit-cashier.component.ts    |  0
 .../settle-cash/settle-cash.component.html    |  0
 .../settle-cash/settle-cash.component.scss    |  0
 .../settle-cash/settle-cash.component.spec.ts |  0
 .../settle-cash/settle-cash.component.ts      |  0
 .../transactions/transactions.component.html  |  4 +-
 .../transactions/transactions.component.scss  |  0
 .../transactions.component.spec.ts            |  0
 .../transactions/transactions.component.ts    |  0
 .../view-cashier/view-cashier.component.html  |  4 +
 .../view-cashier/view-cashier.component.scss  |  0
 .../view-cashier.component.spec.ts            |  0
 .../view-cashier/view-cashier.component.ts    | 57 +++++++++++++
 .../common-resolvers/cashier.resolver.ts      |  2 +-
 .../edit-cashier.resolver.ts                  |  2 +-
 .../view-cashier/view-cashier.component.ts    | 28 -------
 31 files changed, 316 insertions(+), 59 deletions(-)
 rename src/app/organization/tellers/{ => cashiers}/allocate-cash/allocate-cash.component.html (100%)
 rename src/app/organization/tellers/{ => cashiers}/allocate-cash/allocate-cash.component.scss (100%)
 rename src/app/organization/tellers/{ => cashiers}/allocate-cash/allocate-cash.component.spec.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/allocate-cash/allocate-cash.component.ts (100%)
 create mode 100644 src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html
 rename src/app/organization/tellers/{edit-cashier/edit-cashier.component.scss => cashiers/create-cashier/create-cashier.component.scss} (100%)
 create mode 100644 src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.spec.ts
 create mode 100644 src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.ts
 rename src/app/organization/tellers/{ => cashiers}/edit-cashier/edit-cashier.component.html (100%)
 rename src/app/organization/tellers/{settle-cash/settle-cash.component.scss => cashiers/edit-cashier/edit-cashier.component.scss} (100%)
 rename src/app/organization/tellers/{ => cashiers}/edit-cashier/edit-cashier.component.spec.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/edit-cashier/edit-cashier.component.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/settle-cash/settle-cash.component.html (100%)
 create mode 100644 src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.scss
 rename src/app/organization/tellers/{ => cashiers}/settle-cash/settle-cash.component.spec.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/settle-cash/settle-cash.component.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/transactions/transactions.component.html (96%)
 rename src/app/organization/tellers/{ => cashiers}/transactions/transactions.component.scss (100%)
 rename src/app/organization/tellers/{ => cashiers}/transactions/transactions.component.spec.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/transactions/transactions.component.ts (100%)
 rename src/app/organization/tellers/{ => cashiers}/view-cashier/view-cashier.component.html (91%)
 rename src/app/organization/tellers/{ => cashiers}/view-cashier/view-cashier.component.scss (100%)
 rename src/app/organization/tellers/{ => cashiers}/view-cashier/view-cashier.component.spec.ts (100%)
 create mode 100644 src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.ts
 rename src/app/organization/tellers/{edit-cashier => common-resolvers}/edit-cashier.resolver.ts (92%)
 delete mode 100644 src/app/organization/tellers/view-cashier/view-cashier.component.ts

diff --git a/src/app/organization/organization-routing.module.ts b/src/app/organization/organization-routing.module.ts
index ccddb2c31..d83748473 100644
--- a/src/app/organization/organization-routing.module.ts
+++ b/src/app/organization/organization-routing.module.ts
@@ -33,7 +33,7 @@ import { HolidaysComponent } from './holidays/holidays.component';
 import { EditEmployeeComponent } from './employees/edit-employee/edit-employee.component';
 import { CreateTellerComponent } from './tellers/create-teller/create-teller.component';
 import { EditTellerComponent } from './tellers/edit-teller/edit-teller.component';
-import { ViewCashierComponent } from './tellers/view-cashier/view-cashier.component';
+import { ViewCashierComponent } from './tellers/cashiers/view-cashier/view-cashier.component';
 import { ViewHolidaysComponent } from './holidays/view-holidays/view-holidays.component';
 import { ViewOfficeComponent } from './offices/view-office/view-office.component';
 import { GeneralTabComponent } from './offices/view-office/general-tab/general-tab.component';
@@ -42,10 +42,11 @@ import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campai
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
 import { CashiersComponent } from './tellers/cashiers/cashiers.component';
-import { TransactionsComponent } from './tellers/transactions/transactions.component';
-import { AllocateCashComponent } from './tellers/allocate-cash/allocate-cash.component';
-import { SettleCashComponent } from './tellers/settle-cash/settle-cash.component';
-import { EditCashierComponent } from './tellers/edit-cashier/edit-cashier.component';
+import { TransactionsComponent } from './tellers/cashiers/transactions/transactions.component';
+import { AllocateCashComponent } from './tellers/cashiers/allocate-cash/allocate-cash.component';
+import { SettleCashComponent } from './tellers/cashiers/settle-cash/settle-cash.component';
+import { EditCashierComponent } from './tellers/cashiers/edit-cashier/edit-cashier.component';
+import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create-cashier.component';
 
 /** Custom Resolvers */
 import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/loan-provisioning-criteria.resolver';
@@ -78,7 +79,7 @@ import { OfficeDatatablesResolver } from './offices/common-resolvers/office-data
 import { SmsCampaignResolver } from './sms-campaigns/common-resolvers/sms-campaign.resolver';
 import { ManageFundsResolver } from './manage-funds/manage-funds.resolver';
 import { CashierTransactionTemplateResolver } from './tellers/teller-transaction-template.resolver';
-import { EditCashierResolver } from './tellers/edit-cashier/edit-cashier.resolver';
+import { EditCashierResolver } from './tellers/common-resolvers/edit-cashier.resolver';
 
 /** Organization Routes */
 const routes: Routes = [
@@ -343,6 +344,14 @@ const routes: Routes = [
                         cashiersData: CashiersResolver
                       }
                     },
+                    {
+                      path: 'create',
+                      data: { title: extract('Cashiers'), breadcrumb: 'Create Cashier' },
+                      component: CreateCashierComponent,
+                      resolve: {
+                        cashierTemplate: EditCashierResolver
+                      }
+                    },
                     {
                       path: ':id',
                       data: { title: extract('View Cashier'),  routeParamBreadcrumb: 'id' },
@@ -355,6 +364,15 @@ const routes: Routes = [
                             cashier: CashierResolver
                           }
                         },
+                        {
+                          path: 'edit',
+                          component: EditCashierComponent,
+                          data: { title: extract('Edit Cashier'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                          resolve: {
+                            cashier: CashierResolver,
+                            cashierTemplate: EditCashierResolver
+                          }
+                        },
                         {
                           path: 'transactions',
                           data: { title: extract('Cashier Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
@@ -367,6 +385,9 @@ const routes: Routes = [
                           path: 'settle',
                           component: SettleCashComponent,
                           data: { title: extract('Settle Cash'), breadcrumb: 'Settle Cash', routeParamBreadcrumb: false },
+                          resolve: {
+                            cashierTemplate: CashierTransactionTemplateResolver
+                          }
                         },
                         {
                           path: 'allocate',
@@ -375,15 +396,6 @@ const routes: Routes = [
                           resolve: {
                             cashierTemplate: CashierTransactionTemplateResolver
                           }
-                        },
-                        {
-                          path: 'edit',
-                          component: EditCashierComponent,
-                          data: { title: extract('Edit Cashier'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
-                          resolve: {
-                            cashier: CashierResolver,
-                            cashierTemplate: EditCashierResolver
-                          }
                         }
                       ]
                     }
diff --git a/src/app/organization/organization.module.ts b/src/app/organization/organization.module.ts
index 692e24439..1333c798d 100644
--- a/src/app/organization/organization.module.ts
+++ b/src/app/organization/organization.module.ts
@@ -34,7 +34,7 @@ import { EditEmployeeComponent } from './employees/edit-employee/edit-employee.c
 import { CreateTellerComponent } from './tellers/create-teller/create-teller.component';
 import { EditTellerComponent } from './tellers/edit-teller/edit-teller.component';
 import { ViewLoanProvisioningCriteriaComponent } from './loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component';
-import { ViewCashierComponent } from './tellers/view-cashier/view-cashier.component';
+import { ViewCashierComponent } from './tellers/cashiers/view-cashier/view-cashier.component';
 import { ViewHolidaysComponent } from './holidays/view-holidays/view-holidays.component';
 import { ViewOfficeComponent } from './offices/view-office/view-office.component';
 import { GeneralTabComponent } from './offices/view-office/general-tab/general-tab.component';
@@ -45,10 +45,11 @@ import { ViewCampaignComponent } from './sms-campaigns/view-campaign/view-campai
 import { ManageFundsComponent } from './manage-funds/manage-funds.component';
 import { ManageCurrenciesComponent } from './currencies/manage-currencies/manage-currencies.component';
 import { CashiersComponent } from './tellers/cashiers/cashiers.component';
-import { TransactionsComponent } from './tellers/transactions/transactions.component';
-import { SettleCashComponent } from './tellers/settle-cash/settle-cash.component';
-import { AllocateCashComponent } from './tellers/allocate-cash/allocate-cash.component';
-import { EditCashierComponent } from './tellers/edit-cashier/edit-cashier.component';
+import { TransactionsComponent } from './tellers/cashiers/transactions/transactions.component';
+import { SettleCashComponent } from './tellers/cashiers/settle-cash/settle-cash.component';
+import { AllocateCashComponent } from './tellers/cashiers/allocate-cash/allocate-cash.component';
+import { EditCashierComponent } from './tellers/cashiers/edit-cashier/edit-cashier.component';
+import { CreateCashierComponent } from './tellers/cashiers/create-cashier/create-cashier.component';
 
 /**
  * Organization Module
@@ -103,7 +104,8 @@ import { EditCashierComponent } from './tellers/edit-cashier/edit-cashier.compon
     TransactionsComponent,
     SettleCashComponent,
     AllocateCashComponent,
-    EditCashierComponent
+    EditCashierComponent,
+    CreateCashierComponent
   ]
 })
 export class OrganizationModule { }
diff --git a/src/app/organization/organization.service.ts b/src/app/organization/organization.service.ts
index 9d4ece737..a418d318b 100644
--- a/src/app/organization/organization.service.ts
+++ b/src/app/organization/organization.service.ts
@@ -284,7 +284,8 @@ export class OrganizationService {
     return this.http.get(`/tellers/${tellerId}/cashiers/${cashierId}/summaryandtransactions`, { params: httpParams });
   }
 
-  /** Get Cashier Transaction template.
+  /**
+   * Get Cashier Transaction template.
    * @param {string} tellerId Teller Id.
    * @param {string} cashierId Cashier Id.
    * @returns {Observable<any>} Cashier Transaction data.
@@ -294,8 +295,24 @@ export class OrganizationService {
   }
 
   /**
-   * Settle Cash.
-   * Allocate Cash.
+   * @param {string} tellerId Teller Id
+   * @param {any} cashier Cashier
+   * @returns {Observable<any>}
+   */
+  createCashier(tellerId: string, cashier: any): Observable<any> {
+    return this.http.post(`/tellers/${tellerId}/cashiers`, cashier);
+  }
+
+  /**
+   * @param {string} tellerId Teller ID of teller.
+   * @param {string} cashierId Cashier ID of cashier
+   * @returns {Observable<any>}
+   */
+  deleteCashier(tellerId: string, cashierId: string): Observable<any> {
+    return this.http.delete(`/tellers/${tellerId}/cashiers/${cashierId}`);
+  }
+
+  /**
    * @param {string} tellerId Teller Id.
    * @param {string} cashierId Cashier Id.
    * @param {string} cashData Cash Data.
@@ -306,6 +323,12 @@ export class OrganizationService {
     return this.http.post(`/tellers/${tellerId}/cashiers/${cashierId}/settle`, cashData, {params: httpParams});
   }
 
+  /**
+   * @param {string} tellerId Teller Id.
+   * @param {string} cashierId Cashier Id.
+   * @param {string} cashData Cash Data.
+   * @returns {Observable<any>}
+   */
   allocateCash(tellerId: string, cashierId: string, cashData: any): Observable<any> {
     const httpParams = new HttpParams().set('command', 'allocate');
     return this.http.post(`/tellers/${tellerId}/cashiers/${cashierId}/allocate`, cashData, {params: httpParams});
@@ -459,7 +482,7 @@ export class OrganizationService {
    * @param holidayId Holiday Id to be deleted.
    * @returns {Observable<any>} Resource Id.
    */
-  deleteHoliday(holidayId: string) {
+  deleteHoliday(holidayId: string): Observable<any> {
     return this.http.delete(`/holidays/${holidayId}`);
   }
 
diff --git a/src/app/organization/tellers/allocate-cash/allocate-cash.component.html b/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html
similarity index 100%
rename from src/app/organization/tellers/allocate-cash/allocate-cash.component.html
rename to src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html
diff --git a/src/app/organization/tellers/allocate-cash/allocate-cash.component.scss b/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.scss
similarity index 100%
rename from src/app/organization/tellers/allocate-cash/allocate-cash.component.scss
rename to src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.scss
diff --git a/src/app/organization/tellers/allocate-cash/allocate-cash.component.spec.ts b/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.spec.ts
similarity index 100%
rename from src/app/organization/tellers/allocate-cash/allocate-cash.component.spec.ts
rename to src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.spec.ts
diff --git a/src/app/organization/tellers/allocate-cash/allocate-cash.component.ts b/src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.ts
similarity index 100%
rename from src/app/organization/tellers/allocate-cash/allocate-cash.component.ts
rename to src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.ts
diff --git a/src/app/organization/tellers/cashiers/cashiers.component.html b/src/app/organization/tellers/cashiers/cashiers.component.html
index 94cab6bde..1e7ca871b 100644
--- a/src/app/organization/tellers/cashiers/cashiers.component.html
+++ b/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"
diff --git a/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html b/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.html
new file mode 100644
index 000000000..d10b27780
--- /dev/null
+++ b/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>
diff --git a/src/app/organization/tellers/edit-cashier/edit-cashier.component.scss b/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.scss
similarity index 100%
rename from src/app/organization/tellers/edit-cashier/edit-cashier.component.scss
rename to src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.scss
diff --git a/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.spec.ts b/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.spec.ts
new file mode 100644
index 000000000..ac2fba70e
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.ts b/src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.ts
new file mode 100644
index 000000000..1eaaeeb44
--- /dev/null
+++ b/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});
+    });
+  }
+
+}
diff --git a/src/app/organization/tellers/edit-cashier/edit-cashier.component.html b/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html
similarity index 100%
rename from src/app/organization/tellers/edit-cashier/edit-cashier.component.html
rename to src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html
diff --git a/src/app/organization/tellers/settle-cash/settle-cash.component.scss b/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.scss
similarity index 100%
rename from src/app/organization/tellers/settle-cash/settle-cash.component.scss
rename to src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.scss
diff --git a/src/app/organization/tellers/edit-cashier/edit-cashier.component.spec.ts b/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.spec.ts
similarity index 100%
rename from src/app/organization/tellers/edit-cashier/edit-cashier.component.spec.ts
rename to src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.spec.ts
diff --git a/src/app/organization/tellers/edit-cashier/edit-cashier.component.ts b/src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.ts
similarity index 100%
rename from src/app/organization/tellers/edit-cashier/edit-cashier.component.ts
rename to src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.ts
diff --git a/src/app/organization/tellers/settle-cash/settle-cash.component.html b/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html
similarity index 100%
rename from src/app/organization/tellers/settle-cash/settle-cash.component.html
rename to src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.html
diff --git a/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.scss b/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/organization/tellers/settle-cash/settle-cash.component.spec.ts b/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.spec.ts
similarity index 100%
rename from src/app/organization/tellers/settle-cash/settle-cash.component.spec.ts
rename to src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.spec.ts
diff --git a/src/app/organization/tellers/settle-cash/settle-cash.component.ts b/src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.ts
similarity index 100%
rename from src/app/organization/tellers/settle-cash/settle-cash.component.ts
rename to src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.ts
diff --git a/src/app/organization/tellers/transactions/transactions.component.html b/src/app/organization/tellers/cashiers/transactions/transactions.component.html
similarity index 96%
rename from src/app/organization/tellers/transactions/transactions.component.html
rename to src/app/organization/tellers/cashiers/transactions/transactions.component.html
index 0cb379383..e617a0021 100644
--- a/src/app/organization/tellers/transactions/transactions.component.html
+++ b/src/app/organization/tellers/cashiers/transactions/transactions.component.html
@@ -1,9 +1,9 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
-  <button mat-raised-button color="accent">
+  <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">
+  <button mat-raised-button color="warn" [routerLink]="['../settle']">
       <fa-icon icon="arrow-down"></fa-icon>&nbsp;&nbsp;
       Settle Cash
   </button>
diff --git a/src/app/organization/tellers/transactions/transactions.component.scss b/src/app/organization/tellers/cashiers/transactions/transactions.component.scss
similarity index 100%
rename from src/app/organization/tellers/transactions/transactions.component.scss
rename to src/app/organization/tellers/cashiers/transactions/transactions.component.scss
diff --git a/src/app/organization/tellers/transactions/transactions.component.spec.ts b/src/app/organization/tellers/cashiers/transactions/transactions.component.spec.ts
similarity index 100%
rename from src/app/organization/tellers/transactions/transactions.component.spec.ts
rename to src/app/organization/tellers/cashiers/transactions/transactions.component.spec.ts
diff --git a/src/app/organization/tellers/transactions/transactions.component.ts b/src/app/organization/tellers/cashiers/transactions/transactions.component.ts
similarity index 100%
rename from src/app/organization/tellers/transactions/transactions.component.ts
rename to src/app/organization/tellers/cashiers/transactions/transactions.component.ts
diff --git a/src/app/organization/tellers/view-cashier/view-cashier.component.html b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
similarity index 91%
rename from src/app/organization/tellers/view-cashier/view-cashier.component.html
rename to src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
index d21bd647c..00ca44eb5 100644
--- a/src/app/organization/tellers/view-cashier/view-cashier.component.html
+++ b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
@@ -3,6 +3,10 @@
     <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>
 
 
diff --git a/src/app/organization/tellers/view-cashier/view-cashier.component.scss b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.scss
similarity index 100%
rename from src/app/organization/tellers/view-cashier/view-cashier.component.scss
rename to src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.scss
diff --git a/src/app/organization/tellers/view-cashier/view-cashier.component.spec.ts b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.spec.ts
similarity index 100%
rename from src/app/organization/tellers/view-cashier/view-cashier.component.spec.ts
rename to src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.spec.ts
diff --git a/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.ts b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.ts
new file mode 100644
index 000000000..57093044f
--- /dev/null
+++ b/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});
+        });
+      }
+    });
+  }
+
+}
diff --git a/src/app/organization/tellers/common-resolvers/cashier.resolver.ts b/src/app/organization/tellers/common-resolvers/cashier.resolver.ts
index 250a41aef..6b6b43353 100644
--- a/src/app/organization/tellers/common-resolvers/cashier.resolver.ts
+++ b/src/app/organization/tellers/common-resolvers/cashier.resolver.ts
@@ -25,7 +25,7 @@ export class CashierResolver implements Resolve<Object> {
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
     const cashierId = route.paramMap.get('id');
-    const tellerId = route.parent.paramMap.get('id');
+    const tellerId = route.parent.parent.paramMap.get('id');
     return this.organizationService.getCashier(tellerId, cashierId);
   }
 
diff --git a/src/app/organization/tellers/edit-cashier/edit-cashier.resolver.ts b/src/app/organization/tellers/common-resolvers/edit-cashier.resolver.ts
similarity index 92%
rename from src/app/organization/tellers/edit-cashier/edit-cashier.resolver.ts
rename to src/app/organization/tellers/common-resolvers/edit-cashier.resolver.ts
index d42f26e01..e12a8084d 100644
--- a/src/app/organization/tellers/edit-cashier/edit-cashier.resolver.ts
+++ b/src/app/organization/tellers/common-resolvers/edit-cashier.resolver.ts
@@ -24,7 +24,7 @@ export class EditCashierResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const tellerId = route.parent.paramMap.get('id');
+    const tellerId = route.parent.parent.paramMap.get('id');
     return this.organizationService.getCashierTemplate(tellerId);
   }
 
diff --git a/src/app/organization/tellers/view-cashier/view-cashier.component.ts b/src/app/organization/tellers/view-cashier/view-cashier.component.ts
deleted file mode 100644
index 52ac348e2..000000000
--- a/src/app/organization/tellers/view-cashier/view-cashier.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/** Angular Imports. */
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-/**
- * 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 `Resolver`.
-   * @param {ActivatedRoute} route Activated Route.
-   */
-  constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { cashier: any }) => {
-      this.cashierData = data.cashier;
-    });
-  }
-
-}