feat: implement add product functionality; create add-product component with form validation and styling

client/src/app/components/dialog/generic-dialog/generic-dialog.component.html

@@ -1,8 +1,8 @@
 <form [formGroup]="form" (ngSubmit)="save()">
-  <h2 mat-dialog-title>{{ data?.title ?? 'Edit' }}</h2>
+  <h2 mat-dialog-title>{{ data.title ?? 'Edit' }}</h2>
 
   <mat-dialog-content>
-    @for (f of (fields ?? []); track $index) {
+    @for (f of fields; track $index) {
 
       @if (f.type === 'checkbox') {
         <mat-checkbox [formControlName]="f.key">
@@ -12,7 +12,7 @@
         <mat-form-field style="width:100%; margin-top:8px;">
           <mat-label>{{ f.label }}</mat-label>
 
-          <mat-select [formControlName]="f.key">
+          <mat-select [formControlName]="f.key" [compareWith]="getCompareFn(f)">
             @let opts = (f.options ?? (f.options$ | async) ?? []);
 
             @for (opt of opts; track $index) {