boooomb

src/app/pages/items-list/items-list.component.html

@@ -76,10 +76,19 @@
 
         <div class="item-image">
           @if (item.imgs.length) {
-            <img [src]="item.imgs[0]" [alt]="item.name">
-          } @else {
-            <div class="no-image">
-              <mat-icon>image</mat-icon>
+            <img [src]="item.imgs[0]" [alt]="item.name" (error)="onImageError($event)">
+          }
+          <div class="no-image" [style.display]="item.imgs.length ? 'none' : 'flex'">
+            <mat-icon>image</mat-icon>
+          </div>
+          @if (item.quantity === 0) {
+            <div class="out-of-stock-overlay">Out of Stock</div>
+          }
+          @if (item.badges?.length) {
+            <div class="item-badges">
+              @for (badge of (item.badges || []).slice(0, 2); track badge) {
+                <span class="badge badge-{{ badge }}">{{ badge }}</span>
+              }
             </div>
           }
         </div>

src/app/pages/items-list/items-list.component.scss

@@ -140,6 +140,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 
     img {
       width: 100%;
@@ -161,6 +162,47 @@
         height: 48px;
       }
     }
+
+    .out-of-stock-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.55);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.85rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .item-badges {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      .badge {
+        padding: 2px 7px;
+        border-radius: 10px;
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: #fff;
+
+        &.badge-new       { background: #009688; }
+        &.badge-sale      { background: #e53935; }
+        &.badge-exclusive { background: #7b1fa2; }
+        &.badge-hot       { background: #f4511e; }
+        &.badge-limited   { background: #f9a825; color: #333; }
+        &.badge-bestseller{ background: #1976d2; }
+        &.badge-featured  { background: #3949ab; }
+      }
+    }
   }
 
   .item-info {

src/app/pages/items-list/items-list.component.ts

@@ -194,10 +194,19 @@ export class ItemsListComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   openItem(itemId: string) {
-    console.log('Opening item:', itemId, 'projectId:', this.projectId());
     this.router.navigate(['/project', this.projectId(), 'item', itemId]);
   }
 
+  onImageError(event: Event) {
+    const img = event.target as HTMLImageElement;
+    img.style.display = 'none';
+    const parent = img.parentElement;
+    if (parent) {
+      const placeholder = parent.querySelector('.no-image') as HTMLElement | null;
+      if (placeholder) placeholder.style.display = 'flex';
+    }
+  }
+
   goBack() {
     // Navigate back to the project view
     this.router.navigate(['/project', this.projectId()]);
@@ -212,7 +221,15 @@ export class ItemsListComponent implements OnInit, AfterViewInit, OnDestroy {
           { name: 'name', label: 'Item Name', type: 'text', required: true },
           { name: 'simpleDescription', label: 'Simple Description', type: 'text', required: false },
           { name: 'price', label: 'Price', type: 'number', required: true },
-          { name: 'currency', label: 'Currency', type: 'text', required: true, value: 'USD' },
+          { name: 'currency', label: 'Currency', type: 'select', required: true, value: 'USD',
+            options: [
+              { value: 'USD', label: '🇺🇸 USD' },
+              { value: 'EUR', label: '🇪🇺 EUR' },
+              { value: 'RUB', label: '🇷🇺 RUB' },
+              { value: 'GBP', label: '🇬🇧 GBP' },
+              { value: 'UAH', label: '🇺🇦 UAH' }
+            ]
+          },
           { name: 'quantity', label: 'Quantity', type: 'number', required: true, value: 0 },
           { name: 'visible', label: 'Visible', type: 'toggle', required: false, value: true }
         ]