Beer consumption report can choose menu category for beer

bookie/src/app/beer-sale-report/beer-sale-report.component.html

@@ -31,6 +31,16 @@
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory" (selectionChange)="filterOn($event.value)">
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
   <div class="row-container sm:max-lg:flex-col">
@@ -51,7 +61,7 @@
   @for (col of info.headers; track col) {
     <ng-container matColumnDef="{{ col }}">
       <mat-header-cell *matHeaderCellDef class="right">{{ col }}</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row[col] }}</mat-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row[col] | number: '1.2-2' }}</mat-cell>
     </ng-container>
   }