change on styles

Author: lexCoder2

src/app/components/cart/cart.component.html

@@ -54,12 +54,12 @@
         <div class="item-info">
           <div class="item-image">
             <img
-              [src]="getProductImageUrl(item.product)"
-              [alt]="item.product.name"
-              (error)="
-                $any($event.target).src =
-                  'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22%3E%3Crect width=%2260%22 height=%2260%22 fill=%22%23f0f0f0%22/%3E%3Ctext x=%2230%22 y=%2237%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2224%22%3E📦%3C/text%3E%3C/svg%3E'
+              [src]="
+                item.product.local_image
+                  ? getProductImageUrl(item.product)
+                  : 'assets/placeholder-product.png'
               "
+              [alt]="item.product.name"
             />
           </div>
           <div class="item-header">

src/app/components/cart/cart.component.scss

@@ -10,7 +10,6 @@
   width: $cart-width;
   display: flex;
   flex-direction: column;
-  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
   position: relative;
   height: 100%;
   border-bottom: 1px solid var(--border-color);
@@ -195,8 +194,8 @@
     flex: 1;
     overflow-y: auto;
     padding: 0.5rem;
-    background-color: var(--bg-tertiary);
-
+    background-color: $neumorphic-surface;
+    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.08);
     &::-webkit-scrollbar {
       width: 6px;
     }

src/app/components/cart/cart.component.ts

@@ -53,10 +53,10 @@ export class CartComponent {
     }));
   }
   getProductImageUrl(product: Product): string {
-    if (product.local_image) {
-      return `${environment.imageUrl}/${product.local_image}`;
-    }
-    return "";
+    return `${environment.imageUrl}/${product.local_image}`;
+  }
+  onImageError(event: Event): void {
+    (event.target as HTMLImageElement).src = "assets/placeholder.png";
   }
 
   getTotalItems(): number {

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

@@ -10,12 +10,13 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  border-radius: $radius-2xl;
 
   .register-warning {
     display: flex;
     align-items: center;
     gap: $spacing-md;
-    padding: $spacing-md $spacing-lg;
+    padding: $spacing-xs $spacing-lg;
     background: linear-gradient(
       135deg,
       rgba($warning, 0.15),

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

@@ -11,7 +11,7 @@ import {
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import { Router, NavigationEnd } from "@angular/router";
-import { filter } from "rxjs";
+import { filter, Observable, Subscription } from "rxjs";
 import { SaleService } from "../../services/sale.service";
 import { CartService } from "../../services/cart.service";
 import { AuthService } from "../../services/auth.service";
@@ -117,8 +117,18 @@ export class CashierComponent implements OnInit, AfterViewInit {
 
   onRegisterOpened(): void {
     this.closeRegisterModal();
-    // Focus calculator after register is opened
-    setTimeout(() => this.calculator?.focusCalculator(), 300);
+    // Reload the active register to update the state
+    this.registerService.getActiveRegister().subscribe({
+      next: () => {
+        // Focus calculator after register is opened
+        setTimeout(() => this.calculator?.focusCalculator(), 300);
+      },
+      error: (err) => {
+        console.error("Error reloading register:", err);
+        // Still focus calculator even if there's an error
+        setTimeout(() => this.calculator?.focusCalculator(), 300);
+      },
+    });
   }
 
   constructor(
@@ -146,18 +156,18 @@ export class CashierComponent implements OnInit, AfterViewInit {
     this.scaleConnected.set(this.scaleService.isConnected());
 
     // Load active cart from database
-    this.loadActiveCart();
 
     // Handle session cleanup when user leaves or closes window
     this.setupSessionCleanup();
   }
 
   ngOnInit(): void {
     // Subscribe to register state
-    this.registerService.currentRegister$.subscribe((register) => {
-      this.currentRegister.set(register);
+    this.loadActiveCart()?.add(() => {
+      this.registerService.currentRegister$.subscribe((register) => {
+        this.currentRegister.set(register);
+      });
     });
-
     // Load active register
     this.registerService.getActiveRegister().subscribe();
 
@@ -214,11 +224,11 @@ export class CashierComponent implements OnInit, AfterViewInit {
     navigator.sendBeacon(apiUrl, formData);
   }
 
-  loadActiveCart(): void {
+  loadActiveCart(): Subscription | null {
     const currentUser = this.authService.getCurrentUser();
-    if (!currentUser || !currentUser.id) return;
+    if (!currentUser || !currentUser.id) return null;
 
-    this.cartService.getActiveCart(currentUser.id).subscribe({
+    return this.cartService.getActiveCart(currentUser.id).subscribe({
       next: (cart) => {
         if (cart && cart.items) {
           // Convert cart items to cashier items format

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

@@ -5,7 +5,7 @@
   background-color: var(--bg-secondary);
   min-height: calc(100vh - 65px);
   overflow-y: auto;
-
+  border-radius: $radius-2xl;
   .dashboard-header {
     display: flex;
     justify-content: space-between;

src/app/components/favorites/favorites.component.html

@@ -1,6 +1,6 @@
 <div class="favorites">
   <!-- Loading state -->
-  <div class="loading-state" *ngIf="isLoading">
+  <div class="loading-state" *ngIf="isLoading()">
     <i class="fas fa-spinner fa-spin"></i>
     <p>{{ "GLOBAL.LOADING" | translate }}</p>
   </div>
@@ -18,7 +18,7 @@
   <!-- Products grid -->
   <div
     class="products-grid"
-    *ngIf="!isLoading && !loadError && products.length > 0"
+    *ngIf="!isLoading() && !loadError() && products.length > 0"
   >
     <div
       class="product-card"
@@ -47,7 +47,7 @@ <h4 class="product-name">{{ product.name }}</h4>
   <!-- Empty state -->
   <div
     class="empty-state"
-    *ngIf="!isLoading && !loadError && products.length === 0"
+    *ngIf="!isLoading() && !loadError() && products.length === 0"
   >
     <i class="fas fa-star"></i>
     <p>{{ "FAVORITES.EMPTY" | translate }}</p>

src/app/components/favorites/favorites.component.scss

@@ -1,7 +1,7 @@
 @use "../../../styles/theme" as *;
 
 .favorites {
-  background: $white;
+  background: $neumorphic-surface;
   border-radius: $radius-lg;
   height: 100%;
   overflow: hidden;

src/app/components/favorites/favorites.component.ts

@@ -4,6 +4,7 @@ import {
   OnDestroy,
   Output,
   EventEmitter,
+  signal,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Subject, takeUntil, timeout, catchError, of } from "rxjs";
@@ -24,8 +25,8 @@ export class FavoritesComponent implements OnInit, OnDestroy {
   @Output() productSelected = new EventEmitter<Product>();
 
   products: Product[] = [];
-  isLoading = false;
-  loadError = false;
+  isLoading = signal(false);
+  loadError = signal(false);
   private destroy$ = new Subject<void>();
 
   constructor(private productService: ProductService) {}
@@ -40,29 +41,29 @@ export class FavoritesComponent implements OnInit, OnDestroy {
   }
 
   loadTopProducts(): void {
-    this.isLoading = true;
-    this.loadError = false;
+    this.isLoading.set(true);
+    this.loadError.set(false);
 
     this.productService
       .getFavoriteProducts(20)
       .pipe(
         timeout(10000), // 10 second timeout
         catchError((err) => {
           console.error("Error or timeout loading favorite products:", err);
-          this.loadError = true;
+          this.loadError.set(true);
           return of([]);
         }),
         takeUntil(this.destroy$)
       )
       .subscribe({
         next: (products) => {
           this.products = products;
-          this.isLoading = false;
+          this.isLoading.set(false);
         },
         error: (err) => {
           console.error("Error loading favorite products:", err);
-          this.isLoading = false;
-          this.loadError = true;
+          this.isLoading.set(false);
+          this.loadError.set(true);
         },
       });
   }

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

@@ -5,7 +5,8 @@
   max-width: 1500px;
   margin: 0 auto;
   height: calc(100% - 65px);
-  border-radius: 0;
+  background: $neumorphic-surface;
+  border-radius: $radius-2xl;
 }
 
 .inventory-header {