fix: botón Historial en clientes abre modal con historial completo de compras
Some checks failed
CI / lint-and-test (3.11) (push) Has been cancelled
CI / lint-and-test (3.13) (push) Has been cancelled

This commit is contained in:
2026-06-26 00:28:18 +00:00
parent 2ed672c3c3
commit 9a55e15142
4 changed files with 107 additions and 3 deletions

View File

@@ -387,10 +387,80 @@ const Customers = (() => {
if (btns.length >= 2) btns[1].onclick = () => editCurrent();
if (btns.length >= 3) btns[2].onclick = () => showStatement();
if (btns.length >= 4) btns[3].onclick = () => {
if (currentCustomer) selectCustomer(currentCustomer.id);
if (currentCustomer) showCustomerHistory(currentCustomer.id);
};
}
async function showCustomerHistory(customerId) {
try {
const res = await api(`/pos/api/customers/${customerId}/purchases`);
const purchases = res.data || [];
let modal = document.getElementById('customerHistoryModal');
if (!modal) {
modal = document.createElement('div');
modal.id = 'customerHistoryModal';
modal.className = 'modal-overlay';
modal.style.display = 'none';
modal.innerHTML = `
<div class="modal-content" style="max-width:700px;">
<div class="modal-header">
<h3>Historial de Compras — <span id="customerHistoryName"></span></h3>
<button class="modal-close" onclick="Customers.closeCustomerHistoryModal()">&times;</button>
</div>
<div class="modal-body">
<table class="history-table" style="width:100%;">
<thead>
<tr>
<th>Fecha</th>
<th>Folio</th>
<th>Total</th>
<th>Pago</th>
<th>Estado</th>
</tr>
</thead>
<tbody id="customerHistoryBody"></tbody>
</table>
</div>
</div>
`;
document.body.appendChild(modal);
}
const tbody = document.getElementById('customerHistoryBody');
const title = document.getElementById('customerHistoryName');
if (title && currentCustomer) title.textContent = currentCustomer.name;
if (purchases.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--color-text-muted);padding:var(--space-4);">Sin compras registradas</td></tr>';
} else {
tbody.innerHTML = purchases.map(p => {
const statusClass = p.status === 'paid' ? 'mbadge--paid' : p.status === 'cancelled' ? 'mbadge--error' : p.status === 'overdue' ? 'mbadge--overdue' : 'mbadge--pending';
const statusLabel = p.status === 'paid' ? 'Pagado' : p.status === 'cancelled' ? 'Cancelado' : p.status === 'overdue' ? 'Vencido' : 'Pendiente';
return `<tr>
<td class="date">${formatDate(p.created_at)}</td>
<td class="folio">NX-${String(p.id).padStart(5, '0')}</td>
<td class="total">${fmt(p.total)}</td>
<td>${p.payment_method || '-'}</td>
<td><span class="mbadge ${statusClass}">${statusLabel}</span></td>
</tr>`;
}).join('');
}
modal.style.display = 'flex';
modal.classList.add('active');
} catch (e) {
console.error('Error loading customer history:', e);
alert('Error al cargar historial: ' + e.message);
}
}
function closeCustomerHistoryModal() {
const modal = document.getElementById('customerHistoryModal');
if (modal) {
modal.style.display = 'none';
modal.classList.remove('active');
}
}
// ─── Create/Edit Modal ───────────────
function showCreateModal() {
const modal = document.getElementById('customerModal');
@@ -819,6 +889,7 @@ const Customers = (() => {
showCreateModal, editCurrent, editCustomer, closeModal, save,
showStatement, closeStatement,
showPaymentModal, closePayment, recordPayment,
showCustomerHistory, closeCustomerHistoryModal,
};
// Bulk selection