keyboard sale cash cashier

Author: lexCoder2

eslint.config.js

@@ -31,6 +31,8 @@ module.exports = defineConfig([
           style: "kebab-case",
         },
       ],
+      "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-explicit-any": "warn",
     },
   },
   {

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

@@ -183,12 +183,12 @@ <h3>
             <span>{{ "CASHIER.PAYMENTS.CARD" | translate }}</span>
           </button>
           <button
-            class="payment-btn transfer"
-            (click)="completeSale('transfer')"
+            class="payment-btn internal"
+            (click)="completeSale('internal')"
             [disabled]="items().length === 0 || isProcessing()"
           >
-            <i class="fas fa-exchange-alt"></i>
-            <span>{{ "CASHIER.PAYMENTS.TRANSFER" | translate }}</span>
+            <i class="fas fa-building"></i>
+            <span>{{ "CASHIER.PAYMENTS.INTERNAL" | translate }}</span>
           </button>
         </div>
       </div>
@@ -211,14 +211,14 @@ <h2>
               class="fas"
               [class.fa-money-bill-wave]="selectedPaymentMethod() === 'cash'"
               [class.fa-credit-card]="selectedPaymentMethod() === 'card'"
-              [class.fa-exchange-alt]="selectedPaymentMethod() === 'transfer'"
+              [class.fa-building]="selectedPaymentMethod() === 'internal'"
             ></i>
             {{
               selectedPaymentMethod() === "cash"
                 ? ("CASHIER.PAYMENT.TITLE.CASH" | translate)
                 : selectedPaymentMethod() === "card"
                   ? ("CASHIER.PAYMENT.TITLE.CARD" | translate)
-                  : ("CASHIER.PAYMENT.TITLE.TRANSFER" | translate)
+                  : ("CASHIER.PAYMENT.TITLE.INTERNAL" | translate)
             }}
           </h2>
           <button class="close-btn" (click)="cancelPayment()">
@@ -237,47 +237,26 @@ <h2>
           <!-- Cash Payment Form -->
           @if (selectedPaymentMethod() === "cash") {
             <div class="cash-payment">
-              <div class="form-group">
-                <label for="cashReceived">{{
-                  "CASHIER.PAYMENT.CASH_RECEIVED" | translate
-                }}</label>
-                <input
-                  #cashReceivedInput
-                  id="cashReceived"
-                  type="number"
-                  step="0.01"
-                  min="0"
-                  [(ngModel)]="cashReceived"
-                  (ngModelChange)="onCashReceivedChange()"
-                  placeholder="{{
-                    'CASHIER.PAYMENT.CASH_RECEIVED' | translate
-                  }}"
-                  class="cash-input"
-                  [class.invalid]="
-                    cashReceived() && parseFloat(cashReceived()) < total()
-                  "
-                />
-              </div>
-
-              @if (change() > 0) {
-                <div class="change-display">
-                  <span class="change-label">{{
-                    "CASHIER.PAYMENT.CHANGE" | translate
-                  }}</span>
-                  <span class="change-value">{{ change() | appCurrency }}</span>
-                </div>
-              }
+              <!-- Number Keyboard -->
+              <app-number-keyboard
+                (valueChange)="onKeyboardInput($event)"
+              ></app-number-keyboard>
 
-              @if (cashReceived() && parseFloat(cashReceived()) < total()) {
-                <div class="error-message">
-                  <i class="fas fa-exclamation-triangle"></i>
-                  {{ "CASHIER.PAYMENT.AMOUNT_TOO_LOW" | translate }}
-                </div>
-              }
+              <div
+                class="change-display"
+                [class.insufficient]="
+                  !cashReceived() || parseFloat(cashReceived()) < total()
+                "
+              >
+                <span class="change-label">{{
+                  "CASHIER.PAYMENT.CHANGE" | translate
+                }}</span>
+                <span class="change-value">{{ change() | appCurrency }}</span>
+              </div>
             </div>
           }
 
-          <!-- Card/Transfer Confirmation -->
+          <!-- Card/Internal Confirmation -->
           @if (selectedPaymentMethod() !== "cash") {
             <div class="confirmation-message">
               <i class="fas fa-check-circle"></i>

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

@@ -762,12 +762,12 @@
           }
         }
 
-        &.transfer {
-          background: $info;
+        &.internal {
+          background: $warning;
           color: white;
 
           &:hover:not(:disabled) {
-            background: color.adjust($info, $lightness: -10%);
+            background: color.adjust($warning, $lightness: -10%);
           }
         }
       }
@@ -801,7 +801,7 @@
     background: white;
     border-radius: 16px;
     width: 90%;
-    max-width: 500px;
+    max-width: 600px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
     animation: slideUp 0.3s ease-out;
 
@@ -817,7 +817,7 @@
     }
 
     .modal-header {
-      padding: 2rem;
+      padding: $spacing-sm;
       border-bottom: 2px solid $secondary-dark;
       display: flex;
       justify-content: space-between;
@@ -865,17 +865,17 @@
       }
     }
     .modal-body {
-      padding: 2rem;
+      padding: $spacing-md;
       background: $neumorphic-surface;
 
       .sale-total {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 1.5rem;
+        padding: $spacing-md $spacing-lg;
         background: $white;
         border-radius: 12px;
-        margin-bottom: 2rem;
+        margin-bottom: $spacing-md;
 
         .label {
           font-size: 1.25rem;
@@ -891,41 +891,13 @@
       }
 
       .cash-payment {
-        .form-group {
-          margin-bottom: 1.5rem;
-
-          label {
-            display: block;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 0.5rem;
-            font-size: 1rem;
-          }
-
-          .cash-input {
-            width: 100%;
-            padding: 1rem;
-            border: 2px solid var(--border-color);
-            border-radius: 8px;
-            font-size: 1.5rem;
-            font-weight: 600;
-            transition: all 0.2s;
-
-            &:focus {
-              outline: none;
-              border-color: $primary;
-              box-shadow: 0 0 0 3px rgba($primary, 0.1);
-            }
-
-            &.invalid {
-              border-color: $danger;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
 
-              &:focus {
-                border-color: $danger;
-                box-shadow: 0 0 0 3px rgba($danger, 0.1);
-              }
-            }
-          }
+        app-number-keyboard {
+          display: block;
+          width: 100%;
         }
 
         .change-display {
@@ -937,17 +909,33 @@
           border: 2px solid $success;
           border-radius: 12px;
           margin-bottom: 1rem;
+          transition: all 0.3s ease;
 
           .change-label {
             font-size: 1.25rem;
             font-weight: 600;
             color: $success;
+            transition: color 0.3s ease;
           }
 
           .change-value {
             font-size: 2rem;
             font-weight: 700;
             color: $success;
+            transition: color 0.3s ease;
+          }
+
+          &.insufficient {
+            background: rgba($danger, 0.1);
+            border-color: $danger;
+
+            .change-label {
+              color: $danger;
+            }
+
+            .change-value {
+              color: $danger;
+            }
           }
         }
 
@@ -987,7 +975,7 @@
     }
 
     .modal-footer {
-      padding: 1.5rem 2rem;
+      padding: 1rem 2rem;
       border-top: 1px solid var(--border-color);
       display: flex;
       gap: 1rem;

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

@@ -27,6 +27,10 @@ import {
   CalculatorAddEvent,
   CalculatorMultiplyConfirmEvent,
 } from "../calculator/calculator.component";
+import {
+  NumberKeyboardComponent,
+  NumberKeyboardInputEvent,
+} from "../number-keyboard/number-keyboard.component";
 import { TranslatePipe } from "../../pipes/translate.pipe";
 import { CurrencyPipe } from "../../pipes/currency.pipe";
 import { environment } from "@environments/environment";
@@ -39,6 +43,7 @@ import { OpenRegisterComponent } from "../open-register/open-register.component"
     CommonModule,
     FormsModule,
     CalculatorComponent,
+    NumberKeyboardComponent,
     TranslatePipe,
     CurrencyPipe,
     OpenRegisterComponent,
@@ -83,7 +88,7 @@ export class CashierComponent implements OnInit, AfterViewInit {
   selectedItemId = signal<number | null>(null);
 
   showPaymentModal = signal<boolean>(false);
-  selectedPaymentMethod = signal<"cash" | "card" | "transfer" | null>(null);
+  selectedPaymentMethod = signal<"cash" | "card" | "internal" | null>(null);
   cashReceived = signal<string>("");
   change = signal<number>(0);
 
@@ -844,7 +849,7 @@ export class CashierComponent implements OnInit, AfterViewInit {
     }
   }
 
-  completeSale(paymentMethod: "cash" | "card" | "transfer"): void {
+  completeSale(paymentMethod: "cash" | "card" | "internal"): void {
     // Check if register is open
     if (!this.currentRegister()) {
       this.toastService.show(
@@ -889,6 +894,11 @@ export class CashierComponent implements OnInit, AfterViewInit {
     }
   }
 
+  onKeyboardInput(event: NumberKeyboardInputEvent): void {
+    this.cashReceived.set(event.value);
+    this.onCashReceivedChange();
+  }
+
   cancelPayment(): void {
     this.showPaymentModal.set(false);
     this.selectedPaymentMethod.set(null);
@@ -940,6 +950,7 @@ export class CashierComponent implements OnInit, AfterViewInit {
           : {},
       status: "completed" as const,
       register: register?._id,
+      isInternal: paymentMethod === "internal",
     };
 
     this.saleService.createSale(sale).subscribe({

src/app/components/layout/layout.component.html

@@ -22,6 +22,20 @@
     <!-- Global Search Component -->
     <app-global-search></app-global-search>
 
+    <!-- Print Receipt Toggle -->
+    <div class="header-print-toggle">
+      <label class="print-toggle-label">
+        <input
+          type="checkbox"
+          [(ngModel)]="printReceiptsEnabled"
+          (ngModelChange)="onPrintToggleChange()"
+          class="print-checkbox"
+        />
+        <span class="toggle-slider-header"></span>
+        <i class="fas fa-receipt toggle-icon"></i>
+      </label>
+    </div>
+
     <button class="user-swap" (click)="switchUser()">
       <i class="fa-solid fa-people-arrows"></i>
     </button>