feat: increase chart container heights and implement dynamic colored tooltips

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>