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/sales/receive-payment/receive-payment.component.ts

@@ -1,10 +1,5 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import {
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
 
@@ -30,20 +25,33 @@ export class ReceivePaymentComponent {
   reason = '';
   displayReason: boolean;
   displayTable: boolean;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    amounts: FormArray<
+      FormGroup<{
+        name: FormControl<string>;
+        amount: FormControl<number>;
+      }>
+    >;
+    son: FormControl<string>;
+  }>;
+
   dataSource: ReceivePaymentDatasource;
 
   displayedColumns = ['name', 'amount'];
 
   constructor(
     public dialogRef: MatDialogRef<ReceivePaymentComponent>,
-    private fb: UntypedFormBuilder,
     private ser: SettleOptionService,
     @Inject(MAT_DIALOG_DATA) public data: { type: VoucherType; amount: number },
   ) {
-    this.form = this.fb.group({
-      amounts: '',
-      son: '',
+    this.form = new FormGroup({
+      amounts: new FormArray<
+        FormGroup<{
+          name: FormControl<string>;
+          amount: FormControl<number>;
+        }>
+      >([]),
+      son: new FormControl<string>('', { nonNullable: true }),
     });
     this.type = data.type;
     this.amount = data.amount;
@@ -55,7 +63,7 @@ export class ReceivePaymentComponent {
       .pipe(
         tap(
           (x: SettleOption[]) =>
-            (this.displayReason = x.reduce((o, n) => o || n.hasReason, this.displayReason)),
+            (this.displayReason = x.reduce((o, n) => o ?? n.hasReason, this.displayReason)),
         ),
         tap((x: SettleOption[]) => (this.displayTable = x.length > 1)),
         map((x: SettleOption[]) =>
@@ -66,15 +74,15 @@ export class ReceivePaymentComponent {
       )
       .subscribe((x) => {
         this.choices = x;
-        this.form.setControl(
-          'amounts',
-          this.fb.array(
-            this.choices.map((y: ReceivePaymentItem) =>
-              this.fb.group({
-                name: [y.name],
-                amount: [y.amount === 0 ? '' : '' + this.amount],
+        this.form.controls.amounts.clear();
+        this.choices.forEach((y: ReceivePaymentItem) =>
+          this.form.controls.amounts.push(
+            new FormGroup({
+              name: new FormControl<string>(y.name, { nonNullable: true }),
+              amount: new FormControl<number>(y.amount === 0 ? 0 : this.amount, {
+                nonNullable: true,
               }),
-            ),
+            }),
           ),
         );
         this.dataSource = new ReceivePaymentDatasource(this.choices);
@@ -86,11 +94,10 @@ export class ReceivePaymentComponent {
   }
 
   listenToAmountChange() {
-    const array = this.form.get('amounts') as UntypedFormArray;
+    const array = this.form.controls.amounts;
     this.choices.forEach((z, i) =>
       array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
-        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount =
-          x.amount === '' ? 0 : parseInt(x.amount, 10);
+        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount = x.amount ?? 0;
         this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
       }),
     );
@@ -106,8 +113,8 @@ export class ReceivePaymentComponent {
   }
 
   maxAmount(row: ReceivePaymentItem, index: number) {
-    const array = this.form.get('amounts') as UntypedFormArray;
-    const ctrl = array.controls[index].get('amount') as UntypedFormControl;
-    ctrl.setValue('' + (row.amount + this.balance));
+    const array = this.form.controls.amounts;
+    const ctrl = array.controls[index].controls.amount;
+    ctrl.setValue(row.amount + this.balance);
   }
 }