feat: display revenue as currency in PieChart tooltip

src/pages/Dashboard.tsx

@@ -11,13 +11,20 @@ const COLORS = [
   '#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6'
 ];
 
-const CustomTooltip = ({ active, payload, label }: any) => {
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+};
+
+const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
   if (active && payload && payload.length) {
     const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
+    const displayLabel = label || payload[0].name;
+    const value = isCurrency ? formatCurrency(payload[0].value) : payload[0].value;
+    const valueLabel = isCurrency ? 'Receita:' : 'Vendas:';
     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="font-bold mb-1" style={{ color }}>{displayLabel}</p>
-        <p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p>
+        <p className="text-[#ededed] m-0">{valueLabel} {value}</p>
       </div>
     );
   }
@@ -35,19 +42,24 @@ const Dashboard = () => {
     });
   }, [dateRange, ordersData]);
 
-  const { totalRevenue, totalOrders, averageOrderValue, salesByProduct } = useMemo(() => {
+  const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct } = useMemo(() => {
     let revenue = 0;
     let totalItems = 0;
     const productSalesMap: Record<string, number> = {};
+    const productRevenueMap: Record<string, number> = {};
 
     filteredData.forEach(order => {
-      revenue += (order.Quantidade * order.Valor_Unitario);
+      const itemRevenue = order.Quantidade * order.Valor_Unitario;
+      revenue += itemRevenue;
       totalItems += order.Quantidade;
       const productName = order.Descricao_Produto.split(' TAMANHO')[0]; 
+      
       if (productSalesMap[productName]) {
         productSalesMap[productName] += order.Quantidade;
+        productRevenueMap[productName] += itemRevenue;
       } else {
         productSalesMap[productName] = order.Quantidade;
+        productRevenueMap[productName] = itemRevenue;
       }
     });
 
@@ -59,7 +71,15 @@ const Dashboard = () => {
       fill: COLORS[index % COLORS.length]
     }));
 
-    return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData };
+    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) => ({
+      ...item,
+      fill: COLORS[index % COLORS.length]
+    }));
+
+    return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
   }, [filteredData]);
 
   const formatCurrency = (value: number) => {
@@ -146,26 +166,21 @@ const Dashboard = () => {
         </div>
 
         <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>
+          <h3 className="text-lg font-bold mb-6 text-dark-text">Receita por Produto</h3>
           <div className="h-80 w-full flex items-center justify-center">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
-                <Pie data={salesByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
+                <Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
-                  {salesByProduct.map((_, index) => (
+                  {revenueByProduct.map((_, index) => (
                     <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                   ))}
                 </Pie>
-                <Tooltip 
+                <Tooltip content={<CustomTooltip isCurrency={true} />} 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'
-                  }}
-                />
               </PieChart>
             </ResponsiveContainer>
           </div>
           <div className="mt-4 grid grid-cols-2 gap-2">
-            {salesByProduct.map((entry, index) => (
+            {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>
                 <span className="text-dark-muted truncate font-semibold">{entry.name}</span>