Product Detail is neater.

Recipe list fixed.

Recipe xlsx not working.

overlord/src/app/product/product-detail/product-detail.component.css

@@ -0,0 +1,11 @@
+.nutrition-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  align-items: stretch;
+  justify-items: stretch;
+}
+.nutrition-grid > * {
+  width: 100%;
+  box-sizing: border-box; /* helps with padding */
+}

overlord/src/app/product/product-detail/product-detail.component.html

@@ -47,7 +47,7 @@
   </div>
   @if (item.productGroup?.nutritional ?? false) {
     <h2>Nutritional Information</h2>
-    <div class="row-container">
+    <div class="nutrition-grid">
       <mat-form-field class="flex-auto">
         <mat-label>Protein</mat-label>
         <input matInput formControlName="protein" />
@@ -108,7 +108,7 @@
     </div>
   }
   <h2>Stock Keeping Units</h2>
-  <div formGroupName="addRow" class="row-container space-between">
+  <div formGroupName="addRow" class="nutrition-grid">
     <mat-form-field class="flex-auto">
       <mat-label>Units</mat-label>
       <input matInput formControlName="units" />
@@ -132,7 +132,7 @@
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
   </div>
 </form>
-<div class="row-container">
+<div class="row-container wrapped">
   <mat-table [dataSource]="dataSource" aria-label="Elements" class="flex-auto">
     <!-- Units Column -->
     <ng-container matColumnDef="units">

overlord/src/app/recipe/recipe-detail/recipe-detail.component.html

@@ -1,6 +1,6 @@
 <h2>Recipe Detail</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form [formGroup]="form" class="flex-col wrapped">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
@@ -83,9 +83,13 @@
     <!-- Quantity Column -->
     <ng-container matColumnDef="quantity">
       <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right"
-        >{{ row.quantity | number: '1.2-2' }} {{ row.product.fractionUnits }}</mat-cell
-      >
+      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+    </ng-container>
+
+    <!-- Units Column -->
+    <ng-container matColumnDef="units">
+      <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.product.fractionUnits }}</mat-cell>
     </ng-container>
 
     <!-- Action Column -->
@@ -101,18 +105,24 @@
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-form-field class="flex-auto">
-    <mat-label>Instructions</mat-label>
-    <textarea matInput matAutosizeMinRows="5" formControlName="instructions"></textarea>
-  </mat-form-field>
-  <mat-form-field class="flex-auto">
-    <mat-label>Garnishing</mat-label>
-    <textarea matInput matAutosizeMinRows="5" formControlName="garnishing"></textarea>
-  </mat-form-field>
-  <mat-form-field class="flex-auto">
-    <mat-label>Plating</mat-label>
-    <textarea matInput matAutosizeMinRows="5" formControlName="plating"></textarea>
-  </mat-form-field>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Instructions</mat-label>
+      <textarea matInput matAutosizeMinRows="5" formControlName="instructions"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Garnishing</mat-label>
+      <textarea matInput matAutosizeMinRows="5" formControlName="garnishing"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Plating</mat-label>
+      <textarea matInput matAutosizeMinRows="5" formControlName="plating"></textarea>
+    </mat-form-field>
+  </div>
 </form>
 
 <div class="row-container">

overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts

@@ -82,7 +82,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
   ingredients: Observable<ProductSku[]>;
   item: Recipe = new Recipe();
 
-  displayedColumns = ['product', 'quantity', 'action'];
+  displayedColumns = ['product', 'quantity', 'units', 'action'];
 
   constructor() {
     this.product = null;

overlord/src/app/recipe/recipe-list/recipe-list.component.html

@@ -1,6 +1,6 @@
 <h2 class="row-container space-between">
   <span>Recipes</span>
-  <a mat-icon-button [href]="'/api/recipes/xlsx?t=' + period.id">
+  <a mat-icon-button [href]="'/api/recipes/xlsx?p=' + period.id">
     <mat-icon>save_alt</mat-icon>
   </a>
   <a mat-icon-button href="/api/recipes/nutrition">
@@ -16,7 +16,7 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-select formControlName="period">
-        @for (p of periods; track p) {
+        @for (p of periods; track p.id) {
           <mat-option [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
         }
       </mat-select>
@@ -25,7 +25,7 @@
       <mat-label>Product Type</mat-label>
       <mat-select formControlName="productGroup" (selectionChange)="filterProductGroup($event.value)">
         <mat-option>-- All Products --</mat-option>
-        @for (mc of productGroups; track mc) {
+        @for (mc of productGroups; track mc.id) {
           <mat-option [value]="mc.id">
             {{ mc.name }}
           </mat-option>

overlord/src/app/recipe/recipe-list/recipe-list.component.ts

@@ -69,12 +69,13 @@ export class RecipeListComponent implements OnInit {
       period: new FormControl(new Period(), { nonNullable: true }),
       productGroup: new FormControl<ProductGroup | string | null>(null),
     });
-    // Listen to Payment Account Change
+    // Listen to Period Change
     this.form.controls.period.valueChanges.subscribe((x) => {
       this.router.navigate([], {
         relativeTo: this.route,
         queryParams: { p: x.id },
         replaceUrl: true,
+        queryParamsHandling: 'merge',
       });
       this.period = x;
     });

overlord/src/layout.scss

@@ -81,6 +81,13 @@
 .center {
   text-align: center;
 }
+.right {
+  display: flex;
+  justify-content: flex-end;
+}
+// .right {
+//   text-align: right;
+// }
 
 .warn {
   background-color: red;