Paginate seller revenue trend

src/pages/SellerDetails.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext, useParams } from 'react-router-dom';
 import { ArrowLeft } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
+import PaginationControls from '../components/PaginationControls';
 import { fetchSellerDetailsAnalytics } from '../dataService';
 import { formatDisplayName, removeTrailingSellerId } from '../displayFormatters';
 import type { DateRange, SellerDetailsAnalytics } from '../types';
@@ -14,6 +15,8 @@ const SellerDetails = () => {
   const { dateRange, setDateRange } = useOutletContext<{ dateRange: DateRange; setDateRange: (range: DateRange) => void }>();
   const [details, setDetails] = useState<SellerDetailsAnalytics | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [trendPage, setTrendPage] = useState(1);
+  const trendPageSize = 14;
 
   useEffect(() => {
     let isMounted = true;
@@ -27,6 +30,10 @@ const SellerDetails = () => {
   }, [dateRange, sellerId]);
 
   const maxRevenue = useMemo(() => Math.max(...(details?.chartData.map(item => item.revenue) || [1]), 1), [details]);
+  const trendTotalPages = Math.ceil((details?.chartData.length || 0) / trendPageSize);
+  const safeTrendPage = Math.min(trendPage, trendTotalPages || 1);
+  const trendStartIndex = (safeTrendPage - 1) * trendPageSize;
+  const paginatedTrend = details?.chartData.slice(trendStartIndex, trendStartIndex + trendPageSize) || [];
   if (isLoading && !details) return <div className="space-y-4">{[1, 2, 3, 4].map(item => <div key={item} className="skeleton h-28" />)}</div>;
   if (!details) return <div className="rounded-2xl border border-dark-border bg-dark-card p-10 text-center"><p className="font-bold text-dark-text">Vendedor não encontrado no período.</p><Link to="/sellers" className="mt-4 inline-flex text-sm font-bold text-brand-primary">Voltar para vendedores</Link></div>;
   const { seller } = details;
@@ -39,13 +46,19 @@ const SellerDetails = () => {
           <h1 className="mt-4 text-2xl font-bold text-dark-text">{formatDisplayName(removeTrailingSellerId(seller.name))}</h1>
           <p className="mt-2 font-medium text-dark-muted">Carteira, produtos e resultado comercial no período selecionado.</p>
         </div>
-        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+        <DateRangePicker dateRange={dateRange} onChange={range => { setDateRange(range); setTrendPage(1); }} />
       </div>
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         {[['Receita', formatCurrency(seller.revenue), 'text-brand-primary'], ['Pedidos', formatNumber(seller.orderCount), 'text-dark-text'], ['Clientes', formatNumber(seller.customerCount), 'text-dark-text'], ['Ticket médio', formatCurrency(seller.averageTicket), 'text-dark-text']].map(([label, value, color]) => <div key={label} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{label}</p><p className={`mt-2 text-2xl font-bold ${color}`}>{value}</p></div>)}
       </div>
       <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.3fr_0.7fr]">
-        <section className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><h2 className="text-base font-bold text-dark-text">Evolução da receita</h2><p className="mt-1 text-sm font-semibold text-dark-muted">Vendas por dia no período.</p><div className="mt-5 space-y-3">{details.chartData.length ? details.chartData.map(point => <div key={point.date} className="grid grid-cols-[76px_1fr_auto] items-center gap-3 text-xs"><span className="font-semibold text-dark-muted">{new Date(`${point.date}T12:00:00`).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' })}</span><div className="h-2 overflow-hidden rounded-full bg-dark-input"><div className="h-full rounded-full bg-brand-primary" style={{ width: `${(point.revenue / maxRevenue) * 100}%` }} /></div><span className="font-bold text-dark-text">{formatCurrency(point.revenue)}</span></div>) : <p className="py-10 text-center text-sm font-semibold text-dark-muted">Sem vendas no período.</p>}</div></section>
+        <section className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
+          <div className="p-5"><h2 className="text-base font-bold text-dark-text">Evolução da receita</h2><p className="mt-1 text-sm font-semibold text-dark-muted">Vendas por dia no período.</p></div>
+          {details.chartData.length ? <>
+            <div className="space-y-3 px-5 pb-5">{paginatedTrend.map(point => <div key={point.date} className="grid grid-cols-[52px_1fr_auto] items-center gap-3 text-xs sm:grid-cols-[76px_1fr_auto]"><span className="font-semibold text-dark-muted">{new Date(`${point.date}T12:00:00`).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' })}</span><div className="h-2 overflow-hidden rounded-full bg-dark-input"><div className="h-full rounded-full bg-brand-primary" style={{ width: `${(point.revenue / maxRevenue) * 100}%` }} /></div><span className="font-bold text-dark-text">{formatCurrency(point.revenue)}</span></div>)}</div>
+            <PaginationControls totalItems={details.chartData.length} currentPage={safeTrendPage} totalPages={trendTotalPages} pageSize={trendPageSize} pageSizeOptions={[14]} itemLabel="dias" pageSizeLabel="dias por página" startIndex={trendStartIndex} endIndex={Math.min(trendStartIndex + trendPageSize, details.chartData.length)} onPageChange={setTrendPage} onPageSizeChange={() => setTrendPage(1)} className="border-t border-dark-border px-4 py-3" />
+          </> : <p className="px-5 py-10 text-center text-sm font-semibold text-dark-muted">Sem vendas no período.</p>}
+        </section>
         <section className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><h2 className="text-base font-bold text-dark-text">Canais</h2><p className="mt-1 text-sm font-semibold text-dark-muted">Receita por marketplace.</p><div className="mt-5 space-y-3">{details.marketplaces.map(item => <div key={item.name} className="rounded-xl border border-dark-border bg-dark-input/50 p-3"><p className="text-sm font-bold text-dark-text">{item.name}</p><p className="mt-1 text-xs font-semibold text-brand-primary">{formatCurrency(item.revenue)} · {formatNumber(item.orderCount)} pedidos</p></div>)}</div></section>
       </div>
       <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">