toSignal via Gemini

bookie/src/app/cashier-report/cashier-report.component.html

@@ -1,15 +1,15 @@
 <h2 class="row-container space-between">
   <span>Cashier Report</span>
   <span class="spacer"></span>
-  <button mat-icon-button [disabled]="!info.cashier.id" (click)="exportCsv()">
+  <button type="button" mat-icon-button [disabled]="!info().cashier.id" (click)="exportCsv()">
     <mat-icon>save_alt</mat-icon>
   </button>
-  <button mat-icon-button [disabled]="!info.cashier.id" (click)="print()">
+  <button type="button" mat-icon-button [disabled]="!info().cashier.id" (click)="print()">
     <mat-icon>print</mat-icon>
   </button>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col">
   <div class="row-container sm:max-lg:flex-col">
     <mat-form-field class="flex-auto">
       <mat-label>Start Date</mat-label>
@@ -17,7 +17,7 @@
         matInput
         [matDatepicker]="startDate"
         (focus)="startDate.open()"
-        formControlName="startDate"
+        [formField]="form.startDate"
         autocomplete="off"
       />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
@@ -29,7 +29,7 @@
         matInput
         [matDatepicker]="finishDate"
         (focus)="finishDate.open()"
-        formControlName="finishDate"
+        [formField]="form.finishDate"
         autocomplete="off"
       />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
@@ -39,19 +39,19 @@
   <div class="row-container sm:max-lg:flex-col">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Cashier</mat-label>
-      <mat-select formControlName="cashier">
+      <mat-select [formField]="form.cashier">
         <mat-option>-- Cashier --</mat-option>
-        @for (ac of activeCashiers; track ac) {
+        @for (ac of cashiers(); track ac) {
           <mat-option [value]="ac.id">
             {{ ac.name }}
           </mat-option>
         }
       </mat-select>
     </mat-form-field>
-    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+    <button type="button" mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+<mat-table #table [dataSource]="dataSource()" aria-label="Elements">
   <!-- Name Column -->
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>