layout calculator

Author: lexCoder2

src/app/components/calculator/calculator.component.html

@@ -1,5 +1,5 @@
 <div #calculatorContainer class="calculator" tabindex="-1">
-  <div class="display">
+  <div class="display" (dblclick)="selectAll()" [class.selected]="isSelected()">
     <ng-container *ngIf="isMultiplying()">
       <div class="multiply-label">
         <span *ngIf="multiplyMode() === 'add'">{{
@@ -22,6 +22,13 @@
     <ng-container *ngIf="!isMultiplying()">
       <span class="display-value">{{ display() }}</span>
     </ng-container>
+    <button
+      class="select-all-btn"
+      (click)="selectAll(); blurButton($event)"
+      title="Select All"
+    >
+      <i class="fas fa-text-width"></i>
+    </button>
   </div>
 
   <div class="calculator-grid">

src/app/components/calculator/calculator.component.scss

@@ -18,6 +18,25 @@
   justify-content: flex-end;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
   border-radius: $radius-3xl;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  padding-right: 4rem;
+  transition: all 0.3s ease;
+
+  &.selected {
+    background: rgba($primary, 0.15);
+    box-shadow:
+      inset 0 2px 8px rgba(0, 0, 0, 0.2),
+      0 0 0 2px rgba($primary, 0.5);
+    animation: pulse-selection 1s ease-in-out infinite;
+
+    .display-value,
+    .quantity-display {
+      color: $primary;
+      animation: text-pulse 1s ease-in-out infinite;
+    }
+  }
 
   .multiply-label {
     font-size: 0.875rem;
@@ -30,6 +49,7 @@
     font-size: 2rem;
     font-weight: 700;
     color: $primary;
+    transition: color 0.3s ease;
   }
 
   .display-separator {
@@ -43,6 +63,42 @@
     color: var(--text-primary);
     word-break: break-all;
     text-align: right;
+    flex: 1;
+    transition: color 0.3s ease;
+  }
+
+  .select-all-btn {
+    position: absolute;
+    right: $spacing-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1rem;
+    padding: $spacing-xs;
+    cursor: pointer;
+    border-radius: $radius-md;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+      color: $primary;
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    &:active {
+      transform: translateY(-50%) scale(0.95);
+    }
+
+    i {
+      font-size: 0.875rem;
+    }
   }
 }
 
@@ -195,3 +251,27 @@
     }
   }
 }
+
+@keyframes pulse-selection {
+  0%,
+  100% {
+    box-shadow:
+      inset 0 2px 8px rgba(0, 0, 0, 0.2),
+      0 0 0 2px rgba($primary, 0.5);
+  }
+  50% {
+    box-shadow:
+      inset 0 2px 8px rgba(0, 0, 0, 0.2),
+      0 0 0 2px rgba($primary, 0.8);
+  }
+}
+
+@keyframes text-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}

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

@@ -45,6 +45,7 @@ export class CalculatorComponent implements AfterViewInit {
   isMultiplying = signal<boolean>(false);
   multiplyMode = signal<"add" | "update" | null>(null);
   pendingMultiplyValue = signal<number | null>(null);
+  isSelected = signal<boolean>(false);
 
   ngAfterViewInit(): void {
     setTimeout(() => this.focusCalculator(), 100);
@@ -63,16 +64,20 @@ export class CalculatorComponent implements AfterViewInit {
 
   appendNumber(num: string): void {
     const current = this.display();
-    if (current === "0") {
+    if (current === "0" || this.isSelected()) {
       this.display.set(num);
+      this.isSelected.set(false);
     } else {
       this.display.set(current + num);
     }
   }
 
   appendDecimal(): void {
     const current = this.display();
-    if (!current.includes(".")) {
+    if (this.isSelected()) {
+      this.display.set("0.");
+      this.isSelected.set(false);
+    } else if (!current.includes(".")) {
       this.display.set(current + ".");
     }
   }
@@ -180,4 +185,10 @@ export class CalculatorComponent implements AfterViewInit {
   handleMultiply(): void {
     this.multiplyItem();
   }
+
+  // Public method to select all display text
+  selectAll(): void {
+    // Mark text as selected - next input will replace
+    this.isSelected.set(true);
+  }
 }

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

@@ -63,7 +63,11 @@ <h3>
         </div>
 
         <div class="items-list" *ngIf="items().length > 0; else noItems">
-          <div class="item-row" *ngFor="let item of items()">
+          <div
+            class="item-row"
+            *ngFor="let item of items()"
+            [class.selected]="selectedItemId() === item.id"
+          >
             <div class="item-actions">
               <button
                 class="qty-btn decrease"

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

@@ -302,40 +302,89 @@
       gap: 0;
       flex: 1;
       min-height: 0;
+      max-height: 60vh;
       border: 1px solid $border-light;
       border-radius: 8px;
-      overflow: hidden;
+      position: relative;
+
+      // Custom scrollbar styling
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: var(--bg-secondary);
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: $primary;
+        border-radius: 4px;
+        transition: background 0.3s ease;
+
+        &:hover {
+          background: darken($primary, 10%);
+        }
+      }
+
+      // Scroll indicator gradient at bottom
+      &::after {
+        content: "";
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 40px;
+        background: linear-gradient(
+          to top,
+          rgba(255, 255, 255, 0.95) 0%,
+          rgba(255, 255, 255, 0.7) 50%,
+          rgba(255, 255, 255, 0) 100%
+        );
+        pointer-events: none;
+        z-index: 1;
+      }
 
       .item-row {
         display: flex;
         align-items: center;
-        padding: 0.75rem 0.5rem;
+        padding: 0.5rem 0.5rem;
         background: white;
         border-bottom: 1px solid $border-light;
         transition: all 0.2s;
         cursor: pointer;
         gap: 0.5rem;
+        min-height: 60px;
 
         &:hover {
           background: var(--bg-tertiary);
         }
 
+        &.selected {
+          background: rgba($primary, 0.1);
+          border-left: 3px solid $primary;
+          padding-left: calc(0.5rem - 3px);
+
+          .item-info {
+            font-weight: 500;
+          }
+        }
+
         &:last-child {
           border-bottom: none;
         }
 
         .item-info {
           display: flex;
           flex-direction: column;
-          gap: 0.25rem;
+          gap: 0.15rem;
           cursor: pointer;
           flex: 1;
           min-width: 0;
           padding: 0;
           border-radius: 0;
           transition: background 0.2s;
           position: relative;
-
           &:hover {
             background: none;
           }
@@ -361,21 +410,21 @@
             gap: 0.25rem;
             order: -1;
             flex-wrap: wrap;
-            margin-bottom: 0.25rem;
+            margin-bottom: 0.15rem;
 
             .item-quantity {
-              font-size: 0.8rem;
+              font-size: 0.75rem;
               font-weight: 600;
               color: var(--text-secondary);
             }
 
             .item-unit-price {
-              font-size: 0.7rem;
+              font-size: 0.65rem;
               color: var(--text-muted);
             }
 
             .item-price {
-              font-size: 1rem;
+              font-size: 0.95rem;
               font-weight: 700;
               color: var(--text-primary);
               margin-left: auto;
@@ -385,10 +434,10 @@
           .item-details {
             display: flex;
             flex-direction: column;
-            gap: 0.15rem;
-            font-size: 0.7rem;
+            gap: 0.1rem;
+            font-size: 0.65rem;
             color: var(--text-muted);
-            margin-top: 0.05rem;
+            margin-top: 0;
 
             .item-description,
             .item-weight {
@@ -738,7 +787,7 @@
   justify-content: center;
   z-index: 2000;
   animation: fadeIn 0.2s ease-out;
-
+  backdrop-filter: blur(4px);
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -775,8 +824,8 @@
       align-items: center;
       background: linear-gradient(
         135deg,
-        $primary 0%,
-        color.adjust($primary, $lightness: -10%) 100%
+        $neumorphic-surface 0%,
+        color.adjust($neumorphic-surface, $lightness: -10%) 100%
       );
       border-radius: 16px 16px 0 0;
 
@@ -818,13 +867,14 @@
 
     .modal-body {
       padding: 2rem;
+      background: $neumorphic-surface;
 
       .sale-total {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 1.5rem;
-        background: var(--bg-secondary);
+        background: $white;
         border-radius: 12px;
         margin-bottom: 2rem;