Add full pagination controls

src/pages/ClientDetails.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
-import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronDown, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
+import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronDown, ShoppingBag, ReceiptText } from 'lucide-react';
 import { AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import DateRangePicker from '../components/DateRangePicker';
+import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
 import type { ClientDetailsAnalytics, DateRange, OrderData } from '../types';
 import { fetchClientDetailsAnalytics } from '../dataService';
@@ -556,47 +557,23 @@ const ClientDetails = () => {
   })}
       </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>
+      <PaginationControls
+        totalItems={groupedOrders.length}
+        currentPage={safeCurrentPage}
+        totalPages={totalPages}
+        pageSize={ordersPerPage}
+        pageSizeOptions={[5, 10, 20, 50]}
+        itemLabel="pedidos"
+        pageSizeLabel="pedidos por página"
+        startIndex={startIndex}
+        endIndex={Math.min(startIndex + ordersPerPage, groupedOrders.length)}
+        onPageChange={setCurrentPage}
+        onPageSizeChange={(pageSize) => {
+          setOrdersPerPage(pageSize);
+          setCurrentPage(1);
+        }}
+        className="px-6 py-4 border border-zinc-200 dark:border-dark-border rounded-2xl bg-white dark:bg-dark-card"
+      />
       </div>
     </div>
   );