Add full pagination controls

src/pages/Rfm.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { ChevronLeft, ChevronRight, Download, Filter, Search, Users } from 'lucide-react';
+import { Download, Filter, Search, Users } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
+import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
 import { exportToCSV, fetchRfmAnalytics, getCachedRfmAnalytics } from '../dataService';
 import type { DateRange, RfmAnalytics, RfmClient, RfmSegment } from '../types';
@@ -393,7 +394,8 @@ const Rfm = () => {
   }, [clients, searchTerm, segmentFilter]);
 
   const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
-  const startIndex = (currentPage - 1) * itemsPerPage;
+  const safeCurrentPage = Math.min(currentPage, totalPages || 1);
+  const startIndex = (safeCurrentPage - 1) * itemsPerPage;
   const paginatedClients = filteredClients.slice(startIndex, startIndex + itemsPerPage);
 
   const totals = useMemo(() => {
@@ -766,47 +768,23 @@ const Rfm = () => {
           </div>
         )}
 
-        <div className="px-6 py-4 border-t border-dark-border flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div className="flex items-center gap-2 text-sm text-dark-muted">
-            <span>Mostrar</span>
-            <select
-              value={itemsPerPage}
-              onChange={(event) => {
-                setItemsPerPage(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={10}>10</option>
-              <option value={20}>20</option>
-              <option value={50}>50</option>
-              <option value={100}>100</option>
-            </select>
-            <span>clientes por página</span>
-          </div>
-
-          <div className="flex items-center gap-4 text-sm">
-            <span className="text-dark-muted">
-              Mostrando {filteredClients.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + itemsPerPage, filteredClients.length)} de {filteredClients.length} clientes
-            </span>
-            <div className="flex gap-1">
-              <button
-                onClick={() => setCurrentPage(page => Math.max(1, page - 1))}
-                disabled={currentPage === 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={currentPage === 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={filteredClients.length}
+          currentPage={safeCurrentPage}
+          totalPages={totalPages}
+          pageSize={itemsPerPage}
+          pageSizeOptions={[10, 20, 50, 100]}
+          itemLabel="clientes"
+          pageSizeLabel="clientes por página"
+          startIndex={startIndex}
+          endIndex={Math.min(startIndex + itemsPerPage, filteredClients.length)}
+          onPageChange={setCurrentPage}
+          onPageSizeChange={(pageSize) => {
+            setItemsPerPage(pageSize);
+            setCurrentPage(1);
+          }}
+          className="px-6 py-4 border-t border-dark-border"
+        />
       </section>
         </div>
       )}