Chore: Upgrade to Angular v18

Chore: Upgrade to Python 3.12
Chore: Upgrade to psycopg3

bookie/src/app/customers/customer-detail/customer-detail.component.html

@@ -30,18 +30,19 @@
         formArrayName="discounts"
         class="flex flex-row flex-wrap justify-around content-start items-start discounts gap-x-5"
       >
-        <div
-          *ngFor="let r of item.discounts; index as i"
-          [formGroupName]="i"
-          class="flex flex-row justify-around content-start items-start basis-[calc((100%_/_3)_-_(20px_*_2_/_3))]"
-        >
-          <mat-form-field class="flex-auto">
-            <mat-label>Discount on {{ r.name }}</mat-label>
-            <input matInput formControlName="discount" />
-            <span matSuffix>%</span>
-            <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
-          </mat-form-field>
-        </div>
+        @for (r of item.discounts; track r; let i = $index) {
+          <div
+            [formGroupName]="i"
+            class="flex flex-row justify-around content-start items-start basis-[calc((100%_/_3)_-_(20px_*_2_/_3))]"
+          >
+            <mat-form-field class="flex-auto">
+              <mat-label>Discount on {{ r.name }}</mat-label>
+              <input matInput formControlName="discount" />
+              <span matSuffix>%</span>
+              <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
+            </mat-form-field>
+          </div>
+        }
       </div>
     </form>
   </mat-card-content>