integration

src/app/pages/item-editor/item-editor.component.html

@@ -107,6 +107,25 @@
             </mat-form-field>
           </div>
 
+          <div class="form-row">
+            <mat-form-field appearance="outline" class="half-width">
+              <mat-label>{{ 'DISCOUNT' | translate }}</mat-label>
+              <input
+                matInput
+                type="number"
+                step="1"
+                [(ngModel)]="item()!.discount"
+                (blur)="onFieldChange('discount', item()!.discount)"
+                min="0"
+                max="100"
+                placeholder="0">
+              <span matSuffix>%</span>
+              @if (item()!.discount < 0 || item()!.discount > 100) {
+                <mat-error>Discount must be 0–100%</mat-error>
+              }
+            </mat-form-field>
+          </div>
+
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>{{ 'SIMPLE_DESCRIPTION' | translate }}</mat-label>
             <textarea 

src/app/pages/item-preview/item-preview.component.html

@@ -72,7 +72,13 @@
         <h1 class="item-name">{{ item.name }}</h1>
 
         <div class="price-row">
-          <span class="price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
+          @if (item.discount > 0) {
+            <span class="price-old">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
+            <span class="price">{{ item.price * (1 - item.discount / 100) | number:'1.2-2' }} {{ item.currency }}</span>
+            <span class="discount-tag">-{{ item.discount }}%</span>
+          } @else {
+            <span class="price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
+          }
           @if (item.quantity > 0) {
             <span class="in-stock">
               <mat-icon>check_circle</mat-icon>

src/app/pages/item-preview/item-preview.component.scss

@@ -195,6 +195,22 @@
       color: #1976d2;
     }
 
+    .price-old {
+      font-size: 1.1rem;
+      color: #999;
+      text-decoration: line-through;
+    }
+
+    .discount-tag {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: #e53935;
+      color: #fff;
+      font-size: 0.85rem;
+      font-weight: 600;
+    }
+
     .in-stock, .out-of-stock {
       display: flex;
       align-items: center;

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

@@ -98,6 +98,9 @@
           
           <div class="item-details">
             <span class="price">{{ item.price }} {{ item.currency }}</span>
+            @if (item.discount > 0) {
+              <span class="discount-chip">-{{ item.discount }}%</span>
+            }
             <span class="quantity">{{ 'QTY' | translate }}: {{ item.quantity }}</span>
           </div>
 

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

@@ -226,6 +226,16 @@
         color: #1976d2;
       }
 
+      .discount-chip {
+        display: inline-block;
+        padding: 1px 6px;
+        border-radius: 4px;
+        background: #e53935;
+        color: #fff;
+        font-size: 0.75rem;
+        font-weight: 600;
+      }
+
       .quantity {
         color: #666;
       }