From e0fe15c3dc941b4888abc9cd676760dd04bca0cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Tue, 4 Aug 2026 10:18:23 -0300
Subject: [PATCH] Use detail icons in client and seller tables

---
 src/pages/Clients.tsx | 9 +++++----
 src/pages/Sellers.tsx | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/Clients.tsx b/src/pages/Clients.tsx
index 42687c4..3af4f12 100644
--- a/src/pages/Clients.tsx
+++ b/src/pages/Clients.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { Search, ChevronRight, Filter, X } from 'lucide-react';
+import { Search, Eye, Filter, X } from 'lucide-react';
 import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
@@ -794,10 +794,11 @@ const Clients = () => {
                   <td className="px-6 py-2.5 text-right">
                     <Link 
                       to={`/clients/${encodeURIComponent(client.clientToken)}`}
-                      className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity cursor-pointer"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80 cursor-pointer"
+                      title={`Ver detalhes de ${client.name}`}
+                      aria-label={`Ver detalhes de ${client.name}`}
                     >
-                      Ver detalhes
-                      <ChevronRight className="w-3.5 h-3.5 ml-1" />
+                      <Eye className="h-3.5 w-3.5" />
                     </Link>
                   </td>
                 </tr>
diff --git a/src/pages/Sellers.tsx b/src/pages/Sellers.tsx
index fa0d37b..d08806c 100644
--- a/src/pages/Sellers.tsx
+++ b/src/pages/Sellers.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { BriefcaseBusiness, ChevronRight, Search } from 'lucide-react';
+import { BriefcaseBusiness, Eye, Search } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
@@ -119,7 +119,7 @@ const Sellers = () => {
                       <td className="px-6 py-2.5 font-semibold text-dark-text">{formatNumber(seller.customerCount)}</td>
                       <td className="px-6 py-2.5 font-semibold text-dark-text">{formatCurrency(seller.averageTicket)}</td>
                       <td className="px-6 py-2.5 text-xs font-medium text-dark-muted">{formatNumber(seller.quantitySold)} un. ({formatNumber(seller.orderCount)} {seller.orderCount === 1 ? 'pedido' : 'pedidos'})</td>
-                      <td className="px-6 py-2.5 text-right"><Link to={`/sellers/${encodeURIComponent(seller.id)}`} className="inline-flex items-center text-xs font-bold text-brand-primary transition-opacity hover:opacity-80">Ver detalhes<ChevronRight className="ml-1 h-3.5 w-3.5" /></Link></td>
+                      <td className="px-6 py-2.5 text-right"><Link to={`/sellers/${encodeURIComponent(seller.id)}`} className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80" title={`Ver detalhes de ${seller.name}`} aria-label={`Ver detalhes de ${seller.name}`}><Eye className="h-3.5 w-3.5" /></Link></td>
                     </tr>
                   ))}
                 </tbody>