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

@@ -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);