diff --git a/barker/.pre-commit-config.yaml b/barker/.pre-commit-config.yaml
index 379e5e8..9023319 100644
--- a/barker/.pre-commit-config.yaml
+++ b/barker/.pre-commit-config.yaml
@@ -2,7 +2,7 @@
 # See https://pre-commit.com/hooks.html for more hooks
 repos:
   - repo: https://github.com/psf/black
-    rev: 22.3.0
+    rev: 22.6.0
     hooks:
       - id: black
 
diff --git a/barker/pyproject.toml b/barker/pyproject.toml
index 029d5d1..7753337 100644
--- a/barker/pyproject.toml
+++ b/barker/pyproject.toml
@@ -6,15 +6,15 @@ authors = ["tanshu <git@tanshu.com>"]
 
 [tool.poetry.dependencies]
 python = "^3.10"
-uvicorn = {extras = ["standard"], version = "^0.17.6"}
+uvicorn = {extras = ["standard"], version = "^0.18.2"}
 fastapi = "^0.78.0"
 python-jose = {extras = ["cryptography"], version = "^3.3.0"}
 passlib = {extras = ["bcrypt"], version = "^1.7.4"}
 psycopg2-binary = "^2.9.3"
-SQLAlchemy = "^1.4.36"
+SQLAlchemy = "^1.4.39"
 python-multipart = "^0.0.5"
 PyJWT = "^2.4.0"
-alembic = "^1.7.7"
+alembic = "^1.8.0"
 itsdangerous = "^2.1.2"
 python-dotenv = "^0.20.0"
 pydantic = {extras = ["dotenv"], version = "^1.9.1"}
@@ -26,10 +26,10 @@ gunicorn = "^20.1.0"
 
 [tool.poetry.dev-dependencies]
 flake8 = "^4.0.1"
-black = "^22.3.0"
+black = "^22.6.0"
 isort = {extras = ["toml"], version = "^5.10.1"}
 pre-commit = "^2.19.0"
-mypy = "^0.950"
+mypy = "^0.961"
 
 [build-system]
 requires = ["poetry-core>=1.0.0"]
diff --git a/bookie/angular.json b/bookie/angular.json
index 5771ce6..03963e9 100644
--- a/bookie/angular.json
+++ b/bookie/angular.json
@@ -128,7 +128,10 @@
       }
     }
   },
-  "defaultProject": "bookie",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
-  }}
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
+    "analytics": "7a673950-fc51-4020-ad5a-32644b126f14"
+  }
+}
diff --git a/bookie/package.json b/bookie/package.json
index c44c711..175b4a6 100644
--- a/bookie/package.json
+++ b/bookie/package.json
@@ -14,39 +14,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.3.9",
-    "@angular/cdk": "^13.3.7",
-    "@angular/common": "^13.3.9",
-    "@angular/compiler": "^13.3.9",
-    "@angular/core": "^13.3.9",
-    "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "^13.3.9",
-    "@angular/material": "^13.3.7",
-    "@angular/material-moment-adapter": "^13.3.7",
-    "@angular/platform-browser": "^13.3.9",
-    "@angular/platform-browser-dynamic": "^13.3.9",
-    "@angular/router": "^13.3.9",
-    "mathjs": "^10.5.3",
+    "@angular/animations": "^14.0.4",
+    "@angular/cdk": "^14.0.4",
+    "@angular/common": "^14.0.4",
+    "@angular/compiler": "^14.0.4",
+    "@angular/core": "^14.0.4",
+    "@angular/flex-layout": "^14.0.0-beta.40",
+    "@angular/forms": "^14.0.4",
+    "@angular/material": "^14.0.4",
+    "@angular/material-moment-adapter": "^14.0.4",
+    "@angular/platform-browser": "^14.0.4",
+    "@angular/platform-browser-dynamic": "^14.0.4",
+    "@angular/router": "^14.0.4",
+    "mathjs": "^10.6.4",
     "moment": "^2.29.3",
     "rxjs": "^6.6.7",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.6",
-    "@angular-eslint/builder": "^13.2.1",
-    "@angular-eslint/eslint-plugin": "^13.2.1",
-    "@angular-eslint/eslint-plugin-template": "^13.2.1",
-    "@angular-eslint/schematics": "^13.2.1",
-    "@angular-eslint/template-parser": "^13.2.1",
-    "@angular/cli": "^13.3.6",
-    "@angular/compiler-cli": "^13.3.9",
-    "@angular/language-service": "^13.3.9",
+    "@angular-devkit/build-angular": "^14.0.4",
+    "@angular-eslint/builder": "^14.0.0",
+    "@angular-eslint/eslint-plugin": "^14.0.0",
+    "@angular-eslint/eslint-plugin-template": "^14.0.0",
+    "@angular-eslint/schematics": "^14.0.0",
+    "@angular-eslint/template-parser": "^14.0.0",
+    "@angular/cli": "^14.0.4",
+    "@angular/compiler-cli": "^14.0.4",
+    "@angular/language-service": "^14.0.4",
     "@types/jasmine": "~3.7.4",
-    "@types/node": "^17.0.35",
-    "@typescript-eslint/eslint-plugin": "5.25.0",
-    "@typescript-eslint/parser": "5.25.0",
-    "eslint": "^8.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "eslint": "^8.18.0",
+    "@types/node": "^18.0.1",
     "eslint-plugin-import": "2.26.0",
     "husky": "^8.0.1",
     "jasmine-core": "^3.7.1",
@@ -56,11 +56,11 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "^4.0.2",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "lint-staged": "^12.4.1",
-    "prettier": "^2.6.2",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
     "standard-version": "^9.5.0",
     "ts-node": "^9.1.1",
-    "typescript": "~4.5.4"
+    "typescript": "~4.7.4"
   },
   "husky": {
     "hooks": {
diff --git a/bookie/src/app/auth/login/login.component.ts b/bookie/src/app/auth/login/login.component.ts
index 1e55cbd..6066505 100644
--- a/bookie/src/app/auth/login/login.component.ts
+++ b/bookie/src/app/auth/login/login.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ToasterService } from '../../core/toaster.service';
@@ -13,7 +13,7 @@ import { AuthService } from '../auth.service';
 })
 export class LoginComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   hide: boolean;
   unregisteredDevice: boolean;
   deviceName: string;
@@ -25,7 +25,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
     private router: Router,
     private toaster: ToasterService,
     private cs: CookieService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
   ) {
     this.hide = true;
     this.unregisteredDevice = false;
diff --git a/bookie/src/app/beer-sale-report/beer-sale-report.component.ts b/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
index c3b68a0..da48d1e 100644
--- a/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
+++ b/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -17,7 +17,7 @@ import { BeerSaleReportDataSource } from './beer-sale-report-datasource';
 export class BeerSaleReportComponent implements OnInit {
   info: BeerSaleReport = new BeerSaleReport();
   dataSource: BeerSaleReportDataSource = new BeerSaleReportDataSource(this.info.data);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['date'];
@@ -25,7 +25,7 @@ export class BeerSaleReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
   ) {
     // Create form
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
index a3ed2b1..07ca2bb 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -19,7 +19,7 @@ export class BillSettlementReportComponent implements OnInit {
     this.info.amounts,
   );
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['date', 'billId', 'amount', 'settlement'];
@@ -27,7 +27,7 @@ export class BillSettlementReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
   ) {
     // Create form
diff --git a/bookie/src/app/cashier-report/cashier-report.component.ts b/bookie/src/app/cashier-report/cashier-report.component.ts
index 92a95ca..04ac3f7 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.ts
+++ b/bookie/src/app/cashier-report/cashier-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -20,7 +20,7 @@ export class CashierReportComponent implements OnInit {
   activeCashiers: User[] = [];
   info: CashierReport = new CashierReport();
   dataSource: CashierReportDataSource = new CashierReportDataSource(this.info.amounts);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'amount'];
@@ -28,7 +28,7 @@ export class CashierReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
     private toaster: ToasterService,
     private ser: CashierReportService,
diff --git a/bookie/src/app/customers/customer-detail/customer-detail.component.ts b/bookie/src/app/customers/customer-detail/customer-detail.component.ts
index aa7e18b..29dfae8 100644
--- a/bookie/src/app/customers/customer-detail/customer-detail.component.ts
+++ b/bookie/src/app/customers/customer-detail/customer-detail.component.ts
@@ -1,5 +1,10 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
@@ -16,14 +21,14 @@ import { CustomerService } from '../customer.service';
 })
 export class CustomerDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Customer = new Customer();
   hide: boolean;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: CustomerService,
@@ -115,7 +120,7 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
     this.item.phone = formModel.phone;
     this.item.address = formModel.address;
     this.item.printInBill = formModel.printInBill;
-    const array = this.form.get('discounts') as FormArray;
+    const array = this.form.get('discounts') as UntypedFormArray;
     this.item.discounts.forEach((item, index) => {
       item.discount = Math.max(
         Math.min(round(array.controls[index].value.discount / 100, 5), 100),
diff --git a/bookie/src/app/devices/device-detail/device-detail.component.ts b/bookie/src/app/devices/device-detail/device-detail.component.ts
index 3b1a98a..518b42b 100644
--- a/bookie/src/app/devices/device-detail/device-detail.component.ts
+++ b/bookie/src/app/devices/device-detail/device-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -16,7 +16,7 @@ import { DeviceService } from '../device.service';
 })
 export class DeviceDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   sections: Section[] = [];
   item: Device = new Device();
 
@@ -24,7 +24,7 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: DeviceService,
   ) {
diff --git a/bookie/src/app/discount-report/discount-report.component.ts b/bookie/src/app/discount-report/discount-report.component.ts
index fcc43a0..bac885a 100644
--- a/bookie/src/app/discount-report/discount-report.component.ts
+++ b/bookie/src/app/discount-report/discount-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -18,7 +18,7 @@ import { DiscountReportService } from './discount-report.service';
 export class DiscountReportComponent implements OnInit {
   info: DiscountReport = new DiscountReport();
   dataSource: DiscountReportDataSource = new DiscountReportDataSource(this.info.amounts);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'amount'];
@@ -26,7 +26,7 @@ export class DiscountReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
     private toaster: ToasterService,
     private ser: DiscountReportService,
diff --git a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
index 762e129..6d572ca 100644
--- a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
+++ b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
@@ -1,5 +1,10 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, of as observableOf } from 'rxjs';
@@ -18,12 +23,12 @@ import { GuestBookService } from '../guest-book.service';
 })
 export class GuestBookDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('phone', { static: true }) phoneElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: GuestBook = new GuestBook();
   customers: Observable<Customer[]>;
 
   constructor(
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private toaster: ToasterService,
@@ -38,7 +43,7 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
       address: null,
     });
     // Setup Account Autocomplete
-    this.customers = (this.form.get('phone') as FormControl).valueChanges.pipe(
+    this.customers = (this.form.get('phone') as UntypedFormControl).valueChanges.pipe(
       startWith(null),
       map((x) => (x !== null && x.length >= 1 ? x : null)),
       debounceTime(150),
diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
index 8cf7ac0..9ce30db 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
@@ -22,14 +22,14 @@ import { GuestBookListDataSource } from './guest-book-list-datasource';
 export class GuestBookListComponent implements OnInit {
   data: BehaviorSubject<GuestBook[]> = new BehaviorSubject<GuestBook[]>([]);
   dataSource: GuestBookListDataSource = new GuestBookListDataSource(this.data);
-  form: FormGroup;
+  form: UntypedFormGroup;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['sno', 'name', 'phone', 'pax', 'date', 'action'];
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     private ser: GuestBookService,
@@ -42,7 +42,7 @@ export class GuestBookListComponent implements OnInit {
   }
 
   listenToDateChange(): void {
-    (this.form.get('date') as FormControl).valueChanges
+    (this.form.get('date') as UntypedFormControl).valueChanges
       .pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
       .subscribe((x) =>
         this.ser.list(x).subscribe((list: GuestBookList) => {
diff --git a/bookie/src/app/header-footer/header-footer.component.ts b/bookie/src/app/header-footer/header-footer.component.ts
index 56f822c..210d35c 100644
--- a/bookie/src/app/header-footer/header-footer.component.ts
+++ b/bookie/src/app/header-footer/header-footer.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSelectChange } from '@angular/material/select';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -17,14 +17,14 @@ import { HeaderFooterService } from './header-footer.service';
 })
 export class HeaderFooterComponent implements OnInit {
   @ViewChild('section', { static: true }) sectionElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   list: HeaderFooter[] = [];
   id = '';
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: HeaderFooterService,
diff --git a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
index 6c9f11b..c396b8c 100644
--- a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
+++ b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,14 +15,14 @@ import { MenuCategoryService } from '../menu-category.service';
 })
 export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: MenuCategory = new MenuCategory();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: MenuCategoryService,
   ) {
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
index 56168db..ff3a7e4 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
@@ -1,6 +1,6 @@
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -21,7 +21,7 @@ import { NodeItem } from '../node-item';
 })
 export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: ModifierCategory = new ModifierCategory();
   treeControl = new NestedTreeControl<NodeItem>((node: NodeItem) => node.children);
   dataSource = new MatTreeNestedDataSource<NodeItem>();
@@ -31,7 +31,7 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: ModifierCategoryService,
diff --git a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
index 36bc7e9..184c713 100644
--- a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
+++ b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -16,7 +16,7 @@ import { ModifierService } from '../modifier.service';
 })
 export class ModifierDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   modifierCategories: ModifierCategory[] = [];
   item: Modifier = new Modifier();
 
@@ -24,7 +24,7 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: ModifierService,
   ) {
diff --git a/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts b/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
index 4eb4658..8f7d457 100644
--- a/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
+++ b/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatSelectChange } from '@angular/material/select';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -20,13 +20,17 @@ export class ModifierListComponent implements OnInit {
   filter: BehaviorSubject<string> = new BehaviorSubject('');
   data: BehaviorSubject<Modifier[]> = new BehaviorSubject<Modifier[]>([]);
   dataSource: ModifierListDataSource = new ModifierListDataSource(this.filter, this.data);
-  form: FormGroup;
+  form: UntypedFormGroup;
   list: Modifier[] = [];
   modifierCategories: ModifierCategory[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
 
-  constructor(private route: ActivatedRoute, private fb: FormBuilder, private router: Router) {
+  constructor(
+    private route: ActivatedRoute,
+    private fb: UntypedFormBuilder,
+    private router: Router,
+  ) {
     this.form = this.fb.group({
       modifierCategory: '',
     });
diff --git a/bookie/src/app/printers/printer-detail/printer-detail.component.ts b/bookie/src/app/printers/printer-detail/printer-detail.component.ts
index c87f3c1..fe51625 100644
--- a/bookie/src/app/printers/printer-detail/printer-detail.component.ts
+++ b/bookie/src/app/printers/printer-detail/printer-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,14 +15,14 @@ import { PrinterService } from '../printer.service';
 })
 export class PrinterDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Printer = new Printer();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: PrinterService,
   ) {
diff --git a/bookie/src/app/product-sale-report/product-sale-report.component.ts b/bookie/src/app/product-sale-report/product-sale-report.component.ts
index 4c94c6a..128824b 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.component.ts
+++ b/bookie/src/app/product-sale-report/product-sale-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -18,7 +18,7 @@ import { ProductSaleReportService } from './product-sale-report.service';
 export class ProductSaleReportComponent implements OnInit {
   info: ProductSaleReport = new ProductSaleReport();
   dataSource: ProductSaleReportDataSource = new ProductSaleReportDataSource(this.info.amounts);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'unbilled', 'sale', 'noCharge', 'staff', 'void'];
@@ -26,7 +26,7 @@ export class ProductSaleReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
     private toaster: ToasterService,
     private ser: ProductSaleReportService,
diff --git a/bookie/src/app/product-updates-report/product-updates-report.component.ts b/bookie/src/app/product-updates-report/product-updates-report.component.ts
index ac048f1..74b4cfb 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.component.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -16,7 +16,7 @@ import { ProductUpdatesReportDataSource } from './product-updates-report-datasou
 export class ProductUpdatesReportComponent implements OnInit {
   info: ProductUpdatesReport = new ProductUpdatesReport();
   dataSource: ProductUpdatesReportDataSource = new ProductUpdatesReportDataSource(this.info.report);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['details'];
@@ -24,7 +24,7 @@ export class ProductUpdatesReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
   ) {
     // Create form
diff --git a/bookie/src/app/product/product-detail/product-detail.component.ts b/bookie/src/app/product/product-detail/product-detail.component.ts
index 65be355..7d5bc9b 100644
--- a/bookie/src/app/product/product-detail/product-detail.component.ts
+++ b/bookie/src/app/product/product-detail/product-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -17,7 +17,7 @@ import { ProductService } from '../product.service';
 })
 export class ProductDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   menuCategories: MenuCategory[] = [];
   saleCategories: SaleCategory[] = [];
   item: Product = new Product();
@@ -26,7 +26,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: ProductService,
   ) {
diff --git a/bookie/src/app/product/product-list/product-list.component.ts b/bookie/src/app/product/product-list/product-list.component.ts
index 92c1e4e..7e71b75 100644
--- a/bookie/src/app/product/product-list/product-list.component.ts
+++ b/bookie/src/app/product/product-list/product-list.component.ts
@@ -1,6 +1,6 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Observable } from 'rxjs';
@@ -29,7 +29,7 @@ export class ProductListComponent implements OnInit {
     this.data,
   );
 
-  form: FormGroup;
+  form: UntypedFormGroup;
   list: Product[] = [];
   menuCategories: MenuCategory[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -44,7 +44,7 @@ export class ProductListComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private toCsv: ToCsvService,
     private ser: ProductService,
@@ -56,7 +56,7 @@ export class ProductListComponent implements OnInit {
     this.data.subscribe((data: Product[]) => {
       this.list = data;
     });
-    this.searchFilter = (this.form.get('filter') as FormControl).valueChanges.pipe(
+    this.searchFilter = (this.form.get('filter') as UntypedFormControl).valueChanges.pipe(
       startWith(''),
       debounceTime(150),
       distinctUntilChanged(),
diff --git a/bookie/src/app/roles/role-detail/role-detail.component.ts b/bookie/src/app/roles/role-detail/role-detail.component.ts
index 8edcd59..2e45fdc 100644
--- a/bookie/src/app/roles/role-detail/role-detail.component.ts
+++ b/bookie/src/app/roles/role-detail/role-detail.component.ts
@@ -1,5 +1,10 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,13 +20,13 @@ import { RoleService } from '../role.service';
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Role = new Role();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: RoleService,
@@ -37,7 +42,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
     this.route.data.subscribe((value) => {
       const data = value as { item: Role };
       this.item = data.item;
-      (this.form.get('name') as FormControl).setValue(this.item.name);
+      (this.form.get('name') as UntypedFormControl).setValue(this.item.name);
       this.form.setControl(
         'permissions',
         this.fb.array(
@@ -99,7 +104,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
   getItem(): Role {
     const formModel = this.form.value;
     this.item.name = formModel.name;
-    const array = this.form.get('permissions') as FormArray;
+    const array = this.form.get('permissions') as UntypedFormArray;
     this.item.permissions.forEach((item, index) => {
       item.enabled = array.controls[index].value.permission;
     });
diff --git a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
index 44d2c2b..c1ce515 100644
--- a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
+++ b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
@@ -21,7 +21,7 @@ import { SaleCategoryDetailDatasource } from './sale-category-detail-datasource'
 })
 export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   taxes: Tax[] = [];
   item: SaleCategory = new SaleCategory();
   products: BehaviorSubject<Product[]> = new BehaviorSubject<Product[]>([]);
@@ -32,7 +32,7 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: SaleCategoryService,
   ) {
diff --git a/bookie/src/app/sale-report/sale-report.component.ts b/bookie/src/app/sale-report/sale-report.component.ts
index 936c4d3..22ad185 100644
--- a/bookie/src/app/sale-report/sale-report.component.ts
+++ b/bookie/src/app/sale-report/sale-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -18,7 +18,7 @@ import { SaleReportService } from './sale-report.service';
 export class SaleReportComponent implements OnInit {
   info: SaleReport = new SaleReport();
   dataSource: SaleReportDatasource = new SaleReportDatasource(this.info.amounts);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'amount'];
@@ -26,7 +26,7 @@ export class SaleReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
     private toaster: ToasterService,
     private ser: SaleReportService,
diff --git a/bookie/src/app/sales/bill-number/bill-number.component.ts b/bookie/src/app/sales/bill-number/bill-number.component.ts
index d6360f4..32eb252 100644
--- a/bookie/src/app/sales/bill-number/bill-number.component.ts
+++ b/bookie/src/app/sales/bill-number/bill-number.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -8,9 +8,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./bill-number.component.css'],
 })
 export class BillNumberComponent implements OnInit {
-  form: FormGroup;
+  form: UntypedFormGroup;
 
-  constructor(public dialogRef: MatDialogRef<BillNumberComponent>, private fb: FormBuilder) {
+  constructor(public dialogRef: MatDialogRef<BillNumberComponent>, private fb: UntypedFormBuilder) {
     // Create form
     this.form = this.fb.group({
       billType: '',
diff --git a/bookie/src/app/sales/choose-customer/choose-customer.component.ts b/bookie/src/app/sales/choose-customer/choose-customer.component.ts
index c5aee34..39ec129 100644
--- a/bookie/src/app/sales/choose-customer/choose-customer.component.ts
+++ b/bookie/src/app/sales/choose-customer/choose-customer.component.ts
@@ -1,5 +1,10 @@
 import { Component, Inject } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { round } from 'mathjs';
@@ -15,14 +20,14 @@ import { CustomerService } from '../../customers/customer.service';
   styleUrls: ['./choose-customer.component.css'],
 })
 export class ChooseCustomerComponent {
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Customer = new Customer();
   customers: Observable<Customer[]>;
 
   constructor(
     public dialogRef: MatDialogRef<ChooseCustomerComponent>,
     @Inject(MAT_DIALOG_DATA) public data: string | undefined,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private ser: CustomerService,
   ) {
     // Create form
@@ -34,7 +39,7 @@ export class ChooseCustomerComponent {
       discounts: this.fb.array([]),
     });
     // Setup Account Autocomplete
-    this.customers = (this.form.get('phone') as FormControl).valueChanges.pipe(
+    this.customers = (this.form.get('phone') as UntypedFormControl).valueChanges.pipe(
       startWith(null),
       map((x) => (x === this.item.phone ? '' : x)),
       map((x) => (x !== null && x.length >= 1 ? x : null)),
@@ -93,7 +98,7 @@ export class ChooseCustomerComponent {
     this.item.phone = formModel.phone;
     this.item.address = formModel.address;
     this.item.printInBill = formModel.printInBill;
-    const array = this.form.get('discounts') as FormArray;
+    const array = this.form.get('discounts') as UntypedFormArray;
     this.item.discounts.forEach((item, index) => {
       item.discount = Math.max(
         Math.min(round(array.controls[index].value.discount / 100, 5), 100),
diff --git a/bookie/src/app/sales/discount/discount.component.ts b/bookie/src/app/sales/discount/discount.component.ts
index daab2db..269203f 100644
--- a/bookie/src/app/sales/discount/discount.component.ts
+++ b/bookie/src/app/sales/discount/discount.component.ts
@@ -1,5 +1,11 @@
 import { Component, Inject } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { round } from 'mathjs';
 import { Observable } from 'rxjs';
@@ -14,14 +20,14 @@ import { DiscountItem } from './discount-item';
 })
 export class DiscountComponent {
   list: DiscountItem[] = [];
-  form: FormGroup;
+  form: UntypedFormGroup;
   dataSource: DiscountDataSource = new DiscountDataSource([]);
 
   displayedColumns = ['name', 'discount'];
 
   constructor(
     public dialogRef: MatDialogRef<DiscountComponent>,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     @Inject(MAT_DIALOG_DATA)
     public data: Observable<DiscountItem[]>,
   ) {
@@ -49,10 +55,11 @@ export class DiscountComponent {
   }
 
   accept(): void {
-    const array = this.form.get('discounts') as FormArray;
+    const array = this.form.get('discounts') as UntypedFormArray;
     for (let i = this.list.length - 1; i >= 0; i--) {
       const item = this.list[i];
-      const control = (array.controls[i] as FormGroup).controls.discount as FormControl;
+      const control = (array.controls[i] as UntypedFormGroup).controls
+        .discount as UntypedFormControl;
       if (
         control.value === null ||
         control.value === '' ||
diff --git a/bookie/src/app/sales/pax/pax.component.ts b/bookie/src/app/sales/pax/pax.component.ts
index 3726258..b6f9e0a 100644
--- a/bookie/src/app/sales/pax/pax.component.ts
+++ b/bookie/src/app/sales/pax/pax.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -8,12 +8,12 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./pax.component.css'],
 })
 export class PaxComponent implements OnInit {
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   constructor(
     public dialogRef: MatDialogRef<PaxComponent>,
     @Inject(MAT_DIALOG_DATA) public data: number,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
   ) {
     // Create form
     this.form = this.fb.group({
diff --git a/bookie/src/app/sales/quantity/quantity.component.ts b/bookie/src/app/sales/quantity/quantity.component.ts
index 41e12a4..fe31387 100644
--- a/bookie/src/app/sales/quantity/quantity.component.ts
+++ b/bookie/src/app/sales/quantity/quantity.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { MathService } from '../../shared/math.service';
@@ -10,12 +10,12 @@ import { MathService } from '../../shared/math.service';
   styleUrls: ['./quantity.component.css'],
 })
 export class QuantityComponent implements OnInit {
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   constructor(
     public dialogRef: MatDialogRef<QuantityComponent>,
     @Inject(MAT_DIALOG_DATA) public data: number,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private math: MathService,
   ) {
     // Create form
diff --git a/bookie/src/app/sales/reason/reason.component.ts b/bookie/src/app/sales/reason/reason.component.ts
index 2d70e1a..921f99e 100644
--- a/bookie/src/app/sales/reason/reason.component.ts
+++ b/bookie/src/app/sales/reason/reason.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { ReasonDatasource } from './reason-datasource';
@@ -11,7 +11,7 @@ import { ReasonDatasource } from './reason-datasource';
 })
 export class ReasonComponent {
   @ViewChild('son', { static: true }) son?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   dataSource: ReasonDatasource;
   title: string;
   selected = '';
@@ -21,7 +21,7 @@ export class ReasonComponent {
   constructor(
     public dialogRef: MatDialogRef<ReasonComponent>,
     @Inject(MAT_DIALOG_DATA) private data: { title: string; reasons: string[] },
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
   ) {
     this.reasons = data.reasons || [];
     this.title = data.title;
diff --git a/bookie/src/app/sales/receive-payment/receive-payment.component.ts b/bookie/src/app/sales/receive-payment/receive-payment.component.ts
index 6f5e2e1..8cae8df 100644
--- a/bookie/src/app/sales/receive-payment/receive-payment.component.ts
+++ b/bookie/src/app/sales/receive-payment/receive-payment.component.ts
@@ -1,5 +1,10 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
 
@@ -25,14 +30,14 @@ export class ReceivePaymentComponent {
   reason = '';
   displayReason: boolean;
   displayTable: boolean;
-  form: FormGroup;
+  form: UntypedFormGroup;
   dataSource: ReceivePaymentDatasource;
 
   displayedColumns = ['name', 'amount'];
 
   constructor(
     public dialogRef: MatDialogRef<ReceivePaymentComponent>,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private ser: SettleOptionService,
     @Inject(MAT_DIALOG_DATA) public data: { type: VoucherType; amount: number },
   ) {
@@ -81,7 +86,7 @@ export class ReceivePaymentComponent {
   }
 
   listenToAmountChange() {
-    const array = this.form.get('amounts') as FormArray;
+    const array = this.form.get('amounts') as UntypedFormArray;
     this.choices.forEach((z, i) =>
       array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
         (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount =
@@ -101,8 +106,8 @@ export class ReceivePaymentComponent {
   }
 
   maxAmount(row: ReceivePaymentItem, index: number) {
-    const array = this.form.get('amounts') as FormArray;
-    const ctrl = array.controls[index].get('amount') as FormControl;
+    const array = this.form.get('amounts') as UntypedFormArray;
+    const ctrl = array.controls[index].get('amount') as UntypedFormControl;
     ctrl.setValue('' + (row.amount + this.balance));
   }
 }
diff --git a/bookie/src/app/sales/split-bill/split-bill.component.ts b/bookie/src/app/sales/split-bill/split-bill.component.ts
index 71c58cc..48bd985 100644
--- a/bookie/src/app/sales/split-bill/split-bill.component.ts
+++ b/bookie/src/app/sales/split-bill/split-bill.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
@@ -10,11 +10,11 @@ import { Observable } from 'rxjs';
 })
 export class SplitBillComponent {
   list: { id: string; name: string; selected: boolean }[] = [];
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   constructor(
     public dialogRef: MatDialogRef<SplitBillComponent>,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     @Inject(MAT_DIALOG_DATA)
     public data: Observable<{ id: string; name: string; selected: boolean }[]>,
   ) {
@@ -37,7 +37,7 @@ export class SplitBillComponent {
   }
 
   accept(): void {
-    const array = this.form.get('saleCategories') as FormArray;
+    const array = this.form.get('saleCategories') as UntypedFormArray;
     this.list.forEach((item, index) => {
       item.selected = array.controls[index].value.saleCategory;
     });
diff --git a/bookie/src/app/section-printers/section-printer.component.ts b/bookie/src/app/section-printers/section-printer.component.ts
index 4432dc6..4ef69e2 100644
--- a/bookie/src/app/section-printers/section-printer.component.ts
+++ b/bookie/src/app/section-printers/section-printer.component.ts
@@ -1,5 +1,10 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSelectChange } from '@angular/material/select';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -22,7 +27,7 @@ import { SectionPrinterService } from './section-printer.service';
 })
 export class SectionPrinterComponent implements OnInit {
   @ViewChild('section', { static: true }) sectionElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   public listObservable = new BehaviorSubject<SectionPrinter[]>([]);
   dataSource: SectionPrinterDataSource = new SectionPrinterDataSource(this.listObservable);
   list: SectionPrinter[] = [];
@@ -34,7 +39,7 @@ export class SectionPrinterComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: SectionPrinterService,
@@ -119,7 +124,7 @@ export class SectionPrinterComponent implements OnInit {
   getItem(): SectionPrinter[] {
     const formModel = this.form.value;
     this.sectionId = formModel.section;
-    const array = this.form.get('saleCategories') as FormArray;
+    const array = this.form.get('saleCategories') as UntypedFormArray;
     this.list.forEach((item, index) => {
       const cont = array.controls[index].value;
       if (cont.printer === null || cont.printer === undefined) {
diff --git a/bookie/src/app/sections/section-detail/section-detail.component.ts b/bookie/src/app/sections/section-detail/section-detail.component.ts
index d5bce60..5e9a17a 100644
--- a/bookie/src/app/sections/section-detail/section-detail.component.ts
+++ b/bookie/src/app/sections/section-detail/section-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,14 +15,14 @@ import { SectionService } from '../section.service';
 })
 export class SectionDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Section = new Section();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: SectionService,
   ) {
diff --git a/bookie/src/app/settings/settings.component.ts b/bookie/src/app/settings/settings.component.ts
index 2161a56..f295365 100644
--- a/bookie/src/app/settings/settings.component.ts
+++ b/bookie/src/app/settings/settings.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { UntypedFormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -23,7 +23,7 @@ export class SettingsComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     public auth: AuthService,
diff --git a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
index 2c6f37e..d9a57b1 100644
--- a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
+++ b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -17,7 +17,7 @@ import { SettleOptionService } from '../settle-option.service';
 })
 export class SettleOptionDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: SettleOption = new SettleOption();
   voucherTypes: { id: number; name: string }[];
   reportingLevel: { id: number; name: string }[];
@@ -26,7 +26,7 @@ export class SettleOptionDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: SettleOptionService,
   ) {
diff --git a/bookie/src/app/tables/table-detail/table-detail.component.ts b/bookie/src/app/tables/table-detail/table-detail.component.ts
index 8cb4107..849aa3f 100644
--- a/bookie/src/app/tables/table-detail/table-detail.component.ts
+++ b/bookie/src/app/tables/table-detail/table-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -16,7 +16,7 @@ import { TableService } from '../table.service';
 })
 export class TableDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   sections: Section[] = [];
   item: Table = new Table();
 
@@ -24,7 +24,7 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: TableService,
   ) {
diff --git a/bookie/src/app/tax-report/tax-report.component.ts b/bookie/src/app/tax-report/tax-report.component.ts
index d96db40..1ae3949 100644
--- a/bookie/src/app/tax-report/tax-report.component.ts
+++ b/bookie/src/app/tax-report/tax-report.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 
@@ -16,7 +16,7 @@ import { TaxReportDatasource } from './tax-report-datasource';
 export class TaxReportComponent implements OnInit {
   info: TaxReport = new TaxReport();
   dataSource: TaxReportDatasource = new TaxReportDatasource(this.info.amounts);
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'taxRate', 'saleAmount', 'taxAmount'];
@@ -24,7 +24,7 @@ export class TaxReportComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
   ) {
     // Create form
diff --git a/bookie/src/app/taxes/tax-detail/tax-detail.component.ts b/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
index b154853..a843b14 100644
--- a/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
+++ b/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
@@ -16,14 +16,14 @@ import { TaxService } from '../tax.service';
 })
 export class TaxDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: Tax = new Tax();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: TaxService,
   ) {
diff --git a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
index b99d0c1..d00e448 100644
--- a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
+++ b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
@@ -18,7 +18,7 @@ import { TemporalProductService } from '../temporal-product.service';
 })
 export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   menuCategories: MenuCategory[] = [];
   saleCategories: SaleCategory[] = [];
   item: Product = new Product();
@@ -27,7 +27,7 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private ser: TemporalProductService,
   ) {
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
index 893b3c8..132fa01 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Observable } from 'rxjs';
@@ -28,7 +28,7 @@ export class TemporalProductListComponent implements OnInit {
     this.data,
   );
 
-  form: FormGroup;
+  form: UntypedFormGroup;
   list: Product[][] = [];
   menuCategories: MenuCategory[] = [];
   saleCategories: SaleCategory[] = [];
@@ -42,7 +42,7 @@ export class TemporalProductListComponent implements OnInit {
     'quantity',
   ];
 
-  constructor(private route: ActivatedRoute, private fb: FormBuilder) {
+  constructor(private route: ActivatedRoute, private fb: UntypedFormBuilder) {
     this.form = this.fb.group({
       filter: '',
       menuCategory: '',
@@ -51,7 +51,7 @@ export class TemporalProductListComponent implements OnInit {
     this.data.subscribe((data: Product[][]) => {
       this.list = data;
     });
-    this.searchFilter = (this.form.get('filter') as FormControl).valueChanges.pipe(
+    this.searchFilter = (this.form.get('filter') as UntypedFormControl).valueChanges.pipe(
       startWith(''),
       debounceTime(150),
       distinctUntilChanged(),
diff --git a/bookie/src/app/update-product-prices/update-product-prices.component.ts b/bookie/src/app/update-product-prices/update-product-prices.component.ts
index 2ba3e23..720aeaa 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.component.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices.component.ts
@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
 import { map } from 'rxjs/operators';
@@ -20,7 +25,7 @@ import { UpdateProductPricesService } from './update-product-prices.service';
 export class UpdateProductPricesComponent implements OnInit {
   info: UpdateProductPrices = new UpdateProductPrices();
   dataSource: UpdateProductPricesDataSource = new UpdateProductPricesDataSource(this.info.items);
-  form: FormGroup;
+  form: UntypedFormGroup;
   menuCategories: MenuCategory[] = [];
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -29,7 +34,7 @@ export class UpdateProductPricesComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toCsv: ToCsvService,
     private toaster: ToasterService,
     private ser: UpdateProductPricesService,
@@ -95,7 +100,7 @@ export class UpdateProductPricesComponent implements OnInit {
 
   getInfo(): UpdateProductPrices {
     const formModel = this.form.value;
-    const array = this.form.get('prices') as FormArray;
+    const array = this.form.get('prices') as UntypedFormArray;
     this.info.items.forEach((item, index) => {
       item.newPrice = array.controls[index].value.newPrice;
     });
diff --git a/bookie/src/app/users/user-detail/user-detail.component.ts b/bookie/src/app/users/user-detail/user-detail.component.ts
index ac46af3..8055215 100644
--- a/bookie/src/app/users/user-detail/user-detail.component.ts
+++ b/bookie/src/app/users/user-detail/user-detail.component.ts
@@ -1,5 +1,10 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,14 +20,14 @@ import { UserService } from '../user.service';
 })
 export class UserDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup;
+  form: UntypedFormGroup;
   item: User = new User();
   hide: boolean;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: UserService,
@@ -116,7 +121,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
     this.item.name = formModel.name;
     this.item.password = formModel.password;
     this.item.lockedOut = formModel.lockedOut;
-    const array = this.form.get('roles') as FormArray;
+    const array = this.form.get('roles') as UntypedFormArray;
     if (this.item.roles !== undefined) {
       this.item.roles.forEach((item, index) => {
         item.enabled = array.controls[index].value.role;
diff --git a/bookie/tsconfig.json b/bookie/tsconfig.json
index 3240f7a..f7e542e 100644
--- a/bookie/tsconfig.json
+++ b/bookie/tsconfig.json
@@ -14,7 +14,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2018",