Fixed receipt design

This commit is contained in:
2026-03-09 13:02:00 -03:00
parent cffa3d789b
commit 216abc8ad2
3 changed files with 111 additions and 17 deletions

View File

@@ -298,6 +298,7 @@
<div class="receipt-header">
<h3 style="margin: 0; font-weight: 800;">SekiPOS</h3>
<div style="font-size: 10px; margin-bottom: 5px;">Comprobante de Venta</div>
<div style="font-size: 11px; font-weight: bold;">Ticket Nº <span id="receipt-ticket-id"></span></div>
<div id="receipt-date" style="font-size: 11px;"></div>
</div>
@@ -448,6 +449,9 @@
<i class="bi bi-plus-lg"></i> <span class="d-none d-sm-inline ms-1">Manual</span>
</button>
</div>
<div id="search-results" class="dropdown-menu w-100 shadow-sm mt-1"
style="display: none; position: absolute; top: 100%; left: 0; z-index: 1000; max-height: 300px; overflow-y: auto;">
</div>
</div>
<table class="table mt-3" id="cart-table">
<thead>
@@ -608,9 +612,9 @@
// Hide the payment modal
bootstrap.Modal.getInstance(document.getElementById('paymentModal')).hide();
// Calculate total and print BEFORE wiping the cart
// Pass the new sale_id from the result to the printer
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
printReceipt(total);
printReceipt(total, result.sale_id);
// Show the success checkmark
const successModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('successModal'));
@@ -861,7 +865,7 @@
modal.show();
}
function printReceipt(total) {
function printReceipt(total, saleId) {
const tbody = document.getElementById('receipt-items-print');
tbody.innerHTML = '';
@@ -876,6 +880,7 @@
`;
});
document.getElementById('receipt-ticket-id').innerText = saleId || "N/A";
document.getElementById('receipt-total-print').innerText = clp.format(total);
document.getElementById('receipt-date').innerText = new Date().toLocaleString('es-CL');

View File

@@ -184,6 +184,34 @@
</tfoot>
</table>
</div>
<div class="modal-body">
</div>
<div class="modal-footer d-flex justify-content-between border-0 pt-0">
<button class="btn btn-outline-danger btn-sm" id="btn-reverse-sale">
<i class="bi bi-arrow-counterclockwise me-1"></i>Anular Venta
</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reverseConfirmModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-danger">
<div class="modal-header pb-0 border-0">
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center pt-0 pb-4">
<i class="bi bi-exclamation-triangle-fill text-danger mb-3" style="font-size: 3rem;"></i>
<h4 class="mb-3">¿Anular Venta #<span id="reverse-modal-id"></span>?</h4>
<p class="text-muted small px-3">Los productos regresarán automáticamente al inventario y el ticket será eliminado permanentemente.</p>
<div class="d-flex gap-2 justify-content-center mt-4 px-3">
<button class="btn btn-secondary w-50" data-bs-dismiss="modal">Cancelar</button>
<button class="btn btn-danger w-50" onclick="executeReverseSale()">Sí, Anular</button>
</div>
</div>
</div>
</div>
</div>
@@ -191,6 +219,7 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
let saleToReverse = null;
// Format raw UTC dates from DB into friendly local time
document.querySelectorAll('.utc-date').forEach(el => {
@@ -218,6 +247,9 @@
const tbody = document.getElementById('receipt-items');
tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Cargando...</td></tr>';
// Attach the ID to the delete button
document.getElementById('btn-reverse-sale').setAttribute('onclick', `reverseSale(${id})`);
const modal = new bootstrap.Modal(document.getElementById('receiptModal'));
modal.show();
@@ -248,6 +280,36 @@
}
}
function reverseSale(id) {
saleToReverse = id;
document.getElementById('reverse-modal-id').innerText = id;
// Hide the receipt modal so we don't have overlapping popups
bootstrap.Modal.getInstance(document.getElementById('receiptModal')).hide();
// Show the new confirmation modal
const confirmModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('reverseConfirmModal'));
confirmModal.show();
}
async function executeReverseSale() {
if (!saleToReverse) return;
try {
const res = await fetch(`/api/sale/${saleToReverse}`, { method: 'DELETE' });
if (res.ok) {
window.location.reload(); // Refresh the dashboard
} else {
const data = await res.json();
alert("Error anulando la venta: " + (data.error || "Desconocido"));
}
} catch (err) {
console.error(err);
alert("Error de conexión con el servidor.");
}
}
/* Theme Management */
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);