Show all clients in clients page

src/pages/Clients.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { Search, ChevronRight, Filter, ChevronLeft, Download } from 'lucide-react';
-import type { DateRange, RfmAnalytics, RfmClient } from '../types';
-import { exportToCSV, fetchRfmAnalytics } from '../dataService';
+import type { ClientAnalyticsItem, DateRange, RfmAnalytics, RfmClient } from '../types';
+import { exportToCSV, fetchClientAnalytics, fetchRfmAnalytics } from '../dataService';
 import DateRangePicker from '../components/DateRangePicker';
 import type { ClientSortOption, ClientSummary } from '../analytics/clients';
 
 const clientTypeStyles: Record<string, string> = {
+  'Sem análise': 'border-zinc-600/30 bg-zinc-600/15 text-zinc-300',
   'Campeão': 'border-emerald-500/30 bg-emerald-500/15 text-emerald-300',
   'Potencial Leal': 'border-sky-500/30 bg-sky-500/15 text-sky-300',
   'Novo Cliente': 'border-cyan-500/30 bg-cyan-500/15 text-cyan-300',
@@ -19,6 +20,7 @@ const clientTypeStyles: Record<string, string> = {
 };
 
 const clientTypes = [
+  'Sem análise',
   'Campeão',
   'Potencial Leal',
   'Novo Cliente',
@@ -71,6 +73,7 @@ const Clients = () => {
   const [sortBy, setSortBy] = useState<ClientSortOption>('recent');
   const [clientTypeFilter, setClientTypeFilter] = useState('all');
   const [rfmAnalytics, setRfmAnalytics] = useState<RfmAnalytics | null>(null);
+  const [clientAnalytics, setClientAnalytics] = useState<ClientAnalyticsItem[]>([]);
   
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
@@ -79,12 +82,18 @@ const Clients = () => {
   useEffect(() => {
     let isMounted = true;
 
-    const loadRfm = async () => {
-      const data = await fetchRfmAnalytics(dateRange);
-      if (isMounted) setRfmAnalytics(data);
+    const loadClients = async () => {
+      const [clientsData, rfmData] = await Promise.all([
+        fetchClientAnalytics(dateRange),
+        fetchRfmAnalytics(dateRange)
+      ]);
+      if (isMounted) {
+        setClientAnalytics(clientsData);
+        setRfmAnalytics(rfmData);
+      }
     };
 
-    void loadRfm();
+    void loadClients();
 
     return () => {
       isMounted = false;
@@ -93,18 +102,22 @@ const Clients = () => {
 
   const allClientsData = useMemo(() => {
     const normalizedSearch = searchTerm.trim().toLowerCase();
-    const clients = (rfmAnalytics?.clients || []).map((client): ClientSummary => ({
-      name: client.name,
-      phone: client.phone,
-      totalSpent: client.monetary,
-      averageTicket: client.frequency ? client.monetary / client.frequency : 0,
-      totalItems: client.quantityPurchased,
-      orderCount: client.frequency,
-      lastPurchase: client.lastPurchaseDate ? new Date(client.lastPurchaseDate).getTime() : 0,
-      clientType: backendSegmentToClientType[client.segmentKey] || client.segmentLabel,
-      rfmScore: client.rfmScore,
-      rfmPriority: getRfmPriority(client)
-    }));
+    const rfmByPhone = new Map((rfmAnalytics?.clients || []).map(client => [client.phone, client]));
+    const clients = clientAnalytics.map((client): ClientSummary => {
+      const rfmClient = client.phone ? rfmByPhone.get(client.phone) : undefined;
+      return {
+        name: client.name,
+        phone: client.phone,
+        totalSpent: client.totalSpent,
+        averageTicket: client.orderCount ? client.totalSpent / client.orderCount : 0,
+        totalItems: client.quantityPurchased,
+        orderCount: client.orderCount,
+        lastPurchase: client.lastPurchaseDate ? new Date(client.lastPurchaseDate).getTime() : 0,
+        clientType: rfmClient ? (backendSegmentToClientType[rfmClient.segmentKey] || rfmClient.segmentLabel) : 'Sem análise',
+        rfmScore: rfmClient?.rfmScore || '000',
+        rfmPriority: rfmClient ? getRfmPriority(rfmClient) : 0
+      };
+    });
 
     const filteredClients = normalizedSearch
       ? clients.filter(client =>
@@ -114,7 +127,7 @@ const Clients = () => {
       : clients;
 
     return sortClients(filteredClients, sortBy);
-  }, [searchTerm, sortBy, rfmAnalytics]);
+  }, [clientAnalytics, searchTerm, sortBy, rfmAnalytics]);
 
   const clientsData = useMemo(() => {
     if (clientTypeFilter === 'all') return allClientsData;
@@ -137,6 +150,10 @@ const Clients = () => {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
   };
 
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('pt-BR').format(value);
+  };
+
   const selectClientType = (type: string) => {
     setClientTypeFilter(current => current === type ? 'all' : type);
     setCurrentPage(1);
@@ -291,7 +308,7 @@ const Clients = () => {
                   <td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(client.totalSpent)}</td>
                   <td className="px-6 py-2.5 text-zinc-700 dark:text-dark-text font-semibold">{formatCurrency(client.averageTicket)}</td>
                   <td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted text-xs font-medium">
-                    {client.totalItems} un. ({client.orderCount} {client.orderCount === 1 ? 'pedido' : 'pedidos'})
+                    {formatNumber(client.totalItems)} un. ({formatNumber(client.orderCount)} {client.orderCount === 1 ? 'pedido' : 'pedidos'})
                   </td>
                   <td className="px-6 py-2.5 text-right">
                     <Link