Paginate client order history

src/pages/ClientDetails.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
-import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone } from 'lucide-react';
+import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronLeft, ChevronRight } from 'lucide-react';
 import type { OrderData } from '../types';
 import { buildClientDetailsMetrics } from '../analytics/clients';
 
@@ -8,6 +8,8 @@ const ClientDetails = () => {
   const { name } = useParams<{ name: string }>();
   const decodedName = name ? decodeURIComponent(name) : '';
   const { ordersData, isDataLoading } = useOutletContext<{ ordersData: OrderData[], isDataLoading: boolean }>();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [ordersPerPage, setOrdersPerPage] = useState(10);
 
   const { groupedOrders, totalSpent, totalItems, clientPhone } = useMemo(() => {
     return buildClientDetailsMetrics(ordersData, decodedName);
@@ -17,6 +19,11 @@ const ClientDetails = () => {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
   };
 
+  const totalPages = Math.ceil(groupedOrders.length / ordersPerPage);
+  const safeCurrentPage = Math.min(currentPage, totalPages || 1);
+  const startIndex = (safeCurrentPage - 1) * ordersPerPage;
+  const paginatedOrders = groupedOrders.slice(startIndex, startIndex + ordersPerPage);
+
   if (!groupedOrders.length && isDataLoading) {
     return (
       <div className="text-center py-12">
@@ -79,7 +86,7 @@ const ClientDetails = () => {
       </div>
 {/* Orders List */}
 <div className="flex flex-col gap-6">
-  {groupedOrders.map((group, groupIndex) => (
+  {paginatedOrders.map((group, groupIndex) => (
     <div key={groupIndex} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
       <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-header flex justify-between items-center">
         <h2 className="text-sm font-bold uppercase tracking-wider text-zinc-500 dark:text-dark-muted flex items-center gap-2">
@@ -133,6 +140,48 @@ const ClientDetails = () => {
           </div>
         ))}
       </div>
+
+      <div className="px-6 py-4 border border-zinc-200 dark:border-dark-border rounded-2xl bg-white dark:bg-dark-card flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-dark-muted">
+          <span>Mostrar</span>
+          <select
+            value={ordersPerPage}
+            onChange={(event) => {
+              setOrdersPerPage(Number(event.target.value));
+              setCurrentPage(1);
+            }}
+            className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
+          >
+            <option value={5}>5</option>
+            <option value={10}>10</option>
+            <option value={20}>20</option>
+            <option value={50}>50</option>
+          </select>
+          <span>pedidos por página</span>
+        </div>
+
+        <div className="flex items-center gap-4 text-sm">
+          <span className="text-zinc-500 dark:text-dark-muted">
+            Mostrando {groupedOrders.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + ordersPerPage, groupedOrders.length)} de {groupedOrders.length} pedidos
+          </span>
+          <div className="flex gap-1">
+            <button
+              onClick={() => setCurrentPage(page => Math.max(1, page - 1))}
+              disabled={safeCurrentPage === 1}
+              className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(page => Math.min(totalPages, page + 1))}
+              disabled={safeCurrentPage === totalPages || totalPages === 0}
+              className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };