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

ux improved

Browse Source
This commit is contained in:
Lucas Tettamanti
2026-01-17 04:13:35 -03:00
parent 98e3d78e3d
commit 63b9ecef61
35 changed files with 4266 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
public/components/users-crud.js Normal file
View File

@@ -0,0 +1,243 @@
import { api } from "../lib/api.js";
import { emit } from "../lib/bus.js";
class UsersCrud extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.items = [];
this.selected = null;
this.loading = false;
this.searchQuery = "";
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 450px; 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; }
button.danger { background:#e74c3c; }
button.danger:hover { background:#c0392b; }
.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; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:#253245; color:#8aa0b5; margin-left:8px; }
.badge.woo { background:#0f2a1a; color:#2ecc71; }
.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; }
.actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.loading { text-align:center; padding:40px; color:#8aa0b5; }
.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; }
.stat-value { font-size:24px; font-weight:700; color:#1f6feb; }
.stat-label { font-size:11px; color:#8aa0b5; text-transform:uppercase; margin-top:4px; }
</style>
<div class="container">
<div class="panel">
<div class="panel-title">Usuarios</div>
<div class="stats">
<div class="stat">
<div class="stat-value" id="totalCount">—</div>
<div class="stat-label">Total</div>
</div>
<div class="stat">
<div class="stat-value" id="wooCount">—</div>
<div class="stat-label">Con Woo ID</div>
</div>
</div>
<div class="toolbar">
<input type="text" id="search" placeholder="Buscar por chat_id o nombre..." />
</div>
<div class="list" id="list">
<div class="loading">Cargando...</div>
</div>
</div>
<div class="panel">
<div class="panel-title" id="detailTitle">Detalle</div>
<div class="detail" id="detail">
<div class="detail-empty">Selecciona un usuario</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.load();
}
async load() {
this.loading = true;
this.renderList();
try {
const data = await api.users({ q: this.searchQuery, limit: 500 });
this.items = data.items || [];
this.loading = false;
this.renderList();
this.renderStats();
} catch (e) {
console.error("Error loading users:", e);
this.items = [];
this.loading = false;
this.renderList();
}
}
renderStats() {
const total = this.items.length;
const withWoo = this.items.filter(u => u.external_customer_id).length;
this.shadowRoot.getElementById("totalCount").textContent = total;
this.shadowRoot.getElementById("wooCount").textContent = withWoo;
}
renderList() {
const list = this.shadowRoot.getElementById("list");
if (this.loading) {
list.innerHTML = `<div class="loading">Cargando...</div>`;
return;
}
if (!this.items.length) {
list.innerHTML = `<div class="loading">No se encontraron usuarios</div>`;
return;
}
list.innerHTML = "";
for (const item of this.items) {
const el = document.createElement("div");
el.className = "item" + (this.selected?.chat_id === item.chat_id ? " active" : "");
const name = item.push_name || item.chat_id.replace(/@.+$/, "");
const wooBadge = item.external_customer_id
? `<span class="badge woo">Woo: ${item.external_customer_id}</span>`
: "";
el.innerHTML = `
<div class="item-name">${name} ${wooBadge}</div>
<div class="item-meta">${item.chat_id}</div>
`;
el.onclick = () => {
this.selected = item;
this.renderList();
this.renderDetail();
};
list.appendChild(el);
}
}
renderDetail() {
const detail = this.shadowRoot.getElementById("detail");
const title = this.shadowRoot.getElementById("detailTitle");
if (!this.selected) {
title.textContent = "Detalle";
detail.innerHTML = `<div class="detail-empty">Selecciona un usuario</div>`;
return;
}
const u = this.selected;
const name = u.push_name || u.chat_id.replace(/@.+$/, "");
title.textContent = name;
detail.innerHTML = `
<div class="field">
<label>Chat ID</label>
<div class="field-value">${u.chat_id}</div>
</div>
<div class="field">
<label>Push Name</label>
<div class="field-value">${u.push_name || "—"}</div>
</div>
<div class="field">
<label>Telefono</label>
<div class="field-value">${u.chat_id.replace(/@.+$/, "")}</div>
</div>
<div class="field">
<label>Woo Customer ID</label>
<div class="field-value">${u.external_customer_id || "Sin vincular"}</div>
</div>
<div class="field">
<label>Provider</label>
<div class="field-value">${u.provider || "—"}</div>
</div>
<div class="field">
<label>Creado</label>
<div class="field-value">${u.created_at ? new Date(u.created_at).toLocaleString() : "—"}</div>
</div>
<div class="field">
<label>Actualizado</label>
<div class="field-value">${u.updated_at ? new Date(u.updated_at).toLocaleString() : "—"}</div>
</div>
<div class="actions">
<button id="openChat">Ver Chat</button>
<button id="deleteConv" class="secondary">Borrar Chat</button>
<button id="deleteUser" class="danger">Borrar Usuario + Woo</button>
</div>
`;
detail.scrollTop = 0;
this.shadowRoot.getElementById("openChat").onclick = () => {
emit("ui:selectedChat", { chat_id: u.chat_id });
emit("ui:switchView", { view: "chat" });
};
this.shadowRoot.getElementById("deleteConv").onclick = async () => {
if (!confirm(`¿Eliminar la conversacion de "${u.chat_id}"?`)) return;
try {
await api.deleteConversation(u.chat_id);
alert("Conversacion eliminada");
} catch (e) {
alert("Error: " + (e.message || e));
}
};
this.shadowRoot.getElementById("deleteUser").onclick = async () => {
if (!confirm(`¿Eliminar usuario "${u.chat_id}", su conversacion y el customer en Woo?`)) return;
try {
await api.deleteUser(u.chat_id, { deleteWoo: true });
this.selected = null;
await this.load();
this.renderDetail();
} catch (e) {
alert("Error: " + (e.message || e));
}
};
}
}
customElements.define("users-crud", UsersCrud);