feat: add expenses module, restaurant mode, and dynamic sales filters

- Gastos (Expenses): Added `/gastos` route, auto-creation of `expenses` DB table, and `gastos.html` to track net profit with split month/year dropdowns.
- Sales & Filters: Overhauled `/sales` backend to use pagination. Top summary cards now accurately reflect the selected payment method filter.
- Checkout Improvements:
  - Added "Transferencia" as a payment option with numpad shortcuts.
  - Built a "Pinned Products" quick-access grid using localStorage.
  - Implemented a global processing lock to prevent duplicate sales on double-clicks.
  - Burned the default HTML number arrows with custom CSS.
- Global Settings & Receipts:
  - Created a global settings modal accessible from the navbar.
  - Added localStorage toggles for custom business name and auto-print.
  - Added "Restaurant Mode" toggle to prompt for Client Name and Pickup Time, which now dynamically prints on the receipt.
- Bug Fixes: Resolved Jinja `TemplateSyntaxError` crash and removed the duplicate search bar in the checkout view.

app.py

@@ -189,26 +189,80 @@ def dicom():
 @login_required
 def sales():
     selected_date = request.args.get('date')
+    payment_method = request.args.get('payment_method')
+    page = request.args.get('page', 1, type=int)
+    per_page = 100
+
     with sqlite3.connect(DB_FILE) as conn:
         cur = conn.cursor()
         
-        # Determine the target date for the "Daily" stat
+        # 1. Calculate the top 3 cards (Now respecting the payment method!)
         target_date = selected_date if selected_date else cur.execute("SELECT date('now', 'localtime')").fetchone()[0]
         
+        daily_query = "SELECT SUM(total) FROM sales WHERE date(date, 'localtime') = ?"
+        week_query = "SELECT SUM(total) FROM sales WHERE date(date, 'localtime') >= date('now', 'localtime', '-7 days')"
+        month_query = "SELECT SUM(total) FROM sales WHERE strftime('%Y-%m', date, 'localtime') = strftime('%Y-%m', 'now', 'localtime')"
+        
+        daily_params = [target_date]
+        week_params = []
+        month_params = []
+        
+        # If a payment method is selected, inject it into the top card queries
+        if payment_method:
+            daily_query += " AND payment_method = ?"
+            week_query += " AND payment_method = ?"
+            month_query += " AND payment_method = ?"
+            
+            daily_params.append(payment_method)
+            week_params.append(payment_method)
+            month_params.append(payment_method)
+        
         stats = {
-            "daily": cur.execute("SELECT SUM(total) FROM sales WHERE date(date, 'localtime') = ?", (target_date,)).fetchone()[0] or 0,
+            "daily": cur.execute(daily_query, tuple(daily_params)).fetchone()[0] or 0,
-            "week": cur.execute("SELECT SUM(total) FROM sales WHERE date(date, 'localtime') >= date('now', 'localtime', '-7 days')").fetchone()[0] or 0,
+            "week": cur.execute(week_query, tuple(week_params)).fetchone()[0] or 0,
-            "month": cur.execute("SELECT SUM(total) FROM sales WHERE strftime('%Y-%m', date, 'localtime') = strftime('%Y-%m', 'now', 'localtime')").fetchone()[0] or 0
+            "month": cur.execute(month_query, tuple(month_params)).fetchone()[0] or 0
         }
         
-        if selected_date:
+        # 2. Dynamic query builder for the main table and pagination
-            sales_data = cur.execute('''SELECT id, date, total, payment_method FROM sales 
+        base_query = "FROM sales WHERE 1=1"
-                                        WHERE date(date, 'localtime') = ? 
+        params = []
-                                        ORDER BY date DESC''', (selected_date,)).fetchall()
-        else:
-            sales_data = cur.execute('SELECT id, date, total, payment_method FROM sales ORDER BY date DESC LIMIT 100').fetchall()
 
-    return render_template('sales.html', active_page='sales', user=current_user, sales=sales_data, stats=stats, selected_date=selected_date)
+        if selected_date:
+            base_query += " AND date(date, 'localtime') = ?"
+            params.append(selected_date)
+        if payment_method:
+            base_query += " AND payment_method = ?"
+            params.append(payment_method)
+            
+        # Get total count and sum for the current table filters BEFORE applying limit/offset
+        stats_query = f"SELECT COUNT(*), SUM(total) {base_query}"
+        count_res, sum_res = cur.execute(stats_query, tuple(params)).fetchone()
+        
+        total_count = count_res or 0
+        total_sum = sum_res or 0
+        total_pages = (total_count + per_page - 1) // per_page
+        
+        filtered_stats = {
+            "total": total_sum,
+            "count": total_count
+        }
+
+        # Fetch the actual 100 rows for the current page
+        offset = (page - 1) * per_page
+        data_query = f"SELECT id, date, total, payment_method {base_query} ORDER BY date DESC LIMIT ? OFFSET ?"
+        
+        sales_data = cur.execute(data_query, tuple(params) + (per_page, offset)).fetchall()
+        
+    return render_template('sales.html', 
+                           active_page='sales', 
+                           user=current_user, 
+                           sales=sales_data, 
+                           stats=stats, 
+                           filtered_stats=filtered_stats,
+                           selected_date=selected_date,
+                           selected_payment=payment_method,
+                           current_page=page,
+                           total_pages=total_pages)
 
 
 @app.route("/upsert", methods=["POST"])
@@ -560,6 +614,70 @@ def export_images():
         download_name=f"SekiPOS_Images_{datetime.now().strftime('%Y%m%d')}.zip"
     )
 
+
+from datetime import datetime
+
+@app.route('/gastos')
+@login_required
+def gastos():
+    # Default to the current month if no filter is applied
+    selected_month = request.args.get('month', datetime.now().strftime('%Y-%m'))
+    
+    with sqlite3.connect(DB_FILE) as conn:
+        cur = conn.cursor()
+        
+        # Auto-create the table so it doesn't crash on first load
+        cur.execute('''
+            CREATE TABLE IF NOT EXISTS expenses (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                description TEXT NOT NULL,
+                amount INTEGER NOT NULL
+            )
+        ''')
+        
+        # Calculate totals for the selected month
+        sales_total = cur.execute("SELECT SUM(total) FROM sales WHERE strftime('%Y-%m', date, 'localtime') = ?", (selected_month,)).fetchone()[0] or 0
+        expenses_total = cur.execute("SELECT SUM(amount) FROM expenses WHERE strftime('%Y-%m', date, 'localtime') = ?", (selected_month,)).fetchone()[0] or 0
+        
+        # Fetch the expense list
+        expenses_list = cur.execute("SELECT id, date, description, amount FROM expenses WHERE strftime('%Y-%m', date, 'localtime') = ? ORDER BY date DESC", (selected_month,)).fetchall()
+        
+    return render_template('gastos.html', 
+                           active_page='gastos', 
+                           user=current_user,
+                           sales_total=sales_total,
+                           expenses_total=expenses_total,
+                           net_profit=sales_total - expenses_total,
+                           expenses=expenses_list,
+                           selected_month=selected_month)
+
+@app.route('/api/gastos', methods=['POST'])
+@login_required
+def add_gasto():
+    data = request.get_json()
+    desc = data.get('description')
+    amount = data.get('amount')
+    
+    if not desc or not amount:
+        return jsonify({"error": "Faltan datos"}), 400
+        
+    with sqlite3.connect(DB_FILE) as conn:
+        cur = conn.cursor()
+        cur.execute("INSERT INTO expenses (description, amount) VALUES (?, ?)", (desc, int(amount)))
+        conn.commit()
+    return jsonify({"success": True})
+
+@app.route('/api/gastos/<int:gasto_id>', methods=['DELETE'])
+@login_required
+def delete_gasto(gasto_id):
+    with sqlite3.connect(DB_FILE) as conn:
+        cur = conn.cursor()
+        cur.execute("DELETE FROM expenses WHERE id = ?", (gasto_id,))
+        conn.commit()
+    return jsonify({"success": True})
+
+
 # @app.route('/process_payment', methods=['POST'])
 # @login_required
 # def process_payment():

templates/checkout.html

@@ -1,6 +1,5 @@
 {% extends "macros/base.html" %}
 {% from 'macros/modals.html' import confirm_modal, scanner_modal, render_receipt %}
-
 {% block title %}Caja{% endblock %}
 
 {% block head %}
@@ -130,8 +129,38 @@
         </div>
     </div>
 
-    <div class="modal fade" id="paymentModal" tabindex="-1">
+    <div class="modal fade" id="orderDetailsModal" tabindex="-1" data-bs-backdrop="static">
         <div class="modal-dialog modal-dialog-centered modal-sm">
+            <div class="modal-content">
+                <div class="modal-header border-0 pb-0">
+                    <h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem">
+                        Detalles del Pedido
+                    </h5>
+                    <button type="button" class="btn-close position-absolute end-0 top-0 m-3" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body pt-2 pb-4">
+                    <div class="mb-3">
+                        <label class="form-label text-muted small mb-1">Nombre del Cliente</label>
+                        <input type="text" id="order-client-name" class="form-control" placeholder="Ej: Juan Pérez" autocomplete="off" onkeydown="if(event.key === 'Enter') document.getElementById('order-pickup-time').focus()">
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label text-muted small mb-1">Hora de Retiro (Opcional)</label>
+                        <input type="time" id="order-pickup-time" class="form-control" onkeydown="if(event.key === 'Enter') document.getElementById('order-notes').focus()">
+                    </div>
+                    <div class="mb-4">
+                        <label class="form-label text-muted small mb-1">Detalles / Notas</label>
+                        <input type="text" id="order-notes" class="form-control" placeholder="Ej: Para llevar, Sin cebolla" autocomplete="off" onkeydown="if(event.key === 'Enter') confirmOrderDetails()">
+                    </div>
+                    <button class="btn btn-primary w-100 py-2 fw-bold" onclick="confirmOrderDetails()">
+                        Continuar al Pago <i class="bi bi-arrow-right ms-1"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="paymentModal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header border-0 pb-0">
                     <h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem">
@@ -143,10 +172,13 @@
                     <h1 id="payment-modal-total" class="mb-4" style="color: var(--accent); font-weight: 800; font-size: 3rem">$0</h1>
                     <div class="d-grid gap-3 px-3">
                         <button class="btn btn-lg btn-success py-3" onclick="openVueltoModal()">
-                            <i class="bi bi-cash-coin me-2" style="font-size: 1.5rem; vertical-align: middle"></i> Efectivo
+                            <i class="bi bi-cash-coin me-2" style="font-size: 1.5rem; vertical-align: middle"></i> Efectivo (1)
                         </button>
                         <button class="btn btn-lg btn-secondary py-3" onclick="executeCheckout('tarjeta')">
-                            <i class="bi bi-credit-card me-2" style="font-size: 1.5rem; vertical-align: middle"></i> Tarjeta (Pronto)
+                            <i class="bi bi-credit-card me-2" style="font-size: 1.5rem; vertical-align: middle"></i> Tarjeta (2)
+                        </button>
+                        <button class="btn btn-lg btn-info py-3 text-white" onclick="executeCheckout('transferencia')">
+                            <i class="bi bi-bank me-2" style="font-size: 1.5rem; vertical-align: middle"></i> Transferencia (3)
                         </button>
                     </div>
                 </div>
@@ -168,11 +200,12 @@
                     </div>
                     <div class="mb-3 text-start">
                         <label class="text-muted small mb-1">Monto Recibido</label>
-                        <input type="number" id="monto-recibido" class="form-control form-control-lg text-center fw-bold fs-4"
+                        <input type="text" inputmode="numeric" id="monto-recibido" class="form-control form-control-lg text-center fw-bold fs-4"
-                               placeholder="$0" onkeyup="calculateVuelto()" onchange="calculateVuelto()"
+                               placeholder="$0" 
+                               oninput="let v = this.value.replace(/\D/g, ''); this.value = v ? parseInt(v, 10).toLocaleString('es-CL') : ''; calculateVuelto();"
                                onkeydown="if(event.key === 'Enter' && !document.getElementById('btn-confirm-vuelto').disabled) executeCheckout('efectivo')">
                     </div>
-                    <div class="d-flex justify-content-center gap-2 mb-3" id="vuelto-quick-buttons"></div>
+                    <div class="d-flex flex-wrap justify-content-center gap-2 mb-3" id="vuelto-quick-buttons"></div>
                     <div class="p-3 mb-3" style="background: var(--input-bg); border-radius: 8px">
                         <span class="text-muted small text-uppercase fw-bold">Vuelto a Entregar</span><br>
                         <span id="vuelto-amount" class="fs-1 fw-bold text-muted">$0</span>
@@ -284,6 +317,7 @@
             <div class="col-md-8">
                 <div class="discord-card p-3">
                     <h4><i class="bi bi-cart3"></i> Carrito</h4>
+
                     <div class="position-relative mb-4">
                         <div class="input-group">
                             <span class="input-group-text border-0 position-absolute" style="background: transparent; z-index: 10">
@@ -303,6 +337,9 @@
                         <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>
+                    
+                    <div id="pinned-products-container" class="d-flex flex-wrap gap-2 mb-3"></div>
+
                     <div class="table-responsive">
                         <table class="table mt-3" id="cart-table">
                             <thead>
@@ -360,6 +397,16 @@
     let editingCartIndex = null;
     let itemIndexToRemove = null;
 
+    let currentClientName = '';
+    let currentOrderNotes = '';
+    let currentPickupTime = '';
+
+    // The lock to prevent duplicate sales
+    let isProcessing = false;
+
+    // Fetch the pinned items from local storage
+    let pinnedBarcodes = JSON.parse(localStorage.getItem('seki_pinned_products')) || [];
+
     let socket = io();
 
     const clp = new Intl.NumberFormat('es-CL', {
@@ -550,22 +597,65 @@
         if (matches.length === 0) {
             resultsBox.innerHTML = '<div class="p-3 text-muted text-center">No se encontraron productos</div>';
         } else {
-            resultsBox.innerHTML = matches.map(p => `
+            resultsBox.innerHTML = matches.map(p => {
+                // Check if it's pinned to color the icon
+                const isPinned = pinnedBarcodes.includes(p.barcode);
+                const pinIcon = isPinned ? 'bi-pin-angle-fill text-warning' : 'bi-pin-angle text-muted';
+                
+                return `
                 <a href="#" class="dropdown-item d-flex justify-content-between align-items-center py-2" onclick="selectSearchResult('${p.barcode}')">
+                    <div class="d-flex align-items-center gap-3">
+                        <button class="btn btn-sm btn-link p-0 text-decoration-none" onclick="togglePin('${p.barcode}', event)" title="Fijar producto">
+                            <i class="bi ${pinIcon} fs-5"></i>
+                        </button>
                         <div>
                             <strong>${p.name}</strong><br>
                             <small class="text-muted font-monospace">${p.barcode}</small>
                         </div>
+                    </div>
                     <div class="text-end">
                         <span style="color: var(--accent); font-weight: bold;">${clp.format(p.price)}</span><br>
                         <small class="text-muted">${p.unit === 'kg' ? 'Kg' : 'Unidad'}</small>
                     </div>
                 </a>
-            `).join('');
+            `}).join('');
         }
         resultsBox.style.display = 'block';
     }
 
+    function togglePin(barcode, event) {
+        event.stopPropagation(); // Stop the row from adding to cart when clicking the pin
+        if (pinnedBarcodes.includes(barcode)) {
+            pinnedBarcodes = pinnedBarcodes.filter(b => b !== barcode);
+        } else {
+            pinnedBarcodes.push(barcode);
+        }
+        localStorage.setItem('seki_pinned_products', JSON.stringify(pinnedBarcodes));
+        
+        renderPinnedProducts();
+        filterSearch(); // Re-render the search dropdown so the pin icon updates
+        document.getElementById('manual-search').focus(); // Keep focus on search input
+    }
+
+    function renderPinnedProducts() {
+        const container = document.getElementById('pinned-products-container');
+        const pinnedProducts = allProducts.filter(p => pinnedBarcodes.includes(p.barcode));
+
+        if (pinnedProducts.length === 0) {
+            container.innerHTML = '';
+            return;
+        }
+
+        container.innerHTML = pinnedProducts.map(p => `
+            <button class="btn btn-outline-secondary text-start p-2 shadow-sm d-flex flex-column justify-content-between" 
+                    style="width: 110px; height: 75px; border-color: var(--border); background: var(--input-bg); color: var(--text-main);" 
+                    onclick="handleProductScan(allProducts.find(x => x.barcode === '${p.barcode}'))">
+                <span class="small fw-bold text-truncate w-100 mb-1" title="${p.name}">${p.name}</span>
+                <span class="small" style="color: var(--accent); font-weight: 800;">${clp.format(p.price)}</span>
+            </button>
+        `).join('');
+    }
+
     function selectSearchResult(barcode) {
         const product = allProducts.find(p => p.barcode === barcode);
         if (product) handleProductScan(product);
@@ -708,6 +798,31 @@
         
         if (total === 666) { triggerDoom(); return; }
 
+        // Intercept checkout if Restaurant mode is active
+        if (localStorage.getItem('seki_ask_order_details') === 'true') {
+            document.getElementById('order-client-name').value = '';
+            document.getElementById('order-pickup-time').value = ''; // <-- ADD THIS
+            document.getElementById('order-notes').value = '';
+            bootstrap.Modal.getOrCreateInstance(document.getElementById('orderDetailsModal')).show();
+            setTimeout(() => document.getElementById('order-client-name').focus(), 500);
+            return;
+        }
+
+        showPaymentModal(total);
+    }
+
+    function confirmOrderDetails() {
+        currentClientName = document.getElementById('order-client-name').value.trim();
+        currentPickupTime = document.getElementById('order-pickup-time').value;
+        currentOrderNotes = document.getElementById('order-notes').value.trim();
+        
+        bootstrap.Modal.getInstance(document.getElementById('orderDetailsModal')).hide();
+        
+        const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
+        showPaymentModal(total);
+    }
+    
+    function showPaymentModal(total) {
         document.getElementById('payment-modal-total').innerText = clp.format(total);
         bootstrap.Modal.getOrCreateInstance(document.getElementById('paymentModal')).show();
     }
@@ -737,13 +852,16 @@
     }
 
     function setMonto(amount) {
-        document.getElementById('monto-recibido').value = amount;
+        // Formats the quick-select buttons so they have dots too
+        document.getElementById('monto-recibido').value = amount.toLocaleString('es-CL');
         calculateVuelto();
     }
 
     function calculateVuelto() {
         const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
-        const recibido = parseInt(document.getElementById('monto-recibido').value, 10);
+        // Strip the dots before parsing the math
+        const rawRecibido = document.getElementById('monto-recibido').value.replace(/\./g, '');
+        const recibido = parseInt(rawRecibido, 10);
         const vueltoDisplay = document.getElementById('vuelto-amount');
         const confirmBtn = document.getElementById('btn-confirm-vuelto');
 
@@ -763,13 +881,23 @@
     }
 
     async function executeCheckout(method) {
-        if (cart.length === 0) return;
+        if (cart.length === 0 || isProcessing) return;
+        isProcessing = true;
+        
         const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
         let paidAmount = total; 
         
+        const confirmBtn = document.getElementById('btn-confirm-vuelto');
+        const originalBtnText = confirmBtn.innerHTML;
+        
         if (method === 'efectivo') {
-            const inputVal = parseInt(document.getElementById('monto-recibido').value, 10);
+            // Strip the dots here too
+            const rawVal = document.getElementById('monto-recibido').value.replace(/\./g, '');
+            const inputVal = parseInt(rawVal, 10);
             if (!isNaN(inputVal) && inputVal > 0) paidAmount = inputVal;
+            
+            confirmBtn.disabled = true;
+            confirmBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Procesando...';
         }
 
         try {
@@ -793,8 +921,15 @@
                 renderCart();
                 clearLastScanned();
                 setTimeout(() => bootstrap.Modal.getInstance(document.getElementById('successModal')).hide(), 2000);
-            } else { alert("Error: " + (result.error || "Error desconocido")); }
+            } else { 
-        } catch (err) { alert("Error de conexión."); }
+                alert("Error: " + (result.error || "Error desconocido")); 
+            }
+        } catch (err) { 
+            alert("Error de conexión."); 
+        } finally {
+            isProcessing = false;
+            confirmBtn.innerHTML = originalBtnText;
+        }
     }
 
     function openQuickSaleModal() {
@@ -805,7 +940,8 @@
     }
 
     async function processQuickSale() {
-        // Strip the dots before asking JS to do math
+        if (isProcessing) return;
+        
         const rawValue = document.getElementById('quick-sale-amount').value.replace(/\./g, '');
         const amount = parseInt(rawValue, 10);
         
@@ -816,6 +952,12 @@
             triggerDoom(); return;
         }
 
+        isProcessing = true;
+        const quickBtn = document.querySelector('#quickSaleModal .btn-primary');
+        const originalBtnText = quickBtn.innerHTML;
+        quickBtn.disabled = true;
+        quickBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Procesando...';
+
         const quickCart = [{
             barcode: `RAPIDA-${Date.now().toString().slice(-6)}`,
             name: '* Varios', price: amount, qty: 1, subtotal: amount, unit: 'unit'
@@ -838,8 +980,16 @@
 
                 bootstrap.Modal.getOrCreateInstance(document.getElementById('successModal')).show();
                 setTimeout(() => bootstrap.Modal.getInstance(document.getElementById('successModal')).hide(), 2000);
-            } else { alert("Error: " + (result.error || "Error desconocido")); }
+            } else { 
-        } catch (err) { alert("Error de conexión."); }
+                alert("Error: " + (result.error || "Error desconocido")); 
+            }
+        } catch (err) { 
+            alert("Error de conexión."); 
+        } finally {
+            isProcessing = false;
+            quickBtn.disabled = false;
+            quickBtn.innerHTML = originalBtnText;
+        }
     }
 
     function printReceipt(total, saleId, paidAmount = 0) {
@@ -864,7 +1014,36 @@
         document.getElementById('receipt-change-print').innerText = clp.format(finalPaid - total);
         document.getElementById('receipt-date').innerText = new Date().toLocaleString('es-CL');
 
-        setTimeout(() => window.print(), 250);
+       // NEW: Fill in Restaurant Info if it exists
+        const orderInfoDiv = document.getElementById('receipt-order-info');
+        if (currentClientName || currentOrderNotes || currentPickupTime) {
+            orderInfoDiv.style.display = 'block';
+            document.getElementById('receipt-client-name').innerText = currentClientName || '-';
+            document.getElementById('receipt-order-notes').innerText = currentOrderNotes || '-';
+            
+            const pickupContainer = document.getElementById('receipt-pickup-container');
+            if (currentPickupTime) {
+                pickupContainer.style.display = 'block';
+                document.getElementById('receipt-pickup-time').innerText = currentPickupTime;
+            } else {
+                pickupContainer.style.display = 'none';
+            }
+        } else {
+            orderInfoDiv.style.display = 'none';
+        }
+
+        // Wipe the memory for the next sale
+        currentClientName = '';
+        currentOrderNotes = '';
+        currentPickupTime = '';
+
+
+        // Check the setting before printing
+        setTimeout(() => {
+            if (localStorage.getItem('seki_auto_print') !== 'false') {
+                window.print();
+            }
+        }, 250);
     }
 
     /* =========================================
@@ -897,7 +1076,7 @@
             }
         }
 
-        // 2. Payment Modal Selection: 1 for Efectivo, 2 for Tarjeta
+        // 2. Payment Modal Selection: 1 for Efectivo, 2 for Tarjeta, 3 for Transferencia
         if (openModal && openModal.id === 'paymentModal') {
             if (event.code === 'Numpad1' || event.key === '1') {
                 event.preventDefault();
@@ -909,6 +1088,12 @@
                 executeCheckout('tarjeta');
                 return;
             }
+            // NEW TRANSFER SHORTCUT
+            if (event.code === 'Numpad3' || event.key === '3') {
+                event.preventDefault();
+                executeCheckout('transferencia');
+                return;
+            }
         }
 
         // 3. The Money Button: Enter
@@ -1062,6 +1247,7 @@
        10. INIT
        ========================================= */
     loadCart();
+    renderPinnedProducts();
 
 
 

templates/gastos.html

@@ -0,0 +1,228 @@
+{% extends "macros/base.html" %}
+
+{% block title %}Gastos y Utilidad{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+    <h3 class="mb-0"><i class="bi bi-wallet2 me-2"></i>Gastos y Utilidad</h3>
+    
+    <div class="d-flex gap-2">
+        <select id="month-select" class="form-select form-select-sm" 
+                style="width: auto; background: var(--input-bg); color: var(--text-main); border-color: var(--border);" 
+                onchange="applyDateFilter()">
+        </select>
+        <select id="year-select" class="form-select form-select-sm" 
+                style="width: auto; background: var(--input-bg); color: var(--text-main); border-color: var(--border);" 
+                onchange="applyDateFilter()">
+        </select>
+    </div>
+</div>
+
+<div class="row g-3 mb-4">
+    <div class="col-12 col-md-4">
+        <div class="discord-card p-3 shadow-sm text-center border-success" style="border-bottom: 4px solid #198754;">
+            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Ventas Totales</h6>
+            <h2 class="price-cell mb-0 text-success" style="font-weight: 800;" data-value="{{ sales_total }}"></h2>
+        </div>
+    </div>
+    <div class="col-12 col-md-4">
+        <div class="discord-card p-3 shadow-sm text-center border-danger" style="border-bottom: 4px solid #dc3545;">
+            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Gastos Totales</h6>
+            <h2 class="price-cell mb-0 text-danger" style="font-weight: 800;" data-value="{{ expenses_total }}"></h2>
+        </div>
+    </div>
+    <div class="col-12 col-md-4">
+        <div class="discord-card p-3 shadow-sm text-center" style="border-bottom: 4px solid {% if net_profit >= 0 %}#0dcaf0{% else %}#dc3545{% endif %};">
+            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Utilidad Neta</h6>
+            <h2 class="price-cell mb-0" style="color: {% if net_profit >= 0 %}#0dcaf0{% else %}#dc3545{% endif %}; font-weight: 800;" data-value="{{ net_profit }}"></h2>
+        </div>
+    </div>
+</div>
+
+<div class="row g-3">
+    <div class="col-md-4">
+        <div class="discord-card p-3 shadow-sm">
+            <h5 class="mb-3"><i class="bi bi-plus-circle me-2"></i>Registrar Gasto</h5>
+            <div class="mb-3">
+                <label class="form-label text-muted small mb-1">Descripción</label>
+                <input type="text" id="gasto-desc" class="form-control" placeholder="Ej: Pago de luz, Mercadería..." autocomplete="off">
+            </div>
+            <div class="mb-3">
+                <label class="form-label text-muted small mb-1">Monto (CLP)</label>
+                <input type="text" inputmode="numeric" id="gasto-monto" class="form-control fs-5 fw-bold"
+                       placeholder="$0" 
+                       oninput="let v = this.value.replace(/\D/g, ''); this.value = v ? parseInt(v, 10).toLocaleString('es-CL') : '';"
+                       onkeydown="if(event.key === 'Enter') submitGasto()">
+            </div>
+            <button class="btn btn-warning w-100 fw-bold" onclick="submitGasto()">
+                <i class="bi bi-save me-1"></i> Guardar Gasto
+            </button>
+        </div>
+    </div>
+
+    <div class="col-md-8">
+        <div class="discord-card p-3 shadow-sm">
+            <h5 class="mb-3"><i class="bi bi-list-ul me-2"></i>Historial de Gastos</h5>
+            <div class="table-responsive">
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>Fecha</th>
+                            <th>Descripción</th>
+                            <th class="text-end">Monto</th>
+                            <th style="width: 1%;"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% if expenses %}
+                            {% for e in expenses %}
+                            <tr>
+                                <td class="utc-date text-muted">{{ e[1] }}</td>
+                                <td>{{ e[2] }}</td>
+                                <td class="text-end text-danger fw-bold price-cell" data-value="{{ e[3] }}"></td>
+                                <td class="text-nowrap">
+                                    <button class="btn btn-sm btn-outline-danger py-0 px-2" onclick="deleteGasto({{ e[0] }})" title="Eliminar">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        {% else %}
+                            <tr>
+                                <td colspan="4" class="text-center text-muted py-4">No hay gastos registrados en este mes.</td>
+                            </tr>
+                        {% endif %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="deleteGastoModal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-danger">
+            <div class="modal-header border-0 pb-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">¿Eliminar Gasto?</h4>
+                <p class="text-muted px-3">Esta acción eliminará el registro permanentemente y recalculará la utilidad neta.</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="executeDeleteGasto()">Sí, Eliminar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
+    let gastoToDelete = null;
+
+    // Format UI numbers
+    document.querySelectorAll('.price-cell').forEach(td => {
+        td.innerText = clp.format(td.getAttribute('data-value'));
+    });
+
+    document.querySelectorAll('.utc-date').forEach(el => {
+        const date = new Date(el.innerText + " UTC");
+        if (!isNaN(date)) {
+            el.innerText = date.toLocaleString('es-CL', { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+        }
+    });
+
+    // --- Build the Split Dropdowns ---
+    const currentSelected = "{{ selected_month }}"; // Comes from backend as "YYYY-MM"
+    const [selYear, selMonth] = currentSelected.split('-');
+
+    const monthSelect = document.getElementById('month-select');
+    const yearSelect = document.getElementById('year-select');
+
+    const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
+    
+    // Populate Months
+    monthNames.forEach((name, index) => {
+        const val = String(index + 1).padStart(2, '0');
+        const option = document.createElement('option');
+        option.value = val;
+        option.innerText = name;
+        if (val === selMonth) option.selected = true;
+        monthSelect.appendChild(option);
+    });
+
+    // Populate Years (Current year +/- a few years)
+    const currentYear = new Date().getFullYear();
+    for (let y = currentYear - 3; y <= currentYear + 1; y++) {
+        const option = document.createElement('option');
+        option.value = y;
+        option.innerText = y;
+        if (y.toString() === selYear) option.selected = true;
+        yearSelect.appendChild(option);
+    }
+
+    // Trigger URL change when either dropdown is touched
+    function applyDateFilter() {
+        const m = monthSelect.value;
+        const y = yearSelect.value;
+        window.location.href = `/gastos?month=${y}-${m}`;
+    }
+
+    async function submitGasto() {
+        const descInput = document.getElementById('gasto-desc');
+        const montoInput = document.getElementById('gasto-monto');
+        
+        const desc = descInput.value.trim();
+        const rawMonto = montoInput.value.replace(/\./g, '');
+        const amount = parseInt(rawMonto, 10);
+
+        if (!desc || isNaN(amount) || amount <= 0) {
+            alert("Por favor ingresa una descripción y un monto válido.");
+            return;
+        }
+
+        try {
+            const res = await fetch('/api/gastos', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ description: desc, amount: amount })
+            });
+
+            if (res.ok) {
+                descInput.value = '';
+                montoInput.value = '';
+                window.location.href = window.location.pathname + window.location.search;
+            } else {
+                alert("Error al guardar el gasto.");
+            }
+        } catch (err) {
+            alert("Error de conexión.");
+        }
+    }
+
+    // Open Modal
+    function deleteGasto(id) {
+        gastoToDelete = id;
+        bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteGastoModal')).show();
+    }
+
+    // Execute the backend call
+    async function executeDeleteGasto() {
+        if (!gastoToDelete) return;
+        try {
+            const res = await fetch(`/api/gastos/${gastoToDelete}`, { method: 'DELETE' });
+            if (res.ok) {
+                window.location.href = window.location.pathname + window.location.search;
+            } else {
+                alert("Error al eliminar.");
+            }
+        } catch (err) {
+            alert("Error de conexión.");
+        }
+    }
+</script>
+{% endblock %}

templates/macros/base.html

@@ -22,6 +22,10 @@
         {% block content %}{% endblock %}
     </main>
     
+    {% from 'macros/modals.html' import settings_modal %}
+    {{ settings_modal() }}
+
+    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="{{ url_for('static', filename='cookieStuff.js') }}"></script>
     <script src="{{ url_for('static', filename='themeStuff.js') }}"></script>

templates/macros/modals.html

@@ -49,51 +49,42 @@
 <div id="receipt-print-zone{{ id_suffix }}" class="d-none d-print-block">
     <style>
         @media print {
-            /* Tell the browser this is a continuous 80mm thermal roll */
+            @page { margin: 0; size: 80mm auto; }
-            @page {
+            nav, .discord-card, .modal, .row { display: none !important; }
-                margin: 0;
+            body * { visibility: hidden; }
-                size: 80mm auto; 
+            #receipt-print-zone{{ id_suffix }}, #receipt-print-zone{{ id_suffix }} * { visibility: visible; }
-            }
-
-            /* Nuke the rest of the layout from the document flow so it takes up 0 height */
-            nav, .discord-card, .modal, .row {
-                display: none !important;
-            }
-            
-            body * { 
-                visibility: hidden; 
-            }
-
-            /* Resurrect the receipt and put it in the top left corner */
-            #receipt-print-zone{{ id_suffix }}, #receipt-print-zone{{ id_suffix }} * { 
-                visibility: visible; 
-            }
             #receipt-print-zone{{ id_suffix }} {
-                position: absolute; 
+                position: absolute; left: 0; top: 0; width: 80mm;
-                left: 0; 
+                padding: 2mm 5mm; margin: 0; display: block !important;
-                top: 0; 
+                font-family: 'Courier New', Courier, monospace; font-size: 10px; color: #000;
-                width: 80mm;
-                padding: 2mm 5mm; 
-                margin: 0; 
-                display: block !important;
-                font-family: 'Courier New', Courier, monospace; 
-                font-size: 10px; 
-                color: #000;
             }
         }
-        
         .receipt-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 12px; }
         .receipt-header { text-align: center; margin-bottom: 10px; border-bottom: 1px dashed #000; padding-bottom: 5px; }
         .receipt-total-row { border-top: 1px dashed #000; margin-top: 5px; padding-top: 5px; font-weight: bold; }
     </style>
 
     <div class="receipt-header">
-        <h3 style="margin: 0; font-weight: 800;">SekiPOS</h3>
+        <h3 style="margin: 0; font-weight: 800;" class="receipt-biz-name">SekiPOS</h3>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                document.querySelectorAll('.receipt-biz-name').forEach(el => {
+                    el.innerText = localStorage.getItem('seki_biz_name') || 'SekiPOS';
+                });
+            });
+        </script>
+        
         <div style="font-size: 10px; margin-bottom: 5px;" id="receipt-type{{ id_suffix }}">Comprobante de Venta</div>
         <div style="font-size: 11px; font-weight: bold;">
             Ticket Nº <span id="receipt-ticket-id{{ id_suffix }}"></span>
         </div>
         <div id="receipt-date{{ id_suffix }}" style="font-size: 11px;"></div>
+        
+        <div id="receipt-order-info{{ id_suffix }}" style="display: none; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #000; text-align: left; font-size: 11px;">
+            <div style="font-weight: bold;">Cliente: <span id="receipt-client-name{{ id_suffix }}"></span></div>
+            <div id="receipt-pickup-container{{ id_suffix }}" style="display: none; font-weight: bold;">Retiro: <span id="receipt-pickup-time{{ id_suffix }}"></span></div>
+            <div>Notas: <span id="receipt-order-notes{{ id_suffix }}"></span></div>
+        </div>
     </div>
 
     <table class="receipt-table">
@@ -126,3 +117,64 @@
     <div style="text-align: center; margin-top: 20px; font-size: 10px;">¡Gracias por su compra!</div>
 </div>
 {% endmacro %}
+
+{% macro settings_modal() %}
+<div class="modal fade" id="settingsModal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"><i class="bi bi-gear-fill me-2"></i>Configuración del POS</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div class="mb-4">
+                    <label class="form-label text-muted small mb-1">Nombre del Local (Impreso en la Boleta)</label>
+                    <input type="text" id="setting-biz-name" class="form-control" placeholder="Ej: Mi Tiendita" autocomplete="off">
+                </div>
+                <div class="form-check form-switch mb-3">
+                    <input class="form-check-input" type="checkbox" id="setting-auto-print">
+                    <label class="form-check-label text-muted small" for="setting-auto-print">
+                        Imprimir automáticamente al finalizar venta
+                    </label>
+                </div>
+                <div class="form-check form-switch mb-2">
+                    <input class="form-check-input" type="checkbox" id="setting-ask-order-details">
+                    <label class="form-check-label text-muted small" for="setting-ask-order-details">
+                        Solicitar Nombre/Notas al cobrar (Modo Comida)
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer d-flex">
+                <button class="btn btn-secondary flex-grow-1" data-bs-dismiss="modal">Cancelar</button>
+                <button class="btn btn-primary flex-grow-1" onclick="savePosSettings()">Guardar</button>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const modalEl = document.getElementById('settingsModal');
+        if (modalEl) {
+            modalEl.addEventListener('show.bs.modal', () => {
+                document.getElementById('setting-biz-name').value = localStorage.getItem('seki_biz_name') || 'SekiPOS';
+                document.getElementById('setting-auto-print').checked = localStorage.getItem('seki_auto_print') !== 'false';
+                document.getElementById('setting-ask-order-details').checked = localStorage.getItem('seki_ask_order_details') === 'true';
+            });
+        }
+    });
+
+    function savePosSettings() {
+        const bizName = document.getElementById('setting-biz-name').value.trim() || 'SekiPOS';
+        const autoPrint = document.getElementById('setting-auto-print').checked;
+        const askDetails = document.getElementById('setting-ask-order-details').checked;
+        
+        localStorage.setItem('seki_biz_name', bizName);
+        localStorage.setItem('seki_auto_print', autoPrint);
+        localStorage.setItem('seki_ask_order_details', askDetails);
+        
+        document.querySelectorAll('.receipt-biz-name').forEach(el => { el.innerText = bizName; });
+        
+        bootstrap.Modal.getInstance(document.getElementById('settingsModal')).hide();
+    }
+</script>
+{% endmacro %}

templates/macros/navbar.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
     <span class="navbar-brand">
         SekiPOS
-        <small class="text-muted fw-normal" style="font-size:0.65rem;">v2.1</small>
+        <small class="text-muted fw-normal" style="font-size:0.65rem;">v2.2</small>
     </span>
 
     <div class="ms-3 gap-2 d-flex">
@@ -15,6 +15,9 @@
         <a href="/sales" class="btn btn-sm {{ 'btn-primary' if active_page == 'sales' else 'btn-outline-primary' }}">
             <i class="bi bi-receipt me-1"></i>Ventas
         </a>
+        <a href="/gastos" class="btn btn-sm {{ 'btn-warning' if active_page == 'gastos' else 'btn-outline-warning' }}">
+            <i class="bi bi-wallet2 me-1"></i>Gastos
+        </a>
         <a href="/dicom" class="btn btn-sm {{ 'btn-danger' if active_page == 'dicom' else 'btn-outline-danger' }}">
             <i class="bi bi-journal-x me-1"></i>Dicom
         </a>
@@ -32,6 +35,11 @@
                         <i class="bi bi-moon-stars me-2"></i>Modo Oscuro
                     </button>
                 </li>
+                <li>
+                    <button class="dropdown-item" onclick="bootstrap.Modal.getOrCreateInstance(document.getElementById('settingsModal')).show()">
+                        <i class="bi bi-gear-fill me-2"></i>Configuración
+                    </button>
+                </li>
                 <li>
                     <a class="dropdown-item" href="/export/db">
                         <i class="bi bi-database-down me-2"></i>Descargar DB

templates/sales.html

@@ -4,7 +4,25 @@
 {% block title %}Ventas{% endblock %}
 
 {% block head %}
-<!--HEAD-->
+<style>
+    /* Burn the ugly arrows */
+    input[type="number"]::-webkit-inner-spin-button, 
+    input[type="number"]::-webkit-outer-spin-button { 
+        -webkit-appearance: none; 
+        margin: 0; 
+    }
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+    
+    /* Fix the weird focus line on the ticket input group */
+    .ticket-group .input-group-text { border-right: none; }
+    .ticket-group #ticket-filter { border-left: none; }
+    .ticket-group #ticket-filter:focus {
+        box-shadow: none;
+        border-color: var(--border);
+    }
+</style>
 {% endblock %}
 
 {% block content %}
@@ -13,46 +31,60 @@
 <div class="row g-3 mb-3">
     <div class="col-12 col-md-4">
         <div class="discord-card p-3 shadow-sm text-center">
-            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">
+            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Hoy</h6>
-                {% if selected_date %}Día Seleccionado{% else %}Ventas de Hoy{% endif %}
+            <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.daily }}"></h2>
-            </h6>
-            <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.daily }}">
-            </h2>
         </div>
     </div>
     <div class="col-12 col-md-4">
         <div class="discord-card p-3 shadow-sm text-center">
-            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Últimos 7
+            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Esta Semana</h6>
-                Días</h6>
+            <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.week }}"></h2>
-            <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.week }}">
-            </h2>
         </div>
     </div>
     <div class="col-12 col-md-4">
         <div class="discord-card p-3 shadow-sm text-center">
-            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Este Mes
+            <h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Este Mes</h6>
-            </h6>
+            <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.month }}"></h2>
-            <h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.month }}">
-            </h2>
         </div>
     </div>
 </div>
 
 <div class="discord-card p-3 shadow-sm">
-    <div class="d-flex justify-content-between align-items-center mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
         <h4 class="mb-0"><i class="bi bi-receipt-cutoff me-2"></i>Historial</h4>
-        <div class="d-flex align-items-center gap-2">
+        <div class="d-flex align-items-center gap-2 flex-wrap">
-            <label for="date-filter" class="form-label mb-0 text-muted small d-none d-sm-block">Filtrar
+            
-                Día:</label>
+            <select id="payment-filter" class="form-select form-select-sm" onchange="applyFilters(1)"
+                    style="width: auto; background: var(--input-bg); color: var(--text-main); border-color: var(--border);">
+                <option value="">Cualquier Pago</option>
+                <option value="efectivo" {% if selected_payment == 'efectivo' %}selected{% endif %}>Efectivo</option>
+                <option value="tarjeta" {% if selected_payment == 'tarjeta' %}selected{% endif %}>Tarjeta</option>
+                <option value="transferencia" {% if selected_payment == 'transferencia' %}selected{% endif %}>Transferencia</option>
+            </select>
+
             <input type="date" id="date-filter" class="form-control form-control-sm"
-                style="background: var(--input-bg); color: var(--text-main); border-color: var(--border);"
+                style="width: auto; background: var(--input-bg); color: var(--text-main); border-color: var(--border);"
-                value="{{ selected_date or '' }}" onchange="filterByDate(this.value)">
+                value="{{ selected_date or '' }}" onchange="applyFilters(1)">
-            {% if selected_date %}
+            
-            <a href="/sales" class="btn btn-sm btn-outline-secondary" title="Limpiar filtro"><i
+            {% if selected_date or selected_payment %}
-                    class="bi bi-x-lg"></i></a>
+            <a href="/sales" class="btn btn-sm btn-outline-danger px-2" title="Limpiar filtros"><i class="bi bi-x-lg"></i></a>
             {% endif %}
         </div>
     </div>
+
+    {% if selected_date or selected_payment or selected_ticket %}
+    <div class="d-flex justify-content-between align-items-center mb-3 p-3 rounded shadow-sm" 
+         style="background: rgba(var(--accent-rgb, 88, 101, 242), 0.1); border: 1px dashed var(--accent, #5865F2);">
+        <div>
+            <h6 class="mb-0 text-uppercase" style="font-size: 0.75rem; font-weight: 700; color: var(--accent, #5865F2);">
+                <i class="bi bi-funnel-fill me-1"></i> Total Filtrado
+            </h6>
+            <small class="text-muted">{{ filtered_stats.count }} ventas encontradas</small>
+        </div>
+        <h3 class="price-cell mb-0" style="color: var(--accent, #5865F2); font-weight: 800;" data-value="{{ filtered_stats.total }}"></h3>
+    </div>
+    {% endif %}
+
     <div class="table-responsive">
         <table class="table table-hover">
             <thead>
@@ -82,15 +114,32 @@
             </tbody>
         </table>
     </div>
-</div>
+    {% if total_pages > 1 %}
+    <nav aria-label="Navegación de páginas" class="mt-4">
+        <ul class="pagination justify-content-center pagination-sm">
+            <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
+                <button class="page-link" onclick="applyFilters({{ current_page - 1 }})" style="background: var(--input-bg); color: var(--text-main); border-color: var(--border);">Anterior</button>
+            </li>
+            
+            <li class="page-item disabled">
+                <span class="page-link" style="background: var(--bg-main); color: var(--text-muted); border-color: var(--border);">
+                    Página {{ current_page }} de {{ total_pages }}
+                </span>
+            </li>
+
+            <li class="page-item {% if current_page >= total_pages %}disabled{% endif %}">
+                <button class="page-link" onclick="applyFilters({{ current_page + 1 }})" style="background: var(--input-bg); color: var(--text-main); border-color: var(--border);">Siguiente</button>
+            </li>
+        </ul>
+    </nav>
+    {% endif %}
 </div>
 
 <div class="modal fade" id="receiptModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Detalle de Venta <span id="modal-ticket-id" class="text-muted small"></span>
+                <h5 class="modal-title">Detalle de Venta <span id="modal-ticket-id" class="text-muted small"></span></h5>
-                </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
@@ -103,8 +152,7 @@
                             <th class="text-end">Subtotal</th>
                         </tr>
                     </thead>
-                    <tbody id="receipt-items">
+                    <tbody id="receipt-items"></tbody>
-                    </tbody>
                     <tfoot>
                         <tr>
                             <th colspan="2" class="text-end">TOTAL:</th>
@@ -113,8 +161,6 @@
                     </tfoot>
                 </table>
             </div>
-            <div class="modal-body">
-            </div>
             <div class="modal-footer d-flex justify-content-between border-0 pt-0">
                 <div class="d-flex gap-2">
                     <button class="btn btn-outline-danger btn-sm" id="btn-reverse-sale">
@@ -124,7 +170,6 @@
                         <i class="bi bi-printer me-1"></i>Re-imprimir
                     </button>
                 </div>
-                
                 <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
             </div>
         </div>
@@ -152,6 +197,7 @@
     </div>
 </div>
 {% endblock %}
+
 {% block scripts %}
 <script>
     const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
@@ -238,12 +284,21 @@
         }
     }
 
-    function filterByDate(dateVal) {
+    function applyFilters(page = 1) {
-        if (dateVal) {
+        const dateVal = document.getElementById('date-filter').value;
-            window.location.href = `/sales?date=${dateVal}`;
+        const paymentVal = document.getElementById('payment-filter').value;
-        } else {
+
-            window.location.href = `/sales`;
+        const url = new URL(window.location.origin + '/sales');
+        
+        if (dateVal) url.searchParams.set('date', dateVal);
+        if (paymentVal) url.searchParams.set('payment_method', paymentVal);
+        if (page > 1) url.searchParams.set('page', page);
+
+        window.location.href = url.toString();
     }
+
+    function handleEnter(e) {
+        if (e.key === 'Enter') applyFilters();
     }
 
     function reverseSale(id) {