From 103983846d0a4526f1cb844cf28feb0d00fa513b Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Fri, 28 Aug 2026 15:44:19 +0000
Subject: [PATCH] fasd

---
 .vscode/settings.json                         |   1 +
 ansible/files/.env                            |   4 +-
 ansible/files/frank.env                       |   4 +-
 barker/barker/core/taskiq.py                  |  52 +++--
 barker/barker/main.py                         |  19 +-
 bookie/src/app/auth/auth-guard.service.ts     |   2 +-
 bookie/src/app/auth/auth.service.ts           | 120 +++++++----
 .../beer-sale-report.component.html           |   2 +-
 .../beer-sale-report.component.ts             |  15 +-
 .../bill-settlement-report.component.ts       |   3 +-
 .../bundle-list/bundle-list.component.html    |   2 +-
 .../bundle-list/bundle-list.component.ts      |   6 +-
 .../cashier-report.component.ts               |   3 +-
 bookie/src/app/core/jwt.interceptor.ts        |   2 +-
 bookie/src/app/core/refresh.interceptor.ts    |   6 +-
 .../customer-detail.component.ts              |   5 +-
 .../device-detail/device-detail.component.ts  |   3 +-
 .../device-list/device-list.component.ts      |   3 +-
 .../discount-report.component.ts              |   3 +-
 .../guest-book-detail.component.ts            |   3 +-
 .../guest-book-list.component.ts              |   2 -
 .../header-footer/header-footer.component.ts  |   5 +-
 bookie/src/app/home/home.component.html       |   2 +-
 .../menu-category-detail.component.ts         |   3 +-
 .../menu-category-list.component.ts           |   4 +-
 .../modifier-category-detail.component.ts     |   8 +-
 .../modifier-category-list.component.ts       |   3 +-
 .../modifier-detail.component.ts              |   3 +-
 .../modifier-list.component.html              |   2 +-
 .../modifier-list/modifier-list.component.ts  |  23 +-
 bookie/src/app/nav-bar/nav-bar.component.html |   4 +-
 bookie/src/app/nav-bar/nav-bar.component.ts   |   3 +-
 .../printer-detail.component.ts               |   3 +-
 .../printer-list/printer-list.component.ts    |   3 +-
 .../product-sale-report.component.ts          |   3 +-
 .../product-updates-report.component.ts       |   3 +-
 .../product-detail.component.ts               |  13 +-
 .../product-list/product-list.component.html  |   2 +-
 .../product-list/product-list.component.ts    |   8 +-
 .../regime-detail/regime-detail.component.ts  |   3 +-
 .../regime-list/regime-list.component.ts      |   3 +-
 .../role-detail/role-detail.component.ts      |   3 +-
 .../roles/role-list/role-list.component.ts    |   3 +-
 .../sale-category-detail.component.ts         |   3 +-
 .../sale-category-list.component.ts           |   6 +-
 .../app/sale-report/sale-report.component.ts  |   3 +-
 .../bill-number/bill-number.component.ts      |  36 +---
 bookie/src/app/sales/bill.service.ts          | 201 +++++++++---------
 .../src/app/sales/bills/bills.component.html  |  14 +-
 bookie/src/app/sales/bills/bills.component.ts |  33 +--
 .../app/sales/home/sales-home.component.ts    |  66 +++---
 bookie/src/app/sales/pax/pax.component.html   |   4 +-
 bookie/src/app/sales/pax/pax.component.ts     |  24 +--
 .../app/sales/quantity/quantity.component.ts  |  21 +-
 .../src/app/sales/reason/reason.component.ts  |  23 +-
 .../running-tables.component.ts               |   3 +-
 .../section-printer.component.ts              |   3 +-
 .../section-detail.component.ts               |   3 +-
 .../section-list/section-list.component.ts    |   3 +-
 .../src/app/settings/settings.component.html  |   2 +-
 bookie/src/app/settings/settings.component.ts |   5 -
 .../settle-option-detail.component.ts         |   3 +-
 .../settle-option-list.component.ts           |   6 +-
 .../table-detail/table-detail.component.ts    |   3 +-
 .../tables/table-list/table-list.component.ts |   4 +-
 .../app/tax-report/tax-report.component.ts    |   3 +-
 .../taxes/tax-detail/tax-detail.component.ts  |   3 +-
 .../app/taxes/tax-list/tax-list.component.ts  |   3 +-
 .../temporal-product-detail.component.ts      |  11 +-
 .../temporal-product-list.component.html      |   4 +-
 .../temporal-product-list.component.ts        |  15 +-
 .../update-product-prices.component.ts        |   3 +-
 .../user-detail/user-detail.component.ts      |   3 +-
 .../users/user-list/user-list.component.ts    |   3 +-
 lint.sh                                       |   2 +-
 version_bump.sh                               |   2 +
 76 files changed, 415 insertions(+), 473 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 202ab56..8a907a3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
   "python.defaultInterpreterPath": "/home/tanshu/programming/barker/barker/.venv/bin/python",
+  "python.terminal.useEnvFile": true,
   "python.interpreterPath": "/home/tanshu/programming/barker/barker/.venv/bin/python",
   "python.venvFolders": [
     "barker/.venv",
diff --git a/ansible/files/.env b/ansible/files/.env
index bcf36a3..a985705 100644
--- a/ansible/files/.env
+++ b/ansible/files/.env
@@ -6,8 +6,8 @@ SQLALCHEMY_DATABASE_URI=postgresql+psycopg://postgres:123456@postgres:5432/petty
 MODULE_NAME=barker.main
 PROJECT_NAME=barker
 MAX_WORKERS=4
-REDIS_HOST=valkey
-REDIS_PORT=6379
+NATS_HOST=nats
+NATS_PORT=4222
 SECRET_KEY={{ secret_key }}
 MIDDLEWARE_SECRET_KEY={{ middleware_key }}
 ALGORITHM=HS256
diff --git a/ansible/files/frank.env b/ansible/files/frank.env
index 0635c24..59ddd5e 100644
--- a/ansible/files/frank.env
+++ b/ansible/files/frank.env
@@ -1,3 +1,3 @@
-REDIS_HOST=localhost
-REDIS_PORT=6379
+NATS_HOST=localhost
+NATS_PORT=4222
 QUEUE_NAME={{ queue_name }}
diff --git a/barker/barker/core/taskiq.py b/barker/barker/core/taskiq.py
index 6d6cf38..23dce74 100644
--- a/barker/barker/core/taskiq.py
+++ b/barker/barker/core/taskiq.py
@@ -1,11 +1,33 @@
 import asyncio
 
+from nats.js.api import StreamConfig
+from taskiq import BrokerMessage
 from taskiq_nats import PullBasedJetStreamBroker
 
 from .config import settings
 
 
-broker = PullBasedJetStreamBroker(settings.NATS_URL)
+class RoutedJetStreamBroker(PullBasedJetStreamBroker):
+    async def kick(self, message: BrokerMessage) -> None:
+        subject = message.labels.get("queue", self.subject)
+        await self.js.publish(
+            subject,
+            payload=message.message,
+            headers=message.labels,
+        )
+
+
+broker = RoutedJetStreamBroker(
+    settings.NATS_URL,
+    subject="barker.print.>",
+    stream_name="barker_print_stream",
+    stream_config=StreamConfig(
+        name="barker_print_stream",
+        subjects=["barker.print.>"],
+    ),
+)
+
+main_loop: asyncio.AbstractEventLoop | None = None
 
 
 @broker.task(task_name="sent_to_printer")
@@ -14,15 +36,21 @@ async def sent_to_printer(data: str, address: str, cut_code: str) -> None:
 
 
 def enqueue_print_job_sync(printer_name: str, data: str, address: str, cut_code: str) -> None:
-    async def _enqueue() -> None:
-        await broker.startup()
-        try:
-            await (
-                sent_to_printer.kicker().with_labels(queue=f"barker.print.{printer_name}").kiq(data, address, cut_code)
-            )
-        finally:
-            await broker.shutdown()
+    coro = sent_to_printer.kicker().with_labels(queue=f"barker.print.{printer_name}").kiq(data, address, cut_code)
 
-    loop = asyncio.new_event_loop()
-    loop.run_until_complete(_enqueue())
-    loop.close()
+    if main_loop is not None and main_loop.is_running():
+        asyncio.run_coroutine_threadsafe(coro, main_loop)
+    else:
+
+        async def _enqueue() -> None:
+            await broker.startup()
+            try:
+                await coro
+            finally:
+                await broker.shutdown()
+
+        loop = asyncio.new_event_loop()
+        try:
+            loop.run_until_complete(_enqueue())
+        finally:
+            loop.close()
diff --git a/barker/barker/main.py b/barker/barker/main.py
index 2849890..deb818c 100644
--- a/barker/barker/main.py
+++ b/barker/barker/main.py
@@ -1,5 +1,9 @@
+import asyncio
 import logging
 
+from collections.abc import AsyncIterator
+from contextlib import asynccontextmanager
+
 import uvicorn
 
 from fastapi import FastAPI, Request
@@ -7,6 +11,7 @@ from fastapi.responses import JSONResponse
 from sqlalchemy.exc import IntegrityError, SQLAlchemyError
 from starlette.middleware.sessions import SessionMiddleware
 
+from .core import taskiq
 from .core.config import settings
 from .db.base import reg  # noqa: F401
 from .db.friendly_db_error import constraint_to_friendly
@@ -60,8 +65,18 @@ from .routers.voucher import (
 )
 
 
+@asynccontextmanager
+async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
+    taskiq.main_loop = asyncio.get_running_loop()
+    await taskiq.broker.startup()
+    try:
+        yield
+    finally:
+        await taskiq.broker.shutdown()
+
+
 logger = logging.getLogger(__name__)
-app = FastAPI()
+app = FastAPI(lifespan=lifespan)
 
 
 @app.exception_handler(SQLAlchemyError)
@@ -151,4 +166,4 @@ app.frontend("/", directory="frontend", check_dir="auto")
 
 
 def init() -> None:
-    uvicorn.run(app, host=settings.HOST, port=settings.PORT)
+    uvicorn.run(app, host=settings.HOST, port=9995)
diff --git a/bookie/src/app/auth/auth-guard.service.ts b/bookie/src/app/auth/auth-guard.service.ts
index a3569db..dfff516 100644
--- a/bookie/src/app/auth/auth-guard.service.ts
+++ b/bookie/src/app/auth/auth-guard.service.ts
@@ -5,7 +5,7 @@ import { CanActivateFn, Router } from '@angular/router';
 import { AuthService } from './auth.service';
 
 export const authGuard: CanActivateFn = (route, state) => {
-  const user = inject(AuthService).user;
+  const user = inject(AuthService).user();
   const permission =
     route.data['permission'] === undefined
       ? route.data['permission']
diff --git a/bookie/src/app/auth/auth.service.ts b/bookie/src/app/auth/auth.service.ts
index 582597c..bbf6f58 100644
--- a/bookie/src/app/auth/auth.service.ts
+++ b/bookie/src/app/auth/auth.service.ts
@@ -1,6 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Injectable, computed, inject, signal } from '@angular/core';
 import { map } from 'rxjs/operators';
 
 import { environment } from '../app.environment';
@@ -18,14 +17,22 @@ export class AuthService {
   private http = inject(HttpClient);
   private cs = inject(CookieService);
 
-  public currentUser: Observable<User | null>;
+  private _user = signal<User | null>(this.readStorage());
+  public user = this._user.asReadonly();
+  public isLoggedIn = computed(() => this.user() !== null);
+
+  private _needsRefreshing = signal<boolean>(false);
+  public needsRefreshing = this._needsRefreshing.asReadonly();
+
   public device: Device;
-  private currentUserSubject: BehaviorSubject<User | null> = new BehaviorSubject<User | null>(null);
-  public isRefreshing = false;
+  public isRefreshing = signal<boolean>(false);
+  private expirationTimer: ReturnType<typeof setTimeout> | null = null;
+  private refreshTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor() {
-    this.checkStorage();
-    this.currentUser = this.currentUserSubject.asObservable();
+    const user = this._user();
+    this.scheduleExpiryTimer(user);
+    this.scheduleRefreshTimer(user);
     const deviceId = this.cs.getCookie('device_id');
     const device = this.cs.getCookie('device');
     const section = this.cs.getCookie('section');
@@ -58,38 +65,71 @@ export class AuthService {
     });
   }
 
-  checkStorage(): User | null {
+  private readStorage(): User | null {
     const storageToken = localStorage.getItem(JWT_USER);
-    let existingToken: User | null = null;
-    if (storageToken !== null) {
-      existingToken = JSON.parse(storageToken);
+    if (!storageToken) {
+      return null;
     }
-    if (existingToken === null || Date.now() > existingToken.exp * 1000) {
+    try {
+      const token: User = JSON.parse(storageToken);
+      if (!token || Date.now() > token.exp * 1000) {
+        localStorage.removeItem(JWT_USER);
+        return null;
+      }
+      return token;
+    } catch {
       localStorage.removeItem(JWT_USER);
-      this.currentUserSubject.next(null);
       return null;
     }
-    this.currentUserSubject.next(existingToken);
-    return existingToken;
   }
 
-  public get user(): User | null {
-    let val = this.currentUserSubject.value;
-    if (val == null) {
-      return val;
+  private scheduleExpiryTimer(user: User | null): void {
+    if (this.expirationTimer) {
+      clearTimeout(this.expirationTimer);
+      this.expirationTimer = null;
     }
-    let expired = Date.now() > val.exp * 1000;
-    if (expired) {
-      val = this.checkStorage();
+    if (!user || !user.exp) {
+      return;
     }
-    if (val == null) {
-      return new User();
-    }
-    expired = Date.now() > val.exp * 1000;
-    if (expired) {
+    const expiresInMs = user.exp * 1000 - Date.now();
+    if (expiresInMs <= 0) {
       this.logout();
+      return;
     }
-    return this.currentUserSubject.value;
+    this.expirationTimer = setTimeout(() => {
+      this.logout();
+    }, expiresInMs);
+  }
+
+  private scheduleRefreshTimer(user: User | null): void {
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+    if (!user || !user.exp) {
+      this._needsRefreshing.set(false);
+      return;
+    }
+    const refreshInMs = (user.exp - environment.ACCESS_TOKEN_REFRESH_MINUTES * 60) * 1000 - Date.now();
+    if (refreshInMs <= 0) {
+      this._needsRefreshing.set(true);
+      return;
+    }
+    this._needsRefreshing.set(false);
+    this.refreshTimer = setTimeout(() => {
+      this._needsRefreshing.set(true);
+    }, refreshInMs);
+  }
+
+  private saveUser(user: User | null): void {
+    if (user) {
+      localStorage.setItem(JWT_USER, JSON.stringify(user));
+    } else {
+      localStorage.removeItem(JWT_USER);
+    }
+    this._user.set(user);
+    this.scheduleExpiryTimer(user);
+    this.scheduleRefreshTimer(user);
   }
 
   login(username: string, password: string) {
@@ -103,26 +143,14 @@ export class AuthService {
       .pipe(map((u) => AuthService.parseJwt(u)))
       .pipe(
         map((user) => {
-          // store user details and jwt token in local storage to keep user logged in between page refreshes
-          localStorage.setItem(JWT_USER, JSON.stringify(user));
-          this.currentUserSubject.next(user);
+          this.saveUser(user);
           return user;
         }),
       );
   }
 
-  needsRefreshing(): boolean {
-    const { user } = this;
-    if (user === null) {
-      return true;
-    }
-    return Date.now() > (user.exp - environment.ACCESS_TOKEN_REFRESH_MINUTES * 60) * 1000;
-  }
-
-  logout() {
-    // remove user from local storage to log user out
-    localStorage.removeItem(JWT_USER);
-    this.currentUserSubject.next(null);
+  logout(): void {
+    this.saveUser(null);
   }
 
   refreshToken() {
@@ -132,16 +160,14 @@ export class AuthService {
       .pipe(map((u) => AuthService.parseJwt(u)))
       .pipe(
         map((user) => {
-          // store user details and jwt token in local storage to keep user logged in between page refreshes
-          localStorage.setItem(JWT_USER, JSON.stringify(user));
-          this.currentUserSubject.next(user);
+          this.saveUser(user);
           return user;
         }),
       );
   }
 
   allowed(permission: string): boolean {
-    const { user } = this;
+    const user = this.user();
     if (user == null || user.perms.indexOf(permission) === -1) {
       return false;
     }
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 afeb842..fcd097f 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
@@ -36,7 +36,7 @@
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Sale Category</mat-label>
-        <mat-select [formField]="form.saleCategory" (selectionChange)="filterOn($event.value)">
+        <mat-select [formField]="form.saleCategory">
           @for (sc of saleCategories(); track sc) {
             <mat-option [value]="sc.id">
               {{ sc.name }}
diff --git a/bookie/src/app/beer-sale-report/beer-sale-report.component.ts b/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
index 52b784d..33f26ef 100644
--- a/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
+++ b/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
@@ -9,10 +9,9 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
-import { SaleCategory } from '../core/sale-category';
 import { SaleCategoryService } from '../sale-category/sale-category.service';
 import { ToCsvService } from '../shared/to-csv.service';
 import { BeerSaleExportHeaderInterface } from './beer-sale-export-header-interface';
@@ -48,7 +47,6 @@ export interface BeerSaleReportFormData {
 })
 export class BeerSaleReportComponent {
   private router = inject(Router);
-  private route = inject(ActivatedRoute);
   private toCsv = inject(ToCsvService);
   private ser = inject(BeerSaleReportService);
   private saleCategoryService = inject(SaleCategoryService);
@@ -125,22 +123,13 @@ export class BeerSaleReportComponent {
     });
   }
 
-  filterOn(id: string) {
-    const sc = this.saleCategories().find((x: SaleCategory) => x.id === id);
-    const currentInfo = this.info();
-    if (currentInfo) {
-      currentInfo.saleCategory = sc ? sc : new SaleCategory({ id });
-    }
-  }
-
   getInfo(): BeerSaleReport {
     const formModel = this.formModel();
-    const currentInfo = this.info();
 
     return new BeerSaleReport({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
-      saleCategory: currentInfo?.saleCategory,
+      saleCategory: this.saleCategories().find((sc) => sc.id === formModel.saleCategory),
       regular: formModel.regular,
       happy: formModel.happy,
       staff: formModel.staff,
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 8bd32d5..4dd20d1 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
@@ -7,7 +7,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { LocalTimePipe } from '../shared/local-time.pipe';
@@ -38,7 +38,6 @@ export interface BillSettlementReportFormData {
 })
 export class BillSettlementReportComponent {
   private billSettlementReportService = inject(BillSettlementReportService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
diff --git a/bookie/src/app/bundles/bundle-list/bundle-list.component.html b/bookie/src/app/bundles/bundle-list/bundle-list.component.html
index 788598e..53e5752 100644
--- a/bookie/src/app/bundles/bundle-list/bundle-list.component.html
+++ b/bookie/src/app/bundles/bundle-list/bundle-list.component.html
@@ -18,7 +18,7 @@
 
     <mat-form-field class="flex-auto">
       <mat-label>Menu Category</mat-label>
-      <mat-select [formField]="form.menuCategory" (selectionChange)="filterOn($event.value)">
+      <mat-select [formField]="form.menuCategory">
         <mat-option>-- All Bundles --</mat-option>
         @for (mc of menuCategoriesResource.value(); track mc) {
           <mat-option [value]="mc.id">
diff --git a/bookie/src/app/bundles/bundle-list/bundle-list.component.ts b/bookie/src/app/bundles/bundle-list/bundle-list.component.ts
index 361bba6..6ddcb8d 100644
--- a/bookie/src/app/bundles/bundle-list/bundle-list.component.ts
+++ b/bookie/src/app/bundles/bundle-list/bundle-list.component.ts
@@ -45,7 +45,7 @@ export class BundleListComponent {
   menuCategoriesResource = this.menuCategoryService.list();
   listResource = this.bundleService.list();
 
-  menuCategoryFilter = signal<string>('');
+  menuCategoryFilter = computed(() => this.formModel().menuCategory);
 
   formModel = signal<BundleListFormData>({
     menuCategory: '',
@@ -69,10 +69,6 @@ export class BundleListComponent {
 
   displayedColumns: string[] = ['name', 'price', 'menuCategory', 'saleCategory', 'info', 'items'];
 
-  filterOn(val: string) {
-    this.menuCategoryFilter.set(val);
-  }
-
   exportCsv() {
     const headers = {
       Name: 'name',
diff --git a/bookie/src/app/cashier-report/cashier-report.component.ts b/bookie/src/app/cashier-report/cashier-report.component.ts
index 368aa87..791ee09 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.ts
+++ b/bookie/src/app/cashier-report/cashier-report.component.ts
@@ -10,7 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { User } from '../core/user';
@@ -42,7 +42,6 @@ export interface CashierReportFormData {
   ],
 })
 export class CashierReportComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/core/jwt.interceptor.ts b/bookie/src/app/core/jwt.interceptor.ts
index 2dfe194..5d22da9 100644
--- a/bookie/src/app/core/jwt.interceptor.ts
+++ b/bookie/src/app/core/jwt.interceptor.ts
@@ -5,7 +5,7 @@ import { AuthService } from '../auth/auth.service';
 
 export const jwtInterceptor: HttpInterceptorFn = (req, next) => {
   // add authorization header with jwt token if available
-  const currentUser = inject(AuthService).user;
+  const currentUser = inject(AuthService).user();
   if (currentUser?.access_token) {
     req = req.clone({
       setHeaders: {
diff --git a/bookie/src/app/core/refresh.interceptor.ts b/bookie/src/app/core/refresh.interceptor.ts
index c76bf02..110605c 100644
--- a/bookie/src/app/core/refresh.interceptor.ts
+++ b/bookie/src/app/core/refresh.interceptor.ts
@@ -5,11 +5,11 @@ import { AuthService } from '../auth/auth.service';
 
 export const refreshInterceptor: HttpInterceptorFn = (req, next) => {
   const authService = inject(AuthService);
-  if (!authService.isRefreshing && authService.user && authService.needsRefreshing()) {
-    authService.isRefreshing = true;
+  if (!authService.isRefreshing() && authService.user() && authService.needsRefreshing()) {
+    authService.isRefreshing.set(true);
     authService.refreshToken().subscribe({
       next: () => {
-        authService.isRefreshing = false;
+        authService.isRefreshing.set(false);
       },
     });
   }
diff --git a/bookie/src/app/customers/customer-detail/customer-detail.component.ts b/bookie/src/app/customers/customer-detail/customer-detail.component.ts
index 1224106..a055b30 100644
--- a/bookie/src/app/customers/customer-detail/customer-detail.component.ts
+++ b/bookie/src/app/customers/customer-detail/customer-detail.component.ts
@@ -8,7 +8,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 
 import { Customer } from '../../core/customer';
@@ -40,7 +40,6 @@ export interface CustomerDetailFormData {
   ],
 })
 export class CustomerDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
@@ -65,8 +64,6 @@ export class CustomerDetailComponent {
 
   form = form(this.formModel);
 
-  hide = true;
-
   constructor() {
     afterNextRender(() => {
       this.form().focusBoundControl();
diff --git a/bookie/src/app/devices/device-detail/device-detail.component.ts b/bookie/src/app/devices/device-detail/device-detail.component.ts
index 562eec1..d952877 100644
--- a/bookie/src/app/devices/device-detail/device-detail.component.ts
+++ b/bookie/src/app/devices/device-detail/device-detail.component.ts
@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Device } from '../../core/device';
 import { Section } from '../../core/section';
@@ -40,7 +40,6 @@ export interface DeviceDetailFormData {
 })
 export class DeviceDetailComponent {
   private sectionService = inject(SectionService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/devices/device-list/device-list.component.ts b/bookie/src/app/devices/device-list/device-list.component.ts
index 5cd0636..01294fa 100644
--- a/bookie/src/app/devices/device-list/device-list.component.ts
+++ b/bookie/src/app/devices/device-list/device-list.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { LocalTimePipe } from '../../shared/local-time.pipe';
 import { DeviceService } from '../device.service';
@@ -14,7 +14,6 @@ import { DeviceService } from '../device.service';
 })
 export class DeviceListComponent {
   private deviceService = inject(DeviceService);
-  private route = inject(ActivatedRoute);
   listResource = this.deviceService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/bookie/src/app/discount-report/discount-report.component.ts b/bookie/src/app/discount-report/discount-report.component.ts
index 471b8e8..3c30bee 100644
--- a/bookie/src/app/discount-report/discount-report.component.ts
+++ b/bookie/src/app/discount-report/discount-report.component.ts
@@ -8,7 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ToCsvService } from '../shared/to-csv.service';
@@ -36,7 +36,6 @@ export interface DiscountReportFormData {
   ],
 })
 export class DiscountReportComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private snackBar = inject(MatSnackBar);
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 3437c80..00d2af6 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
@@ -9,7 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { Customer } from '../../core/customer';
@@ -44,7 +44,6 @@ export interface GuestBookDetailFormData {
   ],
 })
 export class GuestBookDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
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 b3d9e7c..7773d95 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
@@ -5,7 +5,6 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import moment from 'moment';
@@ -37,7 +36,6 @@ export interface GuestBookListFormData {
 export class GuestBookListComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private snackBar = inject(MatSnackBar);
   private ser = inject(GuestBookService);
 
   date = input(new Date(), {
diff --git a/bookie/src/app/header-footer/header-footer.component.ts b/bookie/src/app/header-footer/header-footer.component.ts
index 1bf1b31..1e3ba66 100644
--- a/bookie/src/app/header-footer/header-footer.component.ts
+++ b/bookie/src/app/header-footer/header-footer.component.ts
@@ -2,13 +2,12 @@ import { Component, computed, inject, linkedSignal, input } from '@angular/core'
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
-import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { HeaderFooter } from './header-footer';
 import { HeaderFooterService } from './header-footer.service';
@@ -33,10 +32,8 @@ export interface HeaderFooterFormData {
   ],
 })
 export class HeaderFooterComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
-  private dialog = inject(MatDialog);
   private ser = inject(HeaderFooterService);
   id = input(null, { transform: (v: string | null | undefined) => v ?? null });
   listResource = this.ser.list();
diff --git a/bookie/src/app/home/home.component.html b/bookie/src/app/home/home.component.html
index 71a0354..5e5759c 100644
--- a/bookie/src/app/home/home.component.html
+++ b/bookie/src/app/home/home.component.html
@@ -198,7 +198,7 @@
 </div>
 <footer class="footer">
   <p>
-    Backend: v{{ auth.user?.ver }} / Frontend: v{{ version }} on {{ auth.device.name }} &#64;
+    Backend: v{{ auth.user()?.ver }} / Frontend: v{{ version }} on {{ auth.device.name }} &#64;
     {{ auth.device.section.name }}
   </p>
 </footer>
diff --git a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
index 7520b49..4e1ce86 100644
--- a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
+++ b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
@@ -6,7 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { MenuCategory } from '../../core/menu-category';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
@@ -24,7 +24,6 @@ export interface MenuCategoryDetailFormData {
   imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, FormField],
 })
 export class MenuCategoryDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts
index c1cd85b..d53f2e2 100644
--- a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts
+++ b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts
@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { firstValueFrom } from 'rxjs';
 
 import { MenuCategory } from '../../core/menu-category';
@@ -16,8 +16,6 @@ import { MenuCategoryService } from '../menu-category.service';
   imports: [DragDropModule, MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class MenuCategoryListComponent {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(MenuCategoryService);
   listResource = this.ser.list(undefined);
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 8e02dd9..4abf3ea 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
@@ -9,7 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { ModifierCategory, MenuCategory, StockKeepingUnitLink } from '../../core/modifier-category';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
@@ -49,7 +49,6 @@ export interface ModifierCategoryDetailFormData {
   ],
 })
 export class ModifierCategoryDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
@@ -112,11 +111,6 @@ export class ModifierCategoryDetailComponent {
     });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isExpanded(mc: MenuCategory) {
-    return true;
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
diff --git a/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts b/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts
index 4614140..62bed24 100644
--- a/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { ModifierCategoryService } from '../modifier-category.service';
 @Component({
@@ -13,7 +13,6 @@ import { ModifierCategoryService } from '../modifier-category.service';
 })
 export class ModifierCategoryListComponent {
   private modifierCategoryService = inject(ModifierCategoryService);
-  private route = inject(ActivatedRoute);
   listResource = this.modifierCategoryService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
index 7441cec..4afacc0 100644
--- a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
+++ b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Modifier } from '../../core/modifier';
 import { ModifierCategory } from '../../core/modifier-category';
@@ -40,7 +40,6 @@ export interface ModifierDetailFormData {
 })
 export class ModifierDetailComponent {
   private modifierCategoryService = inject(ModifierCategoryService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/modifiers/modifier-list/modifier-list.component.html b/bookie/src/app/modifiers/modifier-list/modifier-list.component.html
index 4d877a8..9a0897d 100644
--- a/bookie/src/app/modifiers/modifier-list/modifier-list.component.html
+++ b/bookie/src/app/modifiers/modifier-list/modifier-list.component.html
@@ -9,7 +9,7 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Modifier Category</mat-label>
-      <mat-select (selectionChange)="filterOn($event)">
+      <mat-select [formField]="form.menuCategory">
         <mat-option>-- All Categories --</mat-option>
         @for (mc of modifierCategories(); track mc.id) {
           <mat-option [value]="mc.id">
diff --git a/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts b/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
index 26049fe..96ee2f3 100644
--- a/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
+++ b/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
@@ -1,16 +1,21 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component, inject, computed, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
 
 import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
 import { ModifierService } from '../modifier.service';
 
+export interface ModifierListFormData {
+  menuCategory: string | null;
+}
+
 @Component({
   selector: 'app-modifier-list',
   templateUrl: './modifier-list.component.html',
@@ -23,6 +28,7 @@ import { ModifierService } from '../modifier.service';
     MatOptionModule,
     MatSelectModule,
     MatTableModule,
+    FormField,
     RouterLink,
   ],
 })
@@ -34,11 +40,18 @@ export class ModifierListComponent {
   listResource = this.modifierService.list();
 
   modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);
-  filter = signal<string>('');
+
+  formModel = signal<ModifierListFormData>({
+    menuCategory: '',
+  });
+
+  form = form(this.formModel);
+
+  menuCategoryFilter = computed(() => this.formModel().menuCategory);
 
   dataSource = computed(() => {
     const items = this.listResource.value() ?? [];
-    const cat = this.filter();
+    const cat = this.menuCategoryFilter();
     if (cat) {
       return items.filter((x) => x.modifierCategory?.id === cat);
     }
@@ -47,8 +60,4 @@ export class ModifierListComponent {
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
-
-  filterOn(val: MatSelectChange): void {
-    this.filter.set(val.value);
-  }
 }
diff --git a/bookie/src/app/nav-bar/nav-bar.component.html b/bookie/src/app/nav-bar/nav-bar.component.html
index 0b9c56e..b936dca 100644
--- a/bookie/src/app/nav-bar/nav-bar.component.html
+++ b/bookie/src/app/nav-bar/nav-bar.component.html
@@ -16,13 +16,13 @@
     </a>
   }
   <span class="spacer"></span>
-  @if ((auth.currentUser | async) === null) {
+  @if (auth.user() === null) {
     <button mat-button [routerLink]="['/', 'login']">
       <mat-icon>account_box</mat-icon>
       Login
     </button>
   }
-  @if ((auth.currentUser | async)?.name; as name) {
+  @if (auth.user()?.name; as name) {
     <button mat-button [routerLink]="['/', 'logout']">
       <mat-icon>account_box</mat-icon>
       Logout {{ name }}
diff --git a/bookie/src/app/nav-bar/nav-bar.component.ts b/bookie/src/app/nav-bar/nav-bar.component.ts
index f5f2c9f..cb3615e 100644
--- a/bookie/src/app/nav-bar/nav-bar.component.ts
+++ b/bookie/src/app/nav-bar/nav-bar.component.ts
@@ -1,4 +1,3 @@
-import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -11,7 +10,7 @@ import { AuthService } from '../auth/auth.service';
   selector: 'app-nav-bar',
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.css'],
-  imports: [AsyncPipe, MatButtonModule, MatButtonModule, MatIconModule, MatToolbarModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatToolbarModule, RouterLink],
 })
 export class NavBarComponent {
   private router = inject(Router);
diff --git a/bookie/src/app/printers/printer-detail/printer-detail.component.ts b/bookie/src/app/printers/printer-detail/printer-detail.component.ts
index 4d55d94..c2c3fd5 100644
--- a/bookie/src/app/printers/printer-detail/printer-detail.component.ts
+++ b/bookie/src/app/printers/printer-detail/printer-detail.component.ts
@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Printer } from '../../core/printer';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
@@ -24,7 +24,6 @@ export interface PrinterDetailFormData {
   imports: [MatButtonModule, MatFormFieldModule, MatInputModule, FormField],
 })
 export class PrinterDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/printers/printer-list/printer-list.component.ts b/bookie/src/app/printers/printer-list/printer-list.component.ts
index 32f5135..34e80e2 100644
--- a/bookie/src/app/printers/printer-list/printer-list.component.ts
+++ b/bookie/src/app/printers/printer-list/printer-list.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { PrinterService } from '../printer.service';
 @Component({
@@ -13,7 +13,6 @@ import { PrinterService } from '../printer.service';
 })
 export class PrinterListComponent {
   private printerService = inject(PrinterService);
-  private route = inject(ActivatedRoute);
   listResource = this.printerService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/bookie/src/app/product-sale-report/product-sale-report.component.ts b/bookie/src/app/product-sale-report/product-sale-report.component.ts
index 03e4fa3..e9a0f53 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.component.ts
+++ b/bookie/src/app/product-sale-report/product-sale-report.component.ts
@@ -9,7 +9,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { SectionService } from '../sections/section.service';
@@ -42,7 +42,6 @@ export interface ProductSaleReportFormData {
 })
 export class ProductSaleReportComponent {
   private sectionService = inject(SectionService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/product-updates-report/product-updates-report.component.ts b/bookie/src/app/product-updates-report/product-updates-report.component.ts
index de78d5e..386fdac 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.component.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report.component.ts
@@ -6,7 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ToCsvService } from '../shared/to-csv.service';
@@ -34,7 +34,6 @@ export interface ProductUpdatesReportFormData {
 })
 export class ProductUpdatesReportComponent {
   private productUpdatesReportService = inject(ProductUpdatesReportService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
diff --git a/bookie/src/app/product/product-detail/product-detail.component.ts b/bookie/src/app/product/product-detail/product-detail.component.ts
index e7f243e..9462787 100644
--- a/bookie/src/app/product/product-detail/product-detail.component.ts
+++ b/bookie/src/app/product/product-detail/product-detail.component.ts
@@ -11,7 +11,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { MenuCategory } from '../../core/menu-category';
 import { Product, StockKeepingUnit } from '../../core/product';
@@ -60,7 +60,6 @@ export interface ProductDetailFormData {
 export class ProductDetailComponent {
   private menuCategoryService = inject(MenuCategoryService);
   private saleCategoryService = inject(SaleCategoryService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -258,13 +257,3 @@ export class ProductDetailComponent {
     });
   }
 }
-
-// if (this.item().menuCategory === null || this.item().menuCategory === undefined) {
-//   this.item().menuCategory = new MenuCategory();
-// }
-// this.item().menuCategory.id = formModel.menuCategory;
-
-// this.item().price = formModel.price ?? 0;
-// this.item().hasHappyHour = formModel.hasHappyHour ?? false;
-// this.item().isNotAvailable = formModel.isNotAvailable ?? false;
-// this.item().quantity = formModel.quantity ?? 0;
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 859e1aa..8e9bfda 100644
--- a/bookie/src/app/product/product-list/product-list.component.html
+++ b/bookie/src/app/product/product-list/product-list.component.html
@@ -25,7 +25,7 @@
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Menu Category</mat-label>
-      <mat-select [formField]="form.menuCategory" (selectionChange)="filterOn($event.value)">
+      <mat-select [formField]="form.menuCategory">
         <mat-option>-- All Products --</mat-option>
         @for (mc of menuCategoriesResource.value(); track mc) {
           <mat-option [value]="mc.id">
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 f7a7e8b..9184c7d 100644
--- a/bookie/src/app/product/product-list/product-list.component.ts
+++ b/bookie/src/app/product/product-list/product-list.component.ts
@@ -52,8 +52,6 @@ export class ProductListComponent {
 
   listResource = this.ser.list();
 
-  menuCategoryFilter = signal<string>('');
-
   formModel = signal<ProductListFormData>({
     menuCategory: '',
     filter: '',
@@ -61,6 +59,8 @@ export class ProductListComponent {
 
   form = form(this.formModel);
 
+  menuCategoryFilter = computed(() => this.formModel().menuCategory ?? '');
+
   filterSignal = computed(() => this.formModel().filter);
   debouncedFilter = debounced(this.filterSignal, 150);
 
@@ -81,10 +81,6 @@ export class ProductListComponent {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['name', 'price', 'menuCategory', 'saleCategory', 'info', 'quantity'];
 
-  filterOn(val: string): void {
-    this.menuCategoryFilter.set(val);
-  }
-
   async updateSortOrder() {
     try {
       await firstValueFrom(this.ser.updateSortOrder(this.menuCategoryFilter(), this.dataSource()));
diff --git a/bookie/src/app/regimes/regime-detail/regime-detail.component.ts b/bookie/src/app/regimes/regime-detail/regime-detail.component.ts
index 427cec4..8aa768c 100644
--- a/bookie/src/app/regimes/regime-detail/regime-detail.component.ts
+++ b/bookie/src/app/regimes/regime-detail/regime-detail.component.ts
@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Regime } from '../../core/regime';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
@@ -24,7 +24,6 @@ export interface RegimeDetailFormData {
   imports: [MatButtonModule, MatFormFieldModule, MatInputModule, FormField],
 })
 export class RegimeDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/regimes/regime-list/regime-list.component.ts b/bookie/src/app/regimes/regime-list/regime-list.component.ts
index c1d3293..41c711a 100644
--- a/bookie/src/app/regimes/regime-list/regime-list.component.ts
+++ b/bookie/src/app/regimes/regime-list/regime-list.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { RegimeService } from '../regime.service';
 @Component({
@@ -13,7 +13,6 @@ import { RegimeService } from '../regime.service';
 })
 export class RegimeListComponent {
   private regimeService = inject(RegimeService);
-  private route = inject(ActivatedRoute);
   listResource = this.regimeService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/bookie/src/app/roles/role-detail/role-detail.component.ts b/bookie/src/app/roles/role-detail/role-detail.component.ts
index 20e4d2e..789890d 100644
--- a/bookie/src/app/roles/role-detail/role-detail.component.ts
+++ b/bookie/src/app/roles/role-detail/role-detail.component.ts
@@ -6,7 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { Role } from '../role';
@@ -25,7 +25,6 @@ export interface RoleDetailFormData {
   imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, FormField],
 })
 export class RoleDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
diff --git a/bookie/src/app/roles/role-list/role-list.component.ts b/bookie/src/app/roles/role-list/role-list.component.ts
index 51f7946..9df37a1 100644
--- a/bookie/src/app/roles/role-list/role-list.component.ts
+++ b/bookie/src/app/roles/role-list/role-list.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { RoleService } from '../role.service';
 @Component({
@@ -13,7 +13,6 @@ import { RoleService } from '../role.service';
 })
 export class RoleListComponent {
   private roleService = inject(RoleService);
-  private route = inject(ActivatedRoute);
   listResource = this.roleService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
index 9f1f33e..50c8ad1 100644
--- a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
+++ b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
@@ -10,7 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { round } from 'mathjs';
 
 import { SaleCategory } from '../../core/sale-category';
@@ -46,7 +46,6 @@ export interface SaleCategoryDetailFormData {
 export class SaleCategoryDetailComponent {
   private taxService = inject(TaxService);
   private productService = inject(ProductService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts
index 103ba1b..5785b61 100644
--- a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts
+++ b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts
@@ -2,9 +2,8 @@ import { PercentPipe } from '@angular/common';
 import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { SaleCategoryService } from '../sale-category.service';
 @Component({
@@ -14,9 +13,6 @@ import { SaleCategoryService } from '../sale-category.service';
   imports: [MatButtonModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
 })
 export class SaleCategoryListComponent {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
-  private snackBar = inject(MatSnackBar);
   private ser = inject(SaleCategoryService);
   listResource = this.ser.list();
 
diff --git a/bookie/src/app/sale-report/sale-report.component.ts b/bookie/src/app/sale-report/sale-report.component.ts
index 2941def..9ffb920 100644
--- a/bookie/src/app/sale-report/sale-report.component.ts
+++ b/bookie/src/app/sale-report/sale-report.component.ts
@@ -10,7 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { SectionService } from '../sections/section.service';
@@ -43,7 +43,6 @@ export interface SaleReportFormData {
 })
 export class SaleReportComponent {
   private sectionService = inject(SectionService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/sales/bill-number/bill-number.component.ts b/bookie/src/app/sales/bill-number/bill-number.component.ts
index 31e4e34..d181292 100644
--- a/bookie/src/app/sales/bill-number/bill-number.component.ts
+++ b/bookie/src/app/sales/bill-number/bill-number.component.ts
@@ -1,5 +1,5 @@
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { Component, OnInit, inject, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -30,39 +30,23 @@ export interface BillNumberFormData {
     ScrollingModule,
   ],
 })
-export class BillNumberComponent implements OnInit {
-  data = inject(MAT_DIALOG_DATA);
-  dialogRef = inject<MatDialogRef<BillNumberComponent>>(MatDialogRef);
+export class BillNumberComponent {
+  regimes = inject<Regime[]>(MAT_DIALOG_DATA) ?? [];
+  private dialogRef = inject<MatDialogRef<BillNumberComponent>>(MatDialogRef);
+
   formModel = signal<BillNumberFormData>({
     regime: null,
-    billNumber: null,
+    billNumber: 0,
   });
 
   form = form(this.formModel);
 
-  regimes: Regime[] = [];
-
-  constructor() {
-    const data = this.data;
-
-    this.regimes = data;
-    // Create form
-  }
-
-  ngOnInit() {
-    this.formModel.set({
-      regime: null,
-      billNumber: 0,
-    });
-  }
-
   accept(): void {
-    const formValue = this.formModel();
-    const billNumber = formValue.billNumber ?? 0;
-    const regime = formValue.regime ?? null;
-    if (regime == null) {
+    const { regime, billNumber } = this.formModel();
+    if (!regime) {
       this.dialogRef.close(undefined);
+      return;
     }
-    this.dialogRef.close(`${regime?.prefix}-${billNumber}`);
+    this.dialogRef.close(`${regime.prefix}-${billNumber ?? 0}`);
   }
 }
diff --git a/bookie/src/app/sales/bill.service.ts b/bookie/src/app/sales/bill.service.ts
index bb9e05f..c5b84ba 100644
--- a/bookie/src/app/sales/bill.service.ts
+++ b/bookie/src/app/sales/bill.service.ts
@@ -1,10 +1,9 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Injectable, Injector, computed, inject, signal } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { Injectable, Injector, computed, effect, inject, signal } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable, throwError } from 'rxjs';
-import { filter, take, tap } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 
 import { ModifierCategory } from '../core/modifier-category';
 import { ProductQuery } from '../core/product-query';
@@ -32,8 +31,8 @@ export class BillService {
   private modifierCategoryService = inject(ModifierCategoryService);
   private injector = inject(Injector);
 
-  public data = signal<Kot[]>([]);
-  public bill: Bill = new Bill();
+  public bill = signal<Bill>(new Bill());
+  public data = computed(() => this.bill().kots);
   private originalBill: Bill = new Bill();
 
   public grossAmount = computed(() =>
@@ -75,32 +74,29 @@ export class BillService {
 
   public amount = computed(() => this.grossAmount() - this.discountAmount() + this.taxAmount());
   public selection = new SelectionModel<string>(true, []);
-  private updateTable: boolean;
-  private allowDeactivate: boolean;
+  private updateTable = signal<boolean>(true);
+  private allowDeactivate = signal<boolean>(false);
 
   // To disable Deactivate Guard on navigation after printing bill or kot.
 
-  constructor() {
-    this.updateTable = true;
-    this.allowDeactivate = false;
-  }
-
-  displayBill(): void {
-    this.allowDeactivate = false;
-    this.data.set([...this.bill.kots]);
-  }
-
   loadData(bill: Bill, updateTable: boolean): void {
-    this.updateTable = updateTable;
+    this.updateTable.set(updateTable);
     bill.kots.push(new Kot());
-    this.bill = bill;
-    this.originalBill = JSON.parse(JSON.stringify(this.bill));
+    this.originalBill = JSON.parse(JSON.stringify(bill));
     this.selection.clear();
-    this.displayBill();
+    this.bill.set(bill);
+    this.allowDeactivate.set(false);
+  }
+
+  reset(): void {
+    this.bill.set(new Bill());
+    this.originalBill = new Bill();
+    this.selection.clear();
+    this.allowDeactivate.set(false);
   }
 
   minimum(skuId: string, happyHour: boolean): number {
-    return this.bill.kots.reduce(
+    return this.bill().kots.reduce(
       (t, k) =>
         k.inventories
           .filter((i) => i.sku.id === skuId && i.isHappyHour === happyHour)
@@ -112,7 +108,7 @@ export class BillService {
   addOneSku(sku: ProductQuery): void {
     const quantity = 1;
     const discount = 0;
-    const newKot = this.bill.kots.find((k) => k.id === undefined) as Kot;
+    const newKot = this.bill().kots.find((k) => k.id === undefined) as Kot;
     const old = newKot.inventories.find(
       (x) =>
         x.sku.id === sku.id && x.isHappyHour === sku.hasHappyHour && x.type === (sku.isBundle ? 'bundle' : 'regular'),
@@ -155,18 +151,21 @@ export class BillService {
       }
       newKot.inventories.push(item);
       const modRes = this.modifierCategoryService.listForSku(signal(sku.id as string));
-      toObservable(modRes.value, { injector: this.injector })
-        .pipe(
-          filter((result): result is ModifierCategory[] => !!result),
-          take(1),
-        )
-        .subscribe((result) => {
-          if (result.reduce((a: number, c: ModifierCategory) => a + c.minimum, 0)) {
-            this.showModifier(item);
+      const effectRef = effect(
+        () => {
+          const result = modRes.value();
+          if (result) {
+            if (result.reduce((a: number, c: ModifierCategory) => a + c.minimum, 0)) {
+              this.showModifier(item);
+            }
+            effectRef.destroy();
           }
-        });
+        },
+        { injector: this.injector },
+      );
     }
-    this.displayBill();
+    this.allowDeactivate.set(false);
+    this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
   }
 
   showModifier(item: Inventory): void {
@@ -188,7 +187,8 @@ export class BillService {
       if (result !== undefined) {
         item.modifiers = result;
       }
-      this.displayBill();
+      this.allowDeactivate.set(false);
+      this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
     });
   }
 
@@ -200,7 +200,8 @@ export class BillService {
         child.quantity += old.sku.bundleItems.find((bi) => bi.id === child.sku.id)?.quantity || 0;
       });
     }
-    this.displayBill();
+    this.allowDeactivate.set(false);
+    this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
   }
 
   quantity(item: BillRow, quantity: number): void {
@@ -211,7 +212,8 @@ export class BillService {
         child.quantity = (old.sku.bundleItems.find((bi) => bi.id === child.sku.id)?.quantity || 0) * quantity;
       });
     }
-    this.displayBill();
+    this.allowDeactivate.set(false);
+    this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
   }
 
   subtractOne(item: BillRow, canEdit: boolean): void {
@@ -230,14 +232,16 @@ export class BillService {
     } else if (old.quantity === 0) {
       newKot.inventories.splice(newKot.inventories.indexOf(old), 1);
     }
-    this.displayBill();
+    this.allowDeactivate.set(false);
+    this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
   }
 
   removeItem(item: BillRow): void {
     const newKot = item.kot as Kot;
     const old = item.inv as Inventory;
     newKot.inventories.splice(newKot.inventories.indexOf(old), 1);
-    this.displayBill();
+    this.allowDeactivate.set(false);
+    this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
   }
 
   modifier(item: BillRow): void {
@@ -246,7 +250,7 @@ export class BillService {
   }
 
   discount(discounts: { id: string; name: string; discount: number }[]): void {
-    for (const kot of this.bill.kots) {
+    for (const kot of this.bill().kots) {
       const noDiscount = kot.inventories.filter((x) => x.isHappyHour).map((x) => x.sku.id as string);
       for (const inventory of kot.inventories) {
         if (noDiscount.indexOf(inventory.sku.id as string) !== -1) {
@@ -259,7 +263,8 @@ export class BillService {
         }
       }
     }
-    this.displayBill();
+    this.allowDeactivate.set(false);
+    this.bill.update((b) => new Bill({ ...b, kots: [...b.kots] }));
   }
 
   isBillDiffent(bill: Bill, guestBookId: string | null): boolean {
@@ -282,7 +287,7 @@ export class BillService {
   }
 
   printKot(guestBookId: string | null): Observable<boolean> {
-    const item = JSON.parse(JSON.stringify(this.bill));
+    const item = JSON.parse(JSON.stringify(this.bill()));
     if (!this.isBillDiffent(item, guestBookId)) {
       return throwError(() => Error('Cannot print a blank KOT\nPlease add some products!'));
     }
@@ -290,12 +295,12 @@ export class BillService {
       return throwError(() => Error('Happy hour products are not balanced.'));
     }
     return this.ser
-      .saveOrUpdate(item, VoucherType.Kot, guestBookId, this.updateTable)
-      .pipe(tap(() => (this.allowDeactivate = true)));
+      .saveOrUpdate(item, VoucherType.Kot, guestBookId, this.updateTable())
+      .pipe(tap(() => this.allowDeactivate.set(true)));
   }
 
   printBill(guestBookId: string | null, voucherType: VoucherType): Observable<boolean> {
-    const item = JSON.parse(JSON.stringify(this.bill));
+    const item = JSON.parse(JSON.stringify(this.bill()));
     const skus = item.kots.reduce((p: number, k: Kot) => p + k.inventories.filter((i) => i.quantity !== 0).length, 0);
     if (skus === 0) {
       return throwError(() => Error('Cannot print a blank Bill\nPlease add some products!'));
@@ -304,41 +309,41 @@ export class BillService {
       return throwError(() => Error('Happy hour products are not balanced.'));
     }
     return this.ser
-      .saveOrUpdate(item, voucherType, guestBookId, this.updateTable)
-      .pipe(tap(() => (this.allowDeactivate = true)));
+      .saveOrUpdate(item, voucherType, guestBookId, this.updateTable())
+      .pipe(tap(() => this.allowDeactivate.set(true)));
   }
 
   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> {
-    return this.ser.moveTable(this.bill.id as string, table);
+    return this.ser.moveTable(this.bill().id as string, table);
   }
 
   mergeTable(table: Table): Observable<boolean> {
-    return this.ser.mergeTable(this.bill.id as string, table);
+    return this.ser.mergeTable(this.bill().id as string, table);
   }
 
   moveKot(kotId: string, table: Table): Observable<boolean> {
-    return this.ser.moveKotToNewTable(this.bill.id as string, kotId, table);
+    return this.ser.moveKotToNewTable(this.bill().id as string, kotId, table);
   }
 
   mergeKot(kotId: string, table: Table): Observable<boolean> {
-    return this.ser.mergeKotWithOldBill(this.bill.id as string, kotId, table);
+    return this.ser.mergeKotWithOldBill(this.bill().id as string, kotId, table);
   }
 
   cancelBill(reason: string): Observable<boolean> {
-    return this.ser.cancelBill(this.bill.id as string, reason, this.updateTable);
+    return this.ser.cancelBill(this.bill().id as string, reason, this.updateTable());
   }
 
   splitBill(inventories: string[], table: Table): Observable<boolean> {
-    return this.ser.splitBill(this.bill.id as string, inventories, table, this.updateTable);
+    return this.ser.splitBill(this.bill().id as string, inventories, table, this.updateTable());
   }
 
   public getInventories(saleCategories: string[]): { move: string[]; keep: string[] } {
     const data: { move: string[]; keep: string[] } = { move: [], keep: [] };
-    for (const kot of this.bill.kots) {
+    for (const kot of this.bill().kots) {
       for (const inv of kot.inventories) {
         if (saleCategories.indexOf(inv.sku.saleCategory?.id as string) === -1) {
           data.keep.push(inv.id as string);
@@ -350,57 +355,63 @@ export class BillService {
     return data;
   }
 
-  private happyHourItemsBalanced(): boolean {
-    return this.bill.kots.every((kot) => {
-      const happyHourItems = kot.inventories
-        .filter((x) => x.isHappyHour)
-        .map((x) => ({ id: x.sku.id as string, quantity: x.quantity }))
-        .sort((a, b) => (a.id < b.id ? -1 : 1));
-      const happyHourIds = happyHourItems.map((x) => x.id);
-      const rest = kot.inventories
-        .filter((x) => !x.isHappyHour && happyHourIds.indexOf(x.sku.id as string) !== -1)
-        .map((x) => ({ id: x.sku.id as string, quantity: x.quantity }))
-        .sort((a, b) => (a.id < b.id ? -1 : 1));
-      if (happyHourIds.length === 0) {
-        return true;
-      }
-      return (
-        happyHourItems.length === rest.length &&
-        happyHourItems.every((v, i) => v.id === rest[i].id && v.quantity === rest[i].quantity)
-      );
-    });
-  }
+  private happyHourItemsBalanced = computed<boolean>(() => {
+    return this.bill().kots.every((kot) => {
+      const happyHourQtyMap = new Map<string, number>();
+      const regularQtyMap = new Map<string, number>();
 
-  private regularItemsMoreThanHappyHour(): boolean {
+      for (const item of kot.inventories) {
+        const id = item.sku.id as string;
+        if (item.isHappyHour) {
+          happyHourQtyMap.set(id, (happyHourQtyMap.get(id) ?? 0) + item.quantity);
+        } else {
+          regularQtyMap.set(id, (regularQtyMap.get(id) ?? 0) + item.quantity);
+        }
+      }
+
+      for (const [id, hhQty] of happyHourQtyMap.entries()) {
+        if (regularQtyMap.get(id) !== hhQty) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  });
+
+  private regularItemsMoreThanHappyHour = computed<boolean>(() => {
     // This is for the whole bill.  eg. Kot 1 => Reg 2 + HH 2; Kot 2 => Reg 4; Kot 3 => Reg - 4
     // This is pass okay in happy hours items balanced, but overall this is wrong. Hence this check
 
-    const inventories = this.bill.kots
-      .flatMap((kot) => kot.inventories)
-      .reduce((acc: { id: string; quantity: number; isHappyHour: boolean }[], curr) => {
-        const existing = acc.find((x) => x.id === curr.sku.id && x.isHappyHour === curr.isHappyHour);
-        if (existing) {
-          existing.quantity += curr.quantity;
+    const happyHourQtyMap = new Map<string, number>();
+    const regularQtyMap = new Map<string, number>();
+
+    for (const kot of this.bill().kots) {
+      for (const item of kot.inventories) {
+        const id = item.sku.id as string;
+        if (item.isHappyHour) {
+          happyHourQtyMap.set(id, (happyHourQtyMap.get(id) ?? 0) + item.quantity);
         } else {
-          acc.push({ id: curr.sku.id as string, quantity: curr.quantity, isHappyHour: curr.isHappyHour });
+          regularQtyMap.set(id, (regularQtyMap.get(id) ?? 0) + item.quantity);
         }
-        return acc;
-      }, [])
-      .sort((a, b) => (a.id < b.id ? -1 : 1));
-    const happyHourItems = inventories.filter((x) => x.isHappyHour);
-    const happyHourIds = happyHourItems.map((x) => x.id);
-    const rest = inventories.filter((x) => !x.isHappyHour && happyHourIds.indexOf(x.id as string) !== -1);
-    return (
-      happyHourItems.length === rest.length &&
-      happyHourItems.every((hh, index) => hh.id === rest[index].id && hh.quantity <= rest[index].quantity)
-    );
-  }
+      }
+    }
+
+    for (const [id, hhQty] of happyHourQtyMap.entries()) {
+      const regQty = regularQtyMap.get(id) ?? 0;
+      if (regQty < hhQty) {
+        return false;
+      }
+    }
+
+    return true;
+  });
 
   public canDeactivate(): boolean {
-    if (this.allowDeactivate) {
+    if (this.allowDeactivate()) {
       return true;
     }
-    const newKot = this.bill.kots.find((k) => k.id === undefined) as Kot;
+    const newKot = this.bill().kots.find((k) => k.id === undefined) as Kot;
     return newKot.inventories.length === 0;
   }
 }
diff --git a/bookie/src/app/sales/bills/bills.component.html b/bookie/src/app/sales/bills/bills.component.html
index 64100cb..2c71e19 100644
--- a/bookie/src/app/sales/bills/bills.component.html
+++ b/bookie/src/app/sales/bills/bills.component.html
@@ -5,7 +5,7 @@
   </ng-container>
   <ng-container matColumnDef="bill-no-details">
     <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold right-align"
-      >{{ bs.bill.billId }} / K-{{ bs.bill.kotId }}</mat-header-cell
+      >{{ bs.bill().billId }} / K-{{ bs.bill().kotId }}</mat-header-cell
     >
   </ng-container>
   <ng-container matColumnDef="time-title">
@@ -15,9 +15,9 @@
   </ng-container>
   <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
+      ><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
     >
   </ng-container>
   <ng-container matColumnDef="table-title">
@@ -25,10 +25,10 @@
   </ng-container>
   <ng-container matColumnDef="table-details">
     <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold right-align"
-      ><button>Table: {{ bs.bill.table.name }}</button> /
-      <button type="button" mat-button (click)="choosePax()">{{ bs.bill.pax }} Pax</button> /
+      ><button>Table: {{ bs.bill().table.name }}</button> /
+      <button type="button" mat-button (click)="choosePax()">{{ bs.bill().pax }} Pax</button> /
       <button type="button" mat-button (click)="chooseCustomer()">
-        {{ bs.bill.customer?.name ?? 'Customer' }}
+        {{ bs.bill().customer?.name ?? 'Customer' }}
       </button></mat-header-cell
     >
   </ng-container>
diff --git a/bookie/src/app/sales/bills/bills.component.ts b/bookie/src/app/sales/bills/bills.component.ts
index 637af01..1cc7567 100644
--- a/bookie/src/app/sales/bills/bills.component.ts
+++ b/bookie/src/app/sales/bills/bills.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule, CurrencyPipe } from '@angular/common';
-import { Component, OnInit, inject, computed, effect, input } from '@angular/core';
+import { Component, OnDestroy, OnInit, Signal, computed, effect, inject, input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -7,7 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 
@@ -44,8 +44,7 @@ import { VoucherService } from './voucher.service';
     RouterOutlet,
   ],
 })
-export class BillsComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class BillsComponent implements OnInit, OnDestroy {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -112,8 +111,12 @@ export class BillsComponent implements OnInit {
     this.getPax();
   }
 
+  ngOnDestroy() {
+    this.bs.reset();
+  }
+
   getPax(): void {
-    if (this.bs.bill.id || this.bs.bill.customer) {
+    if (this.bs.bill().id || this.bs.bill().customer) {
       return;
     }
     this.choosePax();
@@ -122,14 +125,14 @@ export class BillsComponent implements OnInit {
   choosePax(): void {
     const dialogRef = this.dialog.open(PaxComponent, {
       // width: '750px',
-      data: this.bs.bill.pax,
+      data: this.bs.bill().pax,
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | number) => {
       if (!result) {
         return;
       }
-      this.bs.bill.pax = result as number;
+      this.bs.bill.update((b) => new Bill({ ...b, pax: result as number }));
     });
   }
 
@@ -137,14 +140,14 @@ export class BillsComponent implements OnInit {
     const dialogRef = this.dialog.open(ChooseCustomerComponent, {
       maxWidth: '100%',
       width: '50%',
-      data: this.bs.bill.customer,
+      data: this.bs.bill().customer,
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Customer) => {
       if (!result) {
-        this.bs.bill.customer = null;
+        this.bs.bill.update((b) => new Bill({ ...b, customer: null }));
       } else {
-        this.bs.bill.customer = result as Customer;
+        this.bs.bill.update((b) => new Bill({ ...b, customer: result as Customer }));
       }
     });
   }
@@ -248,7 +251,7 @@ export class BillsComponent implements OnInit {
       );
   }
 
-  chooseTable(allowMerge: boolean): Observable<Table> {
+  chooseTable(allowMerge: Signal<boolean>): Observable<Table> {
     return this.dialog
       .open(TablesDialogComponent, {
         // width: '750px',
@@ -269,15 +272,15 @@ export class BillsComponent implements OnInit {
   }
 
   moveKot(kot: BillRow): void {
-    const canMergeTables = this.auth.allowed('merge-tables');
+    const canMergeTables = computed(() => this.auth.allowed('merge-tables'));
     this.chooseTable(canMergeTables)
       .pipe(
         switchMap((table: Table) => this.confirmMoveKotDialog(table)),
         switchMap((table: Table) => {
-          if (this.bs.bill.kots.length === 1 && table.status) {
+          if (this.bs.bill().kots.length === 1 && table.status) {
             return this.bs.mergeTable(table);
           }
-          if (this.bs.bill.kots.length === 1 && !table.status) {
+          if (this.bs.bill().kots.length === 1 && !table.status) {
             return this.bs.moveTable(table);
           }
           if (table.status) {
@@ -302,7 +305,7 @@ export class BillsComponent implements OnInit {
     if (!isPrinted) {
       return false;
     }
-    if (this.bs.bill.voucherType === VoucherType.Void) {
+    if (this.bs.bill().voucherType === VoucherType.Void) {
       return true;
     }
     if (!this.auth.allowed('edit-printed-product')) {
diff --git a/bookie/src/app/sales/home/sales-home.component.ts b/bookie/src/app/sales/home/sales-home.component.ts
index 61cda2b..5b5c4b8 100644
--- a/bookie/src/app/sales/home/sales-home.component.ts
+++ b/bookie/src/app/sales/home/sales-home.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, computed, signal, input } from '@angular/core';
+import { Component, Signal, computed, inject, input, signal } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
@@ -47,18 +47,18 @@ export class SalesHomeComponent {
     return (x || []).map((y: SaleCategory) => ({ id: y.id, name: y.name, selected: false }));
   });
 
-  printKotAllowed(): boolean {
+  printKotAllowed = computed<boolean>(() => {
     if (!this.auth.allowed('print-kot')) {
       return false;
     }
-    if (!this.bs.bill.id) {
+    if (!this.bs.bill().id) {
       return true;
     }
-    if (this.bs.bill.voucherType !== VoucherType.Kot) {
+    if (this.bs.bill().voucherType !== VoucherType.Kot) {
       return false;
     }
     return true;
-  }
+  });
 
   printKot() {
     if (!this.printKotAllowed()) {
@@ -75,15 +75,15 @@ export class SalesHomeComponent {
     });
   }
 
-  discountAllowed(): boolean {
+  discountAllowed = computed<boolean>(() => {
     return this.auth.allowed('discount');
-  }
+  });
 
   showDiscount(): Observable<boolean | { id: string; name: string; discount: number }[]> {
     if (this.discountAllowed()) {
       const dialogRef = this.dialog.open(DiscountComponent, {
         // width: '750px',
-        data: this.customerDiscountsService.list(signal(this.bs.bill.customer?.id)),
+        data: this.customerDiscountsService.list(signal(this.bs.bill().customer?.id)),
       });
       return dialogRef.afterClosed();
     }
@@ -99,8 +99,8 @@ export class SalesHomeComponent {
   }
 
   billTypeDialog() {
-    if (this.bs.bill.voucherType !== VoucherType.Kot) {
-      return observableOf(this.bs.bill.voucherType);
+    if (this.bs.bill().voucherType !== VoucherType.Kot) {
+      return observableOf(this.bs.bill().voucherType);
     }
     return this.dialog.open(BillTypeComponent).afterClosed();
   }
@@ -125,21 +125,21 @@ export class SalesHomeComponent {
       .pipe(map((x: boolean) => (x ? reason : x)));
   }
 
-  printBillAllowed(): boolean {
+  printBillAllowed = computed<boolean>(() => {
     if (!this.auth.allowed('print-bill')) {
       return false;
     }
-    if (!this.bs.bill.id) {
+    if (!this.bs.bill().id) {
       return true;
     }
-    if (this.bs.bill.voucherType !== VoucherType.Kot && !this.auth.allowed('edit-printed-bill')) {
+    if (this.bs.bill().voucherType !== VoucherType.Kot && !this.auth.allowed('edit-printed-bill')) {
       return false;
     }
-    if (this.bs.bill.voucherType === VoucherType.Void) {
+    if (this.bs.bill().voucherType === VoucherType.Void) {
       return false;
     }
     return true;
-  }
+  });
 
   printBill() {
     if (!this.printBillAllowed()) {
@@ -174,28 +174,28 @@ export class SalesHomeComponent {
       });
   }
 
-  receivePaymentAllowed(): boolean {
+  receivePaymentAllowed = computed<boolean>(() => {
     if (!this.auth.allowed('settle-bill')) {
       return false;
     }
-    if (!this.bs.bill.id) {
+    if (!this.bs.bill().id) {
       return false;
     }
-    if (this.bs.bill.voucherType === VoucherType.Kot) {
+    if (this.bs.bill().voucherType === VoucherType.Kot) {
       return false;
     }
-    if (this.bs.bill.voucherType === VoucherType.Void) {
+    if (this.bs.bill().voucherType === VoucherType.Void) {
       return false;
     }
     return true;
-  }
+  });
 
   receivePayment() {
     if (!this.receivePaymentAllowed()) {
       return;
     }
     const amount = this.bs.amount();
-    const type = this.bs.bill.voucherType;
+    const type = this.bs.bill().voucherType;
     this.dialog
       .open(ReceivePaymentComponent, {
         data: {
@@ -223,21 +223,21 @@ export class SalesHomeComponent {
       });
   }
 
-  moveTableAllowed(): boolean {
+  moveTableAllowed = computed<boolean>(() => {
     if (!this.auth.allowed('move-table') && !this.auth.allowed('merge-tables')) {
       return false;
     }
-    if (!this.bs.bill.id) {
+    if (!this.bs.bill().id) {
       return false;
     }
     return true;
-  }
+  });
 
   moveTable() {
     if (!this.moveTableAllowed()) {
       return;
     }
-    const canMergeTables = this.auth.allowed('merge-tables');
+    const canMergeTables = computed(() => this.auth.allowed('merge-tables'));
     this.showChooseTableDialog(canMergeTables)
       .pipe(
         tap((x) => {
@@ -266,15 +266,15 @@ export class SalesHomeComponent {
       });
   }
 
-  cancelBillAllowed(): boolean {
+  cancelBillAllowed = computed<boolean>(() => {
     if (!this.auth.allowed('void-bill')) {
       return false;
     }
-    if (!this.bs.bill.id) {
+    if (!this.bs.bill().id) {
       return false;
     }
     return true;
-  }
+  });
 
   cancelBill() {
     if (!this.cancelBillAllowed()) {
@@ -322,15 +322,15 @@ export class SalesHomeComponent {
       });
   }
 
-  splitBillAllowed(): boolean {
+  splitBillAllowed = computed<boolean>(() => {
     if (!this.auth.allowed('split-bill')) {
       return false;
     }
-    if (!this.bs.bill.id) {
+    if (!this.bs.bill().id) {
       return false;
     }
     return true;
-  }
+  });
 
   showBillSplitChoices(): Observable<{ id: string; name: string; selected: boolean }[] | undefined | false> {
     return this.dialog
@@ -340,7 +340,7 @@ export class SalesHomeComponent {
       .afterClosed();
   }
 
-  showChooseTableDialog(canChooseRunning: boolean): Observable<Table | undefined | null> {
+  showChooseTableDialog(canChooseRunning: Signal<boolean>): Observable<Table | undefined | null> {
     return this.dialog
       .open(TablesDialogComponent, {
         data: {
@@ -360,7 +360,7 @@ export class SalesHomeComponent {
     obs
       .pipe(
         tap((x) => (inventories = x)),
-        switchMap(() => this.showChooseTableDialog(false)),
+        switchMap(() => this.showChooseTableDialog(signal(false))),
         tap((x) => {
           if (!x) {
             throw new Error('Please choose a table');
diff --git a/bookie/src/app/sales/pax/pax.component.html b/bookie/src/app/sales/pax/pax.component.html
index 37455d8..df23285 100644
--- a/bookie/src/app/sales/pax/pax.component.html
+++ b/bookie/src/app/sales/pax/pax.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Pax</h2>
 <mat-dialog-content>
-  <form>
+  <form (submit)="$event.preventDefault(); accept()">
     <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Pax</mat-label>
@@ -18,6 +18,6 @@
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button type="button" mat-button [mat-dialog-close]="false">Cancel</button>
   <button type="button" mat-button (click)="accept()" color="primary">Ok</button>
 </mat-dialog-actions>
diff --git a/bookie/src/app/sales/pax/pax.component.ts b/bookie/src/app/sales/pax/pax.component.ts
index 4a4667e..87028ed 100644
--- a/bookie/src/app/sales/pax/pax.component.ts
+++ b/bookie/src/app/sales/pax/pax.component.ts
@@ -1,5 +1,5 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, OnInit, inject, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@@ -16,27 +16,17 @@ export interface PaxFormData {
   styleUrls: ['./pax.component.css'],
   imports: [CdkScrollableModule, MatButtonModule, MatDialogModule, MatFormFieldModule, MatInputModule, FormField],
 })
-export class PaxComponent implements OnInit {
-  data = inject(MAT_DIALOG_DATA);
-  dialogRef = inject<MatDialogRef<PaxComponent>>(MatDialogRef);
+export class PaxComponent {
+  private data = inject<number | null>(MAT_DIALOG_DATA, { optional: true });
+  private dialogRef = inject<MatDialogRef<PaxComponent>>(MatDialogRef);
+
   formModel = signal<PaxFormData>({
-    pax: null,
+    pax: this.data ?? 0,
   });
 
   form = form(this.formModel);
 
-  constructor() {
-    // Create form
-  }
-
-  ngOnInit() {
-    this.formModel.set({
-      pax: this.data,
-    });
-  }
-
   accept(): void {
-    const pax = this.formModel().pax ?? 0;
-    this.dialogRef.close(pax);
+    this.dialogRef.close(this.formModel().pax ?? 0);
   }
 }
diff --git a/bookie/src/app/sales/quantity/quantity.component.ts b/bookie/src/app/sales/quantity/quantity.component.ts
index 9428ea5..a51c8b0 100644
--- a/bookie/src/app/sales/quantity/quantity.component.ts
+++ b/bookie/src/app/sales/quantity/quantity.component.ts
@@ -1,5 +1,5 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, OnInit, inject, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@@ -18,26 +18,17 @@ export interface QuantityFormData {
   styleUrls: ['./quantity.component.css'],
   imports: [CdkScrollableModule, MatButtonModule, MatDialogModule, MatFormFieldModule, MatInputModule, FormField],
 })
-export class QuantityComponent implements OnInit {
-  data = inject(MAT_DIALOG_DATA);
+export class QuantityComponent {
+  private data = inject<unknown>(MAT_DIALOG_DATA, { optional: true });
   private math = inject(MathService);
-  dialogRef = inject<MatDialogRef<QuantityComponent>>(MatDialogRef);
+  private dialogRef = inject<MatDialogRef<QuantityComponent>>(MatDialogRef);
+
   formModel = signal<QuantityFormData>({
-    quantity: '',
+    quantity: `${this.data ?? ''}`,
   });
 
   form = form(this.formModel);
 
-  constructor() {
-    // Create form
-  }
-
-  ngOnInit() {
-    this.formModel.set({
-      quantity: `${this.data}`,
-    });
-  }
-
   accept(): void {
     const quantity = this.math.parseAmount(this.formModel().quantity ?? '');
     this.dialogRef.close(quantity);
diff --git a/bookie/src/app/sales/reason/reason.component.ts b/bookie/src/app/sales/reason/reason.component.ts
index 72cf15b..f2a591d 100644
--- a/bookie/src/app/sales/reason/reason.component.ts
+++ b/bookie/src/app/sales/reason/reason.component.ts
@@ -26,32 +26,25 @@ export interface ReasonFormData {
   ],
 })
 export class ReasonComponent {
-  dialogRef = inject<MatDialogRef<ReasonComponent>>(MatDialogRef);
+  private dialogRef = inject<MatDialogRef<ReasonComponent>>(MatDialogRef);
   private data = inject<{
     title: string;
     reasons: string[];
   }>(MAT_DIALOG_DATA);
 
+  title = this.data.title;
+  reasons = this.data.reasons ?? [];
+  dataSource = computed(() => this.reasons);
+  displayedColumns = ['reason'];
+  selected = '';
+
   formModel = signal<ReasonFormData>({
     son: '',
   });
 
   form = form(this.formModel);
 
-  dataSource = computed(() => this.reasons);
-  title: string;
-  selected = '';
-  reasons: string[];
-  displayedColumns = ['reason'];
-
-  constructor() {
-    const data = this.data;
-
-    this.reasons = data.reasons ?? [];
-    this.title = data.title;
-  }
-
-  select(reason: string) {
+  select(reason: string): boolean {
     this.selected = reason.trim();
     return true;
   }
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 b1b1b80..9c01c59 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.ts
+++ b/bookie/src/app/sales/running-tables/running-tables.component.ts
@@ -4,7 +4,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
 
 import { Table } from '../../core/table';
@@ -23,7 +23,6 @@ export class RunningTablesComponent {
   private regimeService = inject(RegimeService);
   private dialog = inject(MatDialog);
   private router = inject(Router);
-  private route = inject(ActivatedRoute);
   private snackBar = inject(MatSnackBar);
   regimesResource = this.regimeService.list();
 
diff --git a/bookie/src/app/section-printers/section-printer.component.ts b/bookie/src/app/section-printers/section-printer.component.ts
index 7ff314c..fc03c4d 100644
--- a/bookie/src/app/section-printers/section-printer.component.ts
+++ b/bookie/src/app/section-printers/section-printer.component.ts
@@ -9,7 +9,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Printer } from '../core/printer';
 import { SectionPrinter } from '../core/section-printer';
@@ -45,7 +45,6 @@ export interface SectionPrinterFormData {
 export class SectionPrinterComponent {
   private printerService = inject(PrinterService);
   private sectionService = inject(SectionService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
diff --git a/bookie/src/app/sections/section-detail/section-detail.component.ts b/bookie/src/app/sections/section-detail/section-detail.component.ts
index 98ded58..87c38ef 100644
--- a/bookie/src/app/sections/section-detail/section-detail.component.ts
+++ b/bookie/src/app/sections/section-detail/section-detail.component.ts
@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Section } from '../../core/section';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
@@ -22,7 +22,6 @@ export interface SectionDetailFormData {
   imports: [MatButtonModule, MatFormFieldModule, MatInputModule, FormField],
 })
 export class SectionDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/sections/section-list/section-list.component.ts b/bookie/src/app/sections/section-list/section-list.component.ts
index 2d86cee..68099e6 100644
--- a/bookie/src/app/sections/section-list/section-list.component.ts
+++ b/bookie/src/app/sections/section-list/section-list.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { SectionService } from '../section.service';
 @Component({
@@ -13,7 +13,6 @@ import { SectionService } from '../section.service';
 })
 export class SectionListComponent {
   private sectionService = inject(SectionService);
-  private route = inject(ActivatedRoute);
   listResource = this.sectionService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/bookie/src/app/settings/settings.component.html b/bookie/src/app/settings/settings.component.html
index 504831f..203a353 100644
--- a/bookie/src/app/settings/settings.component.html
+++ b/bookie/src/app/settings/settings.component.html
@@ -49,5 +49,5 @@
   </mat-tab>
 </mat-tab-group>
 <footer class="footer">
-  <p>Backend: v{{ auth.user?.ver }} / Frontend: v{{ version }}</p>
+  <p>Backend: v{{ auth.user()?.ver }} / Frontend: v{{ version }}</p>
 </footer>
diff --git a/bookie/src/app/settings/settings.component.ts b/bookie/src/app/settings/settings.component.ts
index 4c3c4d8..59e0b91 100644
--- a/bookie/src/app/settings/settings.component.ts
+++ b/bookie/src/app/settings/settings.component.ts
@@ -3,13 +3,11 @@ import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
-import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
 import { environment } from '../app.environment';
@@ -33,9 +31,6 @@ import { SettingsService } from './settings.service';
   ],
 })
 export class SettingsComponent {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
-  private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   auth = inject(AuthService);
   private ser = inject(SettingsService);
diff --git a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
index 559d959..78dee37 100644
--- a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
+++ b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { ReportingLevel } from '../../core/reporting-level';
 import { SettleOption } from '../../core/settle-option';
@@ -38,7 +38,6 @@ export interface SettleOptionDetailFormData {
   ],
 })
 export class SettleOptionDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts b/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts
index aec42f0..6d8ff52 100644
--- a/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts
+++ b/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts
@@ -1,9 +1,8 @@
 import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { ReportingLevel } from '../../core/reporting-level';
 import { VoucherType } from '../../sales/bills/voucher-type';
@@ -15,9 +14,6 @@ import { SettleOptionService } from '../settle-option.service';
   imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class SettleOptionListComponent {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
-  private snackBar = inject(MatSnackBar);
   private ser = inject(SettleOptionService);
   listResource = this.ser.list();
 
diff --git a/bookie/src/app/tables/table-detail/table-detail.component.ts b/bookie/src/app/tables/table-detail/table-detail.component.ts
index 052acfd..de17713 100644
--- a/bookie/src/app/tables/table-detail/table-detail.component.ts
+++ b/bookie/src/app/tables/table-detail/table-detail.component.ts
@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Section } from '../../core/section';
 import { Table } from '../../core/table';
@@ -39,7 +39,6 @@ export interface TableDetailFormData {
 })
 export class TableDetailComponent {
   private sectionService = inject(SectionService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/tables/table-list/table-list.component.ts b/bookie/src/app/tables/table-list/table-list.component.ts
index 511a052..a0a8483 100644
--- a/bookie/src/app/tables/table-list/table-list.component.ts
+++ b/bookie/src/app/tables/table-list/table-list.component.ts
@@ -5,7 +5,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { firstValueFrom } from 'rxjs';
 
 import { Table } from '../../core/table';
@@ -17,8 +17,6 @@ import { TableService } from '../table.service';
   imports: [DragDropModule, MatButtonModule, MatIconModule, MatTableModule, RouterLink, MatToolbarModule],
 })
 export class TableListComponent {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(TableService);
   listResource = this.ser.list();
diff --git a/bookie/src/app/tax-report/tax-report.component.ts b/bookie/src/app/tax-report/tax-report.component.ts
index 5e66653..8906e35 100644
--- a/bookie/src/app/tax-report/tax-report.component.ts
+++ b/bookie/src/app/tax-report/tax-report.component.ts
@@ -7,7 +7,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ToCsvService } from '../shared/to-csv.service';
@@ -37,7 +37,6 @@ export interface TaxReportFormData {
 })
 export class TaxReportComponent {
   private taxReportService = inject(TaxReportService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
diff --git a/bookie/src/app/taxes/tax-detail/tax-detail.component.ts b/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
index 65b1232..8b4d78c 100644
--- a/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
+++ b/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
@@ -7,7 +7,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 
 import { Regime } from '../../core/regime';
@@ -30,7 +30,6 @@ export interface TaxDetailFormData {
 })
 export class TaxDetailComponent {
   private regimeService = inject(RegimeService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/taxes/tax-list/tax-list.component.ts b/bookie/src/app/taxes/tax-list/tax-list.component.ts
index 98c859c..323d8ce 100644
--- a/bookie/src/app/taxes/tax-list/tax-list.component.ts
+++ b/bookie/src/app/taxes/tax-list/tax-list.component.ts
@@ -3,7 +3,7 @@ import { Component, inject, computed } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { TaxService } from '../tax.service';
 @Component({
@@ -14,7 +14,6 @@ import { TaxService } from '../tax.service';
 })
 export class TaxListComponent {
   private taxService = inject(TaxService);
-  private route = inject(ActivatedRoute);
   listResource = this.taxService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
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 d3f345c..7f321f4 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
@@ -13,7 +13,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { MenuCategory } from '../../core/menu-category';
@@ -67,7 +67,6 @@ export interface TemporalSkuFormData {
 export class TemporalProductDetailComponent {
   private menuCategoryService = inject(MenuCategoryService);
   private saleCategoryService = inject(SaleCategoryService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -156,14 +155,6 @@ export class TemporalProductDetailComponent {
     return !d ? null : moment(d).format('DD-MMM-YYYY');
   }
 
-  // showItem(item: TemporalProduct) {
-  //   this.item = item;
-  //   this.selectedProduct = this.item.products[0];
-  //   this.selectedSku = this.item.skus[0];
-
-  //
-  //     // }
-
   constructor() {
     afterNextRender(() => {
       this.productForm().focusBoundControl();
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 aeb0e1b..38fa789 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
@@ -7,7 +7,7 @@
     </mat-form-field>
     <mat-form-field class="flex-auto basis-30">
       <mat-label>Menu Category</mat-label>
-      <mat-select [formField]="form.menuCategory" (selectionChange)="filterMcOn($event.value)">
+      <mat-select [formField]="form.menuCategory">
         <mat-option>-- All Products --</mat-option>
         @for (mc of menuCategoriesResource.value(); track mc) {
           <mat-option [value]="mc.id">
@@ -18,7 +18,7 @@
     </mat-form-field>
     <mat-form-field class="flex-auto basis-30">
       <mat-label>Sale Category</mat-label>
-      <mat-select [formField]="form.saleCategory" (selectionChange)="filterScOn($event.value)">
+      <mat-select [formField]="form.saleCategory">
         <mat-option>-- All Products --</mat-option>
         @for (mc of saleCategoriesResource.value(); track mc) {
           <mat-option [value]="mc.id">
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 52d8c14..7386d76 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
@@ -25,7 +25,6 @@ export interface TemporalProductListFormData {
   styleUrls: ['./temporal-product-list.component.css'],
   imports: [
     CurrencyPipe,
-    // DecimalPipe,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
@@ -45,9 +44,6 @@ export class TemporalProductListComponent {
   menuCategoriesResource = this.menuCategoryService.list();
   listResource = this.temporalProductService.list();
 
-  menuCategoryFilter = signal<string>('');
-  saleCategoryFilter = signal<string>('');
-
   formModel = signal<TemporalProductListFormData>({
     filter: '',
     menuCategory: '',
@@ -56,6 +52,9 @@ export class TemporalProductListComponent {
 
   form = form(this.formModel);
 
+  menuCategoryFilter = computed(() => this.formModel().menuCategory ?? '');
+  saleCategoryFilter = computed(() => this.formModel().saleCategory ?? '');
+
   filterSignal = computed(() => this.formModel().filter);
   debouncedFilter = debounced(this.filterSignal, 150);
 
@@ -79,12 +78,4 @@ export class TemporalProductListComponent {
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['product', 'sku', 'price', 'menuCategory', 'saleCategory', 'info'];
-
-  filterMcOn(val: string) {
-    this.menuCategoryFilter.set(val);
-  }
-
-  filterScOn(val: string) {
-    this.saleCategoryFilter.set(val);
-  }
 }
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 0ba1d77..cab2611 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
@@ -10,7 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { MenuCategoryService } from '../menu-category/menu-category.service';
@@ -43,7 +43,6 @@ export interface UpdateProductPricesFormData {
 })
 export class UpdateProductPricesComponent {
   private menuCategoryService = inject(MenuCategoryService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private snackBar = inject(MatSnackBar);
diff --git a/bookie/src/app/users/user-detail/user-detail.component.ts b/bookie/src/app/users/user-detail/user-detail.component.ts
index 2905693..fced545 100644
--- a/bookie/src/app/users/user-detail/user-detail.component.ts
+++ b/bookie/src/app/users/user-detail/user-detail.component.ts
@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { User } from '../../core/user';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
@@ -36,7 +36,6 @@ export interface UserDetailFormData {
   ],
 })
 export class UserDetailComponent {
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
diff --git a/bookie/src/app/users/user-list/user-list.component.ts b/bookie/src/app/users/user-list/user-list.component.ts
index f3b1893..224b48b 100644
--- a/bookie/src/app/users/user-list/user-list.component.ts
+++ b/bookie/src/app/users/user-list/user-list.component.ts
@@ -2,7 +2,7 @@ import { Component, computed, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { LocalTimePipe } from '../../shared/local-time.pipe';
 import { UserService } from '../user.service';
@@ -14,7 +14,6 @@ import { UserService } from '../user.service';
 })
 export class UserListComponent {
   private userService = inject(UserService);
-  private route = inject(ActivatedRoute);
   listResource = this.userService.list();
 
   dataSource = computed(() => this.listResource.value() ?? []);
diff --git a/lint.sh b/lint.sh
index 40df261..8c74963 100755
--- a/lint.sh
+++ b/lint.sh
@@ -10,7 +10,7 @@ npx ng lint --fix
 
 cd "$parent_path/barker" || exit
 uv run ruff format .
-uv run ruff check .
+uv run ruff check . --fix
 uv run bandit --recursive barker
 uv run bandit --recursive .
 uv run safety check
diff --git a/version_bump.sh b/version_bump.sh
index 3704ad2..4eb4d53 100755
--- a/version_bump.sh
+++ b/version_bump.sh
@@ -31,6 +31,7 @@ then
   sed --in-place --regexp-extended 's/"([0-9]{1,2}.[0-9]+.[0-9]+)"/"'"$new_version"'"/g' barker/barker/__version__.py
   git add barker/barker/__version__.py
   sed --in-place --regexp-extended 's/version = "([0-9]{1,2}.[0-9]+.[0-9]+)"/version = "'"$new_version"'"/g' barker/pyproject.toml
+  (cd barker && uv lock)
   git add barker/pyproject.toml
   sed --in-place --regexp-extended 's/version = "([0-9]{1,2}.[0-9]+.[0-9]+)"/version = "'"$new_version"'"/g' frank/pyproject.toml
   git add frank/pyproject.toml
@@ -45,4 +46,5 @@ else
   echo "Usage: $0 <major|minor|patch|version_string>"
   exit 1
 fi
+git push
 git push --tags