feat: increase chart container heights and implement dynamic colored tooltips

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]} />