From a7bdd07c09506bcc768052d8032368b6c7e6fac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Wed, 6 May 2026 17:44:49 -0300
Subject: [PATCH] feat: implement consistent color mapping for products across
 charts

---
 src/pages/Dashboard.tsx | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index d0e5034..ae95e3c 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -63,20 +63,26 @@ const Dashboard = () => {
       }
     });
 
+    const uniqueProducts = Array.from(new Set(filteredData.map(order => order.Descricao_Produto.split(' TAMANHO')[0]))).sort();
+    const productColors: Record<string, string> = {};
+    uniqueProducts.forEach((productName, index) => {
+      productColors[productName] = COLORS[index % COLORS.length];
+    });
+
     const productsData = Object.keys(productSalesMap).map(key => ({
       name: key,
       value: productSalesMap[key]
-    })).sort((a, b) => b.value - a.value).slice(0, 10).map((item, index) => ({
+    })).sort((a, b) => b.value - a.value).slice(0, 10).map(item => ({
       ...item,
-      fill: COLORS[index % COLORS.length]
+      fill: productColors[item.name]
     }));
 
     const revenueData = Object.keys(productRevenueMap).map(key => ({
       name: key,
       value: productRevenueMap[key]
-    })).sort((a, b) => b.value - a.value).slice(0, 10).map((item, index) => ({
+    })).sort((a, b) => b.value - a.value).slice(0, 10).map(item => ({
       ...item,
-      fill: COLORS[index % COLORS.length]
+      fill: productColors[item.name]
     }));
 
     return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
@@ -148,17 +154,17 @@ const Dashboard = () => {
                 <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                 <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
                 <Bar dataKey="value" radius={[4, 4, 0, 0]}>
-                  {salesByProduct.map((_, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  {salesByProduct.map((entry) => (
+                    <Cell key={`cell-${entry.name}`} fill={entry.fill} />
                   ))}
                 </Bar>
               </BarChart>
             </ResponsiveContainer>
           </div>
           <div className="mt-4 grid grid-cols-2 gap-2">
-            {salesByProduct.map((entry, index) => (
+            {salesByProduct.map((entry) => (
               <div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px]">
-                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: COLORS[index % COLORS.length] }}></span>
+                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
                 <span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
               </div>
             ))}
@@ -171,8 +177,8 @@ const Dashboard = () => {
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
                 <Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
-                  {revenueByProduct.map((_, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  {revenueByProduct.map((entry) => (
+                    <Cell key={`cell-${entry.name}`} fill={entry.fill} />
                   ))}
                 </Pie>
                 <Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
@@ -180,9 +186,9 @@ const Dashboard = () => {
             </ResponsiveContainer>
           </div>
           <div className="mt-4 grid grid-cols-2 gap-2">
-            {revenueByProduct.map((entry, index) => (
-              <div key={entry.name} className="flex items-center text-[10px]">
-                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: COLORS[index % COLORS.length] }}></span>
+            {revenueByProduct.map((entry) => (
+              <div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px]">
+                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
                 <span className="text-dark-muted truncate font-semibold">{entry.name}</span>
               </div>
             ))}