dashboard

public/components/orders-crud.js

@@ -41,6 +41,12 @@ class OrdersCrud extends HTMLElement {
     this.orders = [];
     this.selectedOrder = null;
     this.loading = false;
+    
+    // Paginación
+    this.page = 1;
+    this.limit = 50;
+    this.totalPages = 1;
+    this.totalOrders = 0;
 
     this.shadowRoot.innerHTML = `
       <style>
@@ -214,17 +220,68 @@ class OrdersCrud extends HTMLElement {
           text-align: center;
           padding: 60px 20px;
         }
+        
+        /* Paginación */
+        .pagination {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 0;
+          border-top: 1px solid var(--line);
+          margin-top: auto;
+          font-size: 12px;
+        }
+        .pagination-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        .pagination-info {
+          color: var(--muted);
+        }
+        .pagination select {
+          background: var(--bg);
+          color: var(--text);
+          border: 1px solid var(--line);
+          border-radius: 4px;
+          padding: 4px 8px;
+          font-size: 12px;
+          cursor: pointer;
+        }
+        .pagination select:hover {
+          border-color: var(--blue);
+        }
+        .pagination button {
+          padding: 4px 10px;
+          font-size: 11px;
+        }
       </style>
 
       <div class="container">
         <div class="panel">
           <div class="panel-title">
-            <span>Pedidos de WooCommerce</span>
+            <span>Pedidos</span>
             <button id="btnRefresh" class="secondary small">Actualizar</button>
           </div>
           <div class="orders-table" id="ordersTable">
             <div class="empty">Cargando pedidos...</div>
           </div>
+          <div class="pagination" id="pagination">
+            <div class="pagination-controls">
+              <span>Mostrar:</span>
+              <select id="limitSelect">
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+              </select>
+            </div>
+            <div class="pagination-controls">
+              <button id="btnPrev" class="secondary small" disabled>← Anterior</button>
+              <span class="pagination-info" id="pageInfo">Página 1 de 1</span>
+              <button id="btnNext" class="secondary small" disabled>Siguiente →</button>
+            </div>
+            <div class="pagination-info" id="totalInfo">0 pedidos</div>
+          </div>
         </div>
 
         <div class="panel">
@@ -240,6 +297,25 @@ class OrdersCrud extends HTMLElement {
   connectedCallback() {
     this.shadowRoot.getElementById("btnRefresh").onclick = () => this.loadOrders();
     
+    // Paginación
+    this.shadowRoot.getElementById("limitSelect").onchange = (e) => {
+      this.limit = parseInt(e.target.value);
+      this.page = 1;
+      this.loadOrders();
+    };
+    this.shadowRoot.getElementById("btnPrev").onclick = () => {
+      if (this.page > 1) {
+        this.page--;
+        this.loadOrders();
+      }
+    };
+    this.shadowRoot.getElementById("btnNext").onclick = () => {
+      if (this.page < this.totalPages) {
+        this.page++;
+        this.loadOrders();
+      }
+    };
+    
     // Escuchar cambios de ruta para deep-linking
     this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
       if (view === "orders" && params.id) {
@@ -248,7 +324,6 @@ class OrdersCrud extends HTMLElement {
     });
     
     // Escuchar nuevos pedidos para actualizar automáticamente
-    // Usa retry con backoff porque WooCommerce puede tardar en devolver el pedido recién creado
     this._unsubOrderCreated = on("order:created", ({ order_id }) => {
       console.log("[orders-crud] order:created received, order_id:", order_id);
       this.refreshWithRetry(order_id);
@@ -298,9 +373,17 @@ class OrdersCrud extends HTMLElement {
     container.innerHTML = `<div class="empty">Cargando pedidos...</div>`;
     
     try {
-      const result = await api.listRecentOrders({ limit: 50 });
+      const result = await api.listOrders({ page: this.page, limit: this.limit });
       this.orders = result.items || [];
+      
+      // Actualizar paginación
+      if (result.pagination) {
+        this.totalPages = result.pagination.pages || 1;
+        this.totalOrders = result.pagination.total || 0;
+      }
+      
       this.renderTable();
+      this.updatePagination();
       
       // Si hay un pedido pendiente de selección (deep-link), seleccionarlo
       if (this._pendingOrderId) {
@@ -316,6 +399,22 @@ class OrdersCrud extends HTMLElement {
     }
   }
 
+  updatePagination() {
+    const pageInfo = this.shadowRoot.getElementById("pageInfo");
+    const totalInfo = this.shadowRoot.getElementById("totalInfo");
+    const btnPrev = this.shadowRoot.getElementById("btnPrev");
+    const btnNext = this.shadowRoot.getElementById("btnNext");
+    const limitSelect = this.shadowRoot.getElementById("limitSelect");
+    
+    pageInfo.textContent = `Página ${this.page} de ${this.totalPages}`;
+    totalInfo.textContent = `${this.totalOrders.toLocaleString("es-AR")} pedidos`;
+    
+    btnPrev.disabled = this.page <= 1;
+    btnNext.disabled = this.page >= this.totalPages;
+    
+    limitSelect.value = String(this.limit);
+  }
+
   renderTable() {
     const container = this.shadowRoot.getElementById("ordersTable");