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
2023-03-13 23:52:44 +05:30
parent b021861ba3
commit efa2af396d
123 changed files with 313 additions and 836 deletions
--- 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;
+}
--- 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>
--- 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,
--- 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">{{
--- 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,
    });

--- 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) {
--- 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>
--- 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();
+  }));
 });
--- 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 }[]> {
--- 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>
--- 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;
+}
--- 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>
--- 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) {
--- 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;
+}
--- 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]"
--- 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">
--- 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">
--- 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 }),
--- 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;
+}
--- 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>
--- 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>
--- 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>
--- 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) => {
--- 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;
--- 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>
--- 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 = {