models

package-lock.json

@@ -746,9 +746,9 @@
       }
     },
     "node_modules/@angular/ssr": {
-      "version": "19.2.17",
-      "resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-19.2.17.tgz",
-      "integrity": "sha512-9ABOYrHrCYnOiihkeHvN+QIaIN+1Js4QfT4cXAtZs/f+yFaURGre7yvyK1KncMBKwxXzjcqvu1QquFMU/m/JLw==",
+      "version": "19.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-19.2.19.tgz",
+      "integrity": "sha512-7HqC3K99DdzDakB/4mkqGqY6REQNMxskU1VVkH9D7SthZSuxhWIMVBojVhBDd+JOUYiyQlwEGMBevbrgbtfKlQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -4262,9 +4262,9 @@
       }
     },
     "node_modules/@npmcli/package-json/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -6658,9 +6658,9 @@
       }
     },
     "node_modules/cacache/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -9796,9 +9796,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11437,9 +11437,9 @@
       "optional": true
     },
     "node_modules/node-forge": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.2.tgz",
+      "integrity": "sha512-6xKiQ+cph9KImrRh0VsjH2d8/GXA4FIMlgU4B757iI1ApvcyA9VlouP0yZJha01V+huImO+kKMU7ih+2+E14fw==",
       "dev": true,
       "license": "(BSD-3-Clause OR GPL-2.0)",
       "engines": {
@@ -14075,10 +14075,10 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
-      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
-      "license": "ISC",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",

src/app/core/models/address.model.ts

@@ -19,6 +19,9 @@ export interface CreateAddress {
   postalCode: string;
   country: string;
   type: AddressType;
+  // FEHLTEN:
+  firstName: string;
+  lastName: string;
 }
 
 export interface UpdateAddress extends CreateAddress {

src/app/core/models/order.model.ts

@@ -34,6 +34,9 @@ export interface OrderDetail {
   totalAmount: number;
   shippingAddress: Address;
   billingAddress: Address;
+   shippingAddressId?: string;
+  billingAddressId?: string;
+  paymentMethodId?: string;
   paymentMethod?: string;
   shippingTrackingNumber?: string;
   shippedDate?: string;

src/app/core/models/product.model.ts

@@ -41,4 +41,5 @@ export interface AdminProduct {
   images?: ProductImage[];
   isFeatured: boolean;
   featuredDisplayOrder: number;
+  rowVersion?: string;
 }

src/app/core/models/shared.models.ts

@@ -0,0 +1,9 @@
+// Das Backend sendet dies bei Validierungsfehlern (400 Bad Request)
+export interface ValidationProblemDetails {
+  type?: string;
+  title?: string;
+  status?: number;
+  detail?: string;
+  instance?: string;
+  errors?: { [key: string]: string[] };
+}

src/app/core/models/shipping.model.ts

@@ -6,4 +6,7 @@ export interface ShippingMethod {
   isActive: boolean;
   minDeliveryDays: number;
   maxDeliveryDays: number;
+  // NEU: Gewichtsgrenzen
+  minWeight: number;
+  maxWeight: number;
 }

src/app/core/models/user.model.ts

@@ -8,6 +8,9 @@ export interface User {
   lastActive?: string;
   firstName?: string;
   lastName?: string;
+  phoneNumber?: string;
+  defaultShippingAddressId?: string;
+  defaultBillingAddressId?: string;
 }
 
 export interface UpdateUserRolesRequest {

src/app/features/components/products/product-category-dropdown/product-category-dropdown.component.ts

@@ -26,56 +26,80 @@ export interface SelectOption {
   ],
 })
 export class ProductCategoryDropdownComponent implements ControlValueAccessor {
-  @Input() label = '';
   @Input() options: SelectOption[] = [];
+  @Input() label = '';
   @Input() placeholder = 'Bitte wählen...';
 
-  public isOpen = false;
   public selectedValues: any[] = [];
-  private elementRef = inject(ElementRef);
+  public isOpen = false;
+  public isDisabled = false;
 
-  onChange: (value: any[]) => void = () => {};
-  onTouched: () => void = () => {};
+  // Callbacks, die von Angular überschrieben werden
+  private onChange: (value: any[]) => void = () => {};
+  private onTouched: () => void = () => {};
 
-  writeValue(values: any[]): void { this.selectedValues = Array.isArray(values) ? values : []; }
-  registerOnChange(fn: any): void { this.onChange = fn; }
-  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  // --- ControlValueAccessor Implementierung ---
 
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: Event): void {
-    if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
-      this.closeDropdown();
+  // Wird von Angular aufgerufen, um Werte ins Formular zu schreiben (z.B. beim Laden)
+  writeValue(value: any[]): void {
+    if (value && Array.isArray(value)) {
+      this.selectedValues = value;
+    } else {
+      this.selectedValues = [];
     }
   }
 
-  toggleDropdown(event: Event): void {
-    event.stopPropagation();
-    this.isOpen = !this.isOpen;
-    if (!this.isOpen) { this.onTouched(); }
+  // Registriert die Funktion, die aufgerufen wird, wenn sich der Wert ändert
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
   }
 
-  closeDropdown(): void {
-    if (this.isOpen) {
-      this.isOpen = false;
+  // Registriert die Funktion, die aufgerufen wird, wenn das Feld "berührt" wurde
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // Optional: Wenn das Feld deaktiviert wird
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  // --- UI Logik ---
+
+  toggleDropdown(event: Event): void {
+    event.preventDefault();
+    if (this.isDisabled) return;
+    this.isOpen = !this.isOpen;
+    if (!this.isOpen) {
       this.onTouched();
     }
   }
 
+  isSelected(value: any): boolean {
+    return this.selectedValues.includes(value);
+  }
+
+  getLabelForValue(value: any): string {
+    const option = this.options.find(o => o.value === value);
+    return option ? option.label : String(value);
+  }
+
   onOptionToggle(value: any): void {
-    const index = this.selectedValues.indexOf(value);
-    if (index > -1) {
-      this.selectedValues.splice(index, 1);
+    if (this.isSelected(value)) {
+      // Entfernen
+      this.selectedValues = this.selectedValues.filter(v => v !== value);
     } else {
-      this.selectedValues.push(value);
+      // Hinzufügen
+      this.selectedValues = [...this.selectedValues, value];
     }
-    this.onChange([...this.selectedValues]); // Wichtig: Neue Array-Instanz senden
+    // Angular mitteilen, dass sich der Wert geändert hat
+    this.onChange(this.selectedValues);
+    this.onTouched();
   }
 
-  onPillRemove(value: any, event: any): void { // Typ korrigiert
-    event.stopPropagation();
-    this.onOptionToggle(value);
+  onPillRemove(value: any, event: any): void {
+    event.stopPropagation(); // Verhindert, dass das Dropdown aufgeht/zugeht
+    this.selectedValues = this.selectedValues.filter(v => v !== value);
+    this.onChange(this.selectedValues);
   }
-
-  isSelected(value: any): boolean { return this.selectedValues.includes(value); }
-  getLabelForValue(value: any): string { return this.options.find(opt => opt.value === value)?.label || ''; }
 }

src/app/features/components/products/product-create/product-create.component.css

@@ -1,10 +1,8 @@
-.form-header {
+.page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 1rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 1rem;
 }
 
 h3[card-header] {

src/app/features/components/products/product-create/product-create.component.html

@@ -4,7 +4,7 @@
 </div>
 
 <ng-template #formContent>
-  <div class="form-header">
+  <div class="page-header">
     <h3 card-header>Neues Produkt erstellen</h3>
   </div>
 

src/app/features/components/products/product-edit/product-edit.component.css

@@ -1,10 +1,8 @@
-.form-header {
+.page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 1rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 1rem;
 }
 
 h3[card-header] {

src/app/features/components/products/product-edit/product-edit.component.html

@@ -5,7 +5,7 @@
 </div>
 
 <ng-template #formContent>
-  <div class="form-header">
+  <div class="page-header">
     <h3 card-header>Produkt bearbeiten</h3>
   </div>
   <app-product-form

src/app/features/components/products/product-edit/product-edit.component.ts

@@ -1,42 +1,20 @@
-// /src/app/features/admin/components/products/product-edit/product-edit.component.ts
-
 import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  FormBuilder,
-  FormGroup,
-  FormArray,
-  FormControl,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Observable, Subscription } from 'rxjs';
-import {
-  map,
-  startWith,
-  debounceTime,
-  distinctUntilChanged,
-  finalize,
-} from 'rxjs/operators';
+import { Observable, Subscription, of } from 'rxjs';
+import { switchMap, finalize, map } from 'rxjs/operators';
 
-// Models, Services und UI-Komponenten
-import {
-  AdminProduct,
-  ProductImage,
-} from '../../../../core/models/product.model';
+import { AdminProduct, ProductImage } from '../../../../core/models/product.model';
 import { Category } from '../../../../core/models/category.model';
 import { ProductService } from '../../../services/product.service';
 import { CategoryService } from '../../../services/category.service';
 import { SupplierService } from '../../../services/supplier.service';
 import { SnackbarService } from '../../../../shared/services/snackbar.service';
-import { CardComponent } from '../../../../shared/components/ui/card/card.component';
-import {
-  ImagePreview,
-  ProductFormComponent,
-} from '../product-form/product-form.component';
+import { ImagePreview, ProductFormComponent } from '../product-form/product-form.component';
 import { SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
+import { Supplier } from '../../../../core/models/supplier.model';
 
 @Component({
   selector: 'app-product-edit',
@@ -46,304 +24,277 @@ import { SelectOption } from '../../../../shared/components/form/form-select/for
   styleUrls: ['./product-edit.component.css'],
 })
 export class ProductEditComponent implements OnInit, OnDestroy {
-  // --- Injektionen ---
+  // --- Injected Services ---
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private fb = inject(FormBuilder);
   private productService = inject(ProductService);
   private categoryService = inject(CategoryService);
   private supplierService = inject(SupplierService);
-  private fb = inject(FormBuilder);
   private snackbarService = inject(SnackbarService);
   private sanitizer = inject(DomSanitizer);
 
-  // --- Komponenten-Status ---
-  productId!: string;
-  isLoading = true;
-  productForm: FormGroup;
-  private nameChangeSubscription?: Subscription;
-  allCategories$!: Observable<Category[]>;
-  supplierOptions$!: Observable<SelectOption[]>;
+  // --- Component State ---
+  public productForm!: FormGroup;
+  public isLoading = true;
+  private productId!: string;
+  private subscriptions = new Subscription();
 
-  // --- NEUER STATE FÜR BILD-MANAGEMENT ---
-  existingImages: ProductImage[] = [];
-  newImageFiles: File[] = [];
-  mainImageIdentifier: string | null = null; // Hält die ID oder den Dateinamen des Hauptbildes
-  allImagesForForm: ImagePreview[] = []; // Die kombinierte Liste für die Child-Komponente
+  // WICHTIG: Die RowVersion speichern wir hier, nicht im Formular
+  private loadedRowVersion: string | null = null;
+
+  public allCategories$!: Observable<Category[]>;
+  public supplierOptions$!: Observable<SelectOption[]>;
+
+  // --- Image Management ---
+  public allImagesForForm: ImagePreview[] = [];
+  private newImageFiles = new Map<string, File>();
+  private imagesToDelete: string[] = [];
 
   constructor() {
-    this.productForm = this.fb.group({
-      id: ['', Validators.required],
-      name: ['', Validators.required],
-      slug: ['', Validators.required],
-      sku: ['', Validators.required],
-      price: [0, [Validators.required, Validators.min(0)]],
-      stockQuantity: [0, [Validators.required, Validators.min(0)]],
-      description: [''],
-      oldPrice: [null, [Validators.min(0)]],
-      purchasePrice: [null, [Validators.min(0)]],
-      weight: [null, [Validators.min(0)]],
-      isActive: [true],
-      isFeatured: [false],
-      featuredDisplayOrder: [0],
-      supplierId: [null],
-      categorieIds: new FormControl([]),
-      imagesToDelete: this.fb.array([]),
-    });
+    this.initForm();
   }
 
-  get imagesToDelete(): FormArray {
-    return this.productForm.get('imagesToDelete') as FormArray;
+  private initForm(): void {
+    // RowVersion nehmen wir hier raus, um Manipulationen zu verhindern
+    this.productForm = this.fb.group({
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      sku: ['', Validators.required],
+      price: [0, [Validators.required, Validators.min(0)]],
+      oldPrice: [null],
+      isActive: [true],
+      stockQuantity: [0, [Validators.required, Validators.min(0)]],
+      slug: ['', Validators.required],
+      weight: [0],
+      supplierId: [null],
+      purchasePrice: [null],
+      isFeatured: [false],
+      featuredDisplayOrder: [0],
+      categorieIds: [[]]
+    });
   }
 
   ngOnInit(): void {
-    const id = this.route.snapshot.paramMap.get('id');
-    if (!id) {
-      this.snackbarService.show('Produkt-ID fehlt.');
-      this.router.navigate(['/shop/products']);
-      return;
-    }
-    this.productId = id;
-    this.loadDropdownData();
-    this.loadProductData();
-    this.subscribeToNameChanges();
+    this.loadInitialData();
   }
 
-  ngOnDestroy(): void {
-    this.nameChangeSubscription?.unsubscribe();
-    this.allImagesForForm.forEach((image) => {
-      if (typeof image.url === 'object') {
-        // Nur Object-URLs von neuen Bildern freigeben
-        URL.revokeObjectURL(image.url as string);
+  private loadInitialData(): void {
+    this.isLoading = true;
+    this.allCategories$ = this.categoryService.getAll();
+
+    this.supplierOptions$ = this.supplierService.getAll().pipe(
+      map((suppliers: Supplier[]) =>
+        suppliers
+          .filter(s => !!s.name)
+          .map(s => ({ value: s.id, label: s.name as string }))
+      )
+    );
+
+    const productSub = this.route.paramMap.pipe(
+      switchMap(params => {
+        const id = params.get('id');
+        if (id) {
+          this.productId = id;
+          return this.productService.getById(id);
+        }
+        this.snackbarService.show('Keine Produkt-ID gefunden.');
+        this.router.navigate(['/shop/products']);
+        return of(null);
+      })
+    ).subscribe({
+      next: product => {
+        if (product) {
+          this.patchForm(product);
+          if (product.images) {
+            this.initializeImages(product.images);
+          }
+        }
+        this.isLoading = false;
+      },
+      error: () => {
+        this.isLoading = false;
+        this.snackbarService.show('Fehler beim Laden der Produktdaten.');
       }
     });
+    this.subscriptions.add(productSub);
+  }
+
+  private patchForm(product: AdminProduct): void {
+    // 1. RowVersion sicher extrahieren und trimmen
+    const rawVersion = product.rowVersion || (product as any).RowVersion;
+    this.loadedRowVersion = rawVersion ? String(rawVersion).trim() : null;
+
+    console.log('Geladene RowVersion:', this.loadedRowVersion);
+
+    // 2. Formularwerte setzen
+    this.productForm.patchValue({
+      name: product.name,
+      description: product.description,
+      sku: product.sku,
+      price: product.price,
+      oldPrice: product.oldPrice,
+      isActive: product.isActive,
+      stockQuantity: product.stockQuantity,
+      slug: product.slug,
+      weight: product.weight,
+      supplierId: product.supplierId,
+      purchasePrice: product.purchasePrice,
+      isFeatured: product.isFeatured,
+      featuredDisplayOrder: product.featuredDisplayOrder,
+      categorieIds: product.categorieIds || [],
+    });
   }
 
-  loadDropdownData(): void {
-    this.allCategories$ = this.categoryService.getAll();
-    this.supplierOptions$ = this.supplierService.getAll().pipe(
-      map((suppliers) =>
-        suppliers.map((s) => ({ value: s.id, label: s.name || 'Unbenannt' }))
-      ),
-      startWith([])
-    );
+  private initializeImages(images: ProductImage[]): void {
+    this.allImagesForForm = images
+      .filter(img => !!img.url)
+      .map(img => ({
+        identifier: img.id,
+        url: img.url as string,
+        isMainImage: img.isMainImage,
+      })).sort((a, b) => (a.isMainImage ? -1 : 1));
   }
 
-  loadProductData(): void {
-    this.isLoading = true;
-    this.productService
-      .getById(this.productId)
-      .pipe(
-        finalize(() => {
-          this.isLoading = false;
-        })
-      )
-      .subscribe({
-        next: (product) => {
-          if (product) {
-            this.populateForm(product);
-          } else {
-            this.snackbarService.show('Produkt nicht gefunden.');
-            this.router.navigate(['/shop/products']);
-          }
-        },
-        error: (err) => {
-          this.snackbarService.show('Fehler beim Laden des Produkts.');
-          console.error('Fehler beim Laden der Produktdaten:', err);
-          this.router.navigate(['/shop/products']);
-        },
+  // --- Image Event Handlers ---
+
+  onFilesSelected(files: File[]): void {
+    for (const file of files) {
+      const tempId = `new_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const url = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
+
+      this.newImageFiles.set(tempId, file);
+
+      this.allImagesForForm.push({
+        identifier: tempId,
+        url: url,
+        isMainImage: this.allImagesForForm.length === 1, // Wenn es das erste Bild ist, direkt Main
       });
+    }
   }
 
-// AFTER (CORRECT)
-populateForm(product: AdminProduct): void {
-  // This single line handles ALL form controls, including setting 
-  // the 'categorieIds' FormControl to the array from the product object.
-  this.productForm.patchValue(product);
+  onSetMainImage(identifier: string): void {
+    this.allImagesForForm.forEach(img => {
+      img.isMainImage = img.identifier === identifier;
+    });
+  }
 
-  // The obsolete FormArray logic has been removed.
+  onDeleteImage(identifier: string): void {
+    const imageIndex = this.allImagesForForm.findIndex(img => img.identifier === identifier);
+    if (imageIndex === -1) return;
 
-  this.existingImages = product.images || [];
-  const mainImage = this.existingImages.find((img) => img.isMainImage);
-  this.mainImageIdentifier =
-    mainImage?.id ||
-    (this.existingImages.length > 0 ? this.existingImages[0].id : null);
+    const deletedImage = this.allImagesForForm[imageIndex];
+    this.allImagesForForm.splice(imageIndex, 1);
 
-  this.rebuildAllImagesForForm();
-}
+    if (this.newImageFiles.has(identifier)) {
+      this.newImageFiles.delete(identifier);
+    } else {
+      this.imagesToDelete.push(identifier);
+    }
+
+    if (deletedImage.isMainImage && this.allImagesForForm.length > 0) {
+      this.allImagesForForm[0].isMainImage = true;
+    }
+  }
 
   onSubmit(): void {
     if (this.productForm.invalid) {
       this.productForm.markAllAsTouched();
-      this.snackbarService.show('Bitte füllen Sie alle Pflichtfelder aus.');
+      this.snackbarService.show('Bitte füllen Sie alle erforderlichen Felder aus.');
       return;
     }
-    this.prepareSubmissionData();
-    const formData = this.createFormData();
-    this.productService.update(this.productId, formData).subscribe({
+
+    this.isLoading = true;
+    const formData = this.createUpdateFormData();
+
+    this.productService.update(this.productId, formData).pipe(
+      finalize(() => this.isLoading = false)
+    ).subscribe({
       next: () => {
-        this.snackbarService.show('Produkt erfolgreich aktualisiert');
+        this.snackbarService.show('Produkt erfolgreich aktualisiert!');
         this.router.navigate(['/shop/products']);
       },
       error: (err) => {
-        this.snackbarService.show('Ein Fehler ist aufgetreten.');
-        console.error(err);
-      },
+        console.error('Update failed', err);
+        // Spezifische Behandlung für 409
+        if (err.status === 409) {
+           this.snackbarService.show('Konflikt beim Speichern. Bitte laden Sie die Seite neu.');
+        } else {
+           this.snackbarService.show('Fehler beim Aktualisieren des Produkts.');
+        }
+      }
     });
   }
 
+  private createUpdateFormData(): FormData {
+    const formData = new FormData();
+    const val = this.productForm.getRawValue();
+
+    // 1. ZUERST ID und RowVersion anhängen (Wichtig für Backend-Parser)
+    formData.append('Id', this.productId);
+    
+    // if (this.loadedRowVersion) {
+    //     formData.append('RowVersion', this.loadedRowVersion);
+    // }
+
+    // 2. Einfache Felder
+    formData.append('Name', val.name);
+    formData.append('Description', val.description);
+    formData.append('SKU', val.sku);
+    formData.append('Slug', val.slug);
+    formData.append('IsActive', String(val.isActive));
+    formData.append('IsFeatured', String(val.isFeatured));
+    formData.append('FeaturedDisplayOrder', String(val.featuredDisplayOrder || 0));
+
+    // 3. Zahlen sicher als String mit Punkt formatieren
+    // Das verhindert Fehler, wenn der Browser "12,50" senden würde
+    const formatNumber = (num: any) => (num === null || num === undefined || num === '') ? '' : String(Number(num));
+
+    formData.append('Price', formatNumber(val.price));
+    formData.append('StockQuantity', formatNumber(val.stockQuantity));
+    
+    if (val.oldPrice) formData.append('OldPrice', formatNumber(val.oldPrice));
+    if (val.weight) formData.append('Weight', formatNumber(val.weight));
+    if (val.purchasePrice) formData.append('PurchasePrice', formatNumber(val.purchasePrice));
+    if (val.supplierId) formData.append('SupplierId', val.supplierId);
+
+    // 4. Arrays / Listen
+    if (Array.isArray(val.categorieIds)) {
+      val.categorieIds.forEach((id: string) => formData.append('CategorieIds', id));
+    }
+
+    if (this.imagesToDelete.length > 0) {
+      this.imagesToDelete.forEach(id => formData.append('ImagesToDelete', id));
+    }
+
+    // 5. Dateien - Ganz am Ende anhängen
+    const mainImagePreview = this.allImagesForForm.find(img => img.isMainImage);
+    const mainImageTempId = mainImagePreview ? mainImagePreview.identifier : null;
+
+    this.newImageFiles.forEach((file, tempId) => {
+      // Dateinamen bereinigen, um Parsing-Probleme zu vermeiden
+      const safeFileName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_');
+      
+      if (tempId === mainImageTempId) {
+        formData.append('MainImageFile', file, safeFileName);
+      } else {
+        formData.append('AdditionalImageFiles', file, safeFileName);
+      }
+    });
+
+     if (mainImagePreview && !this.newImageFiles.has(mainImagePreview.identifier)) {
+       console.log('Setze bestehendes Bild als Main:', mainImagePreview.identifier);
+       formData.append('SetMainImageId', mainImagePreview.identifier);
+    }
+
+    return formData;
+  }
+  
   cancel(): void {
     this.router.navigate(['/shop/products']);
   }
 
-  // --- NEUE EVENT-HANDLER FÜR BILDER ---
-  onFilesSelected(files: File[]): void {
-    this.newImageFiles.push(...files);
-    if (!this.mainImageIdentifier && this.newImageFiles.length > 0) {
-      this.mainImageIdentifier = this.newImageFiles[0].name;
-    }
-    this.rebuildAllImagesForForm();
-  }
-
-  onSetMainImage(identifier: string): void {
-    this.mainImageIdentifier = identifier;
-    this.rebuildAllImagesForForm();
-  }
-
-  onDeleteImage(identifier: string): void {
-    const isExisting = this.existingImages.some((img) => img.id === identifier);
-    if (isExisting) {
-      this.imagesToDelete.push(new FormControl(identifier));
-      this.existingImages = this.existingImages.filter(
-        (img) => img.id !== identifier
-      );
-    } else {
-      this.newImageFiles = this.newImageFiles.filter(
-        (file) => file.name !== identifier
-      );
-    }
-
-    if (this.mainImageIdentifier === identifier) {
-      const firstExisting =
-        this.existingImages.length > 0 ? this.existingImages[0].id : null;
-      const firstNew =
-        this.newImageFiles.length > 0 ? this.newImageFiles[0].name : null;
-      this.mainImageIdentifier = firstExisting || firstNew;
-    }
-    this.rebuildAllImagesForForm();
-  }
-
-  // --- Private Helfermethoden ---
-  private rebuildAllImagesForForm(): void {
-    this.allImagesForForm.forEach((image) => {
-      if (typeof image.url === 'object')
-        URL.revokeObjectURL(image.url as string);
-    });
-
-    const combined: ImagePreview[] = [];
-    this.existingImages
-      .filter((img) => !!img.url) // Stellt sicher, dass nur Bilder mit URL verwendet werden
-      .forEach((img) => {
-        combined.push({
-          identifier: img.id,
-          url: img.url!,
-          isMainImage: img.id === this.mainImageIdentifier,
-        });
-      });
-
-    this.newImageFiles.forEach((file) => {
-      combined.push({
-        identifier: file.name,
-        url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
-        isMainImage: file.name === this.mainImageIdentifier,
-      });
-    });
-
-    this.allImagesForForm = combined;
-  }
-
-  private createFormData(): FormData {
-    const formData = new FormData();
-    const formValue = this.productForm.getRawValue();
-
-    Object.keys(formValue).forEach((key) => {
-      const value = formValue[key];
-      if (key === 'categorieIds' || key === 'imagesToDelete') {
-        (value as string[]).forEach((id) =>
-          formData.append(this.capitalizeFirstLetter(key), id)
-        );
-      } else if (value !== null && value !== undefined && value !== '') {
-        formData.append(this.capitalizeFirstLetter(key), value.toString());
-      }
-    });
-
-    const mainImageFile = this.newImageFiles.find(
-      (f) => f.name === this.mainImageIdentifier
-    );
-    if (mainImageFile) {
-      formData.append('MainImageFile', mainImageFile);
-    } else if (this.mainImageIdentifier) {
-      formData.append('MainImageId', this.mainImageIdentifier);
-    }
-
-    this.newImageFiles
-      .filter((f) => f.name !== this.mainImageIdentifier)
-      .forEach((file) => formData.append('AdditionalImageFiles', file));
-
-    return formData;
-  }
-
-  // Private Helfermethoden
-  private prepareSubmissionData(): void {
-    const nameControl = this.productForm.get('name');
-    const slugControl = this.productForm.get('slug');
-    const skuControl = this.productForm.get('sku');
-
-    if (nameControl && slugControl && !slugControl.value) {
-      slugControl.setValue(this.generateSlug(nameControl.value), {
-        emitEvent: false,
-      });
-    }
-    if (nameControl && skuControl && !skuControl.value) {
-      skuControl.setValue(this.generateSkuValue(nameControl.value), {
-        emitEvent: false,
-      });
-    }
-  }
-
-  private subscribeToNameChanges(): void {
-    const nameControl = this.productForm.get('name');
-    const slugControl = this.productForm.get('slug');
-
-    if (nameControl && slugControl) {
-      this.nameChangeSubscription = nameControl.valueChanges
-        .pipe(debounceTime(400), distinctUntilChanged())
-        .subscribe((name) => {
-          if (name && !slugControl.dirty) {
-            slugControl.setValue(this.generateSlug(name));
-          }
-        });
-    }
-  }
-
-  private generateSlug(name: string): string {
-    return name
-      .toLowerCase()
-      .replace(/\s+/g, '-')
-      .replace(
-        /[äöüß]/g,
-        (char) => ({ ä: 'ae', ö: 'oe', ü: 'ue', ß: 'ss' }[char] || '')
-      )
-      .replace(/[^a-z0-9-]/g, '')
-      .replace(/-+/g, '-');
-  }
-
-  private generateSkuValue(name: string): string {
-    const prefix = name.substring(0, 4).toUpperCase().replace(/\s+/g, '');
-    const randomPart = Math.random().toString(36).substring(2, 8).toUpperCase();
-    return `${prefix}-${randomPart}`;
-  }
-
-  private capitalizeFirstLetter(string: string): string {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 }

src/app/features/components/products/product-list/product-list.component.css

@@ -8,6 +8,14 @@
   gap: 1rem;
 }
 
+.page-header {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 1rem;
+}
+
 app-search-bar {
   flex-grow: 1;
   max-width: 400px;
@@ -20,7 +28,9 @@ app-search-bar {
 }
 
 .column-filter-container {
+  display: flex;
   position: relative;
+  gap: 1.5rem;
 }
 
 .column-filter-dropdown {

src/app/features/components/products/product-list/product-list.component.html

@@ -1,20 +1,34 @@
 <!-- /src/app/features/admin/components/products/product-list/product-list.component.html -->
 
 <div class="page-container">
-  <div class="header">
-    <h1 class="page-title">Produktübersicht</h1>
-    <app-button buttonType="primary" (click)="onAddNew()">
-      <app-icon iconName="plus"></app-icon> Neues Produkt
-    </app-button>
+  <div>
+    <h3 class="page-header">Produktübersicht</h3>
   </div>
 
   <div class="table-header">
-    <app-search-bar placeholder="Produkte nach Name oder SKU suchen..." (search)="onSearch($event)"></app-search-bar>
+    <app-search-bar
+      placeholder="Produkte nach Name oder SKU suchen..."
+      (search)="onSearch($event)"
+    ></app-search-bar>
+
     <div class="column-filter-container">
-      <app-button buttonType="stroked" (click)="toggleColumnFilter()" iconName="filter">Spalten</app-button>
+      <app-button buttonType="primary" iconName="plus" (click)="onAddNew()">
+        Neues Produkt
+      </app-button>
+
+      <app-button
+        buttonType="stroked"
+        (click)="toggleColumnFilter()"
+        iconName="filter"
+        >Spalten</app-button
+      >
       <div class="column-filter-dropdown" *ngIf="isColumnFilterVisible">
         <label *ngFor="let col of allTableColumns">
-          <input type="checkbox" [checked]="isColumnVisible(col.key)" (change)="onColumnToggle(col, $event)">
+          <input
+            type="checkbox"
+            [checked]="isColumnVisible(col.key)"
+            (change)="onColumnToggle(col, $event)"
+          />
           {{ col.title }}
         </label>
       </div>
@@ -25,6 +39,7 @@
     [data]="filteredProducts"
     [columns]="visibleTableColumns"
     (edit)="onEditProduct($event.id)"
-    (delete)="onDeleteProduct($event.id)">
+    (delete)="onDeleteProduct($event.id)"
+  >
   </app-generic-table>
 </div>

src/app/features/components/products/product-list/product-list.component.ts

@@ -11,12 +11,11 @@ import { StorageService } from '../../../../core/services/storage.service';
 import { GenericTableComponent, ColumnConfig } from '../../../../shared/components/data-display/generic-table/generic-table.component';
 import { SearchBarComponent } from '../../../../shared/components/layout/search-bar/search-bar.component';
 import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
-import { IconComponent } from '../../../../shared/components/ui/icon/icon.component';
 
 @Component({
   selector: 'app-product-list',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe, GenericTableComponent, SearchBarComponent, ButtonComponent, IconComponent],
+  imports: [CommonModule, GenericTableComponent, SearchBarComponent, ButtonComponent],
   providers: [DatePipe],
   templateUrl: './product-list.component.html',
   styleUrl: './product-list.component.css'
@@ -59,6 +58,8 @@ export class ProductListComponent implements OnInit {
 ];
   visibleTableColumns: ColumnConfig[] = [];
 
+    public readonly fallbackImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxjaXJjbGUgY3g9IjkiIGN5PSI5IiByPSIyIi8+PHBhdGggZD0ibTIxIDE1LTUtNWwtNSA1bC0yLTJsLTUgNSIvPjwvc3ZnPg==';
+
   constructor() {
     this.loadTableSettings();
   }
@@ -144,8 +145,8 @@ export class ProductListComponent implements OnInit {
   }
 
   getMainImageUrl(images?: ProductImage[]): string {
-    if (!images || images.length === 0) return 'https://via.placeholder.com/50';
+    if (!images || images.length === 0) return this.fallbackImage;
     const mainImage = images.find(img => img.isMainImage);
-    return mainImage?.url || images[0]?.url || 'https://via.placeholder.com/50';
+    return mainImage?.url || images[0]?.url || this.fallbackImage;
   }
 }

src/app/features/components/shipping-methods/shipping-method-list/shipping-method-list.component.html

@@ -22,27 +22,51 @@
       <input type="number" formControlName="cost" placeholder="Kosten" />
     </div>
 
-    <!-- +++ NEUE FELDER HINZUGEFÜGT +++ -->
-    <div>
-      <label>Minimale Liefertage:</label>
-      <input
-        type="number"
-        formControlName="minDeliveryDays"
-        placeholder="z.B. 1"
-      />
+    <div style="display: flex; gap: 10px;">
+        <div>
+            <label>Minimale Liefertage:</label>
+            <input
+                type="number"
+                formControlName="minDeliveryDays"
+                placeholder="z.B. 1"
+            />
+        </div>
+    
+        <div>
+            <label>Maximale Liefertage:</label>
+            <input
+                type="number"
+                formControlName="maxDeliveryDays"
+                placeholder="z.B. 3"
+            />
+        </div>
     </div>
 
-    <div>
-      <label>Maximale Liefertage:</label>
-      <input
-        type="number"
-        formControlName="maxDeliveryDays"
-        placeholder="z.B. 3"
-      />
+    <!-- +++ NEUE GEWICHTS FELDER +++ -->
+    <div style="display: flex; gap: 10px; margin-top: 10px;">
+        <div>
+          <label>Gewicht von (kg):</label>
+          <input
+            type="number"
+            formControlName="minWeight"
+            placeholder="0"
+            step="0.01"
+          />
+        </div>
+    
+        <div>
+          <label>Gewicht bis (kg):</label>
+          <input
+            type="number"
+            formControlName="maxWeight"
+            placeholder="10"
+            step="0.01"
+          />
+        </div>
     </div>
     <!-- +++ ENDE NEU +++ -->
 
-    <div>
+    <div style="margin-top: 10px;">
       <label><input type="checkbox" formControlName="isActive" /> Aktiv</label>
     </div>
 
@@ -55,16 +79,26 @@
       Abbrechen
     </button>
   </form>
+  
   <hr />
+  
   <h2>Bestehende Methoden</h2>
   <ul>
-    <li *ngFor="let method of methods$ | async">
-      {{ method.name }}
-      ({{ method.cost | currency : "EUR" }}) - Lieferzeit:
-      {{ method.minDeliveryDays }}-{{ method.maxDeliveryDays }} Tage - Aktiv:
-      {{ method.isActive }}
-      <button (click)="selectMethod(method)">Bearbeiten</button>
-      <button (click)="onDelete(method.id)">Löschen</button>
+    <li *ngFor="let method of methods$ | async" style="margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
+      <strong>{{ method.name }}</strong> ({{ method.cost | currency : "EUR" }}) <br/>
+      
+      <!-- Anzeige der Details -->
+      <small>
+        Lieferzeit: {{ method.minDeliveryDays }}-{{ method.maxDeliveryDays }} Tage | 
+        <!-- NEU: Gewichtsanzeige -->
+        Gewicht: {{ method.minWeight }}kg - {{ method.maxWeight }}kg |
+        Aktiv: {{ method.isActive ? 'Ja' : 'Nein' }}
+      </small>
+      
+      <div style="margin-top: 5px;">
+          <button (click)="selectMethod(method)">Bearbeiten</button>
+          <button (click)="onDelete(method.id)">Löschen</button>
+      </div>
     </li>
   </ul>
 </div>

src/app/features/components/shipping-methods/shipping-method-list/shipping-method-list.component.ts

@@ -26,7 +26,10 @@ export class ShippingMethodListComponent implements OnInit {
       cost: [0, [Validators.required, Validators.min(0)]],
       isActive: [true],
       minDeliveryDays: [1, [Validators.required, Validators.min(0)]],
-      maxDeliveryDays: [3, [Validators.required, Validators.min(0)]]
+      maxDeliveryDays: [3, [Validators.required, Validators.min(0)]],
+      // NEU: Validierung für Gewicht
+      minWeight: [0, [Validators.required, Validators.min(0)]],
+      maxWeight: [10, [Validators.required, Validators.min(0)]]
     });
   }
 
@@ -46,15 +49,16 @@ export class ShippingMethodListComponent implements OnInit {
       cost: 0,
       isActive: true,
       minDeliveryDays: 1,
-      maxDeliveryDays: 3
+      maxDeliveryDays: 3,
+      // NEU: Reset Werte
+      minWeight: 0,
+      maxWeight: 10
     });
   }
 
-  // --- KORREKTUR: onSubmit sendet jetzt direkt das Formularwert-Objekt als JSON ---
   onSubmit(): void {
     if (this.methodForm.invalid) return;
     
-    // Das Formular-Objekt hat bereits die richtige Struktur, die das Backend erwartet.
     const dataToSend: ShippingMethod = {
       id: this.selectedMethodId || '00000000-0000-0000-0000-000000000000',
       ...this.methodForm.value
@@ -66,7 +70,6 @@ export class ShippingMethodListComponent implements OnInit {
       this.shippingMethodService.create(dataToSend).subscribe(() => this.reset());
     }
   }
-  // --- ENDE KORREKTUR ---
 
   onDelete(id: string): void {
     if (confirm('Versandmethode wirklich löschen?')) {

src/app/shared/components/data-display/generic-table/generic-table.component.html

@@ -35,8 +35,8 @@
             
             <ng-container *ngSwitchCase="'image-text'">
                <div class="user-cell">
-                <img [src]="getProperty(item, col.imageKey!) || 'https://via.placeholder.com/40'" 
-                     [alt]="'Bild von ' + getProperty(item, col.key)" />
+                <img [src]="getProperty(item, col.imageKey!) || fallbackImage" 
+                     alt="{{ item.name }}" />
                 <div>
                   <div class="user-name">{{ getProperty(item, col.key) }}</div>
                   <div class="user-email">{{ getProperty(item, col.subKey!) }}</div>
@@ -45,8 +45,8 @@
             </ng-container>
 
             <ng-container *ngSwitchCase="'image'">
-              <img [src]="getProperty(item, col.key) || 'https://via.placeholder.com/50'" 
-                   alt="Bild" 
+              <img [src]="getProperty(item, col.key) || fallbackImage" 
+                   alt="{{ item.name }}" 
                    style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
             </ng-container>
 

src/app/shared/components/data-display/generic-table/generic-table.component.ts

@@ -35,6 +35,7 @@ export class GenericTableComponent implements OnChanges, OnInit {
 
   public displayedData: any[] = [];
   public currentPage = 1;
+  public readonly fallbackImage = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxjaXJjbGUgY3g9IjkiIGN5PSI5IiByPSIyIi8+PHBhdGggZD0ibTIxIDE1LTUtNWwtNSA1bC0yLTJsLTUgNSIvPjwvc3ZnPg==';
 
   ngOnInit(): void { this.updatePagination(); }
   ngOnChanges(changes: SimpleChanges): void { if (changes['data']) { this.currentPage = 1; this.updatePagination(); } }
@@ -47,6 +48,7 @@ export class GenericTableComponent implements OnChanges, OnInit {
   }
 
   getProperty(item: any, key: string): any {
+   
     if (!key) return '';
     return key.split('.').reduce((obj, part) => obj && obj[part], item);
   }

src/app/shared/components/data-display/paginator/paginator.component.html

@@ -8,7 +8,7 @@
       iconName="chevron_backward"
       (click)="goToPrevious()" 
       [disabled]="currentPage === 1"
-      tooltip="Vorherige Seite">
+      >
       
     </app-button>
     <app-button 
@@ -16,7 +16,7 @@
       iconName="chevron_forward"
       (click)="goToNext()" 
       [disabled]="currentPage === totalPages"
-      tooltip="Nächste Seite">
+      >
       
     </app-button>
   </div>

src/app/shared/components/layout/sidebar/sidebar.component.html

@@ -1,128 +1,128 @@
 <aside class="sidebar" [class.collapsed]="isCollapsed">
   <nav class="sidebar-nav">
+    <!-- Toggle bleibt wie er ist, da er keine Route ist -->
     <div class="nav-item" (click)="toggleSidebar()">
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>Toggle</span>
     </div>
 
+    <!-- Products -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'home'"
-      (click)="setActive('home')"
+      routerLink="/shop/products"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
+      <span>products</span>
+    </div>
 
+    <!-- Home -->
+    <div
+      class="nav-item"
+      routerLink="/shop/home"
+      routerLinkActive="active"
+    >
+      <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
       <span>Home</span>
     </div>
 
+    <!-- Categories -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'categories'"
-      (click)="setActive('categories')"
+      routerLink="/shop/categories"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>categories</span>
     </div>
 
+    <!-- Discounts -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'discounts'"
-      (click)="setActive('discounts')"
+      routerLink="/shop/discounts"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>discounts</span>
     </div>
+
+    <!-- Orders -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'orders'"
-      (click)="setActive('orders')"
+      routerLink="/shop/orders"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>orders</span>
     </div>
+
+    <!-- Payment Methods -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'payment-methods'"
-      (click)="setActive('payment-methods')"
+      routerLink="/shop/payment-methods"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>payment-methods</span>
     </div>
+   
+    <!-- Reviews -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'products'"
-      (click)="setActive('products')"
+      routerLink="/shop/reviews"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
-      <span>products</span>
-    </div>
-    <div
-      class="nav-item"
-      [class.active]="activeRoute === 'reviews'"
-      (click)="setActive('reviews')"
-    >
-      <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>reviews</span>
     </div>
-    <!-- <div
-      class="nav-item"
-      [class.active]="activeRoute === 'settings'"
-      (click)="setActive('settings')"
-    >
-      <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
 
-      <span>settings</span>
-    </div> -->
+    <!-- Shipping Methods -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'shipping-methods'"
-      (click)="setActive('shipping-methods')"
+      routerLink="/shop/shipping-methods"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>shipping-methods</span>
     </div>
+
+    <!-- Shop Info -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'shop-info'"
-      (click)="setActive('shop-info')"
+      routerLink="/shop/shop-info"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>shop-info</span>
     </div>
+
+    <!-- Supplier List -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'supplier-list'"
-      (click)="setActive('supplier-list')"
+      routerLink="/shop/supplier-list"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>supplier-list</span>
     </div>
+
+    <!-- Users -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'users'"
-      (click)="setActive('users')"
+      routerLink="/shop/users"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>users</span>
     </div>
+
+    <!-- Analytics -->
     <div
       class="nav-item"
-      [class.active]="activeRoute === 'analytics'"
-      (click)="setActive('analytics')"
+      routerLink="/shop/analytics"
+      routerLinkActive="active"
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
-
       <span>analytics</span>
     </div>
   </nav>

src/app/shared/components/layout/sidebar/sidebar.component.ts

@@ -1,51 +1,40 @@
-// /src/app/core/components/default-layout/sidebar/sidebar.component.ts
-
 import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink, RouterLinkActive } from '@angular/router'; // RouterLink und RouterLinkActive importieren
+// WICHTIG: RouterLink und RouterLinkActive importieren
+import { RouterLink, RouterLinkActive, Router } from '@angular/router'; 
 import { IconComponent } from '../../ui/icon/icon.component';
 import { StorageService } from '../../../../core/services/storage.service';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [CommonModule, IconComponent], // RouterLink und RouterLinkActive hier hinzufügen
+  // WICHTIG: Hier im Array hinzufügen
+  imports: [CommonModule, IconComponent, RouterLink, RouterLinkActive], 
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.css',
 })
 export class SidebarComponent implements OnInit {
-  // --- Abhängigkeiten mit moderner inject()-Syntax ---
   private storageService = inject(StorageService);
-
   private readonly sidebarCollapsedKey = 'app-sidebar-collapsed';
+  
   public isCollapsed = false;
 
-  activeRoute = 'dashboard';
   constructor(private router: Router) {}
 
   ngOnInit(): void {
     this.loadCollapsedState();
   }
 
-  setActive(route: string): void {
-    this.activeRoute = route;
-    this.router.navigateByUrl('/shop/' + route);
-  }
-
   toggleSidebar(): void {
     this.isCollapsed = !this.isCollapsed;
     this.saveCollapsedState();
   }
 
   private loadCollapsedState(): void {
-    // Der Service kümmert sich um die Browser-Prüfung und gibt boolean oder null zurück
-    this.isCollapsed =
-      this.storageService.getItem<boolean>(this.sidebarCollapsedKey) ?? false;
+    this.isCollapsed = this.storageService.getItem<boolean>(this.sidebarCollapsedKey) ?? false;
   }
 
   private saveCollapsedState(): void {
-    // Der Service kümmert sich um die Serialisierung des booleans
     this.storageService.setItem(this.sidebarCollapsedKey, this.isCollapsed);
   }
 }

src/app/shared/components/ui/button/button.component.css

@@ -135,11 +135,20 @@
   transform: translateX(-50%) translateY(-12px);
 }
 
-
 .btn.is-loading {
   cursor: wait;
 }
 
+.btn-content {
+  display: flex;
+}
+.btn-content span {
+  display: flex;
+  height: auto;
+  align-content: center;
+  flex-wrap: wrap-reverse;
+}
+
 .btn-content.is-hidden {
   visibility: hidden;
   opacity: 0;