feat: display customer phone number on client details page with WhatsApp quick link

src/pages/ClientDetails.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
-import { ArrowLeft, User, Tag, Package, DollarSign, Clock } from 'lucide-react';
+import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone } from 'lucide-react';
 import type { OrderData } from '../types';
 import { parseOrderDate } from '../dataService';
 
@@ -9,18 +9,20 @@ const ClientDetails = () => {
   const decodedName = name ? decodeURIComponent(name) : '';
   const { ordersData } = useOutletContext<{ ordersData: OrderData[] }>();
 
-  const { groupedOrders, totalSpent, totalItems } = useMemo(() => {
+  const { groupedOrders, totalSpent, totalItems, clientPhone } = useMemo(() => {
     const orders = ordersData;
     const clientOrders = orders.filter(order => {
       const clientName = order.Nome_Cliente || `Cliente Desconhecido (Pedido ${order.Valor_Pedido})`;
       return clientName === decodedName;
     });
     
+    let clientPhone = '';
     const groupedOrdersMap: Record<string, { date: string, orderId: string, orderTotal: number, items: OrderData[] }> = {};
     let totalSpent = 0;
     let totalItems = 0;
 
     clientOrders.forEach(order => {
+      if (order.Fone_Cliente && !clientPhone) clientPhone = order.Fone_Cliente;
       totalSpent += (order.Quantidade * order.Valor_Unitario);
       totalItems += order.Quantidade;
 
@@ -42,7 +44,7 @@ const ClientDetails = () => {
       return parseOrderDate(b.date).getTime() - parseOrderDate(a.date).getTime();
     });
 
-    return { groupedOrders, totalSpent, totalItems };
+    return { groupedOrders, totalSpent, totalItems, clientPhone };
   }, [decodedName, ordersData]);
 
   const formatCurrency = (value: number) => {
@@ -74,7 +76,18 @@ const ClientDetails = () => {
             </div>
             <div>
               <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{decodedName}</h1>
-              <p className="text-zinc-500 dark:text-dark-muted font-medium">Histórico completo de compras</p>
+              <div className="flex items-center gap-3 mt-1">
+                <p className="text-zinc-500 dark:text-dark-muted font-medium">Histórico completo de compras</p>
+                {clientPhone && (
+                  <>
+                    <span className="text-zinc-300 dark:text-dark-border">•</span>
+                    <a href={`https://wa.me/${clientPhone.replace(/\D/g, '')}`} target="_blank" rel="noreferrer" className="flex items-center gap-1.5 text-brand-primary hover:opacity-80 transition-opacity font-bold text-sm bg-brand-primary/10 px-2 py-1 rounded-md">
+                      <Phone className="w-3.5 h-3.5" />
+                      {clientPhone}
+                    </a>
+                  </>
+                )}
+              </div>
             </div>
           </div>