Fix client detail customer identity

src/pages/ClientDetails.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useParams, Link, useOutletContext } from 'react-router-dom';
+import { useParams, Link, useOutletContext, useSearchParams } from 'react-router-dom';
 import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import DateRangePicker from '../components/DateRangePicker';
@@ -27,8 +27,10 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
 };
 
 const ClientDetails = () => {
-  const { name } = useParams<{ name: string }>();
-  const decodedName = name ? decodeURIComponent(name) : '';
+  const { customerKey } = useParams<{ customerKey: string }>();
+  const decodedCustomerKey = customerKey ? decodeURIComponent(customerKey) : '';
+  const [searchParams] = useSearchParams();
+  const requestedName = searchParams.get('name') || '';
   const { dateRange, setDateRange, ordersData, isDataLoading } = useOutletContext<{
     dateRange: DateRange,
     setDateRange: (range: DateRange) => void,
@@ -42,6 +44,7 @@ const ClientDetails = () => {
     chartData,
     groupedOrders,
     allTimeOrderCount,
+    clientName,
     clientPhone,
     hasClient,
     periodAverageTicket,
@@ -49,8 +52,9 @@ const ClientDetails = () => {
     periodOrderCount,
     periodSpent
   } = useMemo(() => {
-    return buildClientDetailsMetrics(ordersData, decodedName, dateRange);
-  }, [dateRange, decodedName, ordersData]);
+    return buildClientDetailsMetrics(ordersData, decodedCustomerKey, dateRange);
+  }, [dateRange, decodedCustomerKey, ordersData]);
+  const displayName = requestedName || clientName || decodedCustomerKey.replace(/^name:/, '');
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
@@ -102,7 +106,7 @@ const ClientDetails = () => {
               <User className="w-8 h-8 text-brand-primary" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{decodedName}</h1>
+              <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{displayName}</h1>
               <div className="flex items-center gap-3 mt-1">
                 <p className="text-zinc-500 dark:text-dark-muted font-medium">
                   {formatNumber(allTimeOrderCount)} pedidos no histórico completo

src/pages/Clients.tsx

@@ -315,7 +315,7 @@ const Clients = () => {
                   </td>
                   <td className="px-6 py-2.5 text-right">
                     <Link 
-                      to={`/clients/${encodeURIComponent(client.name)}`}
+                      to={`/clients/${encodeURIComponent(client.customerKey)}?name=${encodeURIComponent(client.name)}`}
                       className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity cursor-pointer"
                     >
                       Ver detalhes

src/pages/Rfm.tsx

@@ -533,7 +533,7 @@ const Rfm = () => {
                 return (
                   <tr key={client.customerKey} className="hover:bg-dark-input/50 transition-colors">
                     <td className="px-6 py-3">
-                      <Link to={`/clients/${encodeURIComponent(client.name)}`} className="flex items-center gap-3 hover:text-brand-primary transition-colors">
+                      <Link to={`/clients/${encodeURIComponent(client.customerKey)}?name=${encodeURIComponent(client.name)}`} className="flex items-center gap-3 hover:text-brand-primary transition-colors">
                         <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-dark-input text-dark-muted">
                           <Users className="h-4 w-4" />
                         </span>