More colors

frontend/app/pages/admin/index.vue

@@ -22,9 +22,22 @@ const COLOR_HEX: Record<string, string> = {
   yellow: '#e2cf3c',
   green: '#5fae4e',
   blue: '#4c8be0',
-  purple: '#9b59d0'
+  purple: '#9b59d0',
+  black: '#1a1a1a',
+  white: '#f2f2f2',
+  pink: '#e88fb3',
+  turquoise: '#40c4b8',
+  teal: '#17857c',
+  navy: '#34549c',
+  lavender: '#b98fe0',
+  magenta: '#cf479f',
+  lime: '#a8d14e',
+  coral: '#ef8368'
 };
 
+const orderSwatch = (order: any) =>
+  order.color === 'custom' ? order.customColor : COLOR_HEX[order.color] || 'transparent';
+
 const formatUptime = (seconds: number) => {
   const h = Math.floor(seconds / 3600);
   const m = Math.floor((seconds % 3600) / 60);
@@ -153,8 +166,8 @@ const onLogout = () => redirectToLogin();
               <td class="msg-cell">{{ order.message }}</td>
               <td>
                 <span class="color-chip">
-                  <span class="swatch" :style="{ background: COLOR_HEX[order.color] || 'transparent' }" aria-hidden="true"></span>
-                  {{ $t(`order.hibolia.colors.${order.color}`) }}
+                  <span class="swatch" :style="{ background: orderSwatch(order) }" aria-hidden="true"></span>
+                  {{ $t(`order.hibolia.colors.${order.color}`) }}<template v-if="order.color === 'custom'"> {{ order.customColor }}</template>
                 </span>
               </td>
               <td class="msg-cell">{{ order.shipping }}</td>