Chore: Upgraded to Angular v17 and all the refactoring for that

Chore: Updated all dependencies in overlord

overlord/src/app/payment/payment-dialog.component.html

@@ -12,10 +12,12 @@
           formControlName="account"
           autocomplete="off"
         />
-        <mat-hint *ngIf="accBal">
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-        </mat-hint>
+        @if (accBal) {
+          <mat-hint>
+            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          </mat-hint>
+        }
       </mat-form-field>
       <mat-autocomplete
         #auto="matAutocomplete"
@@ -23,7 +25,9 @@
         (optionSelected)="accountSelected($event)"
         [displayWith]="displayFn"
       >
-        <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+        @for (account of accounts | async; track account) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Amount</mat-label>