i18n: Adding new languages: Part 2 (#1885)

Co-authored-by: radhathakare <radhathakare322@gmail.com>

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

@@ -9,60 +9,60 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required formControlName="office">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="tellerName">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <input matInput required formControlName="cashier">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Assignment Period</mat-label>
+            <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
             <input matInput formControlName="assignmentPeriod">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
-            <mat-label>Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Date' | translate }}</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>
+              {{ 'labels.inputs.Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</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>
+              {{ 'labels.inputs.Currency' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Amount</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput required formControlName="txnAmount">
             <mat-error *ngIf="allocateCashForm.controls.txnAmount.hasError('required')">
-              Amount <strong>is required</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Notes/Comments</mat-label>
+            <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
             <input matInput required formControlName="txnNote">
             <mat-error *ngIf="allocateCashForm.controls.txnNote.hasError('required')">
-              Notes/Comments <strong>is required</strong>
+              {{ 'labels.inputs.Notes/Comments' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -71,8 +71,8 @@
       </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" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!allocateCashForm.valid" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

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

@@ -2,7 +2,7 @@
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    New Cashier
+    {{ 'labels.buttons.New Cashier' | translate }}
   </button>
 
 </div>
@@ -21,32 +21,32 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Period </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate | dateFormat }} - {{ cashier.endDate | dateFormat }}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Period' | translate }} </th>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate  | dateFormat }} - {{ cashier.endDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="staffName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Cashier/Staff </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cashier/Staff' | translate }} </th>
         <td mat-cell *matCellDef="let cashier"> {{ cashier.staffName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="isFullDay">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Full Day/Time </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay | yesNo }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Full Day/Time' | translate }} </th>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay ? 'Yes' : 'No' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="vaultActions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Vault Actions </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Vault Actions' | translate }} </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="{{ 'tooltips.Allocate Cash' | translate }}"
             (click)="routeEdit($event)" [routerLink]="[cashier.id, 'allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
             <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="{{ 'tooltips.Settle Cash' | translate }}"
             (click)="routeEdit($event)" [routerLink]="[cashier.id, 'settle']" *mifosxHasPermission="'SETTLECASHIER_TELLER'">
             <i class="fa fa-arrow-down"></i>
           </button>
-          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"
+          <button class="cashier-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.View Transactions' | translate }}"
             (click)="routeEdit($event)" [routerLink]="[cashier.id, 'transactions']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
             <i class="fa fa-eye"></i>
           </button>

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

@@ -9,54 +9,55 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierTemplate.officeName" disabled>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</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>
+              {{ 'labels.inputs.Cashier' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Description/Notes</mat-label>
+            <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
             <input matInput autofocus formControlName="description">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
-            <mat-label>From</mat-label>
+            <mat-label>{{ 'labels.inputs.From' | translate }}</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>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
-            <mat-label>To</mat-label>
-            <input matInput [min]="createCashierForm.value.startDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="endDate">            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+            <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
+            <input matInput [min]="createCashierForm.value.startDate" [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>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" class="space">
             <mat-checkbox labelPosition="before" formControlName="isFullDay">
-              Full Day?
+              {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
 
@@ -65,8 +66,8 @@
       </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" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!createCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,17 +9,17 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</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>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</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-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of cashierData.template.staffOptions" [value]="staff.id">
                 {{ staff.displayName }}
@@ -28,41 +28,41 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="!isStaffId">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId" *ngIf="!isStaffId">
               <mat-option [value]="cashierData.data.staffId">
-                Select Option
+                {{ 'labels.inputs.Select Option' | translate }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Description/Notes</mat-label>
+            <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
             <input matInput autofocus formControlName="description">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
-            <mat-label>From</mat-label>
+            <mat-label>{{ 'labels.inputs.From' | translate }}</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>
+              {{ 'labels.inputs.From Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
-            <mat-label>To</mat-label>
+            <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
             <input matInput [min]="editCashierForm.value.startDate" [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>
+              {{ 'labels.inputs.To Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" class="space">
             <mat-checkbox labelPosition="before" formControlName="isFullDay">
-              Full Day?
+              {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
 
@@ -71,8 +71,8 @@
       </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" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!editCashierForm.valid" *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'">{{ 'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

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

@@ -9,60 +9,60 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required formControlName="office">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Teller Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="tellerName">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Cashier</mat-label>
+            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <input matInput required formControlName="cashier">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Assignment Period</mat-label>
+            <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
             <input matInput formControlName="assignmentPeriod">
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
-            <mat-label>Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Date' | translate }}</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>
+              {{ 'labels.inputs.Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Currency</mat-label>
+            <mat-label>{{ 'labels.inputs.Currency' | translate }}</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>
+              {{ 'labels.inputs.Currency' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Amount</mat-label>
+            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput required formControlName="txnAmount">
             <mat-error *ngIf="settleCashForm.controls.txnAmount.hasError('required')">
-              Amount <strong>is required</strong>
+              {{ 'labels.inputs.Amount' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Notes/Comments</mat-label>
+            <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
             <input matInput required formControlName="txnNote">
             <mat-error *ngIf="settleCashForm.controls.txnNote.hasError('required')">
-              Notes/Comments <strong>is required</strong>
+              {{ 'labels.inputs.Notes/Comments' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -71,8 +71,8 @@
       </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" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">Settle Cash</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!settleCashForm.valid" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">{{ 'labels.buttons.Settle Cash' | translate }}</button>
       </mat-card-actions>
 
     </form>

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

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="accent" [routerLink]="['../allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
       <fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
-      Allocate Cash
+      {{ 'labels.buttons.Allocate Cash' | translate }}
   </button>
   <button mat-raised-button color="warn" [routerLink]="['../settle']" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">
       <fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
-      Settle Cash
+      {{ 'labels.buttons.Settle Cash' | translate }}
   </button>
 </div>
 
@@ -18,7 +18,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Branch
+            {{ 'labels.inputs.Branch' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -26,7 +26,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Teller
+            {{ 'labels.inputs.Teller' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -34,7 +34,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Cashier
+            {{ 'labels.inputs.Cashier' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -42,7 +42,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Net Cash
+            {{ 'labels.inputs.Net Cash' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -69,7 +69,7 @@
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label> Select Currency </mat-label>
+        <mat-label> {{ 'labels.inputs.Select Currency' | translate }} </mat-label>
         <mat-select [formControl]="currencySelector" required>
           <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
             {{ currency.name }}
@@ -84,32 +84,32 @@
       <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 | dateFormat }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Date' | translate }} </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="transactions">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Transactions </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Transactions' | translate }} </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 | formatNumber}}) </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Allocation' | translate }} ({{cashierData.sumCashAllocation | formatNumber}}) </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="cashIn">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | formatNumber}})  </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash In' | translate }} ({{cashierData.sumInwardCash | formatNumber}})  </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="cashOut">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | formatNumber}}) </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Cash Out' | translate }} ({{cashierData.sumOutwardCash | formatNumber}}) </th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="settlement">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | formatNumber}})</th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Settlement' | translate }} ({{cashierData.sumCashSettlement | formatNumber}})</th>
           <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>