integration new apis

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

@@ -135,6 +135,26 @@
               (blur)="onFieldChange('simpleDescription', item()!.simpleDescription)">
             </textarea>
           </mat-form-field>
+
+          <div class="form-row">
+            <mat-form-field appearance="outline" class="half-width">
+              <mat-label>{{ 'COLOUR' | translate }}</mat-label>
+              <input 
+                matInput 
+                [(ngModel)]="item()!.colour"
+                (blur)="onFieldChange('colour', item()!.colour)"
+                placeholder="e.g. Black, Red">
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="half-width">
+              <mat-label>{{ 'SIZE' | translate }}</mat-label>
+              <input 
+                matInput 
+                [(ngModel)]="item()!.size"
+                (blur)="onFieldChange('size', item()!.size)"
+                placeholder="e.g. M, L, XL">
+            </mat-form-field>
+          </div>
         </div>
       </mat-tab>
 
@@ -395,7 +415,7 @@
         </div>
       </mat-tab>
 
-      <!-- Translations Tab - hidden until client provides requirements
+      <!-- Translations Tab -->
       <mat-tab [label]="'TRANSLATIONS' | translate">
         <div class="tab-content">
           <div class="translations-section">
@@ -444,7 +464,78 @@
           </div>
         </div>
       </mat-tab>
-      -->
+
+      <!-- Attributes Tab -->
+      <mat-tab [label]="'ATTRIBUTES' | translate">
+        <div class="tab-content">
+          <div class="attributes-section">
+            <h3>{{ 'ATTRIBUTES' | translate }}</h3>
+            <p class="hint">{{ 'ATTRIBUTES_HINT' | translate }}</p>
+
+            <div class="add-desc-form">
+              <mat-form-field appearance="outline">
+                <mat-label>{{ 'ATTR_KEY' | translate }}</mat-label>
+                <input 
+                  matInput 
+                  [(ngModel)]="newAttrKey"
+                  [placeholder]="'ATTR_KEY_PLACEHOLDER' | translate">
+              </mat-form-field>
+              
+              <mat-form-field appearance="outline">
+                <mat-label>{{ 'ATTR_VALUE' | translate }}</mat-label>
+                <input 
+                  matInput 
+                  [(ngModel)]="newAttrValue"
+                  [placeholder]="'ATTR_VALUE_PLACEHOLDER' | translate">
+              </mat-form-field>
+              
+              <button 
+                mat-raised-button 
+                color="primary" 
+                (click)="addAttribute()">
+                <mat-icon>add</mat-icon>
+                {{ 'ADD_FIELD' | translate }}
+              </button>
+            </div>
+
+            <div class="desc-fields-list">
+              @for (attr of item()!.attributes || []; track $index) {
+                <div class="desc-field-row">
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ 'ATTR_KEY' | translate }}</mat-label>
+                    <input 
+                      matInput 
+                      [value]="attr.key"
+                      (blur)="updateAttribute($index, 'key', $any($event.target).value)">
+                  </mat-form-field>
+                  
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ 'ATTR_VALUE' | translate }}</mat-label>
+                    <input 
+                      matInput 
+                      [value]="attr.value"
+                      (blur)="updateAttribute($index, 'value', $any($event.target).value)">
+                  </mat-form-field>
+                  
+                  <button 
+                    mat-icon-button 
+                    color="warn"
+                    (click)="removeAttribute($index)">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+              }
+            </div>
+
+            @if (!(item()!.attributes?.length)) {
+              <div class="empty-state">
+                <mat-icon>tune</mat-icon>
+                <p>{{ 'NO_ATTRIBUTES' | translate }}</p>
+              </div>
+            }
+          </div>
+        </div>
+      </mat-tab>
     </mat-tab-group>
   }
 </div>

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

@@ -18,7 +18,7 @@ import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-
 import { ApiService } from '../../services';
 import { ValidationService } from '../../services/validation.service';
 import { ToastService } from '../../services/toast.service';
-import { Item, ItemDescriptionField, Subcategory } from '../../models';
+import { Item, ItemDescriptionField, ItemAttribute, Subcategory } from '../../models';
 import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-dialog.component';
 import { LoadingSkeletonComponent } from '../../components/loading-skeleton/loading-skeleton.component';
 import { LanguageService } from '../../services/language.service';
@@ -82,6 +82,8 @@ export class ItemEditorComponent implements OnInit {
   ];
 
   newBadge = '';
+  newAttrKey = '';
+  newAttrValue = '';
 
   private destroyRef = inject(DestroyRef);
 
@@ -337,6 +339,36 @@ export class ItemEditorComponent implements OnInit {
     }
   }
 
+  // Attributes handling
+  addAttribute() {
+    if (!this.newAttrKey.trim() || !this.newAttrValue.trim()) return;
+    const currentItem = this.item();
+    if (!currentItem) return;
+    const attrs = [...(currentItem.attributes || []), { key: this.newAttrKey.trim(), value: this.newAttrValue.trim() }];
+    currentItem.attributes = attrs;
+    this.onFieldChange('attributes' as any, attrs);
+    this.newAttrKey = '';
+    this.newAttrValue = '';
+  }
+
+  updateAttribute(index: number, field: 'key' | 'value', value: string) {
+    const currentItem = this.item();
+    if (!currentItem) return;
+    const attrs = [...(currentItem.attributes || [])];
+    attrs[index] = { ...attrs[index], [field]: value };
+    currentItem.attributes = attrs;
+    this.onFieldChange('attributes' as any, attrs);
+  }
+
+  removeAttribute(index: number) {
+    const currentItem = this.item();
+    if (!currentItem) return;
+    const attrs = [...(currentItem.attributes || [])];
+    attrs.splice(index, 1);
+    currentItem.attributes = attrs;
+    this.onFieldChange('attributes' as any, attrs);
+  }
+
   goBack() {
     const item = this.item();
     if (item && item.subcategoryId) {