Fixed receipt design

app.py

@@ -8,6 +8,7 @@ from werkzeug.security import generate_password_hash, check_password_hash
 import mimetypes
 import time
 import uuid
+from datetime import datetime
 # from dotenv import load_dotenv
 
 # load_dotenv()
@@ -347,31 +348,31 @@ def update_scale_weight():
 @app.route('/api/checkout', methods=['POST'])
 @login_required
 def process_checkout():
-    data = request.get_json()
-    cart = data.get('cart', [])
-    payment_method = data.get('payment_method', 'efectivo')
-    
-    if not cart:
-        return jsonify({"error": "Cart is empty"}), 400
-        
-    # Recalculate total on the server because trusting the frontend is a security risk
-    total = sum(item.get('subtotal', 0) for item in cart)
-    
     try:
+        data = request.get_json()
+        cart = data.get('cart', [])
+        payment_method = data.get('payment_method', 'efectivo')
+        
+        if not cart:
+            return jsonify({"error": "Cart is empty"}), 400
+            
+        # Recalculate total on the server because the frontend is a liar
+        total = sum(item.get('subtotal', 0) for item in cart)
+        
         with sqlite3.connect(DB_FILE) as conn:
             cur = conn.cursor()
             
-            # 1. Create the main sale record
+            # Let SQLite handle the exact UTC timestamp internally
-            cur.execute('INSERT INTO sales (total, payment_method) VALUES (?, ?)', (total, payment_method))
+            cur.execute('INSERT INTO sales (date, total, payment_method) VALUES (CURRENT_TIMESTAMP, ?, ?)', (total, payment_method))
             sale_id = cur.lastrowid
             
-            # 2. Record each item and deduct stock
+            # Record each item and deduct stock
             for item in cart:
                 cur.execute('''INSERT INTO sale_items (sale_id, barcode, name, price, quantity, subtotal)
                                VALUES (?, ?, ?, ?, ?, ?)''', 
                             (sale_id, item['barcode'], item['name'], item['price'], item['qty'], item['subtotal']))
                 
-                # Deduct from inventory
+                # Deduct from inventory (Manual products will safely be ignored here)
                 cur.execute('UPDATE products SET stock = stock - ? WHERE barcode = ?', (item['qty'], item['barcode']))
                 
             conn.commit()
@@ -417,6 +418,32 @@ def get_sale_details(sale_id):
     item_list = [{"barcode": i[0], "name": i[1], "price": i[2], "qty": i[3], "subtotal": i[4]} for i in items]
     return jsonify(item_list), 200
 
+@app.route('/api/sale/<int:sale_id>', methods=['DELETE'])
+@login_required
+def reverse_sale(sale_id):
+    try:
+        with sqlite3.connect(DB_FILE) as conn:
+            cur = conn.cursor()
+            
+            # 1. Get the items and quantities from the receipt
+            items = cur.execute('SELECT barcode, quantity FROM sale_items WHERE sale_id = ?', (sale_id,)).fetchall()
+            
+            # 2. Add the stock back to the inventory
+            for barcode, qty in items:
+                # This safely ignores manual products since their fake barcodes won't match any row
+                cur.execute('UPDATE products SET stock = stock + ? WHERE barcode = ?', (qty, barcode))
+                
+            # 3. Destroy the evidence
+            cur.execute('DELETE FROM sale_items WHERE sale_id = ?', (sale_id,))
+            cur.execute('DELETE FROM sales WHERE id = ?', (sale_id,))
+            
+            conn.commit()
+            
+        return jsonify({"status": "success"}), 200
+        
+    except Exception as e:
+        print(f"Reverse Sale Error: {e}")
+        return jsonify({"error": str(e)}), 500
 # @app.route('/process_payment', methods=['POST'])
 # @login_required
 # def process_payment():

templates/checkout.html

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

templates/sales.html

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