Product list and detail fully working. only thing to check is the update sort order route

bookie/src/app/product/product-detail/product-detail-dialog.component.ts

@@ -0,0 +1,117 @@
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { Component, inject, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MenuCategory } from 'src/app/core/menu-category';
+
+import { StockKeepingUnit } from '../../core/product';
+
+@Component({
+  selector: 'app-product-detail-dialog',
+  templateUrl: './product-detail-dialog.component.html',
+  styleUrls: ['./product-detail-dialog.component.css'],
+  standalone: true,
+  imports: [
+    CdkScrollableModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+  ],
+})
+export class ProductDetailDialogComponent implements OnInit {
+  private readonly dialogRef = inject<MatDialogRef<ProductDetailDialogComponent>>(MatDialogRef);
+  menuCategories: MenuCategory[] = [];
+  data = inject<{
+    item: StockKeepingUnit;
+    units: string;
+    fraction: number;
+    productYield: number;
+    costPrice: number;
+    salePrice: number;
+    menuCategory: string;
+    hasHappyHour: boolean;
+    isNotAvailable: boolean;
+    menuCategories: MenuCategory[];
+  }>(MAT_DIALOG_DATA);
+
+  form: FormGroup<{
+    units: FormControl<string>;
+    fraction: FormControl<number>;
+    productYield: FormControl<number>;
+    costPrice: FormControl<number>;
+    salePrice: FormControl<number>;
+    menuCategory: FormControl<string>;
+    hasHappyHour: FormControl<boolean>;
+    isNotAvailable: FormControl<boolean>;
+  }>;
+
+  constructor() {
+    this.form = new FormGroup({
+      units: new FormControl<string>('', { nonNullable: true }),
+      fraction: new FormControl<number>(1, { nonNullable: true }),
+      productYield: new FormControl<number>(1, { nonNullable: true }),
+      costPrice: new FormControl<number>(0, { nonNullable: true }),
+      salePrice: new FormControl<number>(0, { nonNullable: true }),
+      menuCategory: new FormControl<string>('', { nonNullable: true }),
+      hasHappyHour: new FormControl<boolean>(false, { nonNullable: true }),
+      isNotAvailable: new FormControl<boolean>(false, { nonNullable: true }),
+    });
+  }
+
+  ngOnInit(): void {
+    // Populate from the row being edited
+    this.form.setValue({
+      units: this.data.item.units ?? '',
+      fraction: this.data.item.fraction ?? 1,
+      productYield: this.data.item.productYield ?? 1,
+      costPrice: this.data.item.costPrice ?? 0,
+      salePrice: this.data.item.salePrice ?? 0,
+      menuCategory: this.data.item.menuCategory?.id ?? '',
+      hasHappyHour: this.data.item.hasHappyHour ?? false,
+      isNotAvailable: this.data.item.isNotAvailable ?? false,
+    });
+    this.menuCategories = this.data.menuCategories;
+  }
+
+  accept(): void {
+    const formValue = this.form.value;
+    const fraction = formValue.fraction ?? 0;
+    if (fraction < 1) {
+      return;
+    }
+    const productYield = formValue.productYield ?? 0;
+    if (productYield < 0 || productYield > 1) {
+      return;
+    }
+    const costPrice = formValue.costPrice ?? 0;
+    if (costPrice < 0) {
+      return;
+    }
+    const salePrice = formValue.salePrice ?? 0;
+    if (salePrice < 0) {
+      return;
+    }
+    this.data.item.units = (formValue.units ?? '').trim();
+    this.data.item.fraction = fraction;
+    this.data.item.productYield = productYield;
+    this.data.item.costPrice = costPrice;
+    this.data.item.salePrice = salePrice;
+    this.data.item.hasHappyHour = formValue.hasHappyHour ?? false;
+    this.data.item.isNotAvailable = formValue.isNotAvailable ?? false;
+    if (this.data.item.menuCategory === null || this.data.item.menuCategory === undefined) {
+      this.data.item.menuCategory = new MenuCategory();
+    }
+    this.data.item.menuCategory.id = formValue.menuCategory ?? '';
+    this.data.item.menuCategory.name = this.menuCategories.find((mc) => mc.id === formValue.menuCategory)?.name ?? '';
+    this.dialogRef.close(this.data.item);
+  }
+}