Removed all mr-5, mb-5 and basis tailwind classes.

Will soon remove tailwind totally.

barker/barker/db/session.py

@@ -8,5 +8,5 @@ from ..core.config import settings
 
 logging.basicConfig()
 logging.getLogger("sqlalchemy.engine").setLevel(settings.LOG_LEVEL)
-engine = create_engine(settings.SQLALCHEMY_DATABASE_URI, pool_pre_ping=True, future=True)  # type: ignore[arg-type]
+engine = create_engine(settings.SQLALCHEMY_DATABASE_URI, pool_pre_ping=True)
-SessionFuture = sessionmaker(autoflush=False, bind=engine, future=True)
+SessionFuture = sessionmaker(autoflush=False, bind=engine)

bookie/src/app/auth/login/login.component.html

@@ -4,13 +4,13 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Username</mat-label>
           <input matInput #nameElement formControlName="username" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Password</mat-label>
           <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />

bookie/src/app/beer-sale-report/beer-sale-report.component.html

@@ -9,8 +9,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -22,7 +22,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -34,13 +34,13 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-checkbox class="flex-auto mr-5" formControlName="regular">Regular</mat-checkbox>
+        <mat-checkbox class="flex-auto" formControlName="regular">Regular</mat-checkbox>
-        <mat-checkbox class="flex-auto mr-5" formControlName="happy">Happy Hour</mat-checkbox>
+        <mat-checkbox class="flex-auto" formControlName="happy">Happy Hour</mat-checkbox>
-        <mat-checkbox class="flex-auto mr-5" formControlName="staff">Staff Consumption</mat-checkbox>
+        <mat-checkbox class="flex-auto" formControlName="staff">Staff Consumption</mat-checkbox>
-        <mat-checkbox class="flex-auto mr-5" formControlName="nc">No Charge</mat-checkbox>
+        <mat-checkbox class="flex-auto" formControlName="nc">No Charge</mat-checkbox>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/bill-settlement-report/bill-settlement-report.component.html

@@ -9,8 +9,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -22,7 +22,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -34,7 +34,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/cashier-report/cashier-report.component.css

@@ -1,8 +0,0 @@
-.right {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}

bookie/src/app/cashier-report/cashier-report.component.html

@@ -13,8 +13,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -39,8 +39,8 @@
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-4/5 mr-5">
+        <mat-form-field class="flex-auto basis-4-5">
           <mat-label>Cashier</mat-label>
           <mat-select formControlName="cashier">
             <mat-option>-- Cashier --</mat-option>
@@ -51,7 +51,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/cashier-report/cashier-report.component.sass

@@ -0,0 +1,11 @@
+.right
+  display: flex
+  justify-content: flex-end
+
+.spacer
+  flex: 1 1 auto
+
+.row-container
+  display: flex
+  flex-direction: row
+  gap: 20px  // sets 20px space between all children

bookie/src/app/cashier-report/cashier-report.component.ts

@@ -23,7 +23,7 @@ import { CashierReportService } from './cashier-report.service';
 @Component({
   selector: 'app-cashier-report',
   templateUrl: './cashier-report.component.html',
-  styleUrls: ['./cashier-report.component.css'],
+  styleUrls: ['./cashier-report.component.sass'],
   imports: [
     CurrencyPipe,
     MatButtonModule,

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

@@ -4,50 +4,42 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <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">
+      <div class="flex flex-row">
         <mat-form-field class="flex-auto">
           <mat-label>Phone</mat-label>
           <input matInput formControlName="phone" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <mat-form-field class="flex-auto">
           <mat-label>Address</mat-label>
           <textarea matInput formControlName="address"> </textarea>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
       </div>
       <mat-divider></mat-divider>
-      <div
+      <div formArrayName="discounts" class="discount-grid">
-        formArrayName="discounts"
-        class="flex flex-row flex-wrap justify-around content-start items-start discounts gap-x-5"
-      >
         @for (r of item.discounts; track r; let i = $index) {
-          <div
+          <mat-form-field [formGroupName]="i">
-            [formGroupName]="i"
+            <mat-label>Discount on {{ r.name }}</mat-label>
-            class="flex flex-row justify-around content-start items-start basis-[calc((100%_/_3)_-_(20px_*_2_/_3))]"
+            <input matInput formControlName="discount" />
-          >
+            <span matSuffix>%</span>
-            <mat-form-field class="flex-auto">
+            <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
-              <mat-label>Discount on {{ r.name }}</mat-label>
+          </mat-form-field>
-              <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>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </mat-card-actions>
 </mat-card>

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

@@ -0,0 +1,10 @@
+.discount-grid
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  gap: 20px
+  align-items: stretch
+  justify-items: stretch
+
+.discount-grid > *
+  width: 100%
+  box-sizing: border-box // helps with padding

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

@@ -19,7 +19,7 @@ import { CustomerService } from '../customer.service';
 @Component({
   selector: 'app-customer-detail',
   templateUrl: './customer-detail.component.html',
-  styleUrls: ['./customer-detail.component.css'],
+  styleUrls: ['./customer-detail.component.sass'],
   imports: [
     MatButtonModule,
     MatCardModule,

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

@@ -10,7 +10,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <mat-form-field class="flex-auto">
           <mat-label>Filter</mat-label>
           <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />

bookie/src/app/devices/device-detail/device-detail.component.html

@@ -4,13 +4,13 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <mat-form-field class="flex-auto">
           <mat-label>Section</mat-label>
           <mat-select formControlName="section">
@@ -22,13 +22,13 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="flex flex-row">
         <mat-checkbox formControlName="enabled" class="flex-auto">Enabled?</mat-checkbox>
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/discount-report/discount-report.component.html

@@ -13,8 +13,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -26,7 +26,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -38,7 +38,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html

@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #name formControlName="name" />
@@ -13,7 +13,7 @@
           }
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Phone</mat-label>
           <input matInput #phone type="text" formControlName="phone" [matAutocomplete]="auto" autocomplete="off" />
@@ -29,44 +29,44 @@
           }
         </mat-autocomplete>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Pax</mat-label>
           <input matInput type="number" formControlName="pax" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Address</mat-label>
           <textarea matInput formControlName="address"></textarea>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Notes</mat-label>
           <textarea matInput formControlName="notes"></textarea>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto basis-1/2 mr-5">
+        <mat-form-field class="flex-auto basis-1-2">
           <mat-label>Date</mat-label>
           <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/4 mr-5">
+        <mat-form-field class="flex-auto basis-1-4">
           <mat-label>Hours</mat-label>
           <input matInput formControlName="hours" />
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/4">
+        <mat-form-field class="flex-auto basis-1-4">
           <mat-label>Minutes</mat-label>
           <input matInput formControlName="minutes" />
         </mat-form-field>
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html

@@ -14,7 +14,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Date</mat-label>
           <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />

bookie/src/app/header-footer/header-footer.component.html

@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Header / Footer</mat-label>
           <mat-select formControlName="id" (selectionChange)="show($event)">

bookie/src/app/home/home.component.html

@@ -1,169 +1,180 @@
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
+<div class="tables-grid">
+  <h2>Sales</h2>
   @if (auth.allowed('customers')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'guest-book']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'guest-book']">
       <h3>Guest Book</h3>
     </mat-card>
   }
   @if (auth.allowed('sales')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'sales']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'sales']">
       <h3>Sales</h3>
     </mat-card>
   }
   @if (auth.allowed('customers')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'customers']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'customers']">
       <h3>Customers</h3>
     </mat-card>
   }
-</div>
+  <h2>Reports</h2>
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
   @if (auth.allowed('cashier-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'cashier-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'cashier-report']">
       <h3>Cashier Report</h3>
     </mat-card>
   }
   @if (auth.allowed('sale-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'sale-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'sale-report']">
       <h3>Sale Report</h3>
     </mat-card>
   }
   @if (auth.allowed('tax-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'tax-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'tax-report']">
       <h3>Tax Report</h3>
     </mat-card>
   }
   @if (auth.allowed('product-sale-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'product-sale-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'product-sale-report']">
       <h3>Product Sale Report</h3>
     </mat-card>
   }
   @if (auth.allowed('bill-settlement-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'bill-settlement-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'bill-settlement-report']">
       <h3>Bill Settlement Report</h3>
     </mat-card>
   }
   @if (auth.allowed('beer-sale-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'beer-sale-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'beer-sale-report']">
       <h3>Beer Sale Report</h3>
     </mat-card>
   }
   @if (auth.allowed('discount-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'discount-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'discount-report']">
       <h3>Discount Report</h3>
     </mat-card>
   }
   @if (auth.allowed('product-sale-report')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'menu-engineering-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'menu-engineering-report']">
       <h3>Menu Engineering Report</h3>
     </mat-card>
   }
-</div>
+  @if (auth.allowed('products') || auth.allowed('temporal-products') || auth.allowed('modifiers')) {
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <h2>Products</h2>
+  }
   @if (auth.allowed('products')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'products']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'products']">
       <h3>Products</h3>
     </mat-card>
   }
   @if (auth.allowed('temporal-products')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'temporal-products']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'temporal-products']">
       <h3>Temporal Products</h3>
     </mat-card>
   }
   @if (auth.allowed('products')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'update-product-prices']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'update-product-prices']">
       <h3>Update Product Prices</h3>
     </mat-card>
   }
   @if (auth.allowed('products')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'product-updates-report']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'product-updates-report']">
       <h3>Product Updates Report</h3>
     </mat-card>
   }
   @if (auth.allowed('modifiers')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'modifiers']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'modifiers']">
       <h3>Modifiers</h3>
     </mat-card>
   }
   @if (auth.allowed('modifiers')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'modifier-categories']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'modifier-categories']">
       <h3>Modifier Categories</h3>
     </mat-card>
   }
-</div>
+  @if (
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    auth.allowed('sections') ||
+    auth.allowed('products') ||
+    auth.allowed('taxes') ||
+    auth.allowed('regimes') ||
+    auth.allowed('devices') ||
+    auth.allowed('section-printers') ||
+    auth.allowed('printers')
+  ) {
+    <h2>Masters</h2>
+  }
   @if (auth.allowed('sections')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'tables']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'tables']">
       <h3>Tables</h3>
     </mat-card>
   }
   @if (auth.allowed('sections')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'sections']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'sections']">
       <h3>Sections</h3>
     </mat-card>
   }
   @if (auth.allowed('products')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'menu-categories']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'menu-categories']">
       <h3>Menu Categories</h3>
     </mat-card>
   }
   @if (auth.allowed('products')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'sale-categories']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'sale-categories']">
       <h3>Sale Categories</h3>
     </mat-card>
   }
   @if (auth.allowed('taxes')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'taxes']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'taxes']">
       <h3>Taxes</h3>
     </mat-card>
   }
   @if (auth.allowed('regimes')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'regimes']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'regimes']">
       <h3>Regimes</h3>
     </mat-card>
   }
   @if (auth.allowed('devices')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'devices']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'devices']">
       <h3>Devices</h3>
     </mat-card>
   }
   @if (auth.allowed('section-printers')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'section-printers']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'section-printers']">
       <h3>Section Printers</h3>
     </mat-card>
   }
   @if (auth.allowed('printers')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'printers']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'printers']">
       <h3>Printers</h3>
     </mat-card>
   }
-</div>
+  @if (auth.allowed('users') || auth.allowed('authenticated') || auth.allowed('owner') || auth.allowed('settings')) {
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <h2>Users</h2>
+  }
   @if (auth.allowed('users')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'roles']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'roles']">
       <h3>Roles</h3>
     </mat-card>
   }
   @if (auth.allowed('users')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'users']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'users']">
       <h3>Users</h3>
     </mat-card>
   }
   @if (auth.allowed('authenticated')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'users', 'me']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'users', 'me']">
       <h3>Change Password</h3>
     </mat-card>
   }
   @if (auth.allowed('owner')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'header-footer']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'header-footer']">
       <h3>Header / Footer</h3>
     </mat-card>
   }
   @if (auth.allowed('owner')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'settle-options']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'settle-options']">
       <h3>Settle Options</h3>
     </mat-card>
   }
   @if (auth.allowed('settings')) {
-    <mat-card class="flex flex-col square-button mr-5, mb-5" matRipple [routerLink]="['/', 'settings']">
+    <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'settings']">
       <h3>Settings</h3>
     </mat-card>
   }

bookie/src/app/home/home.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/home/home.component.ts

@@ -8,7 +8,7 @@ import { AuthService } from '../auth/auth.service';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css'],
+  styleUrls: ['./home.component.sass'],
   imports: [MatCardModule, RouterLink],
 })
 export class HomeComponent {

bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html

@@ -4,19 +4,19 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <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">
+      <div class="row-container">
         <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/menu-engineering-report/menu-engineering-report.component.html

@@ -13,8 +13,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -26,7 +26,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -38,9 +38,9 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Filter</mat-label>
           <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html

@@ -4,14 +4,14 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <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">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Minimum</mat-label>
           <input matInput type="number" formControlName="minimum" />
         </mat-form-field>
@@ -20,7 +20,7 @@
           <input matInput type="number" formControlName="maximum" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
       </div>
       <mat-divider></mat-divider>
@@ -62,8 +62,8 @@
       </mat-tree>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </mat-card-actions>
 </mat-card>

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html

@@ -4,22 +4,22 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #name formControlName="name" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Price</mat-label>
           <input matInput type="number" formControlName="price" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Category</mat-label>
           <mat-select formControlName="modifierCategory">
@@ -31,13 +31,13 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/modifiers/modifier-list/modifier-list.component.html

@@ -10,7 +10,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Modifier Category</mat-label>
           <mat-select formControlName="modifierCategory" (selectionChange)="filterOn($event)">

bookie/src/app/printers/printer-detail/printer-detail.component.html

@@ -4,14 +4,14 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <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">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address" />
         </mat-form-field>
@@ -22,8 +22,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/product-sale-report/product-sale-report.component.html

@@ -13,8 +13,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-1/3 mr-5">
+        <mat-form-field class="flex-auto basis-1-3">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -26,7 +26,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/3 mr-5">
+        <mat-form-field class="flex-auto basis-1-3">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -38,7 +38,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/6 mr-5">
+        <mat-form-field class="flex-auto basis-1-6">
           <mat-label>Section</mat-label>
           <mat-select formControlName="section" name="section">
             <mat-option>-- All --</mat-option>
@@ -49,7 +49,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/6" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/product-updates-report/product-updates-report.component.html

@@ -9,8 +9,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -22,7 +22,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -34,7 +34,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/product/product-detail/product-detail.component.html

@@ -4,18 +4,18 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto basis-3/4 mr-5">
+        <mat-form-field class="flex-auto basis-3-4">
           <mat-label>Name</mat-label>
           <input matInput #name formControlName="name" />
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/4">
+        <mat-form-field class="flex-auto basis-1-4">
           <mat-label>Units</mat-label>
           <input matInput formControlName="units" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Price</mat-label>
           <input matInput type="number" formControlName="price" />
         </mat-form-field>
@@ -24,12 +24,12 @@
           <input matInput type="number" formControlName="quantity" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
         <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Menu Category</mat-label>
           <mat-select formControlName="menuCategory">
             @for (mc of menuCategories; track mc) {
@@ -52,8 +52,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/product/product-list/product-list.component.html

@@ -21,8 +21,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Filter</mat-label>
           <input type="text" matInput formControlName="filter" autocomplete="off" />
         </mat-form-field>

bookie/src/app/regimes/regime-detail/regime-detail.component.html

@@ -4,19 +4,19 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Header</mat-label>
           <textarea matInput formControlName="header"></textarea>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Prefix</mat-label>
           <input matInput formControlName="prefix" />
@@ -24,8 +24,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/roles/role-detail/role-detail.component.html

@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #nameElement formControlName="name" />
@@ -13,15 +13,15 @@
       <mat-divider></mat-divider>
       <div formArrayName="permissions">
         @for (p of item.permissions; track p; let i = $index) {
-          <div class="flex flex-row justify-around content-start items-start" [formGroupName]="i">
+          <div class="row-container" [formGroupName]="i">
             <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
           </div>
         }
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </mat-card-actions>
 </mat-card>

bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html

@@ -4,20 +4,20 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <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">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Discount Limit</mat-label>
           <input matInput type="number" formControlName="discountLimit" class="right-align" />
           <span matSuffix>%</span>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Tax</mat-label>
           <mat-select formControlName="tax">
@@ -31,8 +31,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/sale-report/sale-report.component.html

@@ -13,8 +13,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-1/3 mr-5">
+        <mat-form-field class="flex-auto basis-1-3">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -26,7 +26,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/3 mr-5">
+        <mat-form-field class="flex-auto basis-1-3">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -38,7 +38,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/6 mr-5">
+        <mat-form-field class="flex-auto basis-1-6">
           <mat-label>Section</mat-label>
           <mat-select formControlName="section" name="section">
             <mat-option>-- All --</mat-option>
@@ -49,7 +49,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/6" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/sales/bill-number/bill-number.component.html

@@ -1,7 +1,7 @@
 <mat-dialog-content>
   <form [formGroup]="form">
-    <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+    <div class="row-container sm:max-lg:flex-col">
-      <mat-form-field class="flex-auto basis-[15%] mr-5">
+      <mat-form-field class="flex-auto basis-15">
         <mat-label>Regime</mat-label>
         <mat-select formControlName="regime">
           @for (r of regimes; track r) {

bookie/src/app/sales/bill-type/bill-type.component.html

@@ -1,8 +1,8 @@
 <h2 mat-dialog-title>Bill Type</h2>
 <mat-dialog-content>
-  <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+  <div class="tables-grid">
     <mat-card
-      class="flex flex-col square-button mr-5, mb-5"
+      class="flex flex-col square-button"
       matRipple
       (click)="select('REGULAR_BILL')"
       [class.strong-primary]="selected === 'REGULAR_BILL'"
@@ -11,7 +11,7 @@
       <h3>Regular</h3>
     </mat-card>
     <mat-card
-      class="flex flex-col square-button mr-5, mb-5"
+      class="flex flex-col square-button"
       matRipple
       (click)="select('STAFF')"
       [class.strong-primary]="selected === 'STAFF'"
@@ -20,7 +20,7 @@
       <h3>Staff</h3>
     </mat-card>
     <mat-card
-      class="flex flex-col square-button mr-5, mb-5"
+      class="flex flex-col square-button"
       matRipple
       (click)="select('NO_CHARGE')"
       [class.strong-primary]="selected === 'NO_CHARGE'"

bookie/src/app/sales/bill-type/bill-type.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: flex
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/bill-type/bill-type.component.ts

@@ -10,7 +10,7 @@ import { VoucherType } from '../bills/voucher-type';
 @Component({
   selector: 'app-bill-type',
   templateUrl: './bill-type.component.html',
-  styleUrls: ['./bill-type.component.css'],
+  styleUrls: ['./bill-type.component.sass'],
   imports: [CdkScrollableModule, MatButtonModule, MatCardModule, MatDialogModule, MatRippleModule],
 })
 export class BillTypeComponent {

bookie/src/app/sales/choose-customer/choose-customer.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Customer</h2>
 <mat-dialog-content>
   <form [formGroup]="form" class="flex flex-col">
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Phone</mat-label>
         <input
@@ -24,25 +24,25 @@
         }
       </mat-autocomplete>
     </div>
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Name</mat-label>
         <input matInput formControlName="name" />
       </mat-form-field>
     </div>
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Address</mat-label>
         <textarea matInput formControlName="address"> </textarea>
       </mat-form-field>
     </div>
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
     </div>
     <p></p>
     <div formArrayName="discounts" class="discounts">
       @for (r of item.discounts; track r; let i = $index) {
-        <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+        <div [formGroupName]="i" class="row-container">
           <mat-form-field class="flex-auto">
             <mat-label>Discount on {{ r.name }}</mat-label>
             <input matInput formControlName="discount" />

bookie/src/app/sales/home/sales-home.component.html

@@ -1,76 +1,80 @@
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
+<mat-card>
-  <mat-card
+  <mat-card-content>
-    class="primary flex flex-col square-button mr-5, mb-5"
+    <div class="tables-grid">
-    matRipple
+      <mat-card
-    [routerLink]="['menu-categories']"
+        class="primary flex flex-col square-button"
-    queryParamsHandling="preserve"
+        matRipple
-  >
+        [routerLink]="['menu-categories']"
-    <h3>Add Product</h3>
+        queryParamsHandling="preserve"
-  </mat-card>
+      >
-  <mat-card
+        <h3>Add Product</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="discount()"
+        class="flex flex-col square-button"
-    [class.disabled]="!discountAllowed()"
+        matRipple
-    [class.primary]="discountAllowed()"
+        (click)="discount()"
-  >
+        [class.disabled]="!discountAllowed()"
-    <h3>Discount</h3>
+        [class.primary]="discountAllowed()"
-  </mat-card>
+      >
-  <mat-card
+        <h3>Discount</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="printKot()"
+        class="flex flex-col square-button"
-    [class.disabled]="!printKotAllowed()"
+        matRipple
-    [class.primary]="printKotAllowed()"
+        (click)="printKot()"
-  >
+        [class.disabled]="!printKotAllowed()"
-    <h3>Print KOT</h3>
+        [class.primary]="printKotAllowed()"
-  </mat-card>
+      >
-  <mat-card
+        <h3>Print KOT</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="printBill()"
+        class="flex flex-col square-button"
-    [class.disabled]="!printBillAllowed()"
+        matRipple
-    [class.primary]="printBillAllowed()"
+        (click)="printBill()"
-  >
+        [class.disabled]="!printBillAllowed()"
-    <h3>Print Bill</h3>
+        [class.primary]="printBillAllowed()"
-  </mat-card>
+      >
-  <mat-card class="flex flex-col square-button mr-5, mb-5 warn" matRipple [routerLink]="['/', 'sales', 'tables']">
+        <h3>Print Bill</h3>
-    <h3>Back to Tables</h3>
+      </mat-card>
-  </mat-card>
+      <mat-card class="flex flex-col square-button warn" matRipple [routerLink]="['/', 'sales', 'tables']">
-  <mat-card
+        <h3>Back to Tables</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="receivePayment()"
+        class="flex flex-col square-button"
-    [class.disabled]="!receivePaymentAllowed()"
+        matRipple
-    [class.primary]="receivePaymentAllowed()"
+        (click)="receivePayment()"
-  >
+        [class.disabled]="!receivePaymentAllowed()"
-    <h3>Receive Payment</h3>
+        [class.primary]="receivePaymentAllowed()"
-  </mat-card>
+      >
-  <mat-card
+        <h3>Receive Payment</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="moveTable()"
+        class="flex flex-col square-button"
-    [class.disabled]="!moveTableAllowed()"
+        matRipple
-    [class.primary]="moveTableAllowed()"
+        (click)="moveTable()"
-  >
+        [class.disabled]="!moveTableAllowed()"
-    <h3>Move Table</h3>
+        [class.primary]="moveTableAllowed()"
-  </mat-card>
+      >
-  <mat-card
+        <h3>Move Table</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="cancelBill()"
+        class="flex flex-col square-button"
-    [class.disabled]="!cancelBillAllowed()"
+        matRipple
-    [class.primary]="cancelBillAllowed()"
+        (click)="cancelBill()"
-  >
+        [class.disabled]="!cancelBillAllowed()"
-    <h3>Cancel Bill</h3>
+        [class.primary]="cancelBillAllowed()"
-  </mat-card>
+      >
-  <mat-card
+        <h3>Cancel Bill</h3>
-    class="flex flex-col square-button mr-5, mb-5"
+      </mat-card>
-    matRipple
+      <mat-card
-    (click)="splitBill()"
+        class="flex flex-col square-button"
-    [class.disabled]="!splitBillAllowed()"
+        matRipple
-    [class.primary]="splitBillAllowed()"
+        (click)="splitBill()"
-  >
+        [class.disabled]="!splitBillAllowed()"
-    <h3>Split Bill</h3>
+        [class.primary]="splitBillAllowed()"
-  </mat-card>
+      >
-</div>
+        <h3>Split Bill</h3>
+      </mat-card>
+    </div>
+  </mat-card-content>
+</mat-card>

bookie/src/app/sales/home/sales-home.component.sass

@@ -0,0 +1,9 @@
+.tables-grid
+  margin-top: 10px
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/home/sales-home.component.ts

@@ -27,7 +27,7 @@ import { TablesDialogComponent } from '../tables-dialog/tables-dialog.component'
 @Component({
   selector: 'app-sales-home',
   templateUrl: './sales-home.component.html',
-  styleUrls: ['./sales-home.component.css'],
+  styleUrls: ['./sales-home.component.sass'],
   imports: [MatCardModule, MatRippleModule, RouterLink],
 })
 export class SalesHomeComponent {

bookie/src/app/sales/menu-categories/menu-categories.component.html

@@ -1,8 +1,8 @@
 <mat-card>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 warn"
+        class="flex flex-col square-button warn"
         matRipple
         [routerLink]="['../']"
         queryParamsHandling="preserve"
@@ -11,7 +11,7 @@
       </mat-card>
       @for (item of list; track item) {
         <mat-card
-          class="primary flex flex-col square-button mr-5, mb-5"
+          class="primary flex flex-col square-button"
           matRipple
           [routerLink]="['../products', item.id]"
           queryParamsHandling="preserve"

bookie/src/app/sales/menu-categories/menu-categories.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/modifiers/modifiers.component.html

@@ -13,10 +13,10 @@
             }
           </mat-chip-listbox>
         </ng-template>
-        <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+        <div class="tables-grid">
           @for (m of item.modifiers; track m.id) {
             <mat-card
-              class="flex flex-col square-button mr-5, mb-5"
+              class="flex flex-col square-button"
               matRipple
               (click)="select(m)"
               [class.primary]="selectedIds.indexOf(m.id) === -1"

bookie/src/app/sales/modifiers/modifiers.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/modifiers/modifiers.component.ts

@@ -16,7 +16,7 @@ import { ModifierCategory } from '../../core/modifier-category';
 @Component({
   selector: 'app-modifiers',
   templateUrl: './modifiers.component.html',
-  styleUrls: ['./modifiers.component.css'],
+  styleUrls: ['./modifiers.component.sass'],
   imports: [
     AsyncPipe,
     CdkScrollable,

bookie/src/app/sales/pax/pax.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Pax</h2>
 <mat-dialog-content>
   <form [formGroup]="form">
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Pax</mat-label>
         <input

bookie/src/app/sales/products/products.component.html

@@ -1,8 +1,8 @@
 <mat-card>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 warn"
+        class="flex flex-col square-button warn"
         matRipple
         [routerLink]="['../../menu-categories']"
         queryParamsHandling="preserve"
@@ -11,7 +11,7 @@
       </mat-card>
       @for (item of list; track item) {
         <mat-card
-          class="flex flex-col square-button mr-5, mb-5"
+          class="flex flex-col square-button"
           matRipple
           (click)="addProduct(item)"
           [class.accent]="item.hasHappyHour"

bookie/src/app/sales/products/products.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/products/products.component.ts

@@ -10,7 +10,7 @@ import { BillService } from '../bill.service';
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
-  styleUrls: ['./products.component.css'],
+  styleUrls: ['./products.component.sass'],
   imports: [CurrencyPipe, MatCardModule, MatRippleModule, RouterLink],
 })
 export class ProductsComponent implements OnInit {

bookie/src/app/sales/quantity/quantity.component.html

@@ -1,6 +1,6 @@
 <mat-dialog-content>
   <form [formGroup]="form">
-    <div class="flex flex-row justify-around content-start items-start">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Quantity</mat-label>
         <input

bookie/src/app/sales/running-tables/running-tables.component.html

@@ -3,10 +3,10 @@
     <mat-card-title>Running Tables</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       @for (table of list; track table) {
         <mat-card
-          class="flex flex-col square-button mr-5, mb-5"
+          class="flex flex-col square-button"
           matRipple
           (click)="navigateToBill(table)"
           [class.primary]="table.status !== 'running' && table.status !== 'printed'"
@@ -24,7 +24,7 @@
           }
         </mat-card>
       }
-      <mat-card class="flex flex-col square-button mr-5, mb-5 strong-primary" matRipple (click)="openBill()">
+      <mat-card class="flex flex-col square-button strong-primary" matRipple (click)="openBill()">
         <h3>Open Bill</h3>
       </mat-card>
     </div>

bookie/src/app/sales/running-tables/running-tables.component.sass

@@ -0,0 +1,4 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px

bookie/src/app/sales/split-bill/split-bill.component.html

@@ -3,7 +3,7 @@
   <form [formGroup]="form" class="flex flex-col">
     <div formArrayName="saleCategories">
       @for (sc of list; track sc; let i = $index) {
-        <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+        <div [formGroupName]="i" class="row-container">
           <mat-checkbox formControlName="saleCategory" class="flex-auto">{{ sc.name }}</mat-checkbox>
         </div>
       }

bookie/src/app/sales/tables-dialog/tables-dialog.component.html

@@ -1,9 +1,9 @@
 <h2 mat-dialog-title>Tables</h2>
 <mat-dialog-content>
-  <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+  <div class="tables-grid">
     @for (table of list; track table) {
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5"
+        class="flex flex-col square-button"
         matRipple
         (click)="select(table)"
         [class.primary]="table.status === 'running'"

bookie/src/app/sales/tables-dialog/tables-dialog.component.sass

@@ -0,0 +1,9 @@
+.tables-grid
+  display: flex
+  flex-wrap: wrap
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/section-printers/section-printer.component.html

@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Section</mat-label>
           <mat-select formControlName="section" (selectionChange)="show($event)">
@@ -60,8 +60,8 @@
       </mat-table>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (sectionId) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/sections/section-detail/section-detail.component.html

@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
@@ -12,8 +12,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/settings/settings.component.html

@@ -12,7 +12,7 @@
     <mat-card>
       <mat-card-content>
         <form [formGroup]="maintenanceForm" class="flex flex-col">
-          <div class="flex flex-row justify-around content-start items-start">
+          <div class="row-container">
             <mat-form-field class="flex-auto">
               <mat-label>Start Date</mat-label>
               <input

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

@@ -4,14 +4,14 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <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">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Voucher Type</mat-label>
           <mat-select formControlName="voucherType">
             @for (vt of voucherTypes; track vt) {
@@ -21,7 +21,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Reporting Level</mat-label>
           <mat-select formControlName="reportingLevel">
             @for (rl of reportingLevel; track rl) {
@@ -35,8 +35,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/tables/table-detail/table-detail.component.html

@@ -4,19 +4,19 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Seats</mat-label>
           <input matInput type="number" formControlName="seats" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Section</mat-label>
           <mat-select formControlName="section">
@@ -28,13 +28,13 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button (click)="save()" class="mr-5" color="primary">Save</button>
+    <button mat-raised-button (click)="save()" class="" color="primary">Save</button>
     @if (!!item.id) {
       <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/tax-report/tax-report.component.html

@@ -9,8 +9,8 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Start Date</mat-label>
           <input
             matInput
@@ -22,7 +22,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Finish Date</mat-label>
           <input
             matInput
@@ -34,7 +34,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

bookie/src/app/taxes/tax-detail/tax-detail.component.html

@@ -4,21 +4,21 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
           <mat-hint> Format for GST: ST GST &#64; x% (1/2) ; CGST &#64; x% (1/2) </mat-hint>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Rate</mat-label>
           <input matInput type="number" formControlName="rate" class="right-align" />
           <span matSuffix>%</span>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Regime</mat-label>
           <mat-select formControlName="regime">
@@ -32,8 +32,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
     @if (!!item.id) {
       <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
     }

bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html

@@ -4,24 +4,24 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Product ID</mat-label>
           <input matInput formControlName="id" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto basis-3/4 mr-5">
+        <mat-form-field class="flex-auto basis-3-4">
           <mat-label>Name</mat-label>
           <input matInput #name formControlName="name" />
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/4">
+        <mat-form-field class="flex-auto basis-1-4">
           <mat-label>Units</mat-label>
           <input matInput formControlName="units" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Price</mat-label>
           <input matInput type="number" formControlName="price" />
         </mat-form-field>
@@ -30,12 +30,12 @@
           <input matInput type="number" formControlName="quantity" />
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
         <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto mr-5">
+        <mat-form-field class="flex-auto">
           <mat-label>Menu Category</mat-label>
           <mat-select formControlName="menuCategory">
             @for (mc of menuCategories; track mc) {
@@ -56,14 +56,14 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
-        <mat-form-field class="flex-auto basis-1/2 mr-5">
+        <mat-form-field class="flex-auto basis-1-2">
           <mat-label>Valid From</mat-label>
           <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
           <mat-datepicker #validFrom></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/2">
+        <mat-form-field class="flex-auto basis-1-2">
           <mat-label>Valid Till</mat-label>
           <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
@@ -72,8 +72,8 @@
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="update()">Update</button>
+    <button mat-raised-button color="primary" class="" (click)="update()">Update</button>
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </mat-card-actions>
 </mat-card>

bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html

@@ -4,12 +4,12 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Filter</mat-label>
           <input type="text" matInput formControlName="filter" autocomplete="off" />
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-3/10 mr-5">
+        <mat-form-field class="flex-auto basis-30">
           <mat-label>Menu Category</mat-label>
           <mat-select formControlName="menuCategory" (selectionChange)="filterMcOn($event.value)">
             <mat-option>-- All Products --</mat-option>
@@ -20,7 +20,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-3/10">
+        <mat-form-field class="flex-auto basis-30">
           <mat-label>Sale Category</mat-label>
           <mat-select formControlName="saleCategory" (selectionChange)="filterScOn($event.value)">
             <mat-option>-- All Products --</mat-option>

bookie/src/app/update-product-prices/update-product-prices.component.html

@@ -9,14 +9,14 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Date</mat-label>
           <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2/5 mr-5">
+        <mat-form-field class="flex-auto basis-2-5">
           <mat-label>Menu Category</mat-label>
           <mat-select formControlName="menuCategory">
             @for (s of menuCategories; track s) {
@@ -26,7 +26,7 @@
             }
           </mat-select>
         </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
+        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
       </div>
       <mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="prices">
         <!-- Name Column -->

bookie/src/app/users/user-detail/user-detail.component.html

@@ -4,34 +4,34 @@
   </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <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">
+      <div class="row-container">
         <mat-form-field class="flex-auto">
           <mat-label>Password</mat-label>
           <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
           <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
         </mat-form-field>
       </div>
-      <div class="flex flex-row justify-around content-start items-start">
+      <div class="row-container">
         <mat-checkbox formControlName="lockedOut">Is Locked Out?</mat-checkbox>
       </div>
       <mat-divider></mat-divider>
       <div formArrayName="roles">
         @for (r of item.roles; track r; let i = $index) {
-          <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+          <div [formGroupName]="i" class="row-container">
             <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
           </div>
         }
       </div>
     </form>
   </mat-card-content>
-  <mat-card-actions>
+  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </mat-card-actions>
 </mat-card>

bookie/src/styles.sass

@@ -15,6 +15,40 @@ a
   color: rgb(0, 0, 238)
   text-decoration: underline
 
+.basis-15
+  flex-basis: 15%
+
+.basis-1-6
+  flex-basis: 16.67%
+
+.basis-1-5
+  flex-basis: 20%
+
+.basis-1-4
+  flex-basis: 25%
+
+.basis-30
+  flex-basis: 30%
+
+.basis-1-3
+  flex-basis: 33.33%
+
+.basis-2-5
+  flex-basis: 40%
+
+.basis-1-2
+  flex-basis: 50%
+
+.basis-3-4
+  flex-basis: 75%
+
+.basis-4-5
+  flex-basis: 80%
+
+.row-container
+  display: flex
+  flex-direction: row
+  gap: 20px  // sets 20px space between all children
 
 $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500)
 $my-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400)
@@ -28,7 +62,7 @@ $my-disabled: mat.m2-define-palette(mat.$m2-grey-palette, 500)
   min-height: 150px
   max-height: 150px
   cursor: pointer
-  margin: 20px
+  // margin: 20px
   h3
     text-align: center
     padding: 0.5rem

version_bump.sh

@@ -21,8 +21,4 @@ then
 else
   echo "No version bump"
 fi
-git push
-git tag --delete latest
-git tag latest
-git push --delete origin latest
 git push --tags