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/sales/running-tables/running-tables.component.html

@@ -1,30 +1,34 @@
 <mat-card>
-  <mat-card-title-group>
+  <mat-card-header>
     <mat-card-title>Running Tables</mat-card-title>
-  </mat-card-title-group>
-  <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
-    <mat-divider></mat-divider>
-    <mat-card
-      fxLayout="column"
-      class="square-button"
-      matRipple
-      *ngFor="let table of list"
-      (click)="navigateToBill(table)"
-      [class.running]="table.status === 'running'"
-      [class.printed]="table.status === 'printed'"
-    >
-      <h3 class="item-name">{{ table.name }}</h3>
-      <mat-card-subtitle class="center" [class.bold]="table.bold">{{
-        table.guest
-      }}</mat-card-subtitle>
-      <span class="center"
-        >{{ table.pax || '-' }} / {{ table.seats }} / {{ table.section?.name }}</span
+  </mat-card-header>
+  <mat-card-content>
+    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+      <mat-card
+        class="flex flex-col square-button mr-5, mb-5"
+        matRipple
+        *ngFor="let table of list"
+        (click)="navigateToBill(table)"
+        [class.running]="table.status === 'running'"
+        [class.printed]="table.status === 'printed'"
       >
-      <span class="center" *ngIf="table.date">{{ table.date }}</span>
-      <span class="center" *ngIf="table.amount">{{ table.amount | currency: 'INR' }}</span>
-    </mat-card>
-    <mat-card fxLayout="column" class="square-button open-bill" matRipple (click)="openBill()">
-      <h3 class="item-name">Open Bill</h3>
-    </mat-card>
+        <h3 class="item-name">{{ table.name }}</h3>
+        <mat-card-subtitle class="center" [class.bold]="table.bold">{{
+          table.guest
+        }}</mat-card-subtitle>
+        <span class="center"
+          >{{ table.pax || '-' }} / {{ table.seats }} / {{ table.section?.name }}</span
+        >
+        <span class="center" *ngIf="table.date">{{ table.date }}</span>
+        <span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
+      </mat-card>
+      <mat-card
+        class="flex flex-col square-button mr-5, mb-5 open-bill"
+        matRipple
+        (click)="openBill()"
+      >
+        <h3 class="item-name">Open Bill</h3>
+      </mat-card>
+    </div>
   </mat-card-content>
 </mat-card>