From c4092766988a83fdb195c6cef9f064ff0267109e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Wed, 6 May 2026 15:45:24 -0300
Subject: [PATCH] feat: unify chart legend styles and fix dynamic tooltip
 colors

---
 src/pages/Dashboard.tsx      | 26 +++++++++++++++++---------
 src/pages/ProductDetails.tsx |  2 +-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index a076ca6..32ad739 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -54,7 +54,10 @@ const Dashboard = () => {
     const productsData = Object.keys(productSalesMap).map(key => ({
       name: key,
       value: productSalesMap[key]
-    })).sort((a, b) => b.value - a.value).slice(0, 10);
+    })).sort((a, b) => b.value - a.value).slice(0, 10).map((item, index) => ({
+      ...item,
+      fill: COLORS[index % COLORS.length]
+    }));
 
     return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData };
   }, [filteredData]);
@@ -112,18 +115,15 @@ const Dashboard = () => {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
           <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
-          <div className="h-[450px] w-full">
+          <div className="h-80 w-full flex items-center justify-center">
             <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 120 }}>
+              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                 <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
                 <XAxis 
                   dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
-                  interval={0}
-                  angle={-45}
-                  textAnchor="end"
-                  height={120}
+                  tick={false}
                 />
                 <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                 <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
@@ -135,9 +135,17 @@ const Dashboard = () => {
               </BarChart>
             </ResponsiveContainer>
           </div>
+          <div className="mt-4 grid grid-cols-2 gap-2">
+            {salesByProduct.map((entry, index) => (
+              <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="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
+              </div>
+            ))}
+          </div>
         </div>
 
-        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
           <h3 className="text-lg font-bold mb-6 text-dark-text">Distribuição de Produtos</h3>
           <div className="h-80 w-full flex items-center justify-center">
             <ResponsiveContainer width="100%" height="100%">
diff --git a/src/pages/ProductDetails.tsx b/src/pages/ProductDetails.tsx
index 41ad920..29b482b 100644
--- a/src/pages/ProductDetails.tsx
+++ b/src/pages/ProductDetails.tsx
@@ -118,7 +118,7 @@ const ProductDetails = () => {
 
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
         <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
-        <div className="h-[450px] w-full">
+        <div className="h-[400px] w-full">
           <ResponsiveContainer width="100%" height="100%">
             <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
               <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />