From 2c1e75593cd2b181076250b5ec596a72acaba486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Wed, 6 May 2026 15:20:32 -0300
Subject: [PATCH] feat: increase chart container heights and implement dynamic
 colored tooltips

---
 src/pages/Dashboard.tsx      | 24 +++++++++++++++---------
 src/pages/ProductDetails.tsx | 22 ++++++++++++++--------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 229ca28..a076ca6 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -11,6 +11,19 @@ const COLORS = [
   '#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6'
 ];
 
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
+    return (
+      <div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
+        <p className="font-bold mb-1" style={{ color }}>{label}</p>
+        <p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
 const Dashboard = () => {
   const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
 
@@ -101,7 +114,7 @@ const Dashboard = () => {
       <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">
           <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
-          <div className="h-80 w-full">
+          <div className="h-[450px] w-full">
             <ResponsiveContainer width="100%" height="100%">
               <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 120 }}>
                 <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
@@ -113,14 +126,7 @@ const Dashboard = () => {
                   height={120}
                 />
                 <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
-                <Tooltip 
-                  cursor={{ fill: '#222222' }}
-                  contentStyle={{ 
-                    backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
-                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
-                  }}
-                  itemStyle={{ color: '#ededed' }}
-                />
+                <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]} />
diff --git a/src/pages/ProductDetails.tsx b/src/pages/ProductDetails.tsx
index 5d524c4..41ad920 100644
--- a/src/pages/ProductDetails.tsx
+++ b/src/pages/ProductDetails.tsx
@@ -6,6 +6,18 @@ import DateRangePicker from '../components/DateRangePicker';
 import type { OrderData, DateRange } from '../types';
 import { parseOrderDate } from '../dataService';
 
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
+        <p className="font-bold mb-1" style={{ color: '#9ECAE1' }}>{label}</p>
+        <p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
 const ProductDetails = () => {
   const { id } = useParams<{ id: string }>();
   const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
@@ -106,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-80 w-full">
+        <div className="h-[450px] 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} />
@@ -118,13 +130,7 @@ const ProductDetails = () => {
                 height={80}
               />
               <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
-              <Tooltip 
-                cursor={{ fill: '#222222' }}
-                contentStyle={{ 
-                  backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
-                  boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
-                }}
-              />
+              <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
               <Bar dataKey="value" fill="#9ECAE1" radius={[4, 4, 0, 0]} />
             </BarChart>
           </ResponsiveContainer>