SekiDesu01/SekiPOS
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
SekiDesu0
2026-04-15 22:58:12 -04:00
parent b2bc0801f5
commit 47cc480cf5
7 changed files with 753 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app.py
View File

@@ -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,
"week": cur.execute("SELECT SUM(total) FROM sales WHERE date(date, 'localtime') >= date('now', 'localtime', '-7 days')").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
"daily": cur.execute(daily_query, tuple(daily_params)).fetchone()[0] or 0,
"week": cur.execute(week_query, tuple(week_params)).fetchone()[0] or 0,
"month": cur.execute(month_query, tuple(month_params)).fetchone()[0] or 0
}
# 2. Dynamic query builder for the main table and pagination
base_query = "FROM sales WHERE 1=1"
params = []
if selected_date:
sales_data = cur.execute('''SELECT id, date, total, payment_method FROM sales
WHERE date(date, 'localtime') = ?
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()
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()
return render_template('sales.html', active_page='sales', user=current_user, sales=sales_data, stats=stats, selected_date=selected_date)
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():

232
templates/checkout.html
View File

@@ -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"
placeholder="$0" onkeyup="calculateVuelto()" onchange="calculateVuelto()"
<input type="text" inputmode="numeric" id="monto-recibido" class="form-control form-control-lg text-center fw-bold fs-4"
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>
<strong>${p.name}</strong><br>
<small class="text-muted font-monospace">${p.barcode}</small>
<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")); }
} catch (err) { alert("Error de conexión."); }
} else {
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")); }
} catch (err) { alert("Error de conexión."); }
} else {
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();

228
templates/gastos.html Normal file
View File

@@ -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 %}

4
templates/macros/base.html
View File

@@ -21,7 +21,11 @@
<main class="container-fluid px-3">
{% 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>

114
templates/macros/modals.html
View File

@@ -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;
}
/* 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;
}
@page { margin: 0; size: 80mm auto; }
nav, .discord-card, .modal, .row { display: none !important; }
body * { visibility: hidden; }
#receipt-print-zone{{ id_suffix }}, #receipt-print-zone{{ id_suffix }} * { visibility: visible; }
#receipt-print-zone{{ id_suffix }} {
position: absolute;
left: 0;
top: 0;
width: 80mm;
padding: 2mm 5mm;
margin: 0;
display: block !important;
font-family: 'Courier New', Courier, monospace;
font-size: 10px;
color: #000;
position: absolute; left: 0; top: 0; 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">
@@ -125,4 +116,65 @@
<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 %}

10
templates/macros/navbar.html
View File

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

129
templates/sales.html
View File

@@ -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;">
{% if selected_date %}Día Seleccionado{% else %}Ventas de Hoy{% endif %}
</h6>
<h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.daily }}">
</h2>
<h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Hoy</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
Días</h6>
<h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.week }}">
</h2>
<h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Esta Semana</h6>
<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>
<h2 class="price-cell mb-0" style="color: var(--accent); font-weight: 800;" data-value="{{ stats.month }}">
</h2>
<h6 class="text-muted text-uppercase mb-1" style="font-size: 0.75rem; font-weight: 700;">Este Mes</h6>
<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">
<label for="date-filter" class="form-label mb-0 text-muted small d-none d-sm-block">Filtrar
Día:</label>
<div class="d-flex align-items-center gap-2 flex-wrap">
<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);"
value="{{ selected_date or '' }}" onchange="filterByDate(this.value)">
{% if selected_date %}
<a href="/sales" class="btn btn-sm btn-outline-secondary" title="Limpiar filtro"><i
class="bi bi-x-lg"></i></a>
style="width: auto; background: var(--input-bg); color: var(--text-main); border-color: var(--border);"
value="{{ selected_date or '' }}" onchange="applyFilters(1)">
{% if selected_date or selected_payment %}
<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>
<h5 class="modal-title">Detalle de Venta <span id="modal-ticket-id" class="text-muted small"></span></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>
<tbody id="receipt-items"></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) {
if (dateVal) {
window.location.href = `/sales?date=${dateVal}`;
} else {
window.location.href = `/sales`;
}
function applyFilters(page = 1) {
const dateVal = document.getElementById('date-filter').value;
const paymentVal = document.getElementById('payment-filter').value;
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) {