Unify product color badges

src/components/ProductColorBadge.tsx

@@ -0,0 +1,63 @@
+const COLOR_SWATCHES: Array<{ pattern: string; color: string }> = [
+  { pattern: 'preto', color: '#171717' },
+  { pattern: 'branco', color: '#f8fafc' },
+  { pattern: 'bege', color: '#d7bf9a' },
+  { pattern: 'cafe', color: '#79553d' },
+  { pattern: 'perola', color: '#e7dfcf' },
+  { pattern: 'marinho', color: '#172554' },
+  { pattern: 'bordo', color: '#6b1226' },
+  { pattern: 'verde', color: '#166534' },
+  { pattern: 'rosa', color: '#f0a6bf' },
+  { pattern: 'cinza', color: '#8f8f8f' },
+  { pattern: 'vermelho', color: '#b91c1c' },
+  { pattern: 'grafite', color: '#3f3f46' },
+  { pattern: 'azul', color: '#2563eb' },
+  { pattern: 'marron', color: '#6b4f3b' },
+  { pattern: 'marrom', color: '#6b4f3b' }
+];
+
+const normalizeColorLabel = (label: string) => (
+  label.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase()
+);
+
+export const getProductColor = (label: string) => {
+  const normalizedLabel = normalizeColorLabel(label);
+  return COLOR_SWATCHES.find(item => normalizedLabel.includes(item.pattern))?.color || '#64748b';
+};
+
+export const ProductColorSwatch = ({
+  label,
+  className = 'h-2.5 w-2.5'
+}: {
+  label: string;
+  className?: string;
+}) => (
+  <span
+    className={`${className} shrink-0 rounded-full`}
+    style={{
+      backgroundColor: getProductColor(label),
+      boxShadow: '0 0 0 1px var(--color-dark-card), 0 0 0 2px var(--color-dark-border)'
+    }}
+  />
+);
+
+const ProductColorBadge = ({
+  label,
+  emptyLabel = 'Sem cor',
+  className = ''
+}: {
+  label?: string;
+  emptyLabel?: string;
+  className?: string;
+}) => {
+  const displayLabel = label?.trim() || emptyLabel;
+
+  return (
+    <span className={`inline-flex max-w-full items-center gap-2 rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text ${className}`}>
+      <ProductColorSwatch label={displayLabel} className="h-2 w-2" />
+      <span className="truncate">{displayLabel}</span>
+    </span>
+  );
+};
+
+export default ProductColorBadge;

src/pages/Cutting.tsx

@@ -3,6 +3,7 @@ import { Link, useOutletContext } from 'react-router-dom';
 import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2, X } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
+import ProductColorBadge from '../components/ProductColorBadge';
 import RefreshStatus from '../components/RefreshStatus';
 import { CUT_FAMILY_RULES, buildCutPlan, buildOpenProductionByProductId, type CutFamilyKey, type CutIssue, type CutPlanSkuRow, type CutProductOverride } from '../analytics/cutting';
 import { exportToCSV, fetchCuttingSettings, fetchProductAnalytics, fetchProductionOrders, saveCuttingSettings } from '../dataService';
@@ -895,10 +896,7 @@ const Cutting = () => {
                     </td>
                     <td className="px-4 py-2.5">
                       <div className="flex min-w-0 items-center gap-1.5">
-                        <span className="inline-flex min-w-0 max-w-[92px] items-center gap-1.5 rounded-full border border-sky-400/25 bg-sky-400/10 px-2 py-1 text-xs font-bold text-sky-300">
+                        <ProductColorBadge label={row.color} className="max-w-[92px] px-2" />
-                          <Palette className="h-3 w-3 shrink-0" />
-                          <span className="truncate">{row.color || '-'}</span>
-                        </span>
                         <span className="inline-flex items-center gap-1 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-1 text-xs font-bold text-emerald-300">
                           <Ruler className="h-3 w-3" />
                           {row.size || '-'}

src/pages/ProductGroupDetails.tsx

@@ -4,6 +4,7 @@ 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 RefreshStatus from '../components/RefreshStatus';
 import { fetchProductAnalytics } from '../dataService';
 import { decodeProductGroupKey, normalizeProductText, parseProductName } from '../productParsing';
@@ -26,25 +27,6 @@ type BreakdownRow = {
 
 const BREAKDOWN_LIMIT = 12;
 
-const COLOR_SWATCHES: Array<{ pattern: string; color: string }> = [
-  { pattern: 'preto', color: '#171717' },
-  { pattern: 'branco', color: '#f8fafc' },
-  { pattern: 'bege', color: '#d7bf9a' },
-  { pattern: 'café', color: '#79553d' },
-  { pattern: 'cafe', color: '#79553d' },
-  { pattern: 'perola', color: '#e7dfcf' },
-  { pattern: 'pérola', color: '#e7dfcf' },
-  { pattern: 'marinho', color: '#172554' },
-  { pattern: 'bordo', color: '#6b1226' },
-  { pattern: 'bordô', color: '#6b1226' },
-  { pattern: 'verde', color: '#166534' },
-  { pattern: 'rosa', color: '#f0a6bf' },
-  { pattern: 'cinza', color: '#8f8f8f' },
-  { pattern: 'vermelho', color: '#b91c1c' },
-  { pattern: 'grafite', color: '#3f3f46' },
-  { pattern: 'azul', color: '#2563eb' }
-];
-
 const getRangeDays = (range: DateRange) => {
   const start = new Date(range.start);
   const end = new Date(range.end);
@@ -67,26 +49,11 @@ const formatDays = (value: number | null) => {
   return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
 };
 
-const getSwatchColor = (label: string) => {
-  const normalizedLabel = label.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
-  return COLOR_SWATCHES.find(item => normalizedLabel.includes(item.pattern.normalize('NFD').replace(/\p{Diacritic}/gu, '')))?.color || '#64748b';
-};
-
 const getBarColor = (label: string) => {
-  const color = getSwatchColor(label);
+  const color = getProductColor(label);
   return `color-mix(in srgb, ${color} 74%, var(--color-dark-text) 26%)`;
 };
 
-const ColorSwatch = ({ label, className = 'h-2.5 w-2.5' }: { label: string; className?: string }) => (
-  <span
-    className={`${className} shrink-0 rounded-sm`}
-    style={{
-      backgroundColor: getSwatchColor(label),
-      boxShadow: '0 0 0 1px var(--color-dark-card), 0 0 0 2px var(--color-dark-border)'
-    }}
-  />
-);
-
 const buildBreakdown = (rows: VariantRow[], field: 'color' | 'size') => {
   const totals = new Map<string, BreakdownRow>();
 
@@ -147,7 +114,7 @@ const BreakdownPanel = ({
             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' ? <ColorSwatch label={row.label} /> : <span className="h-2.5 w-2.5 shrink-0 rounded-sm bg-sky-400" />}
+                  {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>
@@ -439,10 +406,7 @@ const ProductGroupDetails = () => {
                       <div className="text-[10px] font-medium text-zinc-400 dark:text-dark-muted">Preço Atual: {formatCurrency(row.lastPrice)}</div>
                     </td>
                     <td className="px-6 py-2.5">
-                      <span className="inline-flex max-w-full items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-2.5 py-1 text-xs font-bold text-sky-300">
+                      <ProductColorBadge label={row.color} className="max-w-[8rem]" />
-                        <ColorSwatch label={row.color || 'Sem cor'} className="h-2 w-2" />
-                        <span className="truncate">{row.color || '-'}</span>
-                      </span>
                     </td>
                     <td className="px-6 py-2.5">
                       <span className="inline-flex rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">