From 6309bc1b96ef25773a8ae16dd41ca8810f2da808 Mon Sep 17 00:00:00 2001
From: Kevin Rosales <krosales@aduanasoft.com.mx>
Date: Fri, 22 Aug 2025 23:48:26 -0600
Subject: [PATCH] Solucion de paginacion de datastage

---
 src/api/datastage.js    | 10 ++++------
 src/pages/Datastage.jsx | 32 +++++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/api/datastage.js b/src/api/datastage.js
index 06419a2..7670a8e 100644
--- a/src/api/datastage.js
+++ b/src/api/datastage.js
@@ -10,14 +10,12 @@ import.meta.env;
 import { getWithAuth, postWithAuth, patchWithAuth, deleteWithAuth } from '../fetchWithAuth';
 const API_BASE = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/`;
 
-export async function fetchDatastages() {
-  const res = await getWithAuth(API_BASE);
+export async function fetchDatastages(page = 1, page_size = 10) {
+  const url = `${API_BASE}?page=${page}&page_size=${page_size}`;
+  const res = await getWithAuth(url);
   if (!res.ok) throw new Error('Error al obtener datastages');
   const data = await res.json();
-  // Si la respuesta es paginada, devolver results
-  if (data && Array.isArray(data.results)) return data.results;
-  // Si la respuesta no es un array, devolver array vacío
-  if (!Array.isArray(data)) return [];
+  // Si la respuesta es paginada, devolver el objeto completo
   return data;
 }
 
diff --git a/src/pages/Datastage.jsx b/src/pages/Datastage.jsx
index 5591767..7914c58 100644
--- a/src/pages/Datastage.jsx
+++ b/src/pages/Datastage.jsx
@@ -116,7 +116,8 @@ function downloadDatastageFile(id, filename) {
 
 export default function Datastage() {
     const focusKeeperRef = useRef(null);
-    const [datastages, setDatastages] = useState([]);
+    // datastages will hold the full API response object (with .results and .count)
+    const [datastages, setDatastages] = useState({ results: [], count: 0 });
     const [currentPage, setCurrentPage] = useState(1);
     const [itemsPerPage, setItemsPerPage] = useState(10);
     const [selected, setSelected] = useState(null);
@@ -150,9 +151,17 @@ export default function Datastage() {
         setError(null);
         try {
             const data = await fetchDatastages();
-            setDatastages(data);
+            // Defensive: if data is not the expected object, fallback to empty
+            if (data && Array.isArray(data.results)) {
+                setDatastages(data);
+            } else if (Array.isArray(data)) {
+                setDatastages({ results: data, count: data.length });
+            } else {
+                setDatastages({ results: [], count: 0 });
+            }
         } catch (e) {
             setError(e.message);
+            setDatastages({ results: [], count: 0 });
         }
         setLoading(false);
     };
@@ -280,7 +289,7 @@ export default function Datastage() {
                     <div className="flex-1">
                         <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1 flex flex-col sm:flex-row sm:items-center gap-2">
                             Datastage
-                            <span className="inline-block bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full animate-fade-in">{datastages.length}</span>
+                            <span className="inline-block bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full animate-fade-in">{datastages.count}</span>
                         </h1>
                         <p className="text-sm sm:text-base lg:text-lg text-blue-100 font-medium">Gestiona y visualiza la información de Datastage.</p>
                     </div>
@@ -349,7 +358,7 @@ export default function Datastage() {
                                 </tr>
                             </thead>
                             <tbody>
-                                {datastages.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map(item => (
+                                {(Array.isArray(datastages.results) ? datastages.results : []).map(item => (
                                     <tr key={item.id} className="hover:bg-slate-50 transition-colors">
                                         <td className="border px-2 py-2 text-center">{item.id}</td>
                                         <td className="border px-2 py-2 max-w-xs truncate">
@@ -431,10 +440,10 @@ export default function Datastage() {
                             </tbody>
                         </table>
                         {/* Paginación */}
-                        {datastages.length > itemsPerPage && (
+                        {datastages.count > itemsPerPage && (
                             <div className="flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-4 border-t border-gray-200">
                                 <div className="text-xs text-gray-700">
-                                    Mostrando <span className="font-medium">{((currentPage - 1) * itemsPerPage) + 1}</span> a <span className="font-medium">{Math.min(currentPage * itemsPerPage, datastages.length)}</span> de <span className="font-medium">{datastages.length}</span> registros
+                                    Mostrando <span className="font-medium">{((currentPage - 1) * itemsPerPage) + 1}</span> a <span className="font-medium">{Math.min(currentPage * itemsPerPage, datastages.count)}</span> de <span className="font-medium">{datastages.count}</span> registros
                                 </div>
                                 <div className="flex items-center gap-1">
                                     <button
@@ -442,7 +451,7 @@ export default function Datastage() {
                                         disabled={currentPage === 1}
                                         className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50"
                                     >Anterior</button>
-                                    {Array.from({ length: Math.ceil(datastages.length / itemsPerPage) }, (_, i) => i + 1).map(pageNum => (
+                                    {Array.from({ length: Math.ceil(datastages.count / itemsPerPage) }, (_, i) => i + 1).map(pageNum => (
                                         <button
                                             key={pageNum}
                                             onClick={() => setCurrentPage(pageNum)}
@@ -450,8 +459,8 @@ export default function Datastage() {
                                         >{pageNum}</button>
                                     ))}
                                     <button
-                                        onClick={() => setCurrentPage(p => Math.min(Math.ceil(datastages.length / itemsPerPage), p + 1))}
-                                        disabled={currentPage === Math.ceil(datastages.length / itemsPerPage)}
+                                        onClick={() => setCurrentPage(p => Math.min(Math.ceil(datastages.count / itemsPerPage), p + 1))}
+                                        disabled={currentPage === Math.ceil(datastages.count / itemsPerPage)}
                                         className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50"
                                     >Siguiente</button>
                                     <select
@@ -467,10 +476,10 @@ export default function Datastage() {
                     </div>
                     {/* Tarjetas para móvil/tablet */}
                     <div className="lg:hidden space-y-4 p-2">
-                        {datastages.length === 0 ? (
+                        {datastages.results.length === 0 ? (
                             <div className="text-center text-gray-400 py-8">No hay datastages disponibles</div>
                         ) : (
-                            datastages.map(item => (
+                            datastages.results.map(item => (
                                 <div key={item.id} className="bg-white rounded-xl shadow border border-gray-200 p-4 flex flex-col gap-2">
                                     <div className="flex items-center justify-between mb-2">
                                         <span className="font-bold text-blue-800">#{item.id}</span>
@@ -568,6 +577,7 @@ export default function Datastage() {
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                                         </svg>
                                     </button>
+
                                 </div>
                             </div>
                             {/* Content */}