Feature: Tax Regimes are added so that different bills with different series can be printed for Different regimes such as VAT and GST

Chore: Model relationships updated to make them simpler
Chore: Bill printing majorly refactored for it

Due to the sheer depth of the changes. There can be showstoppers. Please test it carefully

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts

@@ -1,10 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-  Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, of as observableOf } from 'rxjs';
@@ -23,12 +18,17 @@ import { GuestBookService } from '../guest-book.service';
 })
 export class GuestBookDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('phone', { static: true }) phoneElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    name: FormControl<string>;
+    phone: FormControl<string | Customer>;
+    pax: FormControl<number>;
+    address: FormControl<string | null>;
+  }>;
+
   item: GuestBook = new GuestBook();
   customers: Observable<Customer[]>;
 
   constructor(
-    private fb: UntypedFormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private toaster: ToasterService,
@@ -36,19 +36,24 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
     private customerService: CustomerService,
   ) {
     // Create form
-    this.form = this.fb.group({
-      name: [null, Validators.required],
-      phone: [null, Validators.required],
-      pax: ['0', Validators.required],
-      address: null,
+    this.form = new FormGroup({
+      name: new FormControl('', { validators: Validators.required, nonNullable: true }),
+      phone: new FormControl<string | Customer>('', {
+        validators: Validators.required,
+        nonNullable: true,
+      }),
+      pax: new FormControl(0, { validators: Validators.required, nonNullable: true }),
+      address: new FormControl<string | null>(null),
     });
     // Setup Account Autocomplete
-    this.customers = (this.form.get('phone') as UntypedFormControl).valueChanges.pipe(
+    this.customers = this.form.controls.phone.valueChanges.pipe(
       startWith(null),
-      map((x) => (x !== null && x.length >= 1 ? x : null)),
+      map((x) => (x !== null && (x as string).length >= 1 ? x : null)),
       debounceTime(150),
       distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.customerService.autocomplete(x))),
+      switchMap((x) =>
+        x === null ? observableOf([]) : this.customerService.autocomplete(x as string),
+      ),
     );
   }
 
@@ -104,14 +109,14 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): GuestBook {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
+    this.item.name = formModel.name ?? '';
     if (typeof formModel.phone === 'string') {
       this.item.phone = formModel.phone;
     } else {
       this.item.phone = (formModel.phone as Customer).phone;
     }
-    this.item.pax = parseInt(formModel.pax, 10);
-    this.item.address = formModel.address;
+    this.item.pax = formModel.pax ?? 0;
+    this.item.address = formModel.address ?? null;
     return this.item;
   }
 }

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
@@ -22,27 +22,29 @@ 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: UntypedFormGroup;
+  form: FormGroup<{
+    date: FormControl<Date>;
+  }>;
+
   /** 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: UntypedFormBuilder,
     private dialog: MatDialog,
     private toaster: ToasterService,
     private ser: GuestBookService,
   ) {
     // Create form
-    this.form = this.fb.group({
-      date: '',
+    this.form = new FormGroup({
+      date: new FormControl(new Date(), { nonNullable: true }),
     });
     this.listenToDateChange();
   }
 
   listenToDateChange(): void {
-    (this.form.get('date') as UntypedFormControl).valueChanges
+    this.form.controls.date.valueChanges
       .pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
       .subscribe((x) =>
         this.ser.list(x).subscribe((list: GuestBookList) => {

bookie/src/app/guest-book/guest-book.ts

@@ -4,7 +4,7 @@ export class GuestBook {
   name: string;
   phone: string;
   pax: number;
-  address: string;
+  address: string | null;
   date: string;
   status?: string;
   tableId?: string;
@@ -17,7 +17,7 @@ export class GuestBook {
     this.name = '';
     this.phone = '';
     this.pax = 0;
-    this.address = '';
+    this.address = null;
     this.date = '';
     Object.assign(this, init);
   }