Format product color labels

src/pages/ProductDetails.tsx

@@ -8,6 +8,7 @@ import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductDetailsAnalytics } from '../types';
 import { fetchProductDetailsAnalytics } from '../dataService';
 import { parseProductName } from '../productParsing';
+import { formatColorLabel } from '../displayFormatters';
 
 const CHART_GRID_COLOR = 'var(--chart-grid)';
 const CHART_AXIS_COLOR = 'var(--chart-axis)';
@@ -361,7 +362,7 @@ const ProductDetails = () => {
                         <span>#{variant.id}</span>
                         {metadata.color && (
                           <span className="rounded-full border border-sky-400/25 bg-sky-400/10 px-2 py-0.5 font-bold text-sky-300">
-                            {metadata.color}
+                            {formatColorLabel(metadata.color)}
                           </span>
                         )}
                         {metadata.size && (

src/pages/ProductGroupDetails.tsx

@@ -4,11 +4,13 @@ import { DollarSign, Package, Palette, Ruler, TrendingDown, TrendingUp, Warehous
 import BackButton from '../components/BackButton';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
-import ProductColorBadge, { ProductColorSwatch, getProductColor } from '../components/ProductColorBadge';
+import ProductColorBadge, { ProductColorSwatch } from '../components/ProductColorBadge';
 import RefreshStatus from '../components/RefreshStatus';
 import { buildOpenProductionByProductId } from '../analytics/cutting';
 import { fetchProductAnalytics, fetchProductionOrders } from '../dataService';
 import { decodeProductGroupKey, normalizeProductText, parseProductName } from '../productParsing';
+import { formatColorLabel } from '../displayFormatters';
+import { getProductColor } from '../productColors';
 import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
 
 type VariantRow = ProductAnalyticsItem & {
@@ -121,13 +123,14 @@ const BreakdownPanel = ({
           {visibleRows.map(row => {
             const width = maxSold ? Math.max(4, (row.quantitySold / maxSold) * 100) : 0;
             const barColor = type === 'color' ? getBarColor(row.label) : '#25c2ff';
+            const displayLabel = type === 'color' ? formatColorLabel(row.label) : row.label;
 
             return (
               <div key={row.label} className="grid grid-cols-[minmax(7.5rem,9rem)_1fr_6rem] items-center gap-3">
                 <div className="flex min-w-0 items-center gap-2">
                   {type === 'color' ? <ProductColorSwatch label={row.label} /> : <span className="h-2.5 w-2.5 shrink-0 rounded-sm bg-sky-400" />}
-                  <span className="truncate text-xs font-bold text-dark-text" title={row.label}>
-                    {type === 'size' && row.label !== 'Sem tamanho' ? `Tam. ${row.label}` : row.label}
+                  <span className="truncate text-xs font-bold text-dark-text" title={displayLabel}>
+                    {type === 'size' && row.label !== 'Sem tamanho' ? `Tam. ${row.label}` : displayLabel}
                   </span>
                 </div>
                 <div className="h-3 overflow-hidden rounded-full border border-dark-border bg-dark-input">

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>

src/pages/Replenishment.tsx

@@ -8,6 +8,7 @@ import { buildOpenProductionByProductId } from '../analytics/cutting';
 import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
 import { exportToCSV, fetchProductAnalytics, fetchProductionOrders } from '../dataService';
 import { encodeProductGroupKey, parseProductName, sortProductSizes } from '../productParsing';
+import { formatColorLabel } from '../displayFormatters';
 
 type ReplenishmentStatus = 'need' | 'covered' | 'no_sales' | 'no_stock';
 type ReplenishmentFilter = 'all' | ReplenishmentStatus;
@@ -237,7 +238,7 @@ const Replenishment = () => {
             : 'covered';
       const sizes = sortProductSizes(Array.from(new Set(group.flatMap(row => row.sizes))));
       const productIds = group.map(row => row.id);
-      const name = first.color ? `${first.baseName} · ${first.color}` : first.baseName;
+      const name = first.color ? `${first.baseName} · ${formatColorLabel(first.color)}` : first.baseName;
 
       return {
         ...first,