Chore:

Moved to sqlalchemy 2.0
Added type checking as much as possible
Updated angular to 15
Moved from Angular flex layout to tailwind css

Started developing on vscode with devcontainers

bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.css

@@ -1,3 +0,0 @@
-.example-card {
-  max-width: 400px;
-}

bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html

@@ -1,54 +1,40 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Settle Option</mat-card-title>
-    </mat-card-title-group>
-    <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
-          </mat-form-field>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Voucher Type</mat-label>
-            <mat-select placeholder="Voucher Type" formControlName="voucherType">
-              <mat-option *ngFor="let vt of voucherTypes" [value]="vt.id">
-                {{ vt.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>Reporting Level</mat-label>
-            <mat-select placeholder="Reporting Level" formControlName="reportingLevel">
-              <mat-option *ngFor="let rl of reportingLevel" [value]="rl.id">
-                {{ rl.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-checkbox formControlName="hasReason">Has Reason?</mat-checkbox>
-        </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 class="flex-auto lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Settle Option</mat-card-title>
+  </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>Name</mat-label>
+          <input matInput #nameElement formControlName="name" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Voucher Type</mat-label>
+          <mat-select formControlName="voucherType">
+            <mat-option *ngFor="let vt of voucherTypes" [value]="vt.id">
+              {{ vt.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Reporting Level</mat-label>
+          <mat-select formControlName="reportingLevel">
+            <mat-option *ngFor="let rl of reportingLevel" [value]="rl.id">
+              {{ rl.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-checkbox formControlName="hasReason">Has Reason?</mat-checkbox>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
+      Delete
+    </button>
+  </mat-card-actions>
+</mat-card>

bookie/src/app/settle-option/settle-option-list/settle-option-list.component.html

@@ -1,11 +1,13 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Settle Options</mat-card-title>
-    <a mat-button [routerLink]="['/settle-options', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Settle Options</mat-card-title>
+      <a mat-button [routerLink]="['/settle-options', 'new']">
+        <mat-icon>add_box</mat-icon>
+        Add
+      </a>
+    </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">
       <!-- Name Column -->

bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts

@@ -37,20 +37,9 @@ export class SettleOptionListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.route.data
-      .pipe(
-        map((x) => {
-          const data = (x as { list: SettleOption[] }).list;
-          return data.map((y) => {
-            y.voucherType = y.voucherType;
-            y.reportingLevel = y.reportingLevel;
-            return y;
-          });
-        }),
-      )
-      .subscribe((list) => {
-        this.data.next(list);
-      });
+    this.route.data.pipe(map((x) => (x as { list: SettleOption[] }).list)).subscribe((list) => {
+      this.data.next(list);
+    });
 
     this.route.data.subscribe((value) => {
       const data = value as { list: SettleOption[] };

bookie/src/app/settle-option/settle-options-routing.module.ts

@@ -3,11 +3,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AuthGuard } from '../auth/auth-guard.service';
-import { TaxListResolver } from '../taxes/tax-list-resolver.service';
 
 import { SettleOptionDetailComponent } from './settle-option-detail/settle-option-detail.component';
-import { SettleOptionListResolver } from './settle-option-list-resolver.service';
 import { SettleOptionListComponent } from './settle-option-list/settle-option-list.component';
+import { SettleOptionListResolver } from './settle-option-list-resolver.service';
 import { SettleOptionResolver } from './settle-option-resolver.service';
 
 const settleOptionsRoutes: Routes = [

bookie/src/app/settle-option/settle-options.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -19,7 +18,6 @@ import { SettleOptionsRoutingModule } from './settle-options-routing.module';
 @NgModule({
   imports: [
     CommonModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,