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/customers/customer-detail/customer-detail.component.ts

@@ -1,10 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {
-  AbstractControl,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
@@ -21,26 +16,36 @@ import { CustomerService } from '../customer.service';
 })
 export class CustomerDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    name: FormControl<string>;
+    phone: FormControl<string>;
+    address: FormControl<string | null>;
+    printInBill: FormControl<boolean>;
+    discounts: FormArray<
+      FormGroup<{
+        discount: FormControl<number | null>;
+      }>
+    >;
+  }>;
+
   item: Customer = new Customer();
   hide: boolean;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: CustomerService,
   ) {
     this.hide = true;
     // Create form
-    this.form = this.fb.group({
-      name: '',
-      phone: '',
-      address: '',
-      printInBill: false,
-      discounts: this.fb.array([]),
+    this.form = new FormGroup({
+      name: new FormControl<string>('', { nonNullable: true }),
+      phone: new FormControl<string>('', { nonNullable: true }),
+      address: new FormControl<string | null>(null),
+      printInBill: new FormControl<boolean>(false, { nonNullable: true }),
+      discounts: new FormArray<FormGroup<{ discount: FormControl<number | null> }>>([]),
     });
   }
 
@@ -53,18 +58,16 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
 
   showItem(item: Customer) {
     this.item = item;
-    (this.form.get('name') as AbstractControl).setValue(item.name);
-    (this.form.get('phone') as AbstractControl).setValue(item.phone);
-    (this.form.get('address') as AbstractControl).setValue(item.address);
-    (this.form.get('printInBill') as AbstractControl).setValue(item.printInBill);
-    this.form.setControl(
-      'discounts',
-      this.fb.array(
-        item.discounts.map((x) =>
-          this.fb.group({
-            discount: '' + x.discount * 100,
-          }),
-        ),
+    this.form.controls.name.setValue(item.name);
+    this.form.controls.phone.setValue(item.phone);
+    this.form.controls.address.setValue(item.address);
+    this.form.controls.printInBill.setValue(item.printInBill);
+    this.form.controls.discounts.clear();
+    this.item.discounts.forEach((x) =>
+      this.form.controls.discounts.push(
+        new FormGroup({
+          discount: new FormControl<number | null>(x.discount ? x.discount * 100 : null),
+        }),
       ),
     );
   }
@@ -116,17 +119,22 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Customer {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
-    this.item.phone = formModel.phone;
-    this.item.address = formModel.address;
-    this.item.printInBill = formModel.printInBill;
-    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),
-        0,
-      );
-    });
+    this.item.name = formModel.name ?? '';
+    this.item.phone = formModel.phone ?? '';
+    this.item.address = formModel.address ?? null;
+    this.item.printInBill = formModel.printInBill ?? false;
+
+    const array = formModel.discounts;
+    if (array) {
+      this.item.discounts.forEach((item, index) => {
+        const array_item = array.at(index);
+        if (array_item && array_item?.discount) {
+          item.discount = Math.max(Math.min(round(array_item.discount / 100, 5), 100), 0);
+        } else {
+          item.discount = null;
+        }
+      });
+    }
     return this.item;
   }
 }