Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one. Ran ng update @angular/core@20 @angular/cli@20 Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11 Ran npm install ngx-mat-select-search@^8.0.2. Ran ng update @angular/material@20. Updated all eslint and typescript to the latest versions. Removed @angular-devkit/schematics. Updated fontawesome. Updated rxjs and tslib. Moved required node version from 16 to 20. Updated jest-preset-angular. Set preserveWhitespaces to false. Corrected two type declarations in two typescript files to make ng serve run without errors. Removed unused angular-devkit/schematics from view-user.component.ts . Updated list of supported browsers. Upgraded prettier. Ran prettier . --write the first time. Ran prettier . --write the second time. Ran ng generate @angular/core:inject with defaults, excepted a handful of files. Fixed remaining eslint problems. Added dist directory to ignores in eslint.config.js. Let prettier fix formatting, almost everything is just line breaks. Made htmlhint ignore @if and @for Angular constructs. Updated node version in Github workflow to 22.12.0 (build.yml). Updated .env.ts. Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd. Merged changes from dev into angular20 branch.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -35,41 +35,51 @@
            />
            <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #cashDatePicker></mat-datepicker>
-            <mat-error *ngIf="allocateCashForm.controls.txnDate.hasError('required')">
-              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (allocateCashForm.controls.txnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <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>
+              @for (currency of cashierData.currencyOptions; track currency) {
+                <mat-option [value]="currency.code">
+                  {{ currency.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="allocateCashForm.controls.currencyCode.hasError('required')">
-              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (allocateCashForm.controls.currencyCode.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
            <input matInput required formControlName="txnAmount" />
-            <mat-error *ngIf="allocateCashForm.controls.txnAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (allocateCashForm.controls.txnAmount.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
            <input matInput required formControlName="txnNote" />
-            <mat-error *ngIf="allocateCashForm.controls.txnNote.hasError('required')">
-              {{ 'labels.inputs.Notes/Comments' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (allocateCashForm.controls.txnNote.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Notes/Comments' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AllocateCashComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+
  /** Minimum Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Date allowed. */
@@ -39,14 +46,7 @@ export class AllocateCashComponent implements OnInit {
   * @param {SettingsService} settingsService Settings Service.
   * @param {Router} router Router.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { cashierTemplate: any }) => {
      this.cashierData = data.cashierTemplate;
    });
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -51,6 +51,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CashiersComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
  /** Cashiers data. */
  cashiersData: any;
  /** Columns to be displayed in cashiers table. */
@@ -72,7 +74,7 @@ export class CashiersComponent implements OnInit {
   * Retrieves the cashiers data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    this.route.data.subscribe((data: { cashiersData: any }) => {
      this.cashiersData = data.cashiersData.cashiers;
    });
@@ -16,14 +16,18 @@
          <mat-form-field class="flex-48">
            <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>
+              @for (staff of cashierTemplate.staffOptions; track staff) {
+                <mat-option [value]="staff.id">
+                  {{ staff.displayName }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="createCashierForm.controls.staffId.hasError('required')">
-              {{ 'labels.inputs.Cashier' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (createCashierForm.controls.staffId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Cashier' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
@@ -43,10 +47,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #fromDatePicker></mat-datepicker>
-            <mat-error *ngIf="createCashierForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (createCashierForm.controls.startDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48" (click)="toDatePicker.open()">
@@ -61,10 +67,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #toDatePicker></mat-datepicker>
-            <mat-error *ngIf="createCashierForm.controls.endDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (createCashierForm.controls.endDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <div class="space flex-48">
@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CreateCashierComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+
  /** Minimum Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Date allowed. */
@@ -41,14 +48,7 @@ export class CreateCashierComponent implements OnInit {
   * @param {OrganizationService} organizationService Organization Service.
   * @param {SettingsService} settingsService Settings Service.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { cashierTemplate: any }) => {
      this.cashierTemplate = data.cashierTemplate;
    });
@@ -13,23 +13,31 @@
            <input matInput required autofocus [value]="cashierData.data.tellerName" disabled />
          </mat-form-field>

-          <mat-form-field class="flex-48" *ngIf="isStaffId">
-            <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 }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (isStaffId) {
+            <mat-form-field class="flex-48">
+              <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
+              <mat-select formControlName="staffId">
+                @for (staff of cashierData.template.staffOptions; track staff) {
+                  <mat-option [value]="staff.id">
+                    {{ staff.displayName }}
+                  </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+          }

-          <mat-form-field class="flex-48" *ngIf="!isStaffId">
-            <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
-            <mat-select formControlName="staffId" *ngIf="!isStaffId">
-              <mat-option [value]="cashierData.data.staffId">
-                {{ 'labels.inputs.Select Option' | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+          @if (!isStaffId) {
+            <mat-form-field class="flex-48">
+              <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
+              @if (!isStaffId) {
+                <mat-select formControlName="staffId">
+                  <mat-option [value]="cashierData.data.staffId">
+                    {{ 'labels.inputs.Select Option' | translate }}
+                  </mat-option>
+                </mat-select>
+              }
+            </mat-form-field>
+          }

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
@@ -48,10 +56,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #fromDatePicker></mat-datepicker>
-            <mat-error *ngIf="editCashierForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editCashierForm.controls.startDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48" (click)="toDatePicker.open()">
@@ -66,10 +76,12 @@
            />
            <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #toDatePicker></mat-datepicker>
-            <mat-error *ngIf="editCashierForm.controls.endDate.hasError('required')">
-              {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (editCashierForm.controls.endDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <div class="space flex-48">
@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditCashierComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+
  /** Cashier Data. */
  cashierData: any = new Object();
  /** Edit cashier form. */
@@ -43,14 +50,7 @@ export class EditCashierComponent implements OnInit {
   * @param {OrganizationService} organizationService Organization Service.
   * @param {SettingsService} settingsService Settings Service.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { cashier: any; cashierTemplate: any }) => {
      this.cashierData.data = data.cashier;
      this.cashierData.template = data.cashierTemplate;
@@ -35,41 +35,51 @@
            />
            <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #cashDatePicker></mat-datepicker>
-            <mat-error *ngIf="settleCashForm.controls.txnDate.hasError('required')">
-              {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (settleCashForm.controls.txnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <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>
+              @for (currency of cashierData.currencyOptions; track currency) {
+                <mat-option [value]="currency.code">
+                  {{ currency.name }}
+                </mat-option>
+              }
            </mat-select>
-            <mat-error *ngIf="settleCashForm.controls.currencyCode.hasError('required')">
-              {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (settleCashForm.controls.currencyCode.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Currency' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
            <input matInput required formControlName="txnAmount" />
-            <mat-error *ngIf="settleCashForm.controls.txnAmount.hasError('required')">
-              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (settleCashForm.controls.txnAmount.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>

          <mat-form-field class="flex-48">
            <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
            <input matInput required formControlName="txnNote" />
-            <mat-error *ngIf="settleCashForm.controls.txnNote.hasError('required')">
-              {{ 'labels.inputs.Notes/Comments' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (settleCashForm.controls.txnNote.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Notes/Comments' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
          </mat-form-field>
        </div>
      </mat-card-content>
@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -18,6 +18,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class SettleCashComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
+
  /** Minimum Date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum Date allowed. */
@@ -36,14 +43,7 @@ export class SettleCashComponent implements OnInit {
   * @param {SettingsService} settingsService Settings Service.
   * @param {Router} router Router.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private router: Router
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { cashierTemplate: any }) => {
      this.cashierData = data.cashierTemplate;
    });
@@ -19,43 +19,38 @@
  </button>
 </div>

-<div class="container m-b-20" *ngIf="cashierData">
-  <mat-card class="mat-elevation-z8">
-    <mat-card-content>
-      <div class="layout-row-wrap">
-        <div class="flex-25 header">
-          {{ 'labels.inputs.Branch' | translate }}
+@if (cashierData) {
+  <div class="container m-b-20">
+    <mat-card class="mat-elevation-z8">
+      <mat-card-content>
+        <div class="layout-row-wrap">
+          <div class="flex-25 header">
+            {{ 'labels.inputs.Branch' | translate }}
+          </div>
+          <div class="flex-25">
+            {{ cashierData.officeName }}
+          </div>
+          <div class="flex-25 header">
+            {{ 'labels.inputs.Teller' | translate }}
+          </div>
+          <div class="flex-25">
+            {{ cashierData.tellerName }}
+          </div>
+          <div class="flex-25 header">
+            {{ 'labels.inputs.Cashier' | translate }}
+          </div>
+          <div class="flex-25">
+            {{ cashierData.cashierName }}
+          </div>
+          <div class="flex-25 header">
+            {{ 'labels.inputs.Net Cash' | translate }}
+          </div>
+          <div class="flex-25">{{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]</div>
        </div>
-
-        <div class="flex-25">
-          {{ cashierData.officeName }}
-        </div>
-
-        <div class="flex-25 header">
-          {{ 'labels.inputs.Teller' | translate }}
-        </div>
-
-        <div class="flex-25">
-          {{ cashierData.tellerName }}
-        </div>
-
-        <div class="flex-25 header">
-          {{ 'labels.inputs.Cashier' | translate }}
-        </div>
-
-        <div class="flex-25">
-          {{ cashierData.cashierName }}
-        </div>
-
-        <div class="flex-25 header">
-          {{ 'labels.inputs.Net Cash' | translate }}
-        </div>
-
-        <div class="flex-25">{{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]</div>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+}

 <div class="container">
  <mat-card class="layout-column gap-2percent mat-elevation-z8">
@@ -68,66 +63,63 @@
      <mat-form-field>
        <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 }}
-          </mat-option>
+          @for (currency of currencyData; track currency) {
+            <mat-option [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>{{ '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>{{ '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>
-            {{ '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>
-            {{ '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>
-            {{ '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>
-            {{ '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>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-      </table>
-
-      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-    </div>
+    @if (cashierData) {
+      <div>
+        <table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
+          <ng-container matColumnDef="date">
+            <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>{{ '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>
+              {{ '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>
+              {{ '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>
+              {{ '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>
+              {{ '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>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+      </div>
+    }
  </mat-card>
 </div>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -53,6 +53,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class TransactionsComponent implements OnInit {
+  private organizationService = inject(OrganizationService);
+  private route = inject(ActivatedRoute);
+
  /** Currency selector. */
  currencySelector = new UntypedFormControl();
  /** Cashier Id */
@@ -85,10 +88,7 @@ export class TransactionsComponent implements OnInit {
   * @param {OrganizationService} organizationService Organization Service.
   * @param {ActivatedRoute} route Activated Route.
   */
-  constructor(
-    private organizationService: OrganizationService,
-    private route: ActivatedRoute
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { currencies: any }) => {
      this.currencyData = data.currencies.selectedCurrencyOptions;
    });
@@ -29,13 +29,17 @@
          {{ cashierData.tellerName }}
        </div>

-        <div class="flex-50 header" *ngIf="cashierData.description !== ''">
-          {{ 'labels.inputs.Description' | translate }}
-        </div>
+        @if (cashierData.description !== '') {
+          <div class="flex-50 header">
+            {{ 'labels.inputs.Description' | translate }}
+          </div>
+        }

-        <div class="flex-50" *ngIf="cashierData.description !== ''">
-          {{ cashierData.description }}
-        </div>
+        @if (cashierData.description !== '') {
+          <div class="flex-50">
+            {{ cashierData.description }}
+          </div>
+        }

        <div class="flex-50 header">
          {{ 'labels.inputs.Start Date' | translate }}
@@ -1,5 +1,5 @@
 /** Angular Imports. */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';

 /** Custom Dialogs */
@@ -26,6 +26,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewCashierComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private organizationService = inject(OrganizationService);
+  dialog = inject(MatDialog);
+
  /** Cashier data. */
  cashierData: any;

@@ -36,12 +41,7 @@ export class ViewCashierComponent {
   * @param {OrganizationService} organizationService Organization Service
   * @param {MatDialog} dialog Mat Dialog
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private organizationService: OrganizationService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { cashier: any }) => {
      this.cashierData = data.cashier;
    });