Format product color labels

src/pages/Products.tsx

@@ -7,6 +7,7 @@ import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductAnalyticsItem } from '../types';
 import { exportToCSV, fetchProductAnalytics } from '../dataService';
 import { encodeProductGroupKey, parseProductName, sortProductSizes } from '../productParsing';
+import { formatColorLabel } from '../displayFormatters';
 
 type StockRisk = 'rupture' | 'critical' | 'attention' | 'monitor' | 'healthy' | 'no_sales';
 type StockStatusFilter = 'all' | StockRisk;
@@ -657,7 +658,7 @@ const Products = () => {
                         <div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={product.name}>{product.name}</div>
                         <div className="truncate text-[10px] text-zinc-400 dark:text-dark-muted font-medium">
                           {viewMode === 'group'
-                            ? `Cor principal: ${product.topColor} · Tam. principal: ${product.topSize} · ${product.colors.length} cores · ${product.sizes.length} tamanhos`
+                            ? `Cor principal: ${formatColorLabel(product.topColor)} · Tam. principal: ${product.topSize} · ${product.colors.length} cores · ${product.sizes.length} tamanhos`
                             : `Preço Atual: ${formatCurrency(product.lastPrice)}`}
                         </div>
                       </td>