From efa2af396d557baee82ad0d20c0fd6f9ef199337 Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Mon, 13 Mar 2023 23:52:44 +0530
Subject: [PATCH] Chore: Moved from css to sass, god knows what to do now.
 Chore: Prettier line length changed to 120 from 100 Fix: Hard coded the face
 as the primary color to make the buttons stand out

---
 bookie/.eslintrc.json                         |  3 +-
 bookie/.prettierrc.js                         |  2 +-
 bookie/angular.json                           |  7 +-
 bookie/package.json                           |  1 +
 bookie/src/app/app-routing.module.ts          | 52 ++++----------
 bookie/src/app/auth/auth-guard.service.ts     |  6 +-
 .../src/app/auth/login/login.component.html   | 11 +--
 .../beer-sale-report.component.html           |  8 +--
 .../beer-sale-report.module.ts                |  7 +-
 ...settlement-report-resolver.service.spec.ts |  9 +--
 .../bill-settlement-report.component.html     |  4 +-
 .../bill-settlement-report.component.ts       |  4 +-
 .../bill-settlement-report.module.ts          |  7 +-
 .../bill-settlement-report.service.spec.ts    |  9 +--
 .../bill-settlement-report.service.ts         |  4 +-
 .../cashier-report.component.html             |  4 +-
 .../cashier-report.component.ts               | 18 +++--
 .../cashier-report/cashier-report.module.ts   |  7 +-
 .../cashier-report/cashier-report.service.ts  |  6 +-
 bookie/src/app/core/core.module.ts            |  9 +--
 bookie/src/app/customers/customer.service.ts  |  4 +-
 .../device-detail.component.html              |  4 +-
 .../discount-report.component.html            |  4 +-
 .../discount-report/discount-report.module.ts |  7 +-
 .../guest-book-detail.component.html          | 13 +---
 .../guest-book-detail.component.ts            |  4 +-
 .../guest-book-list.component.html            | 15 +---
 .../guest-book-list.component.ts              | 12 ++--
 .../src/app/guest-book/guest-book.module.ts   |  7 +-
 .../header-footer/header-footer.service.ts    |  6 +-
 .../menu-category-detail.component.html       | 18 +----
 ...enu-category-list-resolver.service.spec.ts |  9 +--
 .../menu-category-list.component.html         |  6 +-
 .../menu-category/menu-category.service.ts    |  8 +--
 .../modifier-category-detail.component.ts     | 20 +++---
 ...ier-category-list-resolver.service.spec.ts |  9 +--
 ...modifier-category-resolver.service.spec.ts |  9 +--
 .../modifier-category.service.ts              | 20 ++----
 .../modifier-detail.component.html            |  4 +-
 .../modifier-list/modifier-list-datasource.ts |  9 +--
 bookie/src/app/nav-bar/nav-bar.component.html |  6 +-
 .../printer-detail.component.html             |  4 +-
 ...oduct-sale-report-resolver.service.spec.ts |  9 +--
 .../product-sale-report.component.html        | 12 +---
 .../product-sale-report.module.ts             |  7 +-
 .../product-sale-report.service.spec.ts       |  9 +--
 ...ct-updates-report-resolver.service.spec.ts |  9 +--
 .../product-updates-report.component.html     |  4 +-
 .../product-updates-report.module.ts          |  7 +-
 .../product-updates-report.service.spec.ts    |  9 +--
 .../product-updates-report.service.ts         |  4 +-
 .../product-detail.component.html             |  4 +-
 .../product-list/product-list.component.html  | 10 +--
 .../product-list/product-list.component.ts    | 26 ++-----
 bookie/src/app/product/product.service.ts     | 12 +---
 .../regime-detail.component.html              | 18 +----
 .../sale-category-detail.component.html       |  4 +-
 ...ale-category-list-resolver.service.spec.ts |  9 +--
 .../sale-category-list.component.html         |  4 +-
 .../sale-category/sale-category.service.ts    |  4 +-
 .../sale-report/sale-report.component.html    |  4 +-
 .../src/app/sale-report/sale-report.module.ts |  7 +-
 .../sales/bill-type/bill-type.component.css   |  8 +++
 .../sales/bill-type/bill-type.component.html  |  3 +
 bookie/src/app/sales/bill.service.ts          | 49 +++----------
 .../src/app/sales/bills/bills.component.html  | 72 ++++---------------
 bookie/src/app/sales/bills/bills.component.ts |  3 +-
 bookie/src/app/sales/bills/voucher.service.ts | 25 ++-----
 .../choose-customer.component.html            |  2 +-
 .../customer-discounts.service.spec.ts        |  9 +--
 .../discount/customer-discounts.service.ts    |  4 +-
 .../sales/discount/discount.component.html    | 11 +--
 .../app/sales/home/sales-home.component.css   |  5 ++
 .../app/sales/home/sales-home.component.html  | 15 ++--
 .../app/sales/home/sales-home.component.ts    | 26 +++----
 .../menu-categories.component.css             |  5 ++
 .../menu-categories.component.html            |  2 +-
 .../sales/modifiers/modifiers.component.html  |  4 +-
 bookie/src/app/sales/pax/pax.component.html   |  1 +
 bookie/src/app/sales/pax/pax.component.ts     |  5 +-
 .../app/sales/products/products.component.css |  5 ++
 .../sales/products/products.component.html    |  4 +-
 .../app/sales/reason/reason.component.html    |  5 +-
 .../receive-payment.component.html            | 15 +---
 .../receive-payment.component.ts              |  9 +--
 .../running-tables.component.css              |  4 ++
 .../running-tables.component.html             | 15 ++--
 .../running-tables.component.ts               |  1 -
 .../section-printer.component.html            |  9 +--
 .../section-printer.service.ts                |  8 +--
 .../section-detail.component.html             |  4 +-
 .../src/app/settings/settings.component.html  |  6 +-
 bookie/src/app/settings/settings.module.ts    |  7 +-
 bookie/src/app/settings/settings.service.ts   |  7 +-
 .../settle-option-detail.component.html       |  4 +-
 ...ettle-option-list-resolver.service.spec.ts |  9 +--
 .../settle-option/settle-option.service.ts    | 10 ++-
 .../image-dialog/image-dialog.component.ts    |  5 +-
 bookie/src/app/shared/local-time.pipe.ts      |  4 +-
 bookie/src/app/shared/shared.module.ts        |  8 +--
 bookie/src/app/shared/to-csv.service.ts       |  4 +-
 .../table-detail/table-detail.component.html  |  4 +-
 .../table-list/table-list.component.html      |  6 +-
 bookie/src/app/tables/table.service.ts        |  4 +-
 .../app/tax-report/tax-report.component.html  | 12 +---
 .../src/app/tax-report/tax-report.module.ts   |  7 +-
 .../tax-detail/tax-detail.component.html      | 18 +----
 .../temporal-product-detail.component.html    | 14 +---
 .../temporal-product-detail.component.ts      | 14 ++--
 .../temporal-product-list-datasource.ts       |  7 +-
 .../temporal-product-list.component.html      |  8 +--
 .../temporal-product-list.component.ts        | 14 +---
 .../temporal-product-resolver.service.spec.ts |  9 +--
 ...te-product-prices-resolver.service.spec.ts |  9 +--
 .../update-product-prices.component.html      | 16 +----
 .../update-product-prices.component.ts        |  8 +--
 .../update-product-prices.module.ts           |  7 +-
 .../update-product-prices.service.spec.ts     |  9 +--
 .../update-product-prices.service.ts          |  8 +--
 .../user-detail/user-detail.component.html    |  4 +-
 .../users/user-list/user-list.component.html  |  3 +-
 bookie/src/styles.css                         | 16 -----
 bookie/src/styles.sass                        | 12 ++++
 123 files changed, 313 insertions(+), 836 deletions(-)
 delete mode 100644 bookie/src/styles.css
 create mode 100644 bookie/src/styles.sass

diff --git a/bookie/.eslintrc.json b/bookie/.eslintrc.json
index 91b8665..80c6b5a 100644
--- a/bookie/.eslintrc.json
+++ b/bookie/.eslintrc.json
@@ -13,7 +13,8 @@
         "plugin:@typescript-eslint/recommended",
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates",
-        "plugin:@angular-eslint/recommended--extra"
+        "plugin:@angular-eslint/recommended--extra",
+        "prettier"
       ],
       "plugins": [
         "import",
diff --git a/bookie/.prettierrc.js b/bookie/.prettierrc.js
index 1597d25..f2e1e4d 100644
--- a/bookie/.prettierrc.js
+++ b/bookie/.prettierrc.js
@@ -4,5 +4,5 @@ module.exports = {
   semi: true,
   singleQuote: true,
   bracketSpacing: true,
-  printWidth: 100
+  printWidth: 120
 };
diff --git a/bookie/angular.json b/bookie/angular.json
index 3d53e1d..a30da05 100644
--- a/bookie/angular.json
+++ b/bookie/angular.json
@@ -7,6 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:application": {
+          "style": "sass",
           "strict": true
         }
       },
@@ -24,13 +25,14 @@
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "sass",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.sass"
             ],
             "scripts": []
           },
@@ -97,13 +99,14 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "sass",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.sass"
             ],
             "scripts": []
           }
diff --git a/bookie/package.json b/bookie/package.json
index 1dcf1bd..d960b76 100644
--- a/bookie/package.json
+++ b/bookie/package.json
@@ -44,6 +44,7 @@
     "@typescript-eslint/parser": "^5.52.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.3",
diff --git a/bookie/src/app/app-routing.module.ts b/bookie/src/app/app-routing.module.ts
index 68e0d89..0498681 100644
--- a/bookie/src/app/app-routing.module.ts
+++ b/bookie/src/app/app-routing.module.ts
@@ -8,20 +8,16 @@ import { HomeComponent } from './home/home.component';
 const routes: Routes = [
   {
     path: 'beer-sale-report',
-    loadChildren: () =>
-      import('./beer-sale-report/beer-sale-report.module').then((mod) => mod.BeerSaleReportModule),
+    loadChildren: () => import('./beer-sale-report/beer-sale-report.module').then((mod) => mod.BeerSaleReportModule),
   },
   {
     path: 'bill-settlement-report',
     loadChildren: () =>
-      import('./bill-settlement-report/bill-settlement-report.module').then(
-        (mod) => mod.BillSettlementReportModule,
-      ),
+      import('./bill-settlement-report/bill-settlement-report.module').then((mod) => mod.BillSettlementReportModule),
   },
   {
     path: 'cashier-report',
-    loadChildren: () =>
-      import('./cashier-report/cashier-report.module').then((mod) => mod.CashierReportModule),
+    loadChildren: () => import('./cashier-report/cashier-report.module').then((mod) => mod.CashierReportModule),
   },
   {
     path: 'customers',
@@ -33,8 +29,7 @@ const routes: Routes = [
   },
   {
     path: 'discount-report',
-    loadChildren: () =>
-      import('./discount-report/discount-report.module').then((mod) => mod.DiscountReportModule),
+    loadChildren: () => import('./discount-report/discount-report.module').then((mod) => mod.DiscountReportModule),
   },
   {
     path: 'guest-book',
@@ -42,8 +37,7 @@ const routes: Routes = [
   },
   {
     path: 'header-footer',
-    loadChildren: () =>
-      import('./header-footer/header-footer.module').then((mod) => mod.HeaderFooterModule),
+    loadChildren: () => import('./header-footer/header-footer.module').then((mod) => mod.HeaderFooterModule),
   },
   {
     path: 'modifiers',
@@ -52,9 +46,7 @@ const routes: Routes = [
   {
     path: 'modifier-categories',
     loadChildren: () =>
-      import('./modifier-categories/modifier-categories.module').then(
-        (mod) => mod.ModifierCategoriesModule,
-      ),
+      import('./modifier-categories/modifier-categories.module').then((mod) => mod.ModifierCategoriesModule),
   },
   {
     path: 'regimes',
@@ -71,21 +63,16 @@ const routes: Routes = [
   {
     path: 'product-sale-report',
     loadChildren: () =>
-      import('./product-sale-report/product-sale-report.module').then(
-        (mod) => mod.ProductSaleReportModule,
-      ),
+      import('./product-sale-report/product-sale-report.module').then((mod) => mod.ProductSaleReportModule),
   },
   {
     path: 'product-updates-report',
     loadChildren: () =>
-      import('./product-updates-report/product-updates-report.module').then(
-        (mod) => mod.ProductUpdatesReportModule,
-      ),
+      import('./product-updates-report/product-updates-report.module').then((mod) => mod.ProductUpdatesReportModule),
   },
   {
     path: 'menu-categories',
-    loadChildren: () =>
-      import('./menu-category/menu-categories.module').then((mod) => mod.MenuCategoriesModule),
+    loadChildren: () => import('./menu-category/menu-categories.module').then((mod) => mod.MenuCategoriesModule),
   },
   {
     path: 'roles',
@@ -97,13 +84,11 @@ const routes: Routes = [
   },
   {
     path: 'sale-report',
-    loadChildren: () =>
-      import('./sale-report/sale-report.module').then((mod) => mod.SaleReportModule),
+    loadChildren: () => import('./sale-report/sale-report.module').then((mod) => mod.SaleReportModule),
   },
   {
     path: 'sale-categories',
-    loadChildren: () =>
-      import('./sale-category/sale-categories.module').then((mod) => mod.SaleCategoriesModule),
+    loadChildren: () => import('./sale-category/sale-categories.module').then((mod) => mod.SaleCategoriesModule),
   },
   {
     path: 'sections',
@@ -111,8 +96,7 @@ const routes: Routes = [
   },
   {
     path: 'section-printers',
-    loadChildren: () =>
-      import('./section-printers/section-printers.module').then((mod) => mod.SectionPrintersModule),
+    loadChildren: () => import('./section-printers/section-printers.module').then((mod) => mod.SectionPrintersModule),
   },
   {
     path: 'settings',
@@ -120,8 +104,7 @@ const routes: Routes = [
   },
   {
     path: 'settle-options',
-    loadChildren: () =>
-      import('./settle-option/settle-options.module').then((mod) => mod.SettleOptionsModule),
+    loadChildren: () => import('./settle-option/settle-options.module').then((mod) => mod.SettleOptionsModule),
   },
   {
     path: 'tables',
@@ -137,17 +120,12 @@ const routes: Routes = [
   },
   {
     path: 'temporal-products',
-    loadChildren: () =>
-      import('./temporal-product/temporal-products.module').then(
-        (mod) => mod.TemporalProductsModule,
-      ),
+    loadChildren: () => import('./temporal-product/temporal-products.module').then((mod) => mod.TemporalProductsModule),
   },
   {
     path: 'update-product-prices',
     loadChildren: () =>
-      import('./update-product-prices/update-product-prices.module').then(
-        (mod) => mod.UpdateProductPricesModule,
-      ),
+      import('./update-product-prices/update-product-prices.module').then((mod) => mod.UpdateProductPricesModule),
   },
   {
     path: 'users',
diff --git a/bookie/src/app/auth/auth-guard.service.ts b/bookie/src/app/auth/auth-guard.service.ts
index c966c6d..3550851 100644
--- a/bookie/src/app/auth/auth-guard.service.ts
+++ b/bookie/src/app/auth/auth-guard.service.ts
@@ -7,11 +7,7 @@ import { AuthService } from './auth.service';
 
 @Injectable({ providedIn: 'root' })
 export class AuthGuard implements CanActivate {
-  constructor(
-    private router: Router,
-    private authService: AuthService,
-    private toaster: ToasterService,
-  ) {}
+  constructor(private router: Router, private authService: AuthService, private toaster: ToasterService) {}
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const { user } = this.authService;
diff --git a/bookie/src/app/auth/login/login.component.html b/bookie/src/app/auth/login/login.component.html
index 596343a..fe4b009 100644
--- a/bookie/src/app/auth/login/login.component.html
+++ b/bookie/src/app/auth/login/login.component.html
@@ -13,15 +13,8 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Password</mat-label>
-          <input
-            matInput
-            formControlName="password"
-            [type]="hide ? 'password' : 'text'"
-            (keyup.enter)="login()"
-          />
-          <mat-icon matSuffix (click)="hide = !hide">{{
-            hide ? 'visibility' : 'visibility_off'
-          }}</mat-icon>
+          <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
+          <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
         </mat-form-field>
       </div>
       <mat-divider></mat-divider>
diff --git a/bookie/src/app/beer-sale-report/beer-sale-report.component.html b/bookie/src/app/beer-sale-report/beer-sale-report.component.html
index 8a66594..382d328 100644
--- a/bookie/src/app/beer-sale-report/beer-sale-report.component.html
+++ b/bookie/src/app/beer-sale-report/beer-sale-report.component.html
@@ -34,16 +34,12 @@
           <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">
         <mat-checkbox class="flex-auto mr-5" formControlName="regular">Regular</mat-checkbox>
         <mat-checkbox class="flex-auto mr-5" formControlName="happy">Happy Hour</mat-checkbox>
-        <mat-checkbox class="flex-auto mr-5" formControlName="staff"
-          >Staff Consumption</mat-checkbox
-        >
+        <mat-checkbox class="flex-auto mr-5" formControlName="staff">Staff Consumption</mat-checkbox>
         <mat-checkbox class="flex-auto mr-5" formControlName="nc">No Charge</mat-checkbox>
       </div>
     </form>
diff --git a/bookie/src/app/beer-sale-report/beer-sale-report.module.ts b/bookie/src/app/beer-sale-report/beer-sale-report.module.ts
index cfc6abf..abf96d8 100644
--- a/bookie/src/app/beer-sale-report/beer-sale-report.module.ts
+++ b/bookie/src/app/beer-sale-report/beer-sale-report.module.ts
@@ -7,12 +7,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report-resolver.service.spec.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report-resolver.service.spec.ts
index 5ca500e..de7da3d 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report-resolver.service.spec.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('BillSettlementReportResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [BillSettlementReportResolver],
-    (service: BillSettlementReportResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([BillSettlementReportResolver], (service: BillSettlementReportResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html
index 6e00146..0fac91f 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html
@@ -34,9 +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">
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
index 329aa82..b39f6e9 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
@@ -15,9 +15,7 @@ import { BillSettlementReportDataSource } from './bill-settlement-report-datasou
 })
 export class BillSettlementReportComponent implements OnInit {
   info: BillSettlementReport = new BillSettlementReport();
-  dataSource: BillSettlementReportDataSource = new BillSettlementReportDataSource(
-    this.info.amounts,
-  );
+  dataSource: BillSettlementReportDataSource = new BillSettlementReportDataSource(this.info.amounts);
 
   form: FormGroup<{
     startDate: FormControl<Date>;
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.module.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report.module.ts
index 32646cc..e240c36 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.module.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.service.spec.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report.service.spec.ts
index 3515dfd..1fbfe1f 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.service.spec.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.service.spec.ts
@@ -9,10 +9,7 @@ describe('BillSettlementReportService', () => {
     });
   });
 
-  it('should be created', inject(
-    [BillSettlementReportService],
-    (service: BillSettlementReportService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([BillSettlementReportService], (service: BillSettlementReportService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.service.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report.service.ts
index 5fa1261..c19726b 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.service.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.service.ts
@@ -26,8 +26,6 @@ export class BillSettlementReportService {
     }
     return this.http
       .get<BillSettlementReport>(url, options)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'get')),
-      ) as Observable<BillSettlementReport>;
+      .pipe(catchError(this.log.handleError(serviceName, 'get'))) as Observable<BillSettlementReport>;
   }
 }
diff --git a/bookie/src/app/cashier-report/cashier-report.component.html b/bookie/src/app/cashier-report/cashier-report.component.html
index dfd0511..71162c7 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.html
+++ b/bookie/src/app/cashier-report/cashier-report.component.html
@@ -49,9 +49,7 @@
             </mat-option>
           </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">
diff --git a/bookie/src/app/cashier-report/cashier-report.component.ts b/bookie/src/app/cashier-report/cashier-report.component.ts
index b128552..62b4216 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.ts
+++ b/bookie/src/app/cashier-report/cashier-report.component.ts
@@ -73,16 +73,14 @@ export class CashierReportComponent implements OnInit {
   }
 
   print() {
-    this.ser
-      .print(this.info.cashier.id as string, this.info.startDate, this.info.finishDate)
-      .subscribe(
-        () => {
-          this.toaster.show('', 'Successfully Printed');
-        },
-        (error) => {
-          this.toaster.show('Error', error);
-        },
-      );
+    this.ser.print(this.info.cashier.id as string, this.info.startDate, this.info.finishDate).subscribe(
+      () => {
+        this.toaster.show('', 'Successfully Printed');
+      },
+      (error) => {
+        this.toaster.show('Error', error);
+      },
+    );
   }
 
   getInfo(): CashierReport {
diff --git a/bookie/src/app/cashier-report/cashier-report.module.ts b/bookie/src/app/cashier-report/cashier-report.module.ts
index 10ab0dc..8748771 100644
--- a/bookie/src/app/cashier-report/cashier-report.module.ts
+++ b/bookie/src/app/cashier-report/cashier-report.module.ts
@@ -7,12 +7,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/cashier-report/cashier-report.service.ts b/bookie/src/app/cashier-report/cashier-report.service.ts
index eead427..49aa15e 100644
--- a/bookie/src/app/cashier-report/cashier-report.service.ts
+++ b/bookie/src/app/cashier-report/cashier-report.service.ts
@@ -17,11 +17,7 @@ const serviceName = 'CashierReportService';
 export class CashierReportService {
   constructor(private http: HttpClient, private log: ErrorLoggerService) {}
 
-  list(
-    id: string | null,
-    startDate: string | null,
-    finishDate: string | null,
-  ): Observable<CashierReport> {
+  list(id: string | null, startDate: string | null, finishDate: string | null): Observable<CashierReport> {
     const listUrl = id === null ? url : `${url}/${id}`;
     const options = { params: new HttpParams() };
     if (startDate !== null) {
diff --git a/bookie/src/app/core/core.module.ts b/bookie/src/app/core/core.module.ts
index d8d5729..6c4932d 100644
--- a/bookie/src/app/core/core.module.ts
+++ b/bookie/src/app/core/core.module.ts
@@ -11,14 +11,7 @@ import { ErrorInterceptor } from './http-auth-interceptor';
 import { JwtInterceptor } from './jwt.interceptor';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatMenuModule,
-    MatToolbarModule,
-    RouterModule,
-  ],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule, RouterModule],
   declarations: [],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
diff --git a/bookie/src/app/customers/customer.service.ts b/bookie/src/app/customers/customer.service.ts
index 90c8c0d..fc900fc 100644
--- a/bookie/src/app/customers/customer.service.ts
+++ b/bookie/src/app/customers/customer.service.ts
@@ -60,8 +60,6 @@ export class CustomerService {
     const options = { params: new HttpParams().set('q', query) };
     return this.http
       .get<Customer[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<
-      Customer[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<Customer[]>;
   }
 }
diff --git a/bookie/src/app/devices/device-detail/device-detail.component.html b/bookie/src/app/devices/device-detail/device-detail.component.html
index 84a8022..b10c466 100644
--- a/bookie/src/app/devices/device-detail/device-detail.component.html
+++ b/bookie/src/app/devices/device-detail/device-detail.component.html
@@ -27,9 +27,7 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
   <mat-card-subtitle>
     Created on <strong>{{ item.creationDate | localTime }}</strong>
diff --git a/bookie/src/app/discount-report/discount-report.component.html b/bookie/src/app/discount-report/discount-report.component.html
index f9d9171..8481570 100644
--- a/bookie/src/app/discount-report/discount-report.component.html
+++ b/bookie/src/app/discount-report/discount-report.component.html
@@ -38,9 +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">
diff --git a/bookie/src/app/discount-report/discount-report.module.ts b/bookie/src/app/discount-report/discount-report.module.ts
index 35d1af7..053c9ff 100644
--- a/bookie/src/app/discount-report/discount-report.module.ts
+++ b/bookie/src/app/discount-report/discount-report.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html
index b9df0a1..554b932 100644
--- a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html
+++ b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html
@@ -8,22 +8,13 @@
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
           <input matInput #name formControlName="name" />
-          <mat-error *ngIf="form.controls['name'].hasError('required')">
-            Name is <strong>required</strong>
-          </mat-error>
+          <mat-error *ngIf="form.controls['name'].hasError('required')"> Name is <strong>required</strong> </mat-error>
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Phone</mat-label>
-          <input
-            matInput
-            #phone
-            type="text"
-            formControlName="phone"
-            [matAutocomplete]="auto"
-            autocomplete="off"
-          />
+          <input matInput #phone type="text" formControlName="phone" [matAutocomplete]="auto" autocomplete="off" />
         </mat-form-field>
         <mat-autocomplete
           #auto="matAutocomplete"
diff --git a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
index cefc418..39d356e 100644
--- a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
+++ b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
@@ -51,9 +51,7 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
       map((x) => (x !== null && (x as string).length >= 1 ? x : null)),
       debounceTime(150),
       distinctUntilChanged(),
-      switchMap((x) =>
-        x === null ? observableOf([]) : this.customerService.autocomplete(x as string),
-      ),
+      switchMap((x) => (x === null ? observableOf([]) : this.customerService.autocomplete(x as string))),
     );
   }
 
diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html
index b17f2b0..6517515 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html
@@ -13,13 +13,7 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="date"
-            (focus)="date.open()"
-            formControlName="date"
-            autocomplete="off"
-          />
+          <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>
@@ -60,12 +54,7 @@
       <ng-container matColumnDef="action">
         <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
         <mat-cell *matCellDef="let row" class="center">
-          <button
-            mat-icon-button
-            [routerLink]="['/sales']"
-            [queryParams]="{ guest: row.id }"
-            *ngIf="!row.tableId"
-          >
+          <button mat-icon-button [routerLink]="['/sales']" [queryParams]="{ guest: row.id }" *ngIf="!row.tableId">
             <mat-icon>chair</mat-icon>
           </button>
           <button
diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
index 2aa48f5..87b5971 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
@@ -44,13 +44,11 @@ export class GuestBookListComponent implements OnInit {
   }
 
   listenToDateChange(): void {
-    this.form.controls.date.valueChanges
-      .pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
-      .subscribe((x) =>
-        this.ser.list(x).subscribe((list: GuestBookList) => {
-          this.data.next(list.list);
-        }),
-      );
+    this.form.controls.date.valueChanges.pipe(map((x) => moment(x).format('DD-MMM-YYYY'))).subscribe((x) =>
+      this.ser.list(x).subscribe((list: GuestBookList) => {
+        this.data.next(list.list);
+      }),
+    );
   }
 
   ngOnInit() {
diff --git a/bookie/src/app/guest-book/guest-book.module.ts b/bookie/src/app/guest-book/guest-book.module.ts
index 0297b9a..3dcaf84 100644
--- a/bookie/src/app/guest-book/guest-book.module.ts
+++ b/bookie/src/app/guest-book/guest-book.module.ts
@@ -4,12 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  MatNativeDateModule,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  DateAdapter,
-} from '@angular/material/core';
+import { MatNativeDateModule, MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
diff --git a/bookie/src/app/header-footer/header-footer.service.ts b/bookie/src/app/header-footer/header-footer.service.ts
index 20241a4..aefc77c 100644
--- a/bookie/src/app/header-footer/header-footer.service.ts
+++ b/bookie/src/app/header-footer/header-footer.service.ts
@@ -20,9 +20,9 @@ export class HeaderFooterService {
   constructor(private http: HttpClient, private log: ErrorLoggerService) {}
 
   list(): Observable<HeaderFooter[]> {
-    return this.http
-      .get<HeaderFooter[]>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<HeaderFooter[]>;
+    return this.http.get<HeaderFooter[]>(url).pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
+      HeaderFooter[]
+    >;
   }
 
   save(item: HeaderFooter): Observable<HeaderFooter[]> {
diff --git a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html
index a3339fe..b798e21 100644
--- a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html
+++ b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html
@@ -16,22 +16,8 @@
     </form>
   </mat-card-content>
   <mat-card-actions>
-    <button
-      mat-raised-button
-      [disabled]="item.isFixture"
-      color="primary"
-      class="mr-5"
-      (click)="save()"
-    >
-      Save
-    </button>
-    <button
-      mat-raised-button
-      [disabled]="item.isFixture"
-      color="warn"
-      (click)="confirmDelete()"
-      *ngIf="!!item.id"
-    >
+    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
       Delete
     </button>
   </mat-card-actions>
diff --git a/bookie/src/app/menu-category/menu-category-list-resolver.service.spec.ts b/bookie/src/app/menu-category/menu-category-list-resolver.service.spec.ts
index 6e6550c..1309cbc 100644
--- a/bookie/src/app/menu-category/menu-category-list-resolver.service.spec.ts
+++ b/bookie/src/app/menu-category/menu-category-list-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('MenuCategoryListResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [MenuCategoryListResolver],
-    (service: MenuCategoryListResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([MenuCategoryListResolver], (service: MenuCategoryListResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html
index e8594c3..b78d42d 100644
--- a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html
+++ b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html
@@ -39,11 +39,7 @@
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        cdkDrag
-        [cdkDragData]="row"
-      ></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
     </mat-table>
   </mat-card-content>
 </mat-card>
diff --git a/bookie/src/app/menu-category/menu-category.service.ts b/bookie/src/app/menu-category/menu-category.service.ts
index 3bc8b8b..83269f0 100644
--- a/bookie/src/app/menu-category/menu-category.service.ts
+++ b/bookie/src/app/menu-category/menu-category.service.ts
@@ -22,9 +22,7 @@ export class MenuCategoryService {
     const getUrl: string = id === null ? url : `${url}/${id}`;
     return this.http
       .get<MenuCategory>(getUrl)
-      .pipe(
-        catchError(this.log.handleError(serviceName, `get id=${id}`)),
-      ) as Observable<MenuCategory>;
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<MenuCategory>;
   }
 
   list(shouldHaveActiveProducts: boolean | undefined): Observable<MenuCategory[]> {
@@ -52,9 +50,7 @@ export class MenuCategoryService {
   updateSortOrder(list: MenuCategory[]): Observable<boolean> {
     return this.http
       .post<MenuCategory[]>(`${url}/list`, list, httpOptions)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'updateSortOrder')),
-      ) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError(serviceName, 'updateSortOrder'))) as Observable<boolean>;
   }
 
   saveOrUpdate(menuCategory: MenuCategory): Observable<MenuCategory> {
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
index 364c62f..f5599c0 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
@@ -166,22 +166,18 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
 
   isMenuCategoryPartiallySelected(node: NodeItem) {
     const total = (this.productsOfMenuCategory.get(node.id) as Product[]).length;
-    const ticked = (this.productsOfMenuCategory.get(node.id) as Product[]).reduce(
-      (acc, current) => {
-        if (current.enabled) {
-          // eslint-disable-next-line no-param-reassign
-          acc += 1;
-        }
-        return acc;
-      },
-      0,
-    );
+    const ticked = (this.productsOfMenuCategory.get(node.id) as Product[]).reduce((acc, current) => {
+      if (current.enabled) {
+        // eslint-disable-next-line no-param-reassign
+        acc += 1;
+      }
+      return acc;
+    }, 0);
     return ticked > 0 && ticked < total;
   }
 
   toggleProductSelection(node: NodeItem) {
-    (this.products.get(node.id) as Product).enabled = !(this.products.get(node.id) as Product)
-      .enabled;
+    (this.products.get(node.id) as Product).enabled = !(this.products.get(node.id) as Product).enabled;
   }
 
   toggleMenuCategorySelection(node: NodeItem) {
diff --git a/bookie/src/app/modifier-categories/modifier-category-list-resolver.service.spec.ts b/bookie/src/app/modifier-categories/modifier-category-list-resolver.service.spec.ts
index e258c08..df515c9 100644
--- a/bookie/src/app/modifier-categories/modifier-category-list-resolver.service.spec.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-list-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('ModifierCategoryListResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [ModifierCategoryListResolver],
-    (service: ModifierCategoryListResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([ModifierCategoryListResolver], (service: ModifierCategoryListResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/modifier-categories/modifier-category-resolver.service.spec.ts b/bookie/src/app/modifier-categories/modifier-category-resolver.service.spec.ts
index f7dd896..b2073cf 100644
--- a/bookie/src/app/modifier-categories/modifier-category-resolver.service.spec.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('ModifierCategoryResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [ModifierCategoryResolver],
-    (service: ModifierCategoryResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([ModifierCategoryResolver], (service: ModifierCategoryResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/modifier-categories/modifier-category.service.ts b/bookie/src/app/modifier-categories/modifier-category.service.ts
index 5ba662a..3d0471e 100644
--- a/bookie/src/app/modifier-categories/modifier-category.service.ts
+++ b/bookie/src/app/modifier-categories/modifier-category.service.ts
@@ -22,25 +22,19 @@ export class ModifierCategoryService {
     const getUrl: string = id === null ? url : `${url}/${id}`;
     return this.http
       .get<ModifierCategory>(getUrl)
-      .pipe(
-        catchError(this.log.handleError(serviceName, `get id=${id}`)),
-      ) as Observable<ModifierCategory>;
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<ModifierCategory>;
   }
 
   list(): Observable<ModifierCategory[]> {
     return this.http
       .get<ModifierCategory[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
-      ModifierCategory[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ModifierCategory[]>;
   }
 
   listForProduct(id: string): Observable<ModifierCategory[]> {
     return this.http
       .get<ModifierCategory[]>(`${url}/for-product/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'listIsActiveOfProduct'))) as Observable<
-      ModifierCategory[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'listIsActiveOfProduct'))) as Observable<ModifierCategory[]>;
   }
 
   save(modifierCategory: ModifierCategory): Observable<ModifierCategory> {
@@ -52,9 +46,7 @@ export class ModifierCategoryService {
   update(modifierCategory: ModifierCategory): Observable<ModifierCategory> {
     return this.http
       .put<ModifierCategory>(`${url}/${modifierCategory.id}`, modifierCategory, httpOptions)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'update')),
-      ) as Observable<ModifierCategory>;
+      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<ModifierCategory>;
   }
 
   saveOrUpdate(modifierCategory: ModifierCategory): Observable<ModifierCategory> {
@@ -67,8 +59,6 @@ export class ModifierCategoryService {
   delete(id: string): Observable<ModifierCategory> {
     return this.http
       .delete<ModifierCategory>(`${url}/${id}`, httpOptions)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'delete')),
-      ) as Observable<ModifierCategory>;
+      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<ModifierCategory>;
   }
 }
diff --git a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
index 1391fa3..f782d18 100644
--- a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
+++ b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
@@ -36,8 +36,6 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts b/bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts
index c325275..27fe70c 100644
--- a/bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts
+++ b/bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts
@@ -10,10 +10,7 @@ export class ModifierListDataSource extends DataSource<Modifier> {
   public viewData: Modifier[];
   private filterValue: string;
 
-  constructor(
-    private readonly filter: Observable<string>,
-    private readonly dataObs: Observable<Modifier[]>,
-  ) {
+  constructor(private readonly filter: Observable<string>, private readonly dataObs: Observable<Modifier[]>) {
     super();
     this.data = [];
     this.viewData = [];
@@ -45,8 +42,6 @@ export class ModifierListDataSource extends DataSource<Modifier> {
 
   private getFilteredData(data: Modifier[]): Modifier[] {
     const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return data.filter(
-      (x) => (x.modifierCategory as ModifierCategory).id === filter || filter === '',
-    );
+    return data.filter((x) => (x.modifierCategory as ModifierCategory).id === filter || filter === '');
   }
 }
diff --git a/bookie/src/app/nav-bar/nav-bar.component.html b/bookie/src/app/nav-bar/nav-bar.component.html
index 66dc5e0..046bbf8 100644
--- a/bookie/src/app/nav-bar/nav-bar.component.html
+++ b/bookie/src/app/nav-bar/nav-bar.component.html
@@ -16,11 +16,7 @@
     <mat-icon>account_box</mat-icon>
     Login
   </button>
-  <button
-    mat-button
-    [routerLink]="['/', 'logout']"
-    *ngIf="(auth.currentUser | async)?.name as name"
-  >
+  <button mat-button [routerLink]="['/', 'logout']" *ngIf="(auth.currentUser | async)?.name as name">
     <mat-icon>account_box</mat-icon>
     Logout {{ name }}
   </button>
diff --git a/bookie/src/app/printers/printer-detail/printer-detail.component.html b/bookie/src/app/printers/printer-detail/printer-detail.component.html
index 41438a0..14d6616 100644
--- a/bookie/src/app/printers/printer-detail/printer-detail.component.html
+++ b/bookie/src/app/printers/printer-detail/printer-detail.component.html
@@ -24,8 +24,6 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/product-sale-report/product-sale-report-resolver.service.spec.ts b/bookie/src/app/product-sale-report/product-sale-report-resolver.service.spec.ts
index 4363c7d..2734b2f 100644
--- a/bookie/src/app/product-sale-report/product-sale-report-resolver.service.spec.ts
+++ b/bookie/src/app/product-sale-report/product-sale-report-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('ProductSaleReportResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [ProductSaleReportResolver],
-    (service: ProductSaleReportResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([ProductSaleReportResolver], (service: ProductSaleReportResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/product-sale-report/product-sale-report.component.html b/bookie/src/app/product-sale-report/product-sale-report.component.html
index 23eaf83..1752363 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.component.html
+++ b/bookie/src/app/product-sale-report/product-sale-report.component.html
@@ -38,9 +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">
@@ -59,17 +57,13 @@
       <!-- Sale Column -->
       <ng-container matColumnDef="sale">
         <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{
-          row.regularBill | number : '1.2-2'
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.regularBill | number : '1.2-2' }}</mat-cell>
       </ng-container>
 
       <!-- No Charge Column -->
       <ng-container matColumnDef="noCharge">
         <mat-header-cell *matHeaderCellDef class="right">No Charge</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{
-          row.noCharge | number : '1.2-2'
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.noCharge | number : '1.2-2' }}</mat-cell>
       </ng-container>
 
       <!-- Staff Column -->
diff --git a/bookie/src/app/product-sale-report/product-sale-report.module.ts b/bookie/src/app/product-sale-report/product-sale-report.module.ts
index b65e2d1..d03b542 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.module.ts
+++ b/bookie/src/app/product-sale-report/product-sale-report.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/product-sale-report/product-sale-report.service.spec.ts b/bookie/src/app/product-sale-report/product-sale-report.service.spec.ts
index 5a041bd..5f1abc1 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.service.spec.ts
+++ b/bookie/src/app/product-sale-report/product-sale-report.service.spec.ts
@@ -9,10 +9,7 @@ describe('ProductSaleReportService', () => {
     });
   });
 
-  it('should be created', inject(
-    [ProductSaleReportService],
-    (service: ProductSaleReportService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([ProductSaleReportService], (service: ProductSaleReportService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/product-updates-report/product-updates-report-resolver.service.spec.ts b/bookie/src/app/product-updates-report/product-updates-report-resolver.service.spec.ts
index 6d12d0a..feabd81 100644
--- a/bookie/src/app/product-updates-report/product-updates-report-resolver.service.spec.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('ProductUpdatesReportResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [ProductUpdatesReportResolver],
-    (service: ProductUpdatesReportResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([ProductUpdatesReportResolver], (service: ProductUpdatesReportResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/product-updates-report/product-updates-report.component.html b/bookie/src/app/product-updates-report/product-updates-report.component.html
index 50ff7e0..3f23fdc 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.component.html
+++ b/bookie/src/app/product-updates-report/product-updates-report.component.html
@@ -34,9 +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">
diff --git a/bookie/src/app/product-updates-report/product-updates-report.module.ts b/bookie/src/app/product-updates-report/product-updates-report.module.ts
index 5322ed5..37950be 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.module.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/product-updates-report/product-updates-report.service.spec.ts b/bookie/src/app/product-updates-report/product-updates-report.service.spec.ts
index e27e276..d46fa38 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.service.spec.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report.service.spec.ts
@@ -9,10 +9,7 @@ describe('ProductUpdatesReportService', () => {
     });
   });
 
-  it('should be created', inject(
-    [ProductUpdatesReportService],
-    (service: ProductUpdatesReportService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([ProductUpdatesReportService], (service: ProductUpdatesReportService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/product-updates-report/product-updates-report.service.ts b/bookie/src/app/product-updates-report/product-updates-report.service.ts
index 157ebb7..3f5d0d1 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.service.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report.service.ts
@@ -26,8 +26,6 @@ export class ProductUpdatesReportService {
     }
     return this.http
       .get<ProductUpdatesReport>(url, options)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'get')),
-      ) as Observable<ProductUpdatesReport>;
+      .pipe(catchError(this.log.handleError(serviceName, 'get'))) as Observable<ProductUpdatesReport>;
   }
 }
diff --git a/bookie/src/app/product/product-detail/product-detail.component.html b/bookie/src/app/product/product-detail/product-detail.component.html
index 394fd35..166735c 100644
--- a/bookie/src/app/product/product-detail/product-detail.component.html
+++ b/bookie/src/app/product/product-detail/product-detail.component.html
@@ -50,8 +50,6 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/product/product-list/product-list.component.html b/bookie/src/app/product/product-list/product-list.component.html
index da49e69..b174b1a 100644
--- a/bookie/src/app/product/product-list/product-list.component.html
+++ b/bookie/src/app/product/product-list/product-list.component.html
@@ -95,17 +95,11 @@
       <!-- Quantity Column -->
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{
-          row.quantity | number : '1.2-2'
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number : '1.2-2' }}</mat-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        cdkDrag
-        [cdkDragData]="row"
-      ></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
     </mat-table>
   </mat-card-content>
 </mat-card>
diff --git a/bookie/src/app/product/product-list/product-list.component.ts b/bookie/src/app/product/product-list/product-list.component.ts
index 9baa345..867649a 100644
--- a/bookie/src/app/product/product-list/product-list.component.ts
+++ b/bookie/src/app/product/product-list/product-list.component.ts
@@ -23,11 +23,7 @@ export class ProductListComponent implements OnInit {
   searchFilter: Observable<string> = new Observable();
   menuCategoryFilter: BehaviorSubject<string> = new BehaviorSubject('');
   data: BehaviorSubject<Product[]> = new BehaviorSubject<Product[]>([]);
-  dataSource: ProductListDataSource = new ProductListDataSource(
-    this.searchFilter,
-    this.menuCategoryFilter,
-    this.data,
-  );
+  dataSource: ProductListDataSource = new ProductListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
 
   form: FormGroup<{
     menuCategory: FormControl<string | null>;
@@ -37,14 +33,7 @@ export class ProductListComponent implements OnInit {
   list: Product[] = [];
   menuCategories: MenuCategory[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns: string[] = [
-    'name',
-    'price',
-    'menuCategory',
-    'saleCategory',
-    'info',
-    'quantity',
-  ];
+  displayedColumns: string[] = ['name', 'price', 'menuCategory', 'saleCategory', 'info', 'quantity'];
 
   constructor(
     private route: ActivatedRoute,
@@ -59,10 +48,7 @@ export class ProductListComponent implements OnInit {
     this.data.subscribe((data: Product[]) => {
       this.list = data;
     });
-    this.searchFilter = this.form.controls.filter.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-    );
+    this.searchFilter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
   }
 
   filterOn(val: string) {
@@ -70,11 +56,7 @@ export class ProductListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.dataSource = new ProductListDataSource(
-      this.searchFilter,
-      this.menuCategoryFilter,
-      this.data,
-    );
+    this.dataSource = new ProductListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
     this.route.data.subscribe((value) => {
       const data = value as { list: Product[]; menuCategories: MenuCategory[] };
       this.loadData(data.list, data.menuCategories);
diff --git a/bookie/src/app/product/product.service.ts b/bookie/src/app/product/product.service.ts
index 026a152..35bad21 100644
--- a/bookie/src/app/product/product.service.ts
+++ b/bookie/src/app/product/product.service.ts
@@ -34,18 +34,14 @@ export class ProductService {
     const options = { params: new HttpParams().set('sc', id) };
     return this.http
       .get<Product[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'listOfSaleCategory'))) as Observable<
-      Product[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'listOfSaleCategory'))) as Observable<Product[]>;
   }
 
   listIsActiveOfCategory(id: string): Observable<Product[]> {
     const options = { params: new HttpParams().set('mc', id) };
     return this.http
       .get<Product[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'listIsActiveOfCategory'))) as Observable<
-      Product[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'listIsActiveOfCategory'))) as Observable<Product[]>;
   }
 
   save(product: Product): Observable<void> {
@@ -63,9 +59,7 @@ export class ProductService {
   updateSortOrder(list: Product[]): Observable<Product[]> {
     return this.http
       .post<Product[]>(`${url}/list`, list, httpOptions)
-      .pipe(catchError(this.log.handleError(serviceName, 'updateSortOrder'))) as Observable<
-      Product[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'updateSortOrder'))) as Observable<Product[]>;
   }
 
   saveOrUpdate(product: Product): Observable<void> {
diff --git a/bookie/src/app/regimes/regime-detail/regime-detail.component.html b/bookie/src/app/regimes/regime-detail/regime-detail.component.html
index c2c26b5..69a7916 100644
--- a/bookie/src/app/regimes/regime-detail/regime-detail.component.html
+++ b/bookie/src/app/regimes/regime-detail/regime-detail.component.html
@@ -25,22 +25,8 @@
     </form>
   </mat-card-content>
   <mat-card-actions>
-    <button
-      mat-raised-button
-      [disabled]="item.isFixture"
-      color="primary"
-      class="mr-5"
-      (click)="save()"
-    >
-      Save
-    </button>
-    <button
-      mat-raised-button
-      [disabled]="item.isFixture"
-      color="warn"
-      (click)="confirmDelete()"
-      *ngIf="!!item.id"
-    >
+    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
       Delete
     </button>
   </mat-card-actions>
diff --git a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html
index eab7755..a2b77e7 100644
--- a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html
+++ b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html
@@ -31,9 +31,7 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
 <mat-card class="flex-auto lg:max-w-[50%]">
diff --git a/bookie/src/app/sale-category/sale-category-list-resolver.service.spec.ts b/bookie/src/app/sale-category/sale-category-list-resolver.service.spec.ts
index fb2aba4..6aed21d 100644
--- a/bookie/src/app/sale-category/sale-category-list-resolver.service.spec.ts
+++ b/bookie/src/app/sale-category/sale-category-list-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('SaleCategoryListResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [SaleCategoryListResolver],
-    (service: SaleCategoryListResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([SaleCategoryListResolver], (service: SaleCategoryListResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html
index 11ec724..876447b 100644
--- a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html
+++ b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html
@@ -27,9 +27,7 @@
       <!-- Tax Column -->
       <ng-container matColumnDef="tax">
         <mat-header-cell *matHeaderCellDef>Tax</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          >{{ row.tax.rate | percent : '1.2-2' }} {{ row.tax.name }}</mat-cell
-        >
+        <mat-cell *matCellDef="let row">{{ row.tax.rate | percent : '1.2-2' }} {{ row.tax.name }}</mat-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/bookie/src/app/sale-category/sale-category.service.ts b/bookie/src/app/sale-category/sale-category.service.ts
index bdc7823..f66fcdb 100644
--- a/bookie/src/app/sale-category/sale-category.service.ts
+++ b/bookie/src/app/sale-category/sale-category.service.ts
@@ -22,9 +22,7 @@ export class SaleCategoryService {
     const getUrl: string = id === null ? url : `${url}/${id}`;
     return this.http
       .get<SaleCategory>(getUrl)
-      .pipe(
-        catchError(this.log.handleError(serviceName, `get id=${id}`)),
-      ) as Observable<SaleCategory>;
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<SaleCategory>;
   }
 
   list(): Observable<SaleCategory[]> {
diff --git a/bookie/src/app/sale-report/sale-report.component.html b/bookie/src/app/sale-report/sale-report.component.html
index 1ab575f..a320258 100644
--- a/bookie/src/app/sale-report/sale-report.component.html
+++ b/bookie/src/app/sale-report/sale-report.component.html
@@ -38,9 +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">
diff --git a/bookie/src/app/sale-report/sale-report.module.ts b/bookie/src/app/sale-report/sale-report.module.ts
index 38ace82..79e9d7b 100644
--- a/bookie/src/app/sale-report/sale-report.module.ts
+++ b/bookie/src/app/sale-report/sale-report.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/sales/bill-type/bill-type.component.css b/bookie/src/app/sales/bill-type/bill-type.component.css
index fdc5fad..cc46f59 100644
--- a/bookie/src/app/sales/bill-type/bill-type.component.css
+++ b/bookie/src/app/sales/bill-type/bill-type.component.css
@@ -8,3 +8,11 @@
 .selected {
   background-color: green;
 }
+.item-name {
+  text-align: center;
+  padding: 0.5rem;
+}
+.face {
+  background-color: #3f51b5;
+  color: #ffffff;
+}
diff --git a/bookie/src/app/sales/bill-type/bill-type.component.html b/bookie/src/app/sales/bill-type/bill-type.component.html
index 0912cb5..422a316 100644
--- a/bookie/src/app/sales/bill-type/bill-type.component.html
+++ b/bookie/src/app/sales/bill-type/bill-type.component.html
@@ -6,6 +6,7 @@
       matRipple
       (click)="select('REGULAR_BILL')"
       [class.selected]="selected === 'REGULAR_BILL'"
+      [class.face]="selected !== 'REGULAR_BILL'"
     >
       <h3 class="item-name">Regular</h3>
     </mat-card>
@@ -14,6 +15,7 @@
       matRipple
       (click)="select('STAFF')"
       [class.selected]="selected === 'STAFF'"
+      [class.face]="selected !== 'STAFF'"
     >
       <h3 class="item-name">Staff</h3>
     </mat-card>
@@ -22,6 +24,7 @@
       matRipple
       (click)="select('NO_CHARGE')"
       [class.selected]="selected === 'NO_CHARGE'"
+      [class.face]="selected !== 'NO_CHARGE'"
     >
       <h3 class="item-name">No Charge</h3>
     </mat-card>
diff --git a/bookie/src/app/sales/bill.service.ts b/bookie/src/app/sales/bill.service.ts
index 9e7fb05..6c8ae87 100644
--- a/bookie/src/app/sales/bill.service.ts
+++ b/bookie/src/app/sales/bill.service.ts
@@ -80,10 +80,7 @@ export class BillService {
               productId: i.product.id,
               isHappyHour: i.isHappyHour,
               isPrinted: !!k.id,
-              info: `${i.product.name} @ ${i.price} - ${this.math.halfRoundEven(
-                i.discount * 100,
-                2,
-              )}%`,
+              info: `${i.product.name} @ ${i.price} - ${this.math.halfRoundEven(i.discount * 100, 2)}%`,
               quantity: i.quantity,
               modifiers: i.modifiers,
             }),
@@ -104,8 +101,7 @@ export class BillService {
     return this.bill.kots.reduce(
       (t, k) =>
         k.inventories.reduce(
-          (a, c) =>
-            c.product.id === productId && c.isHappyHour === happyHour ? a + c.quantity : a,
+          (a, c) => (c.product.id === productId && c.isHappyHour === happyHour ? a + c.quantity : a),
           0,
         ) + t,
       0,
@@ -114,9 +110,7 @@ export class BillService {
 
   addProduct(product: Product, quantity: number, discount: number): void {
     const newKot = this.bill.kots.find((k) => k.id === undefined) as Kot;
-    const old = newKot.inventories.find(
-      (x) => x.product.id === product.id && x.isHappyHour === product.hasHappyHour,
-    );
+    const old = newKot.inventories.find((x) => x.product.id === product.id && x.isHappyHour === product.hasHappyHour);
     if (quantity < 0) {
       const minimum = this.minimum(product.id as string, product.hasHappyHour) + quantity;
       if (minimum + quantity < 0) {
@@ -190,10 +184,7 @@ export class BillService {
     const old = newKot.inventories.find(
       (x) => x.product.id === item.productId && x.isHappyHour === item.isHappyHour,
     ) as Inventory;
-    if (
-      item.quantity > 1 ||
-      (canEdit && this.minimum(item.productId as string, item.isHappyHour) >= 1)
-    ) {
+    if (item.quantity > 1 || (canEdit && this.minimum(item.productId as string, item.isHappyHour) >= 1)) {
       old.quantity -= 1;
     } else if (item.quantity === 0) {
       newKot.inventories.splice(newKot.inventories.indexOf(old), 1);
@@ -220,13 +211,9 @@ export class BillService {
 
   discount(discounts: { id: string; name: string; discount: number }[]): void {
     for (const kot of this.bill.kots) {
-      const noDiscount = kot.inventories
-        .filter((x) => x.isHappyHour)
-        .map((x) => x.product.id as string);
+      const noDiscount = kot.inventories.filter((x) => x.isHappyHour).map((x) => x.product.id as string);
       for (const inventory of kot.inventories) {
-        const e = discounts.find(
-          (d) => d.id === (inventory.product.saleCategory as SaleCategory).id,
-        );
+        const e = discounts.find((d) => d.id === (inventory.product.saleCategory as SaleCategory).id);
         if (e === undefined || noDiscount.indexOf(inventory.product.id as string) !== -1) {
           continue;
         }
@@ -265,12 +252,7 @@ export class BillService {
   }
 
   receivePayment(value: { choices: ReceivePaymentItem[]; reason: string }): Observable<boolean> {
-    return this.ser.receivePayment(
-      this.bill.id as string,
-      value.choices,
-      value.reason,
-      this.updateTable,
-    );
+    return this.ser.receivePayment(this.bill.id as string, value.choices, value.reason, this.updateTable);
   }
 
   moveTable(table: Table): Observable<boolean> {
@@ -296,17 +278,13 @@ export class BillService {
   updateAmounts() {
     this.grossAmount.next(
       this.math.halfRoundEven(
-        this.bill.kots.reduce(
-          (t, k) => k.inventories.reduce((a, c) => a + c.price * c.quantity, 0) + t,
-          0,
-        ),
+        this.bill.kots.reduce((t, k) => k.inventories.reduce((a, c) => a + c.price * c.quantity, 0) + t, 0),
       ),
     );
     this.hhAmount.next(
       this.math.halfRoundEven(
         this.bill.kots.reduce(
-          (t, k) =>
-            k.inventories.reduce((a, c) => a + (c.isHappyHour ? c.price : 0) * c.quantity, 0) + t,
+          (t, k) => k.inventories.reduce((a, c) => a + (c.isHappyHour ? c.price : 0) * c.quantity, 0) + t,
           0,
         ),
       ),
@@ -314,11 +292,7 @@ export class BillService {
     this.discountAmount.next(
       this.math.halfRoundEven(
         this.bill.kots.reduce(
-          (t, k) =>
-            k.inventories.reduce(
-              (a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * c.discount,
-              0,
-            ) + t,
+          (t, k) => k.inventories.reduce((a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * c.discount, 0) + t,
           0,
         ),
       ),
@@ -328,8 +302,7 @@ export class BillService {
         this.bill.kots.reduce(
           (t, k) =>
             k.inventories.reduce(
-              (a, c) =>
-                a + (c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * c.taxRate,
+              (a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * c.taxRate,
               0,
             ) + t,
           0,
diff --git a/bookie/src/app/sales/bills/bills.component.html b/bookie/src/app/sales/bills/bills.component.html
index 452122e..d8556c7 100644
--- a/bookie/src/app/sales/bills/bills.component.html
+++ b/bookie/src/app/sales/bills/bills.component.html
@@ -3,17 +3,9 @@
     <mat-card-title>Bill</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <table
-      mat-table
-      #table
-      [dataSource]="dataSource"
-      aria-label="Elements"
-      class="mat-elevation-z8"
-    >
+    <table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
       <ng-container matColumnDef="bill-no-title">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold"
-          >Bill / KOT number</mat-header-cell
-        >
+        <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
       </ng-container>
       <ng-container matColumnDef="bill-no-details">
         <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold right-align"
@@ -28,18 +20,12 @@
       <ng-container matColumnDef="time-details">
         <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold right-align"
           ><span [matTooltip]="bs.bill.dateTip">{{ bs.bill.date }}</span
-          >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.creationDateTip">{{
-            bs.bill.creationDate
-          }}</span
-          >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.lastEditDateTip">{{
-            bs.bill.lastEditDate
-          }}</span></mat-header-cell
+          >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.creationDateTip">{{ bs.bill.creationDate }}</span
+          >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.lastEditDateTip">{{ bs.bill.lastEditDate }}</span></mat-header-cell
         >
       </ng-container>
       <ng-container matColumnDef="table-title">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold"
-          >Table / Pax / Customer</mat-header-cell
-        >
+        <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold">Table / Pax / Customer</mat-header-cell>
       </ng-container>
       <ng-container matColumnDef="table-details">
         <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold right-align"
@@ -73,7 +59,7 @@
       </ng-container>
       <!-- Info Column -->
       <ng-container matColumnDef="info">
-        <mat-cell *matCellDef="let row" [class.blue800]="row.isNewKot">
+        <mat-cell *matCellDef="let row">
           <span>
             {{ row.info }}
           </span>
@@ -86,52 +72,22 @@
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
         <mat-cell *matCellDef="let row" class="right-align">
-          <button
-            mat-icon-button
-            (click)="subtractOne(row)"
-            [disabled]="row.isPrinted"
-            *ngIf="!row.isKot"
-          >
+          <button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
             <mat-icon class="del">indeterminate_check_box</mat-icon>
           </button>
-          <button
-            mat-icon-button
-            (click)="quantity(row)"
-            [disabled]="rowQuantityDisabled(row)"
-            *ngIf="!row.isKot"
-          >
+          <button mat-icon-button (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)" *ngIf="!row.isKot">
             {{ row.quantity }}
           </button>
-          <button
-            mat-icon-button
-            (click)="addOne(row)"
-            [disabled]="row.isPrinted"
-            *ngIf="!row.isKot"
-          >
+          <button mat-icon-button (click)="addOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
             <mat-icon class="del">control_point</mat-icon>
           </button>
-          <button
-            mat-icon-button
-            (click)="removeItem(row)"
-            [disabled]="row.isPrinted"
-            *ngIf="!row.isKot"
-          >
+          <button mat-icon-button (click)="removeItem(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
             <mat-icon class="del">cancel</mat-icon>
           </button>
-          <button
-            mat-icon-button
-            (click)="modifier(row)"
-            [disabled]="row.isPrinted"
-            *ngIf="!row.isKot"
-          >
+          <button mat-icon-button (click)="modifier(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
             <mat-icon class="del">assignment</mat-icon>
           </button>
-          <button
-            mat-icon-button
-            (click)="moveKot(row)"
-            [disabled]="row.isKot && !row.kotId"
-            *ngIf="row.isKot"
-          >
+          <button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId" *ngIf="row.isKot">
             <mat-icon class="del">open_in_new</mat-icon>
           </button>
         </mat-cell>
@@ -145,9 +101,7 @@
         }}</mat-footer-cell>
       </ng-container>
       <ng-container matColumnDef="hh-title">
-        <mat-footer-cell *matFooterCellDef class="grey300 bold"
-          >Happy Hour Discount</mat-footer-cell
-        >
+        <mat-footer-cell *matFooterCellDef class="grey300 bold">Happy Hour Discount</mat-footer-cell>
       </ng-container>
       <ng-container matColumnDef="hh-amount">
         <mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
diff --git a/bookie/src/app/sales/bills/bills.component.ts b/bookie/src/app/sales/bills/bills.component.ts
index 19f8765..0265124 100644
--- a/bookie/src/app/sales/bills/bills.component.ts
+++ b/bookie/src/app/sales/bills/bills.component.ts
@@ -76,7 +76,8 @@ export class BillsComponent implements OnInit {
 
   chooseCustomer() {
     const dialogRef = this.dialog.open(ChooseCustomerComponent, {
-      // width: '750px',
+      maxWidth: '100%',
+      width: '50%',
       data: this.bs.bill.customer?.id,
     });
 
diff --git a/bookie/src/app/sales/bills/voucher.service.ts b/bookie/src/app/sales/bills/voucher.service.ts
index e57b57f..4e9333d 100644
--- a/bookie/src/app/sales/bills/voucher.service.ts
+++ b/bookie/src/app/sales/bills/voucher.service.ts
@@ -25,11 +25,7 @@ export class VoucherService {
       .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Bill>;
   }
 
-  getFromTable(
-    tableId: string,
-    voucherId: string | null,
-    guestId: string | null,
-  ): Observable<Bill> {
+  getFromTable(tableId: string, voucherId: string | null, guestId: string | null): Observable<Bill> {
     let params = new HttpParams();
     if (voucherId !== null) {
       params = params.set('v', voucherId);
@@ -53,17 +49,10 @@ export class VoucherService {
   getFromBill(billId: string): Observable<Bill> {
     return this.http
       .get<Bill>(`${url}/from-bill/${billId}`)
-      .pipe(
-        catchError(this.log.handleError(serviceName, `getFromBill billId=${billId}`)),
-      ) as Observable<Bill>;
+      .pipe(catchError(this.log.handleError(serviceName, `getFromBill billId=${billId}`))) as Observable<Bill>;
   }
 
-  save(
-    voucher: Bill,
-    voucherType: VoucherType,
-    guestBookId: string | null,
-    updateTable: boolean,
-  ): Observable<boolean> {
+  save(voucher: Bill, voucherType: VoucherType, guestBookId: string | null, updateTable: boolean): Observable<boolean> {
     const options = {
       params: new HttpParams().set('p', voucherType.toString()).set('u', updateTable.toString()),
     };
@@ -169,9 +158,7 @@ export class VoucherService {
         kotId,
         tableId: table.id,
       })
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'moveKotToNewTable')),
-      ) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError(serviceName, 'moveKotToNewTable'))) as Observable<boolean>;
   }
 
   mergeKotWithOldBill(id: string, kotId: string, table: Table): Observable<boolean> {
@@ -182,9 +169,7 @@ export class VoucherService {
         tableId: table.id,
         newVoucherId: table.voucherId,
       })
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'mergeKotWithOldBill')),
-      ) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError(serviceName, 'mergeKotWithOldBill'))) as Observable<boolean>;
   }
 
   splitBill(id: string, inventoriesToMove: string[], table: Table, updateTable: boolean) {
diff --git a/bookie/src/app/sales/choose-customer/choose-customer.component.html b/bookie/src/app/sales/choose-customer/choose-customer.component.html
index 34ca0f6..4696505 100644
--- a/bookie/src/app/sales/choose-customer/choose-customer.component.html
+++ b/bookie/src/app/sales/choose-customer/choose-customer.component.html
@@ -55,7 +55,7 @@
     </div>
   </form>
 </mat-dialog-content>
-<mat-dialog-actions>
+<mat-dialog-actions align="end">
   <button mat-button [mat-dialog-close]="false">Cancel</button>
   <button mat-raised-button color="primary" (click)="save()">Select</button>
 </mat-dialog-actions>
diff --git a/bookie/src/app/sales/discount/customer-discounts.service.spec.ts b/bookie/src/app/sales/discount/customer-discounts.service.spec.ts
index 186bb3e..76cd47f 100644
--- a/bookie/src/app/sales/discount/customer-discounts.service.spec.ts
+++ b/bookie/src/app/sales/discount/customer-discounts.service.spec.ts
@@ -9,10 +9,7 @@ describe('CustomerDiscountsService', () => {
     });
   });
 
-  it('should be created', inject(
-    [CustomerDiscountsService],
-    (service: CustomerDiscountsService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([CustomerDiscountsService], (service: CustomerDiscountsService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/sales/discount/customer-discounts.service.ts b/bookie/src/app/sales/discount/customer-discounts.service.ts
index b9377b5..5c8614e 100644
--- a/bookie/src/app/sales/discount/customer-discounts.service.ts
+++ b/bookie/src/app/sales/discount/customer-discounts.service.ts
@@ -20,9 +20,7 @@ export class CustomerDiscountsService {
     const getUrl: string = id === undefined ? `${url}` : `${url}/${id}`;
     return this.http
       .get<DiscountItem[]>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<
-      DiscountItem[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<DiscountItem[]>;
   }
 
   listForDiscount(): Observable<{ name: string; discount: number; discountLimit: number }[]> {
diff --git a/bookie/src/app/sales/discount/discount.component.html b/bookie/src/app/sales/discount/discount.component.html
index ce00cf5..d90f85c 100644
--- a/bookie/src/app/sales/discount/discount.component.html
+++ b/bookie/src/app/sales/discount/discount.component.html
@@ -10,15 +10,8 @@
 
       <!-- Discount Column -->
       <ng-container matColumnDef="discount">
-        <mat-header-cell *matHeaderCellDef class="center" class="flex-auto"
-          >Discount</mat-header-cell
-        >
-        <mat-cell
-          *matCellDef="let row; let i = index"
-          class="center"
-          [formGroupName]="i"
-          class="flex-auto"
-        >
+        <mat-header-cell *matHeaderCellDef class="center" class="flex-auto">Discount</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
           <mat-form-field class="flex-auto">
             <input matInput type="number" formControlName="discount" autocomplete="off" />
             <span matSuffix>%</span>
diff --git a/bookie/src/app/sales/home/sales-home.component.css b/bookie/src/app/sales/home/sales-home.component.css
index 1a83bcd..b5bd378 100644
--- a/bookie/src/app/sales/home/sales-home.component.css
+++ b/bookie/src/app/sales/home/sales-home.component.css
@@ -22,3 +22,8 @@
 .disabled {
   background-color: #dddddd;
 }
+
+.face {
+  background-color: #3f51b5;
+  color: #ffffff;
+}
diff --git a/bookie/src/app/sales/home/sales-home.component.html b/bookie/src/app/sales/home/sales-home.component.html
index 75c156b..a303993 100644
--- a/bookie/src/app/sales/home/sales-home.component.html
+++ b/bookie/src/app/sales/home/sales-home.component.html
@@ -1,6 +1,6 @@
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
   <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
+    class="face flex flex-col square-button mr-5, mb-5"
     matRipple
     [routerLink]="['menu-categories']"
     queryParamsHandling="preserve"
@@ -12,6 +12,7 @@
     matRipple
     (click)="discount()"
     [class.disabled]="!discountAllowed()"
+    [class.face]="discountAllowed()"
   >
     <h3 class="item-name">Discount</h3>
   </mat-card>
@@ -20,6 +21,7 @@
     matRipple
     (click)="printKot()"
     [class.disabled]="!printKotAllowed()"
+    [class.face]="printKotAllowed()"
   >
     <h3 class="item-name">Print KOT</h3>
   </mat-card>
@@ -28,14 +30,11 @@
     matRipple
     (click)="printBill()"
     [class.disabled]="!printBillAllowed()"
+    [class.face]="printBillAllowed()"
   >
     <h3 class="item-name">Print Bill</h3>
   </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5 warn"
-    matRipple
-    [routerLink]="['/', 'sales', 'tables']"
-  >
+  <mat-card class="flex flex-col square-button mr-5, mb-5 warn" matRipple [routerLink]="['/', 'sales', 'tables']">
     <h3 class="item-name">Back to Tables</h3>
   </mat-card>
   <mat-card
@@ -43,6 +42,7 @@
     matRipple
     (click)="receivePayment()"
     [class.disabled]="!receivePaymentAllowed()"
+    [class.face]="receivePaymentAllowed()"
   >
     <h3 class="item-name">Receive Payment</h3>
   </mat-card>
@@ -51,6 +51,7 @@
     matRipple
     (click)="moveTable()"
     [class.disabled]="!moveTableAllowed()"
+    [class.face]="moveTableAllowed()"
   >
     <h3 class="item-name">Move Table</h3>
   </mat-card>
@@ -59,6 +60,7 @@
     matRipple
     (click)="voidBill()"
     [class.disabled]="!voidBillAllowed()"
+    [class.face]="voidBillAllowed()"
   >
     <h3 class="item-name">Void Bill</h3>
   </mat-card>
@@ -67,6 +69,7 @@
     matRipple
     (click)="splitBill()"
     [class.disabled]="!splitBillAllowed()"
+    [class.face]="splitBillAllowed()"
   >
     <h3 class="item-name">Split Bill</h3>
   </mat-card>
diff --git a/bookie/src/app/sales/home/sales-home.component.ts b/bookie/src/app/sales/home/sales-home.component.ts
index dafcc57..85845f1 100644
--- a/bookie/src/app/sales/home/sales-home.component.ts
+++ b/bookie/src/app/sales/home/sales-home.component.ts
@@ -88,13 +88,11 @@ export class SalesHomeComponent {
   }
 
   discount(): void {
-    this.showDiscount().subscribe(
-      (result: boolean | { id: string; name: string; discount: number }[]) => {
-        if (result) {
-          this.bs.discount(result as { id: string; name: string; discount: number }[]);
-        }
-      },
-    );
+    this.showDiscount().subscribe((result: boolean | { id: string; name: string; discount: number }[]) => {
+      if (result) {
+        this.bs.discount(result as { id: string; name: string; discount: number }[]);
+      }
+    });
   }
 
   billTypeDialog() {
@@ -335,9 +333,7 @@ export class SalesHomeComponent {
     return true;
   }
 
-  showBillSplitChoices(): Observable<
-    { id: string; name: string; selected: boolean }[] | undefined | false
-  > {
+  showBillSplitChoices(): Observable<{ id: string; name: string; selected: boolean }[] | undefined | false> {
     return this.dialog
       .open(SplitBillComponent, {
         data: this.saleCategoryService
@@ -362,9 +358,7 @@ export class SalesHomeComponent {
     if (!this.splitBillAllowed()) {
       return;
     }
-    const obs = this.bs.selection.isEmpty()
-      ? this.splitBillWithChoice()
-      : this.splitBillWithSelection();
+    const obs = this.bs.selection.isEmpty() ? this.splitBillWithChoice() : this.splitBillWithSelection();
     let inventories: string[];
     obs
       .pipe(
@@ -404,11 +398,7 @@ export class SalesHomeComponent {
           throw new Error('Cancelled');
         }
       }),
-      map((x) =>
-        (x as { id: string; name: string; selected: boolean }[])
-          .filter((y) => y.selected)
-          .map((y) => y.id),
-      ),
+      map((x) => (x as { id: string; name: string; selected: boolean }[]).filter((y) => y.selected).map((y) => y.id)),
       tap((x: string[]) => {
         const sel = this.bs.getInventories(x);
         if (sel.keep.length === 0 || sel.move.length === 0) {
diff --git a/bookie/src/app/sales/menu-categories/menu-categories.component.css b/bookie/src/app/sales/menu-categories/menu-categories.component.css
index fb099a5..e9cf3c0 100644
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.css
+++ b/bookie/src/app/sales/menu-categories/menu-categories.component.css
@@ -18,3 +18,8 @@
 .warn {
   background-color: red;
 }
+
+.face {
+  background-color: #3f51b5;
+  color: #ffffff;
+}
diff --git a/bookie/src/app/sales/menu-categories/menu-categories.component.html b/bookie/src/app/sales/menu-categories/menu-categories.component.html
index 547cd97..65b7f62 100644
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.html
+++ b/bookie/src/app/sales/menu-categories/menu-categories.component.html
@@ -10,7 +10,7 @@
         <h3 class="item-name">Back</h3>
       </mat-card>
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5"
+        class="face flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         [routerLink]="['../products', item.id]"
diff --git a/bookie/src/app/sales/modifiers/modifiers.component.html b/bookie/src/app/sales/modifiers/modifiers.component.html
index f41912c..8c40253 100644
--- a/bookie/src/app/sales/modifiers/modifiers.component.html
+++ b/bookie/src/app/sales/modifiers/modifiers.component.html
@@ -5,9 +5,7 @@
         <span>{{ item.name }}</span>
         <mat-chip-listbox matBadge="0" matBadgeOverlap="false">
           <mat-chip-option *ngIf="!item.maximum">{{ item.minimum }} - ∞</mat-chip-option>
-          <mat-chip-option *ngIf="!!item.maximum"
-            >{{ item.minimum }} - {{ item.maximum }}</mat-chip-option
-          >
+          <mat-chip-option *ngIf="!!item.maximum">{{ item.minimum }} - {{ item.maximum }}</mat-chip-option>
         </mat-chip-listbox>
       </ng-template>
       <div class="flex flex-row flex-wrap -mr-5 -mb-5">
diff --git a/bookie/src/app/sales/pax/pax.component.html b/bookie/src/app/sales/pax/pax.component.html
index 7bba4cd..ac5302f 100644
--- a/bookie/src/app/sales/pax/pax.component.html
+++ b/bookie/src/app/sales/pax/pax.component.html
@@ -1,3 +1,4 @@
+<h2 mat-dialog-title>Pax</h2>
 <mat-dialog-content>
   <form [formGroup]="form">
     <div class="flex flex-row justify-around content-start items-start">
diff --git a/bookie/src/app/sales/pax/pax.component.ts b/bookie/src/app/sales/pax/pax.component.ts
index 5b28591..408b21a 100644
--- a/bookie/src/app/sales/pax/pax.component.ts
+++ b/bookie/src/app/sales/pax/pax.component.ts
@@ -12,10 +12,7 @@ export class PaxComponent implements OnInit {
     pax: FormControl<number>;
   }>;
 
-  constructor(
-    public dialogRef: MatDialogRef<PaxComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: number,
-  ) {
+  constructor(public dialogRef: MatDialogRef<PaxComponent>, @Inject(MAT_DIALOG_DATA) public data: number) {
     // Create form
     this.form = new FormGroup({
       pax: new FormControl<number>(0, { nonNullable: true }),
diff --git a/bookie/src/app/sales/products/products.component.css b/bookie/src/app/sales/products/products.component.css
index 0d5d1b3..c8af81a 100644
--- a/bookie/src/app/sales/products/products.component.css
+++ b/bookie/src/app/sales/products/products.component.css
@@ -28,3 +28,8 @@
   background-color: #424242;
   color: #ffffff;
 }
+
+.face {
+  background-color: #3f51b5;
+  color: #ffffff;
+}
diff --git a/bookie/src/app/sales/products/products.component.html b/bookie/src/app/sales/products/products.component.html
index d968502..7611119 100644
--- a/bookie/src/app/sales/products/products.component.html
+++ b/bookie/src/app/sales/products/products.component.html
@@ -10,7 +10,7 @@
         <h3 class="item-name">Back</h3>
       </mat-card>
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5"
+        class="face flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         (click)="addProduct(item)"
@@ -18,7 +18,7 @@
         [class.grey800]="item.isNotAvailable"
       >
         <h3 class="item-name">{{ item.name }}</h3>
-        <mat-card-subtitle class="center">{{ item.price | currency : 'INR' }}</mat-card-subtitle>
+        <mat-card-subtitle class="face center">{{ item.price | currency : 'INR' }}</mat-card-subtitle>
       </mat-card>
     </div>
   </mat-card-content>
diff --git a/bookie/src/app/sales/reason/reason.component.html b/bookie/src/app/sales/reason/reason.component.html
index 2955531..8a886c8 100644
--- a/bookie/src/app/sales/reason/reason.component.html
+++ b/bookie/src/app/sales/reason/reason.component.html
@@ -21,10 +21,7 @@
         </mat-footer-cell>
       </ng-container>
 
-      <mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        [class.selected]="row === selected"
-      ></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns" [class.selected]="row === selected"></mat-row>
       <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
     </mat-table>
   </form>
diff --git a/bookie/src/app/sales/receive-payment/receive-payment.component.html b/bookie/src/app/sales/receive-payment/receive-payment.component.html
index 5fdc52a..efb33ce 100644
--- a/bookie/src/app/sales/receive-payment/receive-payment.component.html
+++ b/bookie/src/app/sales/receive-payment/receive-payment.component.html
@@ -5,9 +5,7 @@
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
-        <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{
-          row.name
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{ row.name }}</mat-cell>
         <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
       </ng-container>
 
@@ -16,19 +14,12 @@
         <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
           amount | currency : 'INR'
         }}</mat-header-cell>
-        <mat-cell
-          *matCellDef="let row; let i = index"
-          class="center"
-          [formGroupName]="i"
-          class="flex-auto"
-        >
+        <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
           <mat-form-field>
             <input matInput type="number" formControlName="amount" autocomplete="off" />
           </mat-form-field>
         </mat-cell>
-        <mat-footer-cell *matFooterCellDef class="bold">{{
-          balance | currency : 'INR'
-        }}</mat-footer-cell>
+        <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency : 'INR' }}</mat-footer-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/bookie/src/app/sales/receive-payment/receive-payment.component.ts b/bookie/src/app/sales/receive-payment/receive-payment.component.ts
index c604c52..1a80f2c 100644
--- a/bookie/src/app/sales/receive-payment/receive-payment.component.ts
+++ b/bookie/src/app/sales/receive-payment/receive-payment.component.ts
@@ -61,15 +61,10 @@ export class ReceivePaymentComponent {
     this.ser
       .listForType(data.type)
       .pipe(
-        tap(
-          (x: SettleOption[]) =>
-            (this.displayReason = x.reduce((o, n) => o || n.hasReason, this.displayReason)),
-        ),
+        tap((x: SettleOption[]) => (this.displayReason = x.reduce((o, n) => o || n.hasReason, this.displayReason))),
         tap((x: SettleOption[]) => (this.displayTable = x.length > 1)),
         map((x: SettleOption[]) =>
-          x.map(
-            (y) => ({ ...y, amount: !this.displayTable ? this.amount : 0 } as ReceivePaymentItem),
-          ),
+          x.map((y) => ({ ...y, amount: !this.displayTable ? this.amount : 0 } as ReceivePaymentItem)),
         ),
       )
       .subscribe((x) => {
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.css b/bookie/src/app/sales/running-tables/running-tables.component.css
index d0d58a0..b93ca5f 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.css
+++ b/bookie/src/app/sales/running-tables/running-tables.component.css
@@ -1,3 +1,7 @@
+.face {
+  background-color: #3f51b5;
+  color: #ffffff;
+}
 .running {
   background-color: #f53d24;
   color: #000000;
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.html b/bookie/src/app/sales/running-tables/running-tables.component.html
index 83ff46a..1746035 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.html
+++ b/bookie/src/app/sales/running-tables/running-tables.component.html
@@ -9,24 +9,17 @@
         matRipple
         *ngFor="let table of list"
         (click)="navigateToBill(table)"
+        [class.face]="table.status !== 'running' && table.status !== 'printed'"
         [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-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()"
-      >
+      <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>
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.ts b/bookie/src/app/sales/running-tables/running-tables.component.ts
index e31d755..aaef1f1 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.ts
+++ b/bookie/src/app/sales/running-tables/running-tables.component.ts
@@ -35,7 +35,6 @@ export class RunningTablesComponent implements OnInit {
   navigateToBill(table: Table): void {
     const qp = { table: table.id };
     if (table.voucherId) {
-      // eslint-disable-next-line @typescript-eslint/dot-notation
       Object.assign(qp, { voucher: table.voucherId });
     }
     const navigationExtras: NavigationExtras = {
diff --git a/bookie/src/app/section-printers/section-printer.component.html b/bookie/src/app/section-printers/section-printer.component.html
index c393412..32f02f0 100644
--- a/bookie/src/app/section-printers/section-printer.component.html
+++ b/bookie/src/app/section-printers/section-printer.component.html
@@ -42,10 +42,7 @@
         <ng-container matColumnDef="copies">
           <mat-header-cell *matHeaderCellDef>Copies</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
-            <mat-form-field
-              *ngIf="!!$any(form.get('saleCategories')).at(i).value.printer"
-              class="flex-auto"
-            >
+            <mat-form-field *ngIf="!!$any(form.get('saleCategories')).at(i).value.printer" class="flex-auto">
               <mat-label>Copies</mat-label>
               <input matInput type="number" formControlName="copies" />
             </mat-form-field>
@@ -59,8 +56,6 @@
   </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" *ngIf="sectionId" (click)="confirmDelete()">
-      Delete
-    </button>
+    <button mat-raised-button color="warn" *ngIf="sectionId" (click)="confirmDelete()">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/section-printers/section-printer.service.ts b/bookie/src/app/section-printers/section-printer.service.ts
index f71cac4..09e89ee 100644
--- a/bookie/src/app/section-printers/section-printer.service.ts
+++ b/bookie/src/app/section-printers/section-printer.service.ts
@@ -22,9 +22,7 @@ export class SectionPrinterService {
     const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
     return this.http
       .get<SectionPrinter[]>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<
-      SectionPrinter[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<SectionPrinter[]>;
   }
 
   save(sectionId: string, list: SectionPrinter[]): Observable<SectionPrinter[]> {
@@ -36,8 +34,6 @@ export class SectionPrinterService {
   delete(id: string): Observable<SectionPrinter[]> {
     return this.http
       .delete<SectionPrinter[]>(`${url}/${id}`, httpOptions)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<
-      SectionPrinter[]
-    >;
+      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<SectionPrinter[]>;
   }
 }
diff --git a/bookie/src/app/sections/section-detail/section-detail.component.html b/bookie/src/app/sections/section-detail/section-detail.component.html
index a0dff68..66ba825 100644
--- a/bookie/src/app/sections/section-detail/section-detail.component.html
+++ b/bookie/src/app/sections/section-detail/section-detail.component.html
@@ -14,8 +14,6 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/settings/settings.component.html b/bookie/src/app/settings/settings.component.html
index 4b80d7e..61c561f 100644
--- a/bookie/src/app/settings/settings.component.html
+++ b/bookie/src/app/settings/settings.component.html
@@ -2,11 +2,7 @@
   <mat-tab label="Prefill Customer Discount">
     <mat-card>
       <mat-card-content>
-        <mat-slide-toggle
-          (click)="togglePrefill()"
-          class="flex-auto"
-          [checked]="prefillCustomerDiscount"
-        >
+        <mat-slide-toggle (click)="togglePrefill()" class="flex-auto" [checked]="prefillCustomerDiscount">
           Prefill the customer discount
         </mat-slide-toggle>
       </mat-card-content>
diff --git a/bookie/src/app/settings/settings.module.ts b/bookie/src/app/settings/settings.module.ts
index 1445012..5bbfe89 100644
--- a/bookie/src/app/settings/settings.module.ts
+++ b/bookie/src/app/settings/settings.module.ts
@@ -7,12 +7,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
diff --git a/bookie/src/app/settings/settings.service.ts b/bookie/src/app/settings/settings.service.ts
index 0ae5b9d..861698e 100644
--- a/bookie/src/app/settings/settings.service.ts
+++ b/bookie/src/app/settings/settings.service.ts
@@ -27,12 +27,7 @@ export class SettingsService {
     ) as Observable<boolean>;
   }
 
-  runMaintenance(
-    startDate: string,
-    finishDate: string,
-    beerFile: File,
-    saleFile: File,
-  ): Observable<boolean> {
+  runMaintenance(startDate: string, finishDate: string, beerFile: File, saleFile: File): Observable<boolean> {
     const options = { params: new HttpParams().set('s', startDate).set('f', finishDate) };
     const url = '/api/maintenance';
     const fd = new FormData();
diff --git a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html
index 3462587..43b94a5 100644
--- a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html
+++ b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html
@@ -33,8 +33,6 @@
   </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>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/settle-option/settle-option-list-resolver.service.spec.ts b/bookie/src/app/settle-option/settle-option-list-resolver.service.spec.ts
index 39e56c2..83488d8 100644
--- a/bookie/src/app/settle-option/settle-option-list-resolver.service.spec.ts
+++ b/bookie/src/app/settle-option/settle-option-list-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('SettleOptionListResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [SettleOptionListResolver],
-    (service: SettleOptionListResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([SettleOptionListResolver], (service: SettleOptionListResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/settle-option/settle-option.service.ts b/bookie/src/app/settle-option/settle-option.service.ts
index f63cb2f..5ec262c 100644
--- a/bookie/src/app/settle-option/settle-option.service.ts
+++ b/bookie/src/app/settle-option/settle-option.service.ts
@@ -23,9 +23,7 @@ export class SettleOptionService {
     const getUrl: string = id === null ? url : `${url}/${id}`;
     return this.http
       .get<SettleOption>(getUrl)
-      .pipe(
-        catchError(this.log.handleError(serviceName, `get id=${id}`)),
-      ) as Observable<SettleOption>;
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<SettleOption>;
   }
 
   list(): Observable<SettleOption[]> {
@@ -37,9 +35,9 @@ export class SettleOptionService {
   listForType(voucherType: VoucherType): Observable<SettleOption[]> {
     return this.http
       .get<SettleOption[]>(`${url}/for-type/${voucherType}`)
-      .pipe(
-        catchError(this.log.handleError(serviceName, `listForType voucherType=${voucherType}`)),
-      ) as Observable<SettleOption[]>;
+      .pipe(catchError(this.log.handleError(serviceName, `listForType voucherType=${voucherType}`))) as Observable<
+      SettleOption[]
+    >;
   }
 
   save(settleOption: SettleOption): Observable<SettleOption> {
diff --git a/bookie/src/app/shared/image-dialog/image-dialog.component.ts b/bookie/src/app/shared/image-dialog/image-dialog.component.ts
index 3878fc2..c43315a 100644
--- a/bookie/src/app/shared/image-dialog/image-dialog.component.ts
+++ b/bookie/src/app/shared/image-dialog/image-dialog.component.ts
@@ -7,10 +7,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./image-dialog.component.css'],
 })
 export class ImageDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<ImageDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: string,
-  ) {}
+  constructor(public dialogRef: MatDialogRef<ImageDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: string) {}
 
   close(): void {
     this.dialogRef.close();
diff --git a/bookie/src/app/shared/local-time.pipe.ts b/bookie/src/app/shared/local-time.pipe.ts
index f502e15..7bcf150 100644
--- a/bookie/src/app/shared/local-time.pipe.ts
+++ b/bookie/src/app/shared/local-time.pipe.ts
@@ -10,9 +10,7 @@ export class LocalTimePipe implements PipeTransform {
       return '';
     }
     if (value.length === 5) {
-      return moment(value, 'HH:mm')
-        .subtract(new Date().getTimezoneOffset(), 'minutes')
-        .format('HH:mm');
+      return moment(value, 'HH:mm').subtract(new Date().getTimezoneOffset(), 'minutes').format('HH:mm');
     }
     return moment(value, 'DD-MMM-YYYY HH:mm')
       .subtract(new Date().getTimezoneOffset(), 'minutes')
diff --git a/bookie/src/app/shared/shared.module.ts b/bookie/src/app/shared/shared.module.ts
index bb59339..645ef3d 100644
--- a/bookie/src/app/shared/shared.module.ts
+++ b/bookie/src/app/shared/shared.module.ts
@@ -11,13 +11,7 @@ import { LocalTimePipe } from './local-time.pipe';
 
 @NgModule({
   imports: [CommonModule, MatButtonModule, MatDialogModule],
-  declarations: [
-    ConfirmDialogComponent,
-    ImageDialogComponent,
-    AccountingPipe,
-    ClearPipe,
-    LocalTimePipe,
-  ],
+  declarations: [ConfirmDialogComponent, ImageDialogComponent, AccountingPipe, ClearPipe, LocalTimePipe],
   exports: [AccountingPipe, ClearPipe, LocalTimePipe],
 })
 export class SharedModule {}
diff --git a/bookie/src/app/shared/to-csv.service.ts b/bookie/src/app/shared/to-csv.service.ts
index 01654fb..91c3c85 100644
--- a/bookie/src/app/shared/to-csv.service.ts
+++ b/bookie/src/app/shared/to-csv.service.ts
@@ -11,9 +11,7 @@ export class ToCsvService {
     const header = Object.keys(headers);
     const replacer = (key: string, value: string | number | null) => (value === null ? '' : value);
     const csv = data.map((row) =>
-      header
-        .map((fieldName) => JSON.stringify((row as ToCsvType)[headers[fieldName]], replacer))
-        .join(','),
+      header.map((fieldName) => JSON.stringify((row as ToCsvType)[headers[fieldName]], replacer)).join(','),
     );
     csv.unshift(header.join(','));
     return csv.join('\r\n');
diff --git a/bookie/src/app/tables/table-detail/table-detail.component.html b/bookie/src/app/tables/table-detail/table-detail.component.html
index d68aa5f..afd7d5e 100644
--- a/bookie/src/app/tables/table-detail/table-detail.component.html
+++ b/bookie/src/app/tables/table-detail/table-detail.component.html
@@ -33,8 +33,6 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button (click)="save()" class="mr-5" color="primary">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
-      Delete
-    </button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
   </mat-card-actions>
 </mat-card>
diff --git a/bookie/src/app/tables/table-list/table-list.component.html b/bookie/src/app/tables/table-list/table-list.component.html
index 74459cc..a860334 100644
--- a/bookie/src/app/tables/table-list/table-list.component.html
+++ b/bookie/src/app/tables/table-list/table-list.component.html
@@ -45,11 +45,7 @@
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        cdkDrag
-        [cdkDragData]="row"
-      ></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
     </mat-table>
   </mat-card-content>
 </mat-card>
diff --git a/bookie/src/app/tables/table.service.ts b/bookie/src/app/tables/table.service.ts
index 99589fe..0062e50 100644
--- a/bookie/src/app/tables/table.service.ts
+++ b/bookie/src/app/tables/table.service.ts
@@ -52,9 +52,7 @@ export class TableService {
   updateSortOrder(list: Table[]): Observable<boolean> {
     return this.http
       .post<Table[]>(`${url}/list`, list, httpOptions)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'updateSortOrder')),
-      ) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError(serviceName, 'updateSortOrder'))) as Observable<boolean>;
   }
 
   saveOrUpdate(tables: Table): Observable<Table> {
diff --git a/bookie/src/app/tax-report/tax-report.component.html b/bookie/src/app/tax-report/tax-report.component.html
index 403aa5c..9f19da6 100644
--- a/bookie/src/app/tax-report/tax-report.component.html
+++ b/bookie/src/app/tax-report/tax-report.component.html
@@ -34,9 +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">
@@ -49,17 +47,13 @@
       <!-- Tax Rate Column -->
       <ng-container matColumnDef="taxRate">
         <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{
-          row.taxRate | percent : '1.2-2'
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.taxRate | percent : '1.2-2' }}</mat-cell>
       </ng-container>
 
       <!-- Sale Amount Column -->
       <ng-container matColumnDef="saleAmount">
         <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{
-          row.saleAmount | currency : 'INR'
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.saleAmount | currency : 'INR' }}</mat-cell>
       </ng-container>
 
       <!-- Tax Amount Column -->
diff --git a/bookie/src/app/tax-report/tax-report.module.ts b/bookie/src/app/tax-report/tax-report.module.ts
index 935d63e..850f132 100644
--- a/bookie/src/app/tax-report/tax-report.module.ts
+++ b/bookie/src/app/tax-report/tax-report.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/taxes/tax-detail/tax-detail.component.html b/bookie/src/app/taxes/tax-detail/tax-detail.component.html
index 3a5320a..e11e8d2 100644
--- a/bookie/src/app/taxes/tax-detail/tax-detail.component.html
+++ b/bookie/src/app/taxes/tax-detail/tax-detail.component.html
@@ -31,22 +31,8 @@
     </form>
   </mat-card-content>
   <mat-card-actions>
-    <button
-      mat-raised-button
-      [disabled]="item.isFixture"
-      color="primary"
-      class="mr-5"
-      (click)="save()"
-    >
-      Save
-    </button>
-    <button
-      mat-raised-button
-      [disabled]="item.isFixture"
-      color="warn"
-      (click)="confirmDelete()"
-      *ngIf="!!item.id"
-    >
+    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
       Delete
     </button>
   </mat-card-actions>
diff --git a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
index bd06466..fb464b9 100644
--- a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
+++ b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
@@ -55,23 +55,13 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto basis-1/2 mr-5">
           <mat-label>Valid From</mat-label>
-          <input
-            matInput
-            [matDatepicker]="validFrom"
-            formControlName="validFrom"
-            autocomplete="off"
-          />
+          <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-label>Valid Till</mat-label>
-          <input
-            matInput
-            [matDatepicker]="validTill"
-            formControlName="validTill"
-            autocomplete="off"
-          />
+          <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
           <mat-datepicker #validTill></mat-datepicker>
         </mat-form-field>
diff --git a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
index bbb846c..b59fc13 100644
--- a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
+++ b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
@@ -84,10 +84,8 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
       hasHappyHour: this.item.hasHappyHour,
       isNotAvailable: this.item.isNotAvailable,
       quantity: this.item.quantity,
-      validFrom:
-        this.item.validFrom === null ? null : moment(this.item.validFrom, 'DD-MMM-YYYY').toDate(),
-      validTill:
-        this.item.validTill === null ? null : moment(this.item.validTill, 'DD-MMM-YYYY').toDate(),
+      validFrom: this.item.validFrom === null ? null : moment(this.item.validFrom, 'DD-MMM-YYYY').toDate(),
+      validTill: this.item.validTill === null ? null : moment(this.item.validTill, 'DD-MMM-YYYY').toDate(),
     });
   }
 
@@ -153,13 +151,9 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
     this.item.hasHappyHour = formModel.hasHappyHour ?? false;
     this.item.isNotAvailable = formModel.isNotAvailable ?? false;
     this.item.quantity = formModel.quantity ?? 0;
-    this.item.validFrom = !formModel.validFrom
-      ? null
-      : moment(formModel.validFrom).format('DD-MMM-YYYY');
+    this.item.validFrom = !formModel.validFrom ? null : moment(formModel.validFrom).format('DD-MMM-YYYY');
     console.log(formModel.validTill);
-    this.item.validTill = !formModel.validTill
-      ? null
-      : moment(formModel.validTill).format('DD-MMM-YYYY');
+    this.item.validTill = !formModel.validTill ? null : moment(formModel.validTill).format('DD-MMM-YYYY');
 
     return this.item;
   }
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts
index f5c640d..b8ab6b6 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts
@@ -61,12 +61,7 @@ export class TemporalProductListDatasource extends DataSource<Product> {
 
   disconnect() {}
 
-  private getFilteredData(
-    data: Product[][],
-    search: string,
-    menuCategory: string,
-    saleCategory: string,
-  ): Product[][] {
+  private getFilteredData(data: Product[][], search: string, menuCategory: string, saleCategory: string): Product[][] {
     return data.filter(
       (o: Product[]) =>
         o
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
index da7497b..d96a1f5 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
@@ -36,9 +36,7 @@
         <mat-cell *matCellDef="let row">
           <ul>
             <li>
-              <a [routerLink]="['/temporal-products', row.versionId]"
-                >{{ row.name }} ({{ row.units }})</a
-              >
+              <a [routerLink]="['/temporal-products', row.versionId]">{{ row.name }} ({{ row.units }})</a>
             </li>
             <li>
               {{ row.id }}
@@ -93,9 +91,7 @@
       <!-- Quantity Column -->
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{
-          row.quantity | number : '1.2-2'
-        }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number : '1.2-2' }}</mat-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
index e610095..ece5251 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
@@ -38,14 +38,7 @@ export class TemporalProductListComponent implements OnInit {
   menuCategories: MenuCategory[] = [];
   saleCategories: SaleCategory[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns: string[] = [
-    'name',
-    'price',
-    'menuCategory',
-    'saleCategory',
-    'info',
-    'quantity',
-  ];
+  displayedColumns: string[] = ['name', 'price', 'menuCategory', 'saleCategory', 'info', 'quantity'];
 
   constructor(private route: ActivatedRoute) {
     this.form = new FormGroup({
@@ -56,10 +49,7 @@ export class TemporalProductListComponent implements OnInit {
     this.data.subscribe((data: Product[][]) => {
       this.list = data;
     });
-    this.searchFilter = this.form.controls.filter.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-    );
+    this.searchFilter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
   }
 
   filterMcOn(val: string) {
diff --git a/bookie/src/app/temporal-product/temporal-product-resolver.service.spec.ts b/bookie/src/app/temporal-product/temporal-product-resolver.service.spec.ts
index 23a2956..129c4dd 100644
--- a/bookie/src/app/temporal-product/temporal-product-resolver.service.spec.ts
+++ b/bookie/src/app/temporal-product/temporal-product-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('TemporalProductResolverService', () => {
     });
   });
 
-  it('should be created', inject(
-    [TemporalProductResolverService],
-    (service: TemporalProductResolverService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([TemporalProductResolverService], (service: TemporalProductResolverService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/update-product-prices/update-product-prices-resolver.service.spec.ts b/bookie/src/app/update-product-prices/update-product-prices-resolver.service.spec.ts
index de2ab22..26b7d97 100644
--- a/bookie/src/app/update-product-prices/update-product-prices-resolver.service.spec.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices-resolver.service.spec.ts
@@ -9,10 +9,7 @@ describe('UpdateProductPricesResolver', () => {
     });
   });
 
-  it('should be created', inject(
-    [UpdateProductPricesResolver],
-    (service: UpdateProductPricesResolver) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([UpdateProductPricesResolver], (service: UpdateProductPricesResolver) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/update-product-prices/update-product-prices.component.html b/bookie/src/app/update-product-prices/update-product-prices.component.html
index 776111c..fa734a0 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.component.html
+++ b/bookie/src/app/update-product-prices/update-product-prices.component.html
@@ -12,13 +12,7 @@
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-label>Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="date"
-            (focus)="date.open()"
-            formControlName="date"
-            autocomplete="off"
-          />
+          <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>
@@ -30,9 +24,7 @@
             </mat-option>
           </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 -->
@@ -44,9 +36,7 @@
         <!-- Old Price Column -->
         <ng-container matColumnDef="oldPrice">
           <mat-header-cell *matHeaderCellDef class="right">Old Price</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="right">{{
-            row.oldPrice | currency : 'INR'
-          }}</mat-cell>
+          <mat-cell *matCellDef="let row" class="right">{{ row.oldPrice | currency : 'INR' }}</mat-cell>
         </ng-container>
 
         <!-- New Price Column -->
diff --git a/bookie/src/app/update-product-prices/update-product-prices.component.ts b/bookie/src/app/update-product-prices/update-product-prices.component.ts
index 53abc6e..eda7b9d 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.component.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices.component.ts
@@ -59,9 +59,7 @@ export class UpdateProductPricesComponent implements OnInit {
       .pipe(
         map((value) => {
           const data = value as { menuCategories: MenuCategory[]; info: UpdateProductPrices };
-          data.menuCategories.unshift(
-            new MenuCategory({ id: undefined, name: '-- All Categories --' }),
-          );
+          data.menuCategories.unshift(new MenuCategory({ id: undefined, name: '-- All Categories --' }));
           return data;
         }),
       )
@@ -74,9 +72,7 @@ export class UpdateProductPricesComponent implements OnInit {
   loadData(info: UpdateProductPrices) {
     this.info = info;
     this.form.controls.date.setValue(moment(this.info.date, 'DD-MMM-YYYY').toDate());
-    this.form.controls.menuCategory.setValue(
-      this.info.menuCategoryId !== undefined ? this.info.menuCategoryId : '',
-    );
+    this.form.controls.menuCategory.setValue(this.info.menuCategoryId !== undefined ? this.info.menuCategoryId : '');
     this.form.controls.prices.clear();
 
     this.info.items.forEach((x) =>
diff --git a/bookie/src/app/update-product-prices/update-product-prices.module.ts b/bookie/src/app/update-product-prices/update-product-prices.module.ts
index b718870..b4dc0c6 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.module.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices.module.ts
@@ -6,12 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
diff --git a/bookie/src/app/update-product-prices/update-product-prices.service.spec.ts b/bookie/src/app/update-product-prices/update-product-prices.service.spec.ts
index 703e5bb..47e910d 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.service.spec.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices.service.spec.ts
@@ -9,10 +9,7 @@ describe('UpdateProductPricesService', () => {
     });
   });
 
-  it('should be created', inject(
-    [UpdateProductPricesService],
-    (service: UpdateProductPricesService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
+  it('should be created', inject([UpdateProductPricesService], (service: UpdateProductPricesService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/bookie/src/app/update-product-prices/update-product-prices.service.ts b/bookie/src/app/update-product-prices/update-product-prices.service.ts
index 2a93eb8..f384719 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.service.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices.service.ts
@@ -25,17 +25,13 @@ export class UpdateProductPricesService {
     }
     return this.http
       .get<UpdateProductPrices>(getUrl, options)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'get')),
-      ) as Observable<UpdateProductPrices>;
+      .pipe(catchError(this.log.handleError(serviceName, 'get'))) as Observable<UpdateProductPrices>;
   }
 
   save(item: UpdateProductPrices): Observable<UpdateProductPrices> {
     const saveUrl: string = item.menuCategoryId === null ? url : `${url}/${item.menuCategoryId}`;
     return this.http
       .post<Product[]>(saveUrl, item)
-      .pipe(
-        catchError(this.log.handleError(serviceName, 'save')),
-      ) as Observable<UpdateProductPrices>;
+      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<UpdateProductPrices>;
   }
 }
diff --git a/bookie/src/app/users/user-detail/user-detail.component.html b/bookie/src/app/users/user-detail/user-detail.component.html
index 2890eac..5ee8615 100644
--- a/bookie/src/app/users/user-detail/user-detail.component.html
+++ b/bookie/src/app/users/user-detail/user-detail.component.html
@@ -14,9 +14,7 @@
         <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-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">
diff --git a/bookie/src/app/users/user-list/user-list.component.html b/bookie/src/app/users/user-list/user-list.component.html
index e419dbc..4879717 100644
--- a/bookie/src/app/users/user-list/user-list.component.html
+++ b/bookie/src/app/users/user-list/user-list.component.html
@@ -38,8 +38,7 @@
       <ng-container matColumnDef="last">
         <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
         <mat-cell *matCellDef="let row"
-          >{{ row.lastDevice }} @
-          {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+          >{{ row.lastDevice }} @ {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
         >
       </ng-container>
 
diff --git a/bookie/src/styles.css b/bookie/src/styles.css
deleted file mode 100644
index 135f312..0000000
--- a/bookie/src/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html,
-body {
-  height: 100%;
-  /* Disables pull-to-refresh but allows overscroll glow effects. */
-  overscroll-behavior-y: contain;
-}
-
-a {
-  color: rgb(0, 0, 238);
-  text-decoration: underline;
-}/* You can add global styles to this file, and also import other style files */
diff --git a/bookie/src/styles.sass b/bookie/src/styles.sass
new file mode 100644
index 0000000..60d2254
--- /dev/null
+++ b/bookie/src/styles.sass
@@ -0,0 +1,12 @@
+/* You can add global styles to this file, and also import other style files */
+@tailwind base
+@tailwind components
+@tailwind utilities
+
+html,
+body
+	height: 100%
+	overscroll-behavior-y: contain
+a
+	color: rgb(0, 0, 238)
+	text-decoration: underline