ux improved

2026-01-17 04:13:35 -03:00
parent 98e3d78e3d
commit 63b9ecef61
35 changed files with 4266 additions and 75 deletions
--- a/public/components/products-crud.js
+++ b/public/components/products-crud.js
@@ -0,0 +1,267 @@
+import { api } from "../lib/api.js";
+
+class ProductsCrud extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.items = [];
+    this.selected = null;
+    this.loading = false;
+    this.searchQuery = "";
+    this.stockFilter = false;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display:block; height:100%; padding:16px; overflow:hidden; }
+        * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
+        .container { display:grid; grid-template-columns:1fr 400px; gap:16px; height:100%; }
+        .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; }
+        .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
+        
+        .toolbar { display:flex; gap:8px; margin-bottom:12px; }
+        input, select { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; }
+        input:focus, select:focus { outline:none; border-color:#1f6feb; }
+        input { flex:1; }
+        button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; }
+        button:hover { background:#1a5fd0; }
+        button:disabled { opacity:.5; cursor:not-allowed; }
+        button.secondary { background:#253245; }
+        button.secondary:hover { background:#2d3e52; }
+        
+        .list { flex:1; overflow-y:auto; }
+        .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; }
+        .item:hover { border-color:#1f6feb; }
+        .item.active { border-color:#1f6feb; background:#111b2a; }
+        .item-name { font-weight:600; color:#e7eef7; margin-bottom:4px; }
+        .item-meta { font-size:12px; color:#8aa0b5; }
+        .item-price { color:#2ecc71; font-weight:600; }
+        
+        .detail { flex:1; overflow-y:auto; }
+        .detail-empty { color:#8aa0b5; text-align:center; padding:40px; }
+        .field { margin-bottom:16px; }
+        .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
+        .field-value { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:10px 12px; color:#e7eef7; font-size:13px; }
+        .field-value.json { font-family:monospace; font-size:11px; white-space:pre-wrap; max-height:200px; overflow-y:auto; }
+        
+        .stats { display:flex; gap:16px; margin-bottom:16px; }
+        .stat { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; flex:1; text-align:center; cursor:pointer; transition:all .15s; }
+        .stat:hover { border-color:#1f6feb; }
+        .stat.active { border-color:#1f6feb; background:#111b2a; }
+        .stat-value { font-size:24px; font-weight:700; color:#1f6feb; }
+        .stat-label { font-size:11px; color:#8aa0b5; text-transform:uppercase; margin-top:4px; }
+        
+        .loading { text-align:center; padding:40px; color:#8aa0b5; }
+        .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:#253245; color:#8aa0b5; margin-left:8px; }
+        .badge.stock { background:#0f2a1a; color:#2ecc71; }
+        .badge.nostock { background:#241214; color:#e74c3c; }
+      </style>
+
+      <div class="container">
+        <div class="panel">
+          <div class="panel-title">Productos</div>
+          <div class="stats">
+            <div class="stat" id="statTotal">
+              <div class="stat-value" id="totalCount">—</div>
+              <div class="stat-label">Total</div>
+            </div>
+            <div class="stat" id="statStock">
+              <div class="stat-value" id="inStockCount">—</div>
+              <div class="stat-label">En Stock</div>
+            </div>
+          </div>
+          <div class="toolbar">
+            <input type="text" id="search" placeholder="Buscar por nombre o SKU..." />
+            <button id="syncBtn" class="secondary">Sync Woo</button>
+          </div>
+          <div class="list" id="list">
+            <div class="loading">Cargando productos...</div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-title">Detalle</div>
+          <div class="detail" id="detail">
+            <div class="detail-empty">Seleccioná un producto para ver detalles</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.getElementById("search").oninput = (e) => {
+      this.searchQuery = e.target.value;
+      clearTimeout(this._searchTimer);
+      this._searchTimer = setTimeout(() => this.load(), 300);
+    };
+
+    this.shadowRoot.getElementById("syncBtn").onclick = () => this.syncFromWoo();
+
+    // Stats click handlers
+    this.shadowRoot.getElementById("statTotal").onclick = () => {
+      this.stockFilter = false;
+      this.renderList();
+      this.updateStatStyles();
+    };
+
+    this.shadowRoot.getElementById("statStock").onclick = () => {
+      this.stockFilter = !this.stockFilter;
+      this.renderList();
+      this.updateStatStyles();
+    };
+
+    this.load();
+  }
+
+  updateStatStyles() {
+    const statTotal = this.shadowRoot.getElementById("statTotal");
+    const statStock = this.shadowRoot.getElementById("statStock");
+    statTotal.classList.toggle("active", !this.stockFilter);
+    statStock.classList.toggle("active", this.stockFilter);
+  }
+
+  async load() {
+    this.loading = true;
+    this.renderList();
+
+    try {
+      const data = await api.products({ q: this.searchQuery, limit: 2000 });
+      this.items = data.items || [];
+      this.loading = false;
+      this.renderList();
+      this.renderStats();
+    } catch (e) {
+      console.error("Error loading products:", e);
+      this.items = [];
+      this.loading = false;
+      this.renderList();
+    }
+  }
+
+  async syncFromWoo() {
+    const btn = this.shadowRoot.getElementById("syncBtn");
+    btn.disabled = true;
+    btn.textContent = "Sincronizando...";
+
+    try {
+      await api.syncProducts();
+      await this.load();
+    } catch (e) {
+      console.error("Error syncing products:", e);
+      alert("Error sincronizando: " + (e.message || e));
+    } finally {
+      btn.disabled = false;
+      btn.textContent = "Sync Woo";
+    }
+  }
+
+  renderStats() {
+    const total = this.items.length;
+    const inStock = this.items.filter(p => p.stock_status === "instock" || p.payload?.stock_status === "instock").length;
+    
+    this.shadowRoot.getElementById("totalCount").textContent = total;
+    this.shadowRoot.getElementById("inStockCount").textContent = inStock;
+  }
+
+  renderList() {
+    const list = this.shadowRoot.getElementById("list");
+
+    if (this.loading) {
+      list.innerHTML = `<div class="loading">Cargando productos...</div>`;
+      return;
+    }
+
+    // Filter items based on stock filter
+    const filteredItems = this.stockFilter 
+      ? this.items.filter(p => p.stock_status === "instock" || p.payload?.stock_status === "instock")
+      : this.items;
+
+    if (!filteredItems.length) {
+      list.innerHTML = `<div class="loading">No se encontraron productos</div>`;
+      return;
+    }
+
+    list.innerHTML = "";
+    for (const item of filteredItems) {
+      const el = document.createElement("div");
+      el.className = "item" + (this.selected?.woo_product_id === item.woo_product_id ? " active" : "");
+      
+      const price = item.price != null ? `$${Number(item.price).toLocaleString()}` : "—";
+      const sku = item.sku || "—";
+      const stock = item.stock_status || item.payload?.stock_status || "unknown";
+      const stockBadge = stock === "instock" 
+        ? `<span class="badge stock">En stock</span>`
+        : `<span class="badge nostock">Sin stock</span>`;
+
+      el.innerHTML = `
+        <div class="item-name">${item.name || "Sin nombre"} ${stockBadge}</div>
+        <div class="item-meta">
+          <span class="item-price">${price}</span> · 
+          SKU: ${sku} · 
+          ID: ${item.woo_product_id}
+        </div>
+      `;
+
+      el.onclick = () => {
+        this.selected = item;
+        this.renderList();
+        this.renderDetail();
+        // Scroll detail panel to top
+        const detail = this.shadowRoot.getElementById("detail");
+        if (detail) detail.scrollTop = 0;
+      };
+
+      list.appendChild(el);
+    }
+  }
+
+  renderDetail() {
+    const detail = this.shadowRoot.getElementById("detail");
+
+    if (!this.selected) {
+      detail.innerHTML = `<div class="detail-empty">Seleccioná un producto para ver detalles</div>`;
+      return;
+    }
+
+    const p = this.selected;
+    const categories = (p.payload?.categories || []).map(c => c.name).join(", ") || "—";
+    const attributes = (p.payload?.attributes || []).map(a => `${a.name}: ${a.options?.join(", ")}`).join("; ") || "—";
+
+    detail.innerHTML = `
+      <div class="field">
+        <label>Nombre</label>
+        <div class="field-value">${p.name || "—"}</div>
+      </div>
+      <div class="field">
+        <label>ID WooCommerce</label>
+        <div class="field-value">${p.woo_product_id}</div>
+      </div>
+      <div class="field">
+        <label>SKU</label>
+        <div class="field-value">${p.sku || "—"}</div>
+      </div>
+      <div class="field">
+        <label>Precio</label>
+        <div class="field-value">${p.price != null ? `$${Number(p.price).toLocaleString()} ${p.currency || ""}` : "—"}</div>
+      </div>
+      <div class="field">
+        <label>Categorías</label>
+        <div class="field-value">${categories}</div>
+      </div>
+      <div class="field">
+        <label>Atributos</label>
+        <div class="field-value">${attributes}</div>
+      </div>
+      <div class="field">
+        <label>Última actualización</label>
+        <div class="field-value">${p.refreshed_at ? new Date(p.refreshed_at).toLocaleString() : "—"}</div>
+      </div>
+      <div class="field">
+        <label>Payload completo</label>
+        <div class="field-value json">${JSON.stringify(p.payload || {}, null, 2)}</div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("products-crud", ProductsCrud);