lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pedidos

Browse Source
This commit is contained in:
Lucas Tettamanti
2026-01-18 20:07:40 -03:00
parent 23c3d44490
commit 9754347a36
11 changed files with 1516 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
public/components/orders-crud.js Normal file
View File

@@ -0,0 +1,468 @@
import { api } from "../lib/api.js";
function formatDate(dateStr) {
if (!dateStr) return "—";
const d = new Date(dateStr);
return d.toLocaleString("es-AR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
}
function statusLabel(status) {
const map = {
pending: "Pendiente",
processing: "Procesando",
"on-hold": "En espera",
completed: "Completado",
cancelled: "Cancelado",
refunded: "Reembolsado",
failed: "Fallido",
};
return map[status] || status;
}
function statusColor(status) {
const map = {
pending: "#f59e0b",
processing: "#3b82f6",
"on-hold": "#8b5cf6",
completed: "#22c55e",
cancelled: "#6b7280",
refunded: "#ec4899",
failed: "#ef4444",
};
return map[status] || "#8aa0b5";
}
class OrdersCrud extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.orders = [];
this.selectedOrder = null;
this.loading = false;
this.shadowRoot.innerHTML = `
<style>
:host {
--bg: #0b0f14;
--panel: #121823;
--muted: #8aa0b5;
--text: #e7eef7;
--line: #1e2a3a;
--blue: #1f6feb;
--green: #238636;
--red: #da3633;
--orange: #f59e0b;
}
* { box-sizing: border-box; font-family: system-ui, Segoe UI, Roboto, Arial; }
.container {
height: 100%;
background: var(--bg);
color: var(--text);
display: grid;
grid-template-columns: 1fr 400px;
gap: 16px;
padding: 16px;
overflow: hidden;
}
.panel {
background: var(--panel);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
}
.panel-title {
font-size: 14px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--line);
padding-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
background: var(--blue);
border: none;
color: white;
padding: 8px 16px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: opacity 0.15s;
}
button:hover { opacity: 0.9; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary {
background: transparent;
border: 1px solid var(--line);
color: var(--muted);
}
button.secondary:hover { border-color: var(--blue); color: var(--text); }
button.small { padding: 4px 8px; font-size: 11px; }
.empty { color: var(--muted); font-size: 12px; text-align: center; padding: 40px; }
/* Orders table */
.orders-table {
flex: 1;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
th {
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid var(--line);
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
position: sticky;
top: 0;
background: var(--panel);
}
td {
padding: 10px 8px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
tr { cursor: pointer; transition: background 0.15s; }
tr:hover { background: rgba(31,111,235,0.1); }
tr.selected { background: rgba(31,111,235,0.2); }
.order-id { font-weight: 700; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge {
padding: 2px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
}
.badge.test { background: var(--orange); color: #000; }
.badge.real { background: var(--green); color: #fff; }
.badge.whatsapp { background: #25d366; color: #fff; }
.badge.web { background: var(--muted); color: #000; }
.status-badge {
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: #fff;
display: inline-block;
}
.total { font-weight: 600; }
.customer-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Detail panel */
.detail-section {
margin-bottom: 16px;
}
.detail-title {
font-size: 11px;
font-weight: 600;
color: var(--blue);
text-transform: uppercase;
margin-bottom: 8px;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--muted); }
.detail-value { font-weight: 500; }
.items-list {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px;
max-height: 200px;
overflow-y: auto;
}
.item-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.item-row:last-child { border-bottom: none; }
.item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-qty { color: var(--muted); margin: 0 8px; }
.item-total { font-weight: 600; }
.detail-empty {
color: var(--muted);
font-size: 12px;
text-align: center;
padding: 60px 20px;
}
</style>
<div class="container">
<div class="panel">
<div class="panel-title">
<span>Pedidos de WooCommerce</span>
<button id="btnRefresh" class="secondary small">Actualizar</button>
</div>
<div class="orders-table" id="ordersTable">
<div class="empty">Cargando pedidos...</div>
</div>
</div>
<div class="panel">
<div class="panel-title">Detalle del Pedido</div>
<div id="orderDetail">
<div class="detail-empty">Seleccioná un pedido para ver los detalles</div>
</div>
</div>
</div>
`;
}
connectedCallback() {
this.shadowRoot.getElementById("btnRefresh").onclick = () => this.loadOrders();
this.loadOrders();
}
async loadOrders() {
const container = this.shadowRoot.getElementById("ordersTable");
container.innerHTML = `<div class="empty">Cargando pedidos...</div>`;
try {
const result = await api.listRecentOrders({ limit: 50 });
this.orders = result.items || [];
this.renderTable();
} catch (e) {
console.error("[orders-crud] Error loading orders:", e);
container.innerHTML = `<div class="empty">Error cargando pedidos: ${e.message}</div>`;
}
}
renderTable() {
const container = this.shadowRoot.getElementById("ordersTable");
if (this.orders.length === 0) {
container.innerHTML = `<div class="empty">No hay pedidos</div>`;
return;
}
container.innerHTML = `
<table>
<thead>
<tr>
<th>#</th>
<th>Tipo</th>
<th>Estado</th>
<th>Envío</th>
<th>Pago</th>
<th>Cliente</th>
<th>Total</th>
<th>Fecha</th>
</tr>
</thead>
<tbody>
${this.orders.map(order => {
const isSelected = this.selectedOrder?.id === order.id;
const customerName = [order.billing.first_name, order.billing.last_name].filter(Boolean).join(" ") || order.billing.phone || "—";
return `
<tr class="${isSelected ? "selected" : ""}" data-order-id="${order.id}">
<td class="order-id">${order.id}</td>
<td>
<div class="badges">
${order.is_test ? '<span class="badge test">TEST</span>' : '<span class="badge real">REAL</span>'}
${order.source === "whatsapp" ? '<span class="badge whatsapp">WA</span>' : '<span class="badge web">WEB</span>'}
</div>
</td>
<td><span class="status-badge" style="background:${statusColor(order.status)}">${statusLabel(order.status)}</span></td>
<td><span class="badge" style="background:${order.is_delivery ? '#3b82f6' : '#8b5cf6'};color:#fff">${order.is_delivery ? 'DEL' : 'RET'}</span></td>
<td>
<div class="badges">
<span class="badge" style="background:${order.is_cash ? '#f59e0b' : '#1f6feb'};color:${order.is_cash ? '#000' : '#fff'}">${order.is_cash ? '$' : 'MP'}</span>
<span class="badge" style="background:${order.is_paid ? '#22c55e' : '#ef4444'};color:#fff">${order.is_paid ? '✓' : '✗'}</span>
</div>
</td>
<td class="customer-name" title="${customerName}">${customerName}</td>
<td class="total">$${Number(order.total || 0).toLocaleString("es-AR")}</td>
<td>${formatDate(order.date_created)}</td>
</tr>
`;
}).join("")}
</tbody>
</table>
`;
container.querySelectorAll("tr[data-order-id]").forEach(row => {
row.onclick = () => {
const orderId = parseInt(row.dataset.orderId);
const order = this.orders.find(o => o.id === orderId);
if (order) {
this.selectOrder(order);
}
};
});
}
selectOrder(order) {
this.selectedOrder = order;
this.renderTable();
this.renderDetail();
}
renderDetail() {
const container = this.shadowRoot.getElementById("orderDetail");
if (!this.selectedOrder) {
container.innerHTML = `<div class="detail-empty">Seleccioná un pedido para ver los detalles</div>`;
return;
}
const order = this.selectedOrder;
const customerName = [order.billing.first_name, order.billing.last_name].filter(Boolean).join(" ") || "—";
// Construir dirección de envío
const shippingAddr = [
order.shipping?.address_1,
order.shipping?.address_2,
order.shipping?.city,
order.shipping?.state,
order.shipping?.postcode
].filter(Boolean).join(", ");
const billingAddr = [
order.billing?.address_1,
order.billing?.address_2,
order.billing?.city,
order.billing?.state,
order.billing?.postcode
].filter(Boolean).join(", ");
const address = shippingAddr || billingAddr || "—";
container.innerHTML = `
<div class="detail-section">
<div class="detail-title">Información General</div>
<div class="detail-row">
<span class="detail-label">Pedido #</span>
<span class="detail-value">${order.id}</span>
</div>
<div class="detail-row">
<span class="detail-label">Estado</span>
<span class="status-badge" style="background:${statusColor(order.status)}">${statusLabel(order.status)}</span>
</div>
<div class="detail-row">
<span class="detail-label">Tipo</span>
<span class="detail-value">${order.is_test ? "Test" : "Real"} • ${order.source === "whatsapp" ? "WhatsApp" : "Web"}</span>
</div>
<div class="detail-row">
<span class="detail-label">Fecha</span>
<span class="detail-value">${formatDate(order.date_created)}</span>
</div>
<div class="detail-row">
<span class="detail-label">Total</span>
<span class="detail-value" style="font-size:16px;color:var(--green)">$${Number(order.total || 0).toLocaleString("es-AR")} ${order.currency || ""}</span>
</div>
</div>
<div class="detail-section">
<div class="detail-title">Envío</div>
<div class="detail-row">
<span class="detail-label">Método</span>
<span class="detail-value">
<span class="badge ${order.is_delivery ? 'delivery' : 'pickup'}" style="background:${order.is_delivery ? '#3b82f6' : '#8b5cf6'};color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;">
${order.is_delivery ? 'DELIVERY' : 'RETIRO'}
</span>
${order.shipping_method ? `<span style="margin-left:8px;color:var(--muted);font-size:11px;">${order.shipping_method}</span>` : ''}
</span>
</div>
${order.is_delivery && address !== "—" ? `
<div class="detail-row">
<span class="detail-label">Dirección</span>
<span class="detail-value" style="font-size:11px;">${address}</span>
</div>
` : ''}
</div>
<div class="detail-section">
<div class="detail-title">Pago</div>
<div class="detail-row">
<span class="detail-label">Método</span>
<span class="detail-value">
<span class="badge" style="background:${order.is_cash ? '#f59e0b' : '#1f6feb'};color:${order.is_cash ? '#000' : '#fff'};padding:3px 8px;border-radius:4px;font-size:10px;">
${order.is_cash ? 'EFECTIVO' : 'LINK'}
</span>
${order.payment_method_title ? `<span style="margin-left:8px;color:var(--muted);font-size:11px;">${order.payment_method_title}</span>` : ''}
</span>
</div>
<div class="detail-row">
<span class="detail-label">Estado</span>
<span class="detail-value">
<span class="badge" style="background:${order.is_paid ? '#22c55e' : '#ef4444'};color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;">
${order.is_paid ? 'PAGADO' : 'PENDIENTE'}
</span>
${order.date_paid ? `<span style="margin-left:8px;color:var(--muted);font-size:11px;">${formatDate(order.date_paid)}</span>` : ''}
</span>
</div>
</div>
<div class="detail-section">
<div class="detail-title">Cliente</div>
<div class="detail-row">
<span class="detail-label">Nombre</span>
<span class="detail-value">${customerName}</span>
</div>
<div class="detail-row">
<span class="detail-label">Teléfono</span>
<span class="detail-value">${order.billing.phone || "—"}</span>
</div>
<div class="detail-row">
<span class="detail-label">Email</span>
<span class="detail-value">${order.billing.email || "—"}</span>
</div>
</div>
<div class="detail-section">
<div class="detail-title">Productos (${order.line_items.length})</div>
<div class="items-list">
${order.line_items.length === 0 ? '<div style="color:var(--muted);text-align:center;padding:20px;">Sin productos</div>' :
order.line_items.map(item => `
<div class="item-row">
<span class="item-name" title="${item.name}">${item.name}</span>
<span class="item-qty">x${item.quantity}</span>
<span class="item-total">$${Number(item.total || 0).toLocaleString("es-AR")}</span>
</div>
`).join("")
}
</div>
</div>
${order.run_id ? `
<div class="detail-section">
<div class="detail-title">Metadata</div>
<div class="detail-row">
<span class="detail-label">Run ID</span>
<span class="detail-value" style="font-family:monospace;font-size:10px;">${order.run_id}</span>
</div>
</div>
` : ""}
`;
}
}
customElements.define("orders-crud", OrdersCrud);