chore(front-end):map color

frontend/src/app/features/order/order.component.ts

@@ -6,6 +6,10 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
 import { QuoteEstimatorService } from '../calculator/services/quote-estimator.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { environment } from '../../../environments/environment';
+import {
+  findColorHex,
+  getColorLabelToken,
+} from '../../core/constants/colors.const';
 import {
   PriceBreakdownComponent,
   PriceBreakdownRow,
@@ -278,23 +282,28 @@ export class OrderComponent implements OnInit {
       return variantLabel;
     }
 
-    const colorName = String(item?.shopVariantColorName ?? '').trim();
-    return colorName || null;
+    return getColorLabelToken(item?.shopVariantColorName);
   }
 
   itemColorLabel(item: PublicOrderItem): string {
     const shopColor = String(item?.shopVariantColorName ?? '').trim();
     if (shopColor) {
-      return shopColor;
+      return getColorLabelToken(shopColor) ?? this.translate.instant('ORDER.NOT_AVAILABLE');
     }
 
     const filamentColor = String(item?.filamentColorName ?? '').trim();
     if (filamentColor) {
-      return filamentColor;
+      return (
+        getColorLabelToken(filamentColor) ??
+        this.translate.instant('ORDER.NOT_AVAILABLE')
+      );
     }
 
     const rawColor = String(item?.colorCode ?? '').trim();
-    return rawColor || this.translate.instant('ORDER.NOT_AVAILABLE');
+    return (
+      getColorLabelToken(rawColor) ??
+      this.translate.instant('ORDER.NOT_AVAILABLE')
+    );
   }
 
   itemColorHex(item: PublicOrderItem): string | null {
@@ -313,7 +322,7 @@ export class OrderComponent implements OnInit {
       return rawColor;
     }
 
-    return null;
+    return findColorHex(rawColor);
   }
 
   showItemMaterial(item: PublicOrderItem): boolean {