Chore: Upgraded to angular 15

Chore: Moved from angular/flex-layout to Tailwind
Chore: Upgrade completed

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

@@ -1,5 +1,5 @@
-<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
-  <mat-card class="flex-auto">
+<mat-card class="lg:max-w-[50%]">
+  <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Account</mat-card-title>
       <mat-icon
@@ -11,53 +11,53 @@
         {{ item.isStarred ? 'star' : 'star_border' }}
       </mat-icon>
     </mat-card-title-group>
-    <mat-card-content>
-      <form [formGroup]="form" class="flex flex-col">
-        <div class="flex flex-row justify-around content-start items-start">
-          <mat-form-field class="flex-auto">
-            <mat-label>Code</mat-label>
-            <input matInput placeholder="Code" formControlName="code" />
-          </mat-form-field>
-        </div>
-        <div class="flex flex-row justify-around content-start items-start">
-          <mat-form-field class="flex-auto">
-            <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
-          </mat-form-field>
-        </div>
-        <div class="flex flex-row justify-around content-start items-start">
-          <mat-form-field class="flex-auto">
-            <mat-label>Account Type</mat-label>
-            <mat-select placeholder="Account Type" formControlName="type">
-              <mat-option *ngFor="let at of accountTypes" [value]="at.id">
-                {{ at.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="flex flex-row justify-around content-start items-start">
-          <mat-checkbox formControlName="isActive" class="flex-auto mr-5">Is Active?</mat-checkbox>
-          <mat-checkbox formControlName="isReconcilable" class="flex-auto"
-            >Is Reconcilable?</mat-checkbox
-          >
-        </div>
-        <div class="flex flex-row justify-around content-start items-start">
-          <mat-form-field class="flex-auto">
-            <mat-label>Cost Centre</mat-label>
-            <mat-select placeholder="Cost Centre" formControlName="costCentre">
-              <mat-option *ngFor="let cs of costCentres" [value]="cs.id">
-                {{ cs.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="save()">Save</button>
-      <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
-        Delete
-      </button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+  </mat-card-header>
+  <mat-card-content>
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Code</mat-label>
+          <input matInput placeholder="Code" formControlName="code" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Name</mat-label>
+          <input matInput #nameElement placeholder="Name" formControlName="name" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Account Type</mat-label>
+          <mat-select placeholder="Account Type" formControlName="type">
+            <mat-option *ngFor="let at of accountTypes" [value]="at.id">
+              {{ at.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-checkbox formControlName="isActive" class="flex-auto mr-5">Is Active?</mat-checkbox>
+        <mat-checkbox formControlName="isReconcilable" class="flex-auto"
+          >Is Reconcilable?</mat-checkbox
+        >
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Cost Centre</mat-label>
+          <mat-select placeholder="Cost Centre" formControlName="costCentre">
+            <mat-option *ngFor="let cs of costCentres" [value]="cs.id">
+              {{ cs.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
+      Delete
+    </button>
+  </mat-card-actions>
+</mat-card>

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

@@ -1,11 +1,13 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Accounts</mat-card-title>
-    <a mat-button [routerLink]="['/accounts', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Accounts</mat-card-title>
+      <a mat-button [routerLink]="['/accounts', 'new']">
+        <mat-icon>add_box</mat-icon>
+        Add
+      </a>
+    </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">