cahsier

Author: lexCoder2

.github/copilot-instructions.md

@@ -76,7 +76,8 @@ export class ExampleComponent implements OnInit, OnDestroy {
 - **Cart State**: Managed by `CartStateService` with signals (e.g., `cartCount()`, `cartTotal()`)
 - **Search State**: `SearchStateService` shares search query across components
 - **User State**: `AuthService.getCurrentUser()` returns current user or null
-- **Register State**: `RegisterService` manages active register (cashiers must open register)
+- **Register State**: `RegisterService` manages active register with device binding (cashiers must open register)
+- **Device Identification**: `DeviceService` generates unique device fingerprints for register binding
 
 ## Common Workflows
 
@@ -89,6 +90,49 @@ export class ExampleComponent implements OnInit, OnDestroy {
 5. **Add route** in `src/app/app.routes.ts` if needed
 6. **Apply theme styles** using mixins from `_theme.scss`
 
+### Creating Reusable Modal Components
+
+**Pattern Example: OpenRegisterComponent**
+
+1. **Create component** with `@Output()` events for parent communication:
+
+```typescript
+@Output() registerOpened = new EventEmitter<void>();
+@Output() cancelled = new EventEmitter<void>();
+```
+
+2. **Add to parent component imports**:
+
+```typescript
+imports: [OpenRegisterComponent, ...]
+```
+
+3. **Use signals for modal state**:
+
+```typescript
+showOpenRegisterModal = signal<boolean>(false);
+```
+
+4. **Template usage**:
+
+```html
+<app-open-register
+  *ngIf="showOpenRegisterModal()"
+  (registerOpened)="onRegisterOpened()"
+  (cancelled)="closeRegisterModal()"
+>
+</app-open-register>
+```
+
+5. **Handle events in parent**:
+
+```typescript
+onRegisterOpened(): void {
+  this.showOpenRegisterModal.set(false);
+  // Additional logic after register opens
+}
+```
+
 ### Adding Backend API Endpoint
 
 1. **Create/update Mongoose model** in `server/models/{Model}.js`
@@ -111,13 +155,56 @@ export class ExampleComponent implements OnInit, OnDestroy {
 - Dashboard shows incomplete products card for follow-up editing
 - Always set `active: true` and `available: true` for newly created products
 
+### QR Code Generation & Thermal Printing
+
+- **QR Badge Generation**: `settings.component.ts` handles employee QR badge creation
+- **Display Size**: 150x150 pixels for on-screen preview (`generateQrCode()`)
+- **Print Size**: 120x120 pixels optimized for 58mm/80mm thermal printers (`printQrBadge()`)
+- **Badge Layout**: Simplified HTML/CSS with monospace fonts, minimal padding, no shadows for thermal printing
+- **QZ Tray Integration**: Uses QZ Tray service for direct thermal printer communication
+
 ### Scale Integration
 
 - `ScaleService.connectScale()` uses Web Serial API (Chrome/Edge only)
 - Products with `requiresScale: true` prompt for weight entry
 - Weight modal displays current scale reading in real-time
 - Manual weight entry fallback if scale not connected
 
+### Register Management & Device Binding
+
+**OpenRegisterComponent** (`open-register/`) - Dedicated component for opening registers with smart device binding:
+
+- **Device Auto-Selection**: Automatically selects register bound to current device using `DeviceService`
+- **Role-Based Access**:
+  - Admins/Managers: Can select any register, create new registers, manage all devices
+  - Cashiers/Employees: Can only open registers bound to their device or unbound registers
+- **Device Binding**: Registers are automatically bound to devices when opened (stored in `deviceId` and `deviceName`)
+- **Visual Indicators**: Shows which registers are linked to current device (⭐) or other devices (🔒)
+- **Used in**: POS component and Cashier component
+- **Backend API**: `/api/registers/available`, `/api/registers/device/:deviceId`
+
+**Implementation Pattern:**
+
+```typescript
+// In parent component
+showOpenRegisterModal = signal<boolean>(false);
+
+openRegisterModal(): void {
+  this.showOpenRegisterModal.set(true);
+}
+
+onRegisterOpened(): void {
+  this.showOpenRegisterModal.set(false);
+  // Register opened successfully, component auto-focuses input
+}
+
+// In template
+<app-open-register
+  (registerOpened)="onRegisterOpened()"
+  (cancelled)="closeRegisterModal()"
+></app-open-register>
+```
+
 ## Important Patterns
 
 ### ViewChild References
@@ -146,7 +233,7 @@ confirmAdd(): void {
 
 ### Calculator Component (Keyboard Support)
 
-The calculator component supports full keyboard input for faster data entry:
+The calculator component (`calculator/`) supports full keyboard input for faster data entry with signals:
 
 **Keyboard Shortcuts:**
 
@@ -165,28 +252,13 @@ The calculator component supports full keyboard input for faster data entry:
 - Multiply button spans 2 columns, styled with `$warning` color
 - Add button spans 2 columns, styled with `$success` color
 
-**Implementation Pattern:**
+**Signals Usage:**
 
 ```typescript
-// Add keyboard handler to container
-<div #calculatorContainer class="calculator" tabindex="-1" (keydown)="onKeydown($event)">
-
-// Handle keyboard events
-onKeydown(event: KeyboardEvent): void {
-  if (event.key >= '0' && event.key <= '9') {
-    event.preventDefault();
-    this.appendNumber(event.key);
-  }
-  else if (event.key === 'Enter' || event.key === '+') {
-    event.preventDefault();
-    this.handleEnter(); // Adds item or confirms multiply
-  }
-  else if (event.key === '*') {
-    event.preventDefault();
-    this.multiplyItem();
-  }
-  // ... other key handlers
-}
+display = signal<string>("0");
+isMultiplying = signal<boolean>(false);
+multiplyMode = signal<"add" | "update" | null>(null);
+pendingMultiplyValue = signal<number | null>(null);
 ```
 
 ### RxJS Cleanup
@@ -220,7 +292,7 @@ this.toastService.show("Warning", "warning");
 - **Sale**: `saleNumber`, `items[]`, `subtotal`, `discount`, `tax`, `total`, `paymentMethod`, `cashier`, `register`, `status`, `isInternal`
 - **Cart**: `user`, `items[]`, `register` (carts are session-specific)
 - **User**: `username`, `fullName`, `role`, `permissions[]`, `active`
-- **Register**: `name`, `location`, `status` ('open', 'closed'), `openedBy`, `openingBalance`, `currentBalance`
+- **Register**: `name`, `location`, `status` ('open', 'closed'), `openedBy`, `openingBalance`, `currentBalance`, `deviceId`, `deviceName` (device binding)
 
 ## Security & Permissions
 

src/app/components/calculator/calculator.component.ts

@@ -97,6 +97,10 @@ export class CalculatorComponent implements AfterViewInit {
   onAddItem(): void {
     const value = parseFloat(this.display());
     if (!isNaN(value) && value > 0) {
+      if (this.isMultiplying()) {
+        this.confirmMultiply();
+        return;
+      }
       this.addItem.emit({ value });
       this.display.set("0");
     }
@@ -176,38 +180,4 @@ export class CalculatorComponent implements AfterViewInit {
   handleMultiply(): void {
     this.multiplyItem();
   }
-
-  // Keyboard event handler
-  onKeydown(event: KeyboardEvent): void {
-    // Numbers 0-9
-    if (event.key >= "0" && event.key <= "9") {
-      event.preventDefault();
-      this.appendNumber(event.key);
-    }
-    // Decimal point
-    else if (event.key === "." || event.key === ",") {
-      event.preventDefault();
-      this.appendDecimal();
-    }
-    // Backspace
-    else if (event.key === "Backspace") {
-      event.preventDefault();
-      this.backspace();
-    }
-    // Clear
-    else if (event.key === "Escape" || event.key === "c" || event.key === "C") {
-      event.preventDefault();
-      this.clear();
-    }
-    // Enter or + (add item or confirm multiply)
-    else if (event.key === "Enter" || event.key === "+") {
-      event.preventDefault();
-      this.handleEnter();
-    }
-    // * (multiply)
-    else if (event.key === "*") {
-      event.preventDefault();
-      this.confirmMultiply();
-    }
-  }
 }

src/app/components/cashier/cashier.component.html

@@ -3,9 +3,10 @@
   <div class="register-warning" *ngIf="!currentRegister()">
     <i class="fas fa-exclamation-triangle"></i>
     <span>{{ "CASHIER.REGISTER_WARNING" | translate }}</span>
-    <a routerLink="/registers" class="open-register-link">
+    <button class="open-register-btn" (click)="openRegisterModal()">
+      <i class="fas fa-door-open"></i>
       {{ "CASHIER.OPEN_REGISTER" | translate }}
-    </a>
+    </button>
   </div>
 
   <div class="cashier-content">
@@ -471,3 +472,17 @@ <h2>
     </div>
   </div>
 </div>
+
+<!-- Open Register Modal -->
+<div
+  class="modal-overlay"
+  *ngIf="showOpenRegisterModal()"
+  (click)="closeRegisterModal()"
+>
+  <div (click)="$event.stopPropagation()">
+    <app-open-register
+      (registerOpened)="onRegisterOpened()"
+      (cancelled)="closeRegisterModal()"
+    ></app-open-register>
+  </div>
+</div>

src/app/components/cashier/cashier.component.scss

@@ -6,7 +6,7 @@
 .cashier-container {
   padding: 0.75rem;
   background-color: var(--bg-secondary);
-  height: 100%;
+  height: calc(100% - 25px);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -36,18 +36,33 @@
       flex: 1;
     }
 
-    .open-register-link {
-      color: $primary;
-      text-decoration: none;
-      font-weight: $font-weight-semibold;
+    .open-register-btn {
+      display: flex;
+      align-items: center;
+      gap: $spacing-xs;
       padding: $spacing-xs $spacing-md;
       background: $white;
+      color: $primary;
+      border: 1px solid $primary;
       border-radius: $radius-md;
+      font-weight: $font-weight-semibold;
+      font-size: $font-size-sm;
+      cursor: pointer;
       transition: all 0.2s ease;
 
+      i {
+        font-size: $font-size-base;
+      }
+
       &:hover {
         background: $primary;
         color: $white;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba($primary, 0.3);
+      }
+
+      &:active {
+        transform: translateY(0);
       }
     }
   }

src/app/components/cashier/cashier.component.ts

@@ -29,19 +29,19 @@ import {
 } from "../calculator/calculator.component";
 import { TranslatePipe } from "../../pipes/translate.pipe";
 import { CurrencyPipe } from "../../pipes/currency.pipe";
-import { RouterLink } from "@angular/router";
 import { environment } from "@environments/environment";
+import { OpenRegisterComponent } from "../open-register/open-register.component";
 
 @Component({
   selector: "app-cashier",
   standalone: true,
   imports: [
     CommonModule,
     FormsModule,
-    RouterLink,
     CalculatorComponent,
     TranslatePipe,
     CurrencyPipe,
+    OpenRegisterComponent,
   ],
   templateUrl: "./cashier.component.html",
   styleUrls: ["./cashier.component.scss"],
@@ -86,6 +86,7 @@ export class CashierComponent implements OnInit, AfterViewInit {
 
   // Register status
   currentRegister = signal<Register | null>(null);
+  showOpenRegisterModal = signal<boolean>(false);
 
   private itemIdCounter = 0;
   private deleteKeyPressCount = 0;
@@ -106,6 +107,20 @@ export class CashierComponent implements OnInit, AfterViewInit {
     target?.blur();
   }
 
+  openRegisterModal(): void {
+    this.showOpenRegisterModal.set(true);
+  }
+
+  closeRegisterModal(): void {
+    this.showOpenRegisterModal.set(false);
+  }
+
+  onRegisterOpened(): void {
+    this.closeRegisterModal();
+    // Focus calculator after register is opened
+    setTimeout(() => this.calculator?.focusCalculator(), 300);
+  }
+
   constructor(
     private saleService: SaleService,
     private cartService: CartService,

src/app/components/dashboard/dashboard.component.scss

@@ -3,7 +3,7 @@
 .dashboard-container {
   padding: 2rem;
   background-color: var(--bg-secondary);
-  min-height: calc(100vh - 60px);
+  min-height: calc(100vh - 65px);
   overflow-y: auto;
 
   .dashboard-header {

src/app/components/inventory/inventory.component.scss

@@ -4,7 +4,7 @@
   padding: 0 $spacing-sm;
   max-width: 1500px;
   margin: 0 auto;
-  min-height: 100%;
+  height: calc(100% - 65px);
   border-radius: 0;
 }
 

src/app/components/layout/layout.component.scss

@@ -2,7 +2,7 @@
 
 .app-layout {
   display: flex;
-  height: 100vh;
+  height: calc(100vh - 70px);
   overflow: hidden;
   background: var(--bg-primary);
 }

src/app/components/login/login.component.scss

@@ -3,7 +3,7 @@
 .login-container {
   display: flex;
   align-items: stretch;
-  min-height: 100vh;
+  height: calc(100% - 65px);
   background: var(--bg-primary);
 
   // Mobile: constrain to 100vh max