Consolidated commit message to v22 signals

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

@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>Edit Payment Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-2-3">
         <mat-label>Account</mat-label>
@@ -9,29 +9,27 @@
           matInput
           #accountElement
           [matAutocomplete]="auto"
-          formControlName="account"
+          [formField]="form.account"
           autocomplete="off"
         />
-        @if (accBal) {
+        @if (accBal()) {
           <mat-hint>
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            <div class="balance">
+              Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong
+              ><br />
+              Total Balance: <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
+            </div>
           </mat-hint>
         }
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+          @for (account of accounts(); track account.id) {
+            <mat-option [value]="account">{{ account.name }}</mat-option>
+          }
+        </mat-autocomplete>
       </mat-form-field>
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        autoActiveFirstOption
-        (optionSelected)="accountSelected($event)"
-        [displayWith]="displayFn"
-      >
-        @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>
-        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <input type="text" matInput [formField]="form.amount" autocomplete="off" />
         <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>