From fbd35d65af373c072104509774d1606c6d1ebddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Mon, 11 May 2026 16:49:06 -0300
Subject: [PATCH] feat: make charts and legends clickable to navigate to
 product details

---
 src/pages/Dashboard.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 614c136..ee8a5b9 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext, useNavigate } from 'react-router-dom';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
 import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
@@ -47,6 +47,7 @@ const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
 };
 
 const Dashboard = () => {
+  const navigate = useNavigate();
   const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{ 
     dateRange: DateRange, 
     setDateRange: (range: DateRange) => void, 
@@ -69,12 +70,14 @@ const Dashboard = () => {
     let totalItems = 0;
     const productSalesMap: Record<string, number> = {};
     const productRevenueMap: Record<string, number> = {};
+    const productNameIdMap: Record<string, string> = {};
 
     filteredData.forEach(order => {
       const itemRevenue = order.Quantidade * order.Valor_Unitario;
       revenue += itemRevenue;
       totalItems += order.Quantidade;
       const productName = order.Descricao_Produto.split(' TAMANHO')[0]; 
+      productNameIdMap[productName] = order.ID_Produto;
       
       if (productSalesMap[productName]) {
         productSalesMap[productName] += order.Quantidade;
@@ -99,12 +102,14 @@ const Dashboard = () => {
 
     const productsData = topSalesNames.map(name => ({
       name,
+      id: productNameIdMap[name],
       value: productSalesMap[name],
       fill: productColors[name]
     }));
 
     const revenueData = topRevenueNames.map(name => ({
       name,
+      id: productNameIdMap[name],
       value: productRevenueMap[name],
       fill: productColors[name]
     }));
@@ -179,9 +184,9 @@ const Dashboard = () => {
                 />
                 <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                 <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
-                <Bar dataKey="value" radius={[4, 4, 0, 0]}>
+                <Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
                   {salesByProduct.map((entry) => (
-                    <Cell key={`cell-${entry.name}`} fill={entry.fill} />
+                    <Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
                   ))}
                 </Bar>
               </BarChart>
@@ -189,7 +194,7 @@ const Dashboard = () => {
           </div>
           <div className="mt-4 grid grid-cols-2 gap-2">
             {salesByProduct.map((entry) => (
-              <div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px]">
+              <div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
                 <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
                 <span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
               </div>
@@ -202,9 +207,9 @@ const Dashboard = () => {
           <div className="h-80 w-full flex items-center justify-center">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
-                <Pie data={revenueByProduct} 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" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
                   {revenueByProduct.map((entry) => (
-                    <Cell key={`cell-${entry.name}`} fill={entry.fill} />
+                    <Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
                   ))}
                 </Pie>
                 <Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
@@ -213,7 +218,7 @@ const Dashboard = () => {
           </div>
           <div className="mt-4 grid grid-cols-2 gap-2">
             {revenueByProduct.map((entry) => (
-              <div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px]">
+              <div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
                 <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
                 <span className="text-dark-muted truncate font-semibold">{entry.name}</span>
               </div>