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

initial modularization + templates

Browse Source
This commit is contained in:
weko
2026-03-10 18:40:47 -03:00
parent 3c4b2e148d
commit ef9a9296dd
10 changed files with 841 additions and 782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Build SekiPOS (F5)",
"type": "node",
"request": "launch",
"preLaunchTask": "build-sekipos"
}
]
}

15
.vscode/tasks.json vendored Normal file
View File

@@ -0,0 +1,15 @@
{
"version": "2.0.0",
"tasks": [
{
"label": "build-sekipos",
"type": "shell",
"command": "docker build -t sekipos:latest .",
"group": "build",
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}

17
static/cookieStuff.js Normal file
View File

@@ -0,0 +1,17 @@
function setCookie(name, value, days = 365) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax";
}
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

255
static/style.css Normal file
View File

@@ -0,0 +1,255 @@
:root {
--bg: #ebedef;
--card-bg: #ffffff;
--text-main: #2e3338;
--text-muted: #4f5660;
--border: #e3e5e8;
--navbar-bg: #ffffff;
--input-bg: #e3e5e8;
--table-head: #f2f3f5;
--accent: #5865f2;
--accent-hover: #4752c4;
--danger: #ed4245;
}
[data-theme="dark"] {
--bg: #36393f;
--card-bg: #2f3136;
--text-main: #dcddde;
--text-muted: #b9bbbe;
--border: #202225;
--navbar-bg: #202225;
--input-bg: #202225;
--table-head: #292b2f;
}
body {
background: var(--bg);
color: var(--text-main);
font-family: "gg sans", "Segoe UI", sans-serif;
transition: background 0.2s, color 0.2s;
}
/* ── Navbar ── */
.navbar {
background: var(--navbar-bg) !important;
border-bottom: 1px solid var(--border);
}
.navbar-brand {
color: var(--text-main) !important;
font-weight: 700;
}
.nav-link,
.dropdown-item {
color: var(--text-main) !important;
}
.dropdown-menu {
background: var(--card-bg);
border: 1px solid var(--border);
}
.dropdown-item:hover {
background: var(--input-bg);
}
.dropdown-item.text-danger {
color: var(--danger) !important;
}
/* ── Cards ── */
.discord-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ── Inputs ── */
.form-control,
.form-control:focus {
background: var(--input-bg);
color: var(--text-main);
border: none;
box-shadow: none;
}
.form-control:focus {
outline: 2px solid var(--accent);
}
.form-control::placeholder {
color: var(--text-muted);
}
/* ── Buttons ── */
.btn-accent {
background: var(--accent);
color: #fff;
border: none;
}
.btn-accent:hover {
background: var(--accent-hover);
color: #fff;
}
.btn-danger-discord {
background: var(--danger);
color: #fff;
border: none;
}
.btn-danger-discord:hover {
background: #c23235;
color: #fff;
}
/* ── Price tag ── */
.price-tag {
font-size: 2.8rem;
/* Slightly larger for the wider card */
font-weight: 800;
color: var(--accent);
/* Optional: uses your accent color for better visibility */
}
/* ── Table ── */
.table {
color: var(--text-main);
--bs-table-color: var(--text-main);
--bs-table-bg: transparent;
--bs-table-border-color: var(--border);
}
/* -- Checkbox Size Fix -- */
#select-all {
transform: scale(1.3);
margin-top: 2px;
}
[data-theme="dark"] .table {
--bs-table-color: var(--text-main);
color: var(--text-main);
}
.table thead th {
background: var(--table-head);
color: var(--text-muted);
font-size: 0.72rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
}
.table tbody td {
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
/* ── Bulk bar ── */
.bulk-bar {
background: var(--accent);
color: #fff;
border-radius: 8px;
}
.bulk-bar .form-control {
width: 110px;
background: rgba(0, 0, 0, 0.2) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.bulk-bar .form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
/* ── New-product prompt ── */
.new-product-prompt {
background: var(--accent);
color: #fff;
border-radius: 8px;
}
/* ── Product image ── */
#display-img {
width: 100%;
/* Allows it to fill the new width */
max-width: 250px;
/* Increased from 160px */
height: auto;
max-height: 250px;
/* Increased from 160px */
object-fit: contain;
}
/* ── Checkbox ── */
input[type="checkbox"] {
cursor: pointer;
}
/* ── Mobile: hide barcode column ── */
@media (max-width: 576px) {
.col-barcode {
display: none;
}
.btn-edit-sm,
.btn-del-sm {
padding: 4px 7px;
font-size: 0.75rem;
}
}
.modal-content {
background: var(--card-bg);
color: var(--text-main);
border: 1px solid var(--border);
}
.modal-header,
.modal-footer {
border-color: var(--border);
}
.btn-close {
/* Makes the X button visible in dark mode */
filter: var(--bs-theme-placeholder, invert(0.7) grayscale(100%) brightness(200%));
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Add this inside your <style> tag */
[data-theme="dark"] .text-muted {
color: var(--text-muted) !important;
}
[data-theme="dark"] .modal-body .text-muted {
color: #f6f6f7 !important;
}
.btn-close {
filter: none;
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
.form-select {
background-color: var(--input-bg) !important;
color: var(--text-main) !important;
border: none !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 16px 12px !important;
}
[data-theme="dark"] .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dcddde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

39
static/themeStuff.js Normal file
View File

@@ -0,0 +1,39 @@
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
localStorage.setItem('theme', t);
const isDark = (t === 'dark');
const themeIcon = document.getElementById('theme-icon');
const themeLabel = document.getElementById('theme-label');
if (themeIcon) {
themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
}
if (themeLabel) {
themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
}
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
applyTheme(current === 'dark' ? 'light' : 'dark');
}
function initTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
applyTheme(savedTheme);
} else {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'light');
}
}
// Listen for system theme changes only if the user hasn't set a manual override
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
});
initTheme();

351
templates/checkout.html
View File

@@ -121,7 +121,8 @@
.form-control::placeholder {
color: var(--text-muted) !important;
opacity: 1; /* Forces Firefox to respect the color */
opacity: 1;
/* Forces Firefox to respect the color */
}
#grand-total {
@@ -191,24 +192,32 @@
/* ── Thermal Printer Styles (80mm) ── */
@media print {
/* Kill all animations instantly so the printer doesn't photograph a mid-fade background */
*, *::before, *::after {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
/* Force true white background */
html, body {
background: #ffffff !important;
html,
body {
background: #ffffff !important;
color: #000000 !important;
margin: 0 !important;
padding: 0 !important;
margin: 0 !important;
padding: 0 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.navbar, .container-fluid, .modal { display: none !important; }
.navbar,
.container-fluid,
.modal {
display: none !important;
}
#receipt-print-zone {
display: block !important;
width: 80mm;
@@ -224,18 +233,41 @@
background: transparent !important;
color: #000000 !important;
opacity: 1 !important;
font-weight: 800 !important;
font-weight: 800 !important;
text-shadow: none !important;
box-shadow: none !important;
}
@page { margin: 0; }
.receipt-header { text-align: center; margin-bottom: 10px; }
.receipt-table { width: 100%; margin-bottom: 10px; }
.receipt-table th { text-align: left; border-bottom: 1px dashed #000 !important; padding-bottom: 3px; }
.receipt-table td { padding: 3px 0; vertical-align: top; }
.receipt-total-row { border-top: 1px dashed #000 !important; font-weight: 800 !important; font-size: 14px; }
@page {
margin: 0;
}
.receipt-header {
text-align: center;
margin-bottom: 10px;
}
.receipt-table {
width: 100%;
margin-bottom: 10px;
}
.receipt-table th {
text-align: left;
border-bottom: 1px dashed #000 !important;
padding-bottom: 3px;
}
.receipt-table td {
padding: 3px 0;
vertical-align: top;
}
.receipt-total-row {
border-top: 1px dashed #000 !important;
font-weight: 800 !important;
font-size: 14px;
}
}
/* ── Dropdown Select Fix ── */
@@ -259,7 +291,9 @@
</head>
<body>
<div class="modal fade" id="customProductModal" tabindex="-1" data-bs-backdrop="static">
{% with active_page='checkout' %}{% include 'navbar.html' %}{% endwith %}
<div class="modal fade" id="customProductModal" tabindex="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
@@ -269,13 +303,13 @@
<div class="modal-body">
<div class="mb-3">
<label class="form-label text-muted small mb-1">Descripción</label>
<input type="text" id="custom-name" class="form-control" placeholder="Ej: Varios, Bolsa, etc."
<input type="text" id="custom-name" class="form-control" placeholder="Ej: Varios, Bolsa, etc."
onkeydown="if(event.key === 'Enter') document.getElementById('custom-price').focus()">
</div>
<div class="row g-2">
<div class="col-8">
<label class="form-label text-muted small mb-1">Precio Unitario</label>
<input type="number" id="custom-price" class="form-control" placeholder="Ej: 1500"
<input type="number" id="custom-price" class="form-control" placeholder="Ej: 1500"
onkeydown="if(event.key === 'Enter') addCustomProduct()">
</div>
<div class="col-4">
@@ -301,7 +335,7 @@
<div style="font-size: 11px; font-weight: bold;">Ticket Nº <span id="receipt-ticket-id"></span></div>
<div id="receipt-date" style="font-size: 11px;"></div>
</div>
<table class="receipt-table">
<thead>
<tr>
@@ -311,14 +345,14 @@
</tr>
</thead>
<tbody id="receipt-items-print">
</tbody>
</tbody>
</table>
<div class="receipt-total-row d-flex justify-content-between pt-2">
<span>TOTAL:</span>
<span id="receipt-total-print"></span>
</div>
<div style="text-align: center; margin-top: 20px; font-size: 10px;">
¡Gracias por su compra!
</div>
@@ -375,18 +409,23 @@
<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;">Total a Pagar</h5>
<button type="button" class="btn-close position-absolute end-0 top-0 m-3" data-bs-dismiss="modal"></button>
<h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem;">Total
a Pagar</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 text-center pt-1 pb-4">
<h1 id="payment-modal-total" class="mb-4" style="color: var(--accent); font-weight: 800; font-size: 3rem;">$0</h1>
<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
</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 (Pronto)
</button>
</div>
</div>
@@ -397,30 +436,34 @@
<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;">Pago en Efectivo</h5>
<button type="button" class="btn-close position-absolute end-0 top-0 m-3" data-bs-dismiss="modal"></button>
<h5 class="modal-title w-100 text-center text-muted text-uppercase" style="font-size: 0.8rem;">Pago
en Efectivo</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 text-center pt-1 pb-4">
<div class="mb-3">
<span class="text-muted small">Total a Pagar:</span><br>
<span id="vuelto-total-display" class="fs-4 fw-bold" style="color: var(--text-main);">$0</span>
</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="number" id="monto-recibido"
class="form-control form-control-lg text-center fw-bold fs-4" placeholder="$0"
onkeyup="calculateVuelto()" onchange="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="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>
</div>
<button id="btn-confirm-vuelto" class="btn btn-success w-100 py-3 fw-bold" onclick="executeCheckout('efectivo')" disabled>
<button id="btn-confirm-vuelto" class="btn btn-success w-100 py-3 fw-bold"
onclick="executeCheckout('efectivo')" disabled>
Confirmar Venta
</button>
</div>
@@ -436,8 +479,9 @@
<div class="modal-body text-center pt-0 pb-4">
<i class="bi bi-question-circle text-warning mb-3" style="font-size: 3rem;"></i>
<h4 class="mb-2">Producto No Registrado</h4>
<p class="text-muted px-3 small">El código <strong id="not-found-barcode" style="color: var(--text-main);"></strong> no existe en la base de datos.</p>
<p class="text-muted px-3 small">El código <strong id="not-found-barcode"
style="color: var(--text-main);"></strong> no existe en la base de datos.</p>
<div class="d-flex flex-column gap-2 px-3 mt-4">
<button class="btn btn-accent w-100 py-2" onclick="goToInventory()">
<i class="bi bi-database-add me-2"></i>Registrar en Inventario
@@ -450,48 +494,6 @@
</div>
</div>
</div>
<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;">Caja</small></span>
<div class="ms-3 gap-2 d-flex">
<a href="/" class="btn btn-outline-primary btn-sm">
<i class="bi bi-box-seam me-1"></i>Inventario
</a>
<a href="/sales" class="btn btn-outline-primary btn-sm">
<i class="bi bi-receipt me-1"></i>Ventas
</a>
<a href="/dicom" class="btn btn-outline-danger btn-sm">
<i class="bi bi-journal-x me-1"></i>Dicom
</a>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i>
<span class="d-none d-sm-inline">{{ user.username }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow">
<li>
<button class="dropdown-item" onclick="toggleTheme()">
<i class="bi bi-moon-stars me-2" id="theme-icon"></i>
<span id="theme-label">Modo Oscuro</span>
</button>
</li>
<li>
<hr class="dropdown-divider" style="border-color: var(--border);">
</li>
<li>
<a class="dropdown-item text-danger" href="/logout">
<i class="bi bi-box-arrow-right me-2"></i>Salir
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row g-3">
@@ -500,17 +502,20 @@
<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;">
<span class="input-group-text border-0 position-absolute"
style="background: transparent; z-index: 10;">
<i class="bi bi-search text-muted"></i>
</span>
<input type="text" id="manual-search" class="form-control ps-5 py-2 rounded"
placeholder="Buscar producto por nombre o código..." autocomplete="off" onkeyup="filterSearch()">
<button class="btn btn-accent px-3" type="button" onclick="openCustomProductModal()" title="Agregar manual">
<input type="text" id="manual-search" class="form-control ps-5 py-2 rounded"
placeholder="Buscar producto por nombre o código..." autocomplete="off"
onkeyup="filterSearch()">
<button class="btn btn-accent px-3" type="button" onclick="openCustomProductModal()"
title="Agregar manual">
<i class="bi bi-plus-lg"></i> <span class="d-none d-sm-inline ms-1">Manual</span>
</button>
</div>
<div id="search-results" class="dropdown-menu w-100 shadow-sm mt-1"
style="display: none; position: absolute; top: 100%; left: 0; z-index: 1000; max-height: 300px; overflow-y: auto;">
<div id="search-results" class="dropdown-menu w-100 shadow-sm mt-1"
style="display: none; position: absolute; top: 100%; left: 0; z-index: 1000; max-height: 300px; overflow-y: auto;">
</div>
</div>
<table class="table mt-3" id="cart-table">
@@ -585,7 +590,7 @@
socket.on('scan_error', (data) => {
missingProductData = data;
document.getElementById('not-found-barcode').innerText = data.barcode;
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('notFoundModal'));
modal.show();
});
@@ -598,18 +603,18 @@
function openTempProduct() {
bootstrap.Modal.getInstance(document.getElementById('notFoundModal')).hide();
// Save the actual scanned barcode so it prints on the receipt instead of "MANUAL-XXX"
tempBarcode = missingProductData.barcode;
// Pre-fill the name if the OpenFoodFacts API managed to find it
document.getElementById('custom-name').value = missingProductData.name || '';
document.getElementById('custom-price').value = '';
document.getElementById('custom-unit').value = 'unit';
const customModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('customProductModal'));
customModal.show();
// Auto-focus the price if we already have a name, otherwise focus the name
setTimeout(() => {
if (missingProductData.name) document.getElementById('custom-price').focus();
@@ -659,11 +664,11 @@
`;
tbody.appendChild(row);
});
document.getElementById('grand-total').innerText = clp.format(total);
// This will actually run now
saveCart();
saveCart();
}
function clearCart() {
@@ -680,11 +685,11 @@
function processSale() {
if (cart.length === 0) return;
// Calculate total and show the payment modal
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
document.getElementById('payment-modal-total').innerText = clp.format(total);
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('paymentModal'));
modal.show();
}
@@ -706,25 +711,25 @@
// Safely hide whichever modal was open
const pModal = bootstrap.Modal.getInstance(document.getElementById('paymentModal'));
if (pModal) pModal.hide();
const vModal = bootstrap.Modal.getInstance(document.getElementById('vueltoModal'));
if (vModal) vModal.hide();
// Pass the new sale_id from the result to the printer
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
printReceipt(total, result.sale_id);
// Show the success checkmark
const successModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('successModal'));
successModal.show();
// Nuke the cart and auto-save the empty state
cart = [];
renderCart();
// Auto-hide the success modal after 2 seconds so you don't have to click it
setTimeout(() => successModal.hide(), 2000);
} else {
alert("Error en la venta: " + (result.error || "Error desconocido"));
}
@@ -737,10 +742,10 @@
function confirmWeight() {
const weightInput = document.getElementById('weight-input');
const weightGrams = parseInt(weightInput.value, 10);
if (weightGrams > 0) {
const weightKg = weightGrams / 1000;
const weightKg = weightGrams / 1000;
if (editingCartIndex !== null) {
// We are editing an existing row
cart[editingCartIndex].qty = weightKg;
@@ -750,7 +755,7 @@
// We are adding a new scan/search
addToCart(pendingProduct, weightKg);
}
bootstrap.Modal.getInstance(document.getElementById('weightModal')).hide();
weightInput.value = '';
editingCartIndex = null; // Clear the tracker
@@ -797,51 +802,32 @@
editingCartIndex = index;
const item = cart[index];
const weightInput = document.getElementById('weight-input');
// Convert current kg back to grams for the input
weightInput.value = Math.round(item.qty * 1000);
weightInput.value = Math.round(item.qty * 1000);
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
modal.show();
// Auto-focus and highlight the existing number so you can just type over it
setTimeout(() => {
weightInput.focus();
weightInput.select();
setTimeout(() => {
weightInput.focus();
weightInput.select();
}, 500);
}
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
const isDark = t === 'dark';
const themeIcon = document.getElementById('theme-icon');
const themeLabel = document.getElementById('theme-label');
if (themeIcon) themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
if (themeLabel) themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
localStorage.setItem('theme', t);
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
applyTheme(next);
}
// 1. Load all products from Python into a JavaScript array safely
const allProducts = [
{% for p in products %}
{
barcode: {{ p[0] | tojson }},
name: {{ p[1] | tojson }},
price: {{ p[2] | int }},
image: {{ p[3] | tojson }},
stock: {{ p[4] | int }},
unit: {{ p[5] | tojson }}
},
{% endfor %}
{
barcode: { { p[0] | tojson } },
name: { { p[1] | tojson } },
price: { { p[2] | int } },
image: { { p[3] | tojson } },
stock: { { p[4] | int } },
unit: { { p[5] | tojson } }
},
{% endfor %}
];
// 2. Extracted this into a helper so both Scanner and Search can use it
@@ -856,13 +842,13 @@
if (actualUnit === 'kg') {
pendingProduct = product;
pendingProduct.unit = 'kg'; // Force it to match the cart's expected format
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
modal.show();
setTimeout(() => document.getElementById('weight-input').focus(), 500);
} else {
// Ensure unit products also get the standardized key
product.unit = 'unit';
product.unit = 'unit';
addToCart(product, 1);
}
}
@@ -876,14 +862,14 @@
function filterSearch() {
const query = document.getElementById('manual-search').value.toLowerCase().trim();
const resultsBox = document.getElementById('search-results');
if (query.length < 2) {
resultsBox.style.display = 'none';
return;
}
// Find matches by name or barcode
const matches = allProducts.filter(p =>
const matches = allProducts.filter(p =>
p.name.toLowerCase().includes(query) || p.barcode.includes(query)
).slice(0, 10); // Limit to 10 results so it doesn't lag out
@@ -904,7 +890,7 @@
</a>
`).join('');
}
resultsBox.style.display = 'block';
}
@@ -913,7 +899,7 @@
if (product) {
handleProductScan(product);
}
// Clean up UI after selection
const searchInput = document.getElementById('manual-search');
searchInput.value = '';
@@ -922,7 +908,7 @@
}
// Close the search dropdown if user clicks outside of it
document.addEventListener('click', function(e) {
document.addEventListener('click', function (e) {
const searchArea = document.getElementById('manual-search');
const resultsBox = document.getElementById('search-results');
if (e.target !== searchArea && !resultsBox.contains(e.target)) {
@@ -934,7 +920,7 @@
document.getElementById('weightModal').addEventListener('hidden.bs.modal', function () {
document.getElementById('weight-input').value = '';
pendingProduct = null;
editingCartIndex = null;
editingCartIndex = null;
});
function calculateSubtotal(price, qty) {
@@ -953,7 +939,7 @@
try {
cart = JSON.parse(saved);
renderCart();
} catch(e) {
} catch (e) {
console.error("Error cargando el carrito", e);
cart = [];
}
@@ -963,17 +949,17 @@
function removeItem(idx) {
itemIndexToRemove = idx;
// Look up the name safely from the array
document.getElementById('removeItemName').innerText = cart[idx].name;
document.getElementById('removeItemName').innerText = cart[idx].name;
// getOrCreateInstance prevents UI-breaking ghost backdrops
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('removeConfirmModal'));
modal.show();
}
function printReceipt(total, saleId) {
function printReceipt(total, saleId) {
const tbody = document.getElementById('receipt-items-print');
tbody.innerHTML = '';
cart.forEach(item => {
const qtyStr = item.unit === 'kg' ? item.qty.toFixed(3) : item.qty;
tbody.innerHTML += `
@@ -984,11 +970,11 @@
</tr>
`;
});
document.getElementById('receipt-ticket-id').innerText = saleId || "N/A";
document.getElementById('receipt-total-print').innerText = clp.format(total);
document.getElementById('receipt-date').innerText = new Date().toLocaleString('es-CL');
// No hacks, just print
window.print();
}
@@ -1001,7 +987,7 @@
document.getElementById('custom-name').value = '';
document.getElementById('custom-price').value = '';
document.getElementById('custom-unit').value = 'unit';
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('customProductModal'));
modal.show();
setTimeout(() => document.getElementById('custom-name').focus(), 500);
@@ -1011,28 +997,28 @@
const nameInput = document.getElementById('custom-name').value.trim();
const priceInput = parseInt(document.getElementById('custom-price').value, 10);
const unitInput = document.getElementById('custom-unit').value;
if (!nameInput || isNaN(priceInput) || priceInput <= 0) {
alert("Por favor ingresa un nombre y un precio válido.");
return;
}
// Use the scanned barcode if it exists, otherwise generate a fake one
const finalBarcode = tempBarcode ? tempBarcode : `MANUAL-${Date.now().toString().slice(-6)}`;
const customProduct = {
barcode: finalBarcode,
name: `* ${nameInput}`,
name: `* ${nameInput}`,
price: priceInput,
image: '',
stock: 0,
stock: 0,
unit: unitInput
};
if (unitInput === 'kg') {
pendingProduct = customProduct;
bootstrap.Modal.getInstance(document.getElementById('customProductModal')).hide();
const weightModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
weightModal.show();
setTimeout(() => document.getElementById('weight-input').focus(), 500);
@@ -1040,7 +1026,7 @@
addToCart(customProduct, 1);
bootstrap.Modal.getInstance(document.getElementById('customProductModal')).hide();
}
tempBarcode = null; // Reset it after adding
}
@@ -1057,10 +1043,10 @@
function openVueltoModal() {
// Hide the main payment selection modal
bootstrap.Modal.getInstance(document.getElementById('paymentModal')).hide();
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
document.getElementById('vuelto-total-display').innerText = clp.format(total);
const input = document.getElementById('monto-recibido');
input.value = '';
document.getElementById('vuelto-amount').innerText = '$0';
@@ -1070,7 +1056,7 @@
// Generate smart quick-buttons (Exacto, 5k, 10k, 20k)
const quickBox = document.getElementById('vuelto-quick-buttons');
quickBox.innerHTML = `<button class="btn btn-sm btn-outline-secondary fw-bold" onclick="setMonto(${total})">Exacto</button>`;
[5000, 10000, 20000].forEach(bill => {
if (bill > total && (bill - total) <= 20000) {
quickBox.innerHTML += `<button class="btn btn-sm btn-outline-secondary fw-bold" onclick="setMonto(${bill})">${clp.format(bill)}</button>`;
@@ -1079,7 +1065,7 @@
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('vueltoModal'));
modal.show();
// Auto-focus input so you can start typing immediately
setTimeout(() => input.focus(), 500);
}
@@ -1107,27 +1093,12 @@
}
}
// Initialize on load
(function initTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
applyTheme(savedTheme);
} else {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'light');
}
})();
// Listen for OS theme changes in real-time
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
});
loadCart();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="./static/cookieStuff.js"></script>
<script src="./static/themeStuff.js"></script>
</body>
</html>

240
templates/dicom.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,78 +10,134 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
:root {
--bg: #ebedef; --card-bg: #ffffff; --text-main: #2e3338;
--text-muted: #4f5660; --border: #e3e5e8; --navbar-bg: #ffffff;
--accent: #5865f2; --input-bg: #e3e5e8; --danger: #ed4245;
--bg: #ebedef;
--card-bg: #ffffff;
--text-main: #2e3338;
--text-muted: #4f5660;
--border: #e3e5e8;
--navbar-bg: #ffffff;
--accent: #5865f2;
--input-bg: #e3e5e8;
--danger: #ed4245;
}
[data-theme="dark"] {
--bg: #36393f; --card-bg: #2f3136; --text-main: #dcddde;
--text-muted: #b9bbbe; --border: #202225; --navbar-bg: #202225;
--bg: #36393f;
--card-bg: #2f3136;
--text-main: #dcddde;
--text-muted: #b9bbbe;
--border: #202225;
--navbar-bg: #202225;
--input-bg: #202225;
}
body { background: var(--bg); color: var(--text-main); font-family: "gg sans", "Segoe UI", sans-serif; transition: background 0.2s; }
.navbar { background: var(--navbar-bg) !important; border-bottom: 1px solid var(--border); }
.navbar-brand { color: var(--text-main) !important; font-weight: 700; }
.discord-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.form-control, .form-control:focus { background-color: var(--input-bg) !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.form-control:focus { border-color: var(--accent) !important; }
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
.table { color: var(--text-main) !important; --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
.table thead th { background: var(--bg); color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.table td { border-bottom: 1px solid var(--border); vertical-align: middle; }
.btn-accent { background: var(--accent); color: #fff; border: none; }
.dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); }
.dropdown-item { color: var(--text-main) !important; }
.dropdown-item:hover { background: var(--input-bg); }
[data-theme="dark"] .table { --bs-table-color: var(--text-main); color: var(--text-main) !important; }
[data-theme="dark"] .table thead th { background: #292b2f; color: var(--text-muted); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
body {
background: var(--bg);
color: var(--text-main);
font-family: "gg sans", "Segoe UI", sans-serif;
transition: background 0.2s;
}
.navbar {
background: var(--navbar-bg) !important;
border-bottom: 1px solid var(--border);
}
.navbar-brand {
color: var(--text-main) !important;
font-weight: 700;
}
.discord-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-control,
.form-control:focus {
background-color: var(--input-bg) !important;
color: var(--text-main) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
.form-control:focus {
border-color: var(--accent) !important;
}
.form-control::placeholder {
color: var(--text-muted) !important;
opacity: 1;
}
.table {
color: var(--text-main) !important;
--bs-table-bg: transparent;
--bs-table-border-color: var(--border);
}
.table thead th {
background: var(--bg);
color: var(--text-muted);
font-size: 0.75rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
}
.table td {
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.btn-accent {
background: var(--accent);
color: #fff;
border: none;
}
.dropdown-menu {
background: var(--card-bg);
border: 1px solid var(--border);
}
.dropdown-item {
color: var(--text-main) !important;
}
.dropdown-item:hover {
background: var(--input-bg);
}
[data-theme="dark"] .table {
--bs-table-color: var(--text-main);
color: var(--text-main) !important;
}
[data-theme="dark"] .table thead th {
background: #292b2f;
color: var(--text-muted);
}
[data-theme="dark"] .text-muted {
color: var(--text-muted) !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
<span class="navbar-brand">SekiPOS <small class="text-danger fw-bold ms-1" style="font-size:0.75rem;"><i class="bi bi-journal-x"></i> Dicom</small></span>
<div class="ms-3 gap-2 d-flex">
<a href="/" class="btn btn-outline-primary btn-sm"><i class="bi bi-box-seam me-1"></i>Inventario</a>
<a href="/checkout" class="btn btn-outline-primary btn-sm"><i class="bi bi-cart-fill me-1"></i>Caja</a>
<a href="/sales" class="btn btn-outline-primary btn-sm"><i class="bi bi-receipt me-1"></i>Ventas</a>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i>
<span class="d-none d-sm-inline">{{ user.username }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow">
<li>
<button class="dropdown-item" onclick="toggleTheme()">
<i class="bi bi-moon-stars me-2" id="theme-icon"></i>
<span id="theme-label">Modo Oscuro</span>
</button>
</li>
<li><hr class="dropdown-divider" style="border-color: var(--border);"></li>
<li><a class="dropdown-item text-danger" href="/logout"><i class="bi bi-box-arrow-right me-2"></i>Salir</a></li>
</ul>
</div>
</div>
</nav>
<body>
{% with active_page='dicom' %}{% include 'navbar.html' %}{% endwith %}
<div class="container-fluid px-3">
<div class="row g-3">
<div class="col-md-4">
<div class="discord-card p-3 mb-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0 fw-bold">Registrar Movimiento</h5>
<button class="btn btn-sm btn-outline-secondary" onclick="clearDicomForm()" title="Limpiar Formulario">
<button class="btn btn-sm btn-outline-secondary" onclick="clearDicomForm()"
title="Limpiar Formulario">
<i class="bi bi-eraser"></i> Nuevo
</button>
</div>
@@ -94,9 +151,10 @@
</div>
<div class="mb-4">
<label class="small text-muted mb-1">Nota (Opcional)</label>
<input type="text" id="dicom-notes" class="form-control" placeholder="Ej: Pan y bebida" onkeydown="if(event.key === 'Enter') submitDicom('add')">
<input type="text" id="dicom-notes" class="form-control" placeholder="Ej: Pan y bebida"
onkeydown="if(event.key === 'Enter') submitDicom('add')">
</div>
<div class="d-flex flex-column gap-2">
<button class="btn btn-danger py-2 fw-bold" onclick="submitDicom('add')">
<i class="bi bi-cart-plus me-1"></i> Fiar (Sumar Deuda)
@@ -110,9 +168,10 @@
<div class="col-md-8">
<div class="discord-card p-3">
<div class="position-relative mb-3">
<input type="text" id="dicom-search" class="form-control ps-5" placeholder="Buscar cliente por nombre..." onkeyup="filterDicom()">
<input type="text" id="dicom-search" class="form-control ps-5"
placeholder="Buscar cliente por nombre..." onkeyup="filterDicom()">
<i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
</div>
@@ -135,10 +194,12 @@
<td class="text-muted small">{{ d[3] }}</td>
<td class="text-muted small">{{ d[4] }}</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-secondary" onclick="selectClient('{{ d[1] }}')" title="Seleccionar">
<button class="btn btn-sm btn-outline-secondary"
onclick="selectClient('{{ d[1] }}')" title="Seleccionar">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-outline-danger ms-1" onclick="forgiveDebt({{ d[0] }}, '{{ d[1] }}')" title="Eliminar Registro">
<button class="btn btn-sm btn-outline-danger ms-1"
onclick="forgiveDebt({{ d[0] }}, '{{ d[1] }}')" title="Eliminar Registro">
<i class="bi bi-trash"></i>
</button>
</td>
@@ -149,26 +210,26 @@
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
// Smart color formatting for the debt column
document.querySelectorAll('.price-cell').forEach(td => {
const val = parseFloat(td.getAttribute('data-value'));
td.innerText = clp.format(val);
// Reversing the logic: Negative is debt (red), Positive is credit (green)
if (val < 0) {
td.classList.add('text-danger');
td.classList.add('text-danger');
} else if (val > 0) {
td.classList.add('text-success');
td.classList.add('text-success');
} else {
td.classList.add('text-muted');
td.classList.add('text-muted');
}
});
@@ -224,44 +285,13 @@
async function forgiveDebt(id, name) {
if (!confirm(`¿Estás seguro de que quieres eliminar completamente a ${name} del registro?`)) return;
const res = await fetch(`/api/dicom/${id}`, { method: 'DELETE' });
if (res.ok) window.location.reload();
}
/* ── Theme Management ── */
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
const isDark = t === 'dark';
const themeIcon = document.getElementById('theme-icon');
const themeLabel = document.getElementById('theme-label');
if (themeIcon) themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
if (themeLabel) themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
localStorage.setItem('theme', t);
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
applyTheme(current === 'dark' ? 'light' : 'dark');
}
(function initTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
applyTheme(savedTheme);
} else {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'light');
}
})();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
});
</script>
<script src="./static/cookieStuff.js"></script>
<script src="./static/themeStuff.js"></script>
</body>
</html>

391
templates/index.html
View File

@@ -10,312 +10,11 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<style>
:root {
--bg: #ebedef;
--card-bg: #ffffff;
--text-main: #2e3338;
--text-muted: #4f5660;
--border: #e3e5e8;
--navbar-bg: #ffffff;
--input-bg: #e3e5e8;
--table-head: #f2f3f5;
--accent: #5865f2;
--accent-hover: #4752c4;
--danger: #ed4245;
}
[data-theme="dark"] {
--bg: #36393f;
--card-bg: #2f3136;
--text-main: #dcddde;
--text-muted: #b9bbbe;
--border: #202225;
--navbar-bg: #202225;
--input-bg: #202225;
--table-head: #292b2f;
}
body {
background: var(--bg);
color: var(--text-main);
font-family: "gg sans", "Segoe UI", sans-serif;
transition: background 0.2s, color 0.2s;
}
/* ── Navbar ── */
.navbar {
background: var(--navbar-bg) !important;
border-bottom: 1px solid var(--border);
}
.navbar-brand {
color: var(--text-main) !important;
font-weight: 700;
}
.nav-link,
.dropdown-item {
color: var(--text-main) !important;
}
.dropdown-menu {
background: var(--card-bg);
border: 1px solid var(--border);
}
.dropdown-item:hover {
background: var(--input-bg);
}
.dropdown-item.text-danger {
color: var(--danger) !important;
}
/* ── Cards ── */
.discord-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ── Inputs ── */
.form-control,
.form-control:focus {
background: var(--input-bg);
color: var(--text-main);
border: none;
box-shadow: none;
}
.form-control:focus {
outline: 2px solid var(--accent);
}
.form-control::placeholder {
color: var(--text-muted);
}
/* ── Buttons ── */
.btn-accent {
background: var(--accent);
color: #fff;
border: none;
}
.btn-accent:hover {
background: var(--accent-hover);
color: #fff;
}
.btn-danger-discord {
background: var(--danger);
color: #fff;
border: none;
}
.btn-danger-discord:hover {
background: #c23235;
color: #fff;
}
/* ── Price tag ── */
.price-tag {
font-size: 2.8rem;
/* Slightly larger for the wider card */
font-weight: 800;
color: var(--accent);
/* Optional: uses your accent color for better visibility */
}
/* ── Table ── */
.table {
color: var(--text-main);
--bs-table-color: var(--text-main);
--bs-table-bg: transparent;
--bs-table-border-color: var(--border);
}
/* -- Checkbox Size Fix -- */
#select-all {
transform: scale(1.3);
margin-top: 2px;
}
[data-theme="dark"] .table {
--bs-table-color: var(--text-main);
color: var(--text-main);
}
.table thead th {
background: var(--table-head);
color: var(--text-muted);
font-size: 0.72rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
}
.table tbody td {
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
/* ── Bulk bar ── */
.bulk-bar {
background: var(--accent);
color: #fff;
border-radius: 8px;
}
.bulk-bar .form-control {
width: 110px;
background: rgba(0, 0, 0, 0.2) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.bulk-bar .form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
/* ── New-product prompt ── */
.new-product-prompt {
background: var(--accent);
color: #fff;
border-radius: 8px;
}
/* ── Product image ── */
#display-img {
width: 100%;
/* Allows it to fill the new width */
max-width: 250px;
/* Increased from 160px */
height: auto;
max-height: 250px;
/* Increased from 160px */
object-fit: contain;
}
/* ── Checkbox ── */
input[type="checkbox"] {
cursor: pointer;
}
/* ── Mobile: hide barcode column ── */
@media (max-width: 576px) {
.col-barcode {
display: none;
}
.btn-edit-sm,
.btn-del-sm {
padding: 4px 7px;
font-size: 0.75rem;
}
}
.modal-content {
background: var(--card-bg);
color: var(--text-main);
border: 1px solid var(--border);
}
.modal-header,
.modal-footer {
border-color: var(--border);
}
.btn-close {
/* Makes the X button visible in dark mode */
filter: var(--bs-theme-placeholder, invert(0.7) grayscale(100%) brightness(200%));
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Add this inside your <style> tag */
[data-theme="dark"] .text-muted {
color: var(--text-muted) !important;
}
[data-theme="dark"] .modal-body .text-muted {
color: #f6f6f7 !important;
}
.btn-close {
filter: none;
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Fix for the missing dropdown arrow */
.form-select {
background-color: var(--input-bg) !important;
color: var(--text-main) !important;
border: none !important;
/* This ensures the arrow icon is still rendered over the custom background */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 16px 12px !important;
}
[data-theme="dark"] .form-select {
/* Lighter arrow for dark mode */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dcddde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
</style>
<link rel="stylesheet" href="./static/style.css">
</head>
<body>
<!-- ════════════════════════ NAVBAR ════════════════════════ -->
<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;">v1.6</small></span>
<div class="ms-3 gap-2 d-flex">
<a href="/checkout" class="btn btn-outline-primary btn-sm">
<i class="bi bi-cart-fill me-1"></i>Caja
</a>
<a href="/sales" class="btn btn-outline-primary btn-sm">
<i class="bi bi-receipt me-1"></i>Ventas
</a>
<a href="/dicom" class="btn btn-outline-danger btn-sm">
<i class="bi bi-journal-x me-1"></i>Dicom
</a>
</div>
<!-- Always-visible dropdown on the right -->
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i>
<span class="d-none d-sm-inline">{{ user.username }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button class="dropdown-item" onclick="toggleTheme()">
<i class="bi bi-moon-stars me-2" id="theme-icon"></i>
<span id="theme-label">Modo Oscuro</span>
</button>
</li>
<li>
<hr class="dropdown-divider" style="border-color: var(--border);">
</li>
<li>
<a class="dropdown-item text-danger" href="/logout">
<i class="bi bi-box-arrow-right me-2"></i>Salir
</a>
</li>
</ul>
</div>
</div>
</nav>
{% with active_page='inventory' %}{% include 'navbar.html' %}{% endwith %}
<!-- ════════════════════════ MAIN ════════════════════════ -->
<div class="container-fluid px-3">
@@ -453,9 +152,10 @@
<td class="name-cell">{{ p[1] }}</td>
<td>
{% if p[5] == 'kg' %}
<span class="text-muted d-inline-block text-center" style="width: 45px;">-</span>
<span class="text-muted d-inline-block text-center"
style="width: 45px;">-</span>
{% else %}
{{ p[4] | int }} <small class="text-muted">Uni</small>
{{ p[4] | int }} <small class="text-muted">Uni</small>
{% endif %}
</td>
<td class="price-cell" data-value="{{ p[2] }}"></td>
@@ -597,20 +297,6 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
/* ── Theme ── */
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
const isDark = t === 'dark';
document.getElementById('theme-icon').className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
document.getElementById('theme-label').innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
}
function toggleTheme() {
const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', next);
applyTheme(next);
}
applyTheme(localStorage.getItem('theme') || 'light');
/* ── Socket.IO ── */
const socket = io();
const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });
@@ -1109,73 +795,11 @@
}
}
/* ── Theme Management ── */
// Helper to set a cookie
function setCookie(name, value, days = 365) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax";
}
// Helper to get a cookie
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// A single, clean theme manager
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
const isDark = t === 'dark';
// Update UI elements if they exist
const themeIcon = document.getElementById('theme-icon');
const themeLabel = document.getElementById('theme-label');
if (themeIcon) themeIcon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
if (themeLabel) themeLabel.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
// Save to localStorage (much more reliable than cookies for this)
localStorage.setItem('theme', t);
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
applyTheme(next);
}
// Run this immediately on load
(function initTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
applyTheme(savedTheme);
} else {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'light');
}
})();
// Listen for OS theme changes in real-time if no cookie is set
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!getCookie('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
});
// Function to toggle stock state
function toggleStockInput() {
const unitSelect = document.getElementById('form-unit-type');
const stockInput = document.getElementById('form-stock');
if (unitSelect.value === 'kg') {
stockInput.classList.add('d-none'); // Poof.
stockInput.disabled = true; // Prevent form submission errors
@@ -1189,8 +813,9 @@
// Listen for manual dropdown changes
document.getElementById('form-unit-type').addEventListener('change', toggleStockInput);
initTheme();
</script>
<script src="./static/cookieStuff.js"></script>
<script src="./static/themeStuff.js"></script>
</body>
</html>

56
templates/navbar.html Normal file
View File

@@ -0,0 +1,56 @@
<nav class="navbar navbar-expand-md sticky-top px-3 mb-3">
<span class="navbar-brand">
SekiPOS
{% if active_page == 'checkout' %}
<small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
{% elif active_page == 'sales' %}
<small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
{% elif active_page == 'dicom' %}
<small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
{% else %}
<small class="text-muted fw-normal" style="font-size:0.65rem;">v1.6</small>
{% endif %}
</span>
<div class="ms-3 gap-2 d-flex">
<a href="/" class="btn btn-sm {{ 'btn-primary' if active_page == 'inventory' else 'btn-outline-primary' }}">
<i class="bi bi-box-seam me-1"></i>Inventario
</a>
<a href="/checkout"
class="btn btn-sm {{ 'btn-primary' if active_page == 'checkout' else 'btn-outline-primary' }}">
<i class="bi bi-cart-fill me-1"></i>Caja
</a>
<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="/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>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i>
<span class="d-none d-sm-inline">{{ user.username }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow">
<li>
<button class="dropdown-item" onclick="toggleTheme()">
<i class="bi bi-moon-stars me-2" id="theme-icon"></i>
<span id="theme-label">Modo Oscuro</span>
</button>
</li>
<li>
<hr class="dropdown-divider" style="border-color: var(--border);">
</li>
<li>
<a class="dropdown-item text-danger" href="/logout">
<i class="bi bi-box-arrow-right me-2"></i>Salir
</a>
</li>
</ul>
</div>
</div>
</nav>

248
templates/sales.html
View File

@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,21 +11,60 @@
<style>
/* Reusing your standard theme colors */
:root {
--bg: #ebedef; --card-bg: #ffffff; --text-main: #2e3338;
--text-muted: #4f5660; --border: #e3e5e8; --navbar-bg: #ffffff;
--accent: #5865f2; --accent-hover: #4752c4; --input-bg: #e3e5e8;
--bg: #ebedef;
--card-bg: #ffffff;
--text-main: #2e3338;
--text-muted: #4f5660;
--border: #e3e5e8;
--navbar-bg: #ffffff;
--accent: #5865f2;
--accent-hover: #4752c4;
--input-bg: #e3e5e8;
}
[data-theme="dark"] {
--bg: #36393f; --card-bg: #2f3136; --text-main: #dcddde;
--text-muted: #b9bbbe; --border: #202225; --navbar-bg: #202225;
--bg: #36393f;
--card-bg: #2f3136;
--text-main: #dcddde;
--text-muted: #b9bbbe;
--border: #202225;
--navbar-bg: #202225;
--input-bg: #202225;
}
body { background: var(--bg); color: var(--text-main); font-family: "gg sans", sans-serif; min-height: 100vh; }
.navbar { background: var(--navbar-bg) !important; border-bottom: 1px solid var(--border); }
.navbar-brand, .nav-link, .dropdown-item { color: var(--text-main) !important; }
.dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); }
.dropdown-item:hover { background: var(--input-bg); }
.discord-card, .modal-content { background: var(--card-bg) !important; border: 1px solid var(--border); border-radius: 8px; }
body {
background: var(--bg);
color: var(--text-main);
font-family: "gg sans", sans-serif;
min-height: 100vh;
}
.navbar {
background: var(--navbar-bg) !important;
border-bottom: 1px solid var(--border);
}
.navbar-brand,
.nav-link,
.dropdown-item {
color: var(--text-main) !important;
}
.dropdown-menu {
background: var(--card-bg);
border: 1px solid var(--border);
}
.dropdown-item:hover {
background: var(--input-bg);
}
.discord-card,
.modal-content {
background: var(--card-bg) !important;
border: 1px solid var(--border);
border-radius: 8px;
}
.navbar-brand {
color: var(--text-main) !important;
@@ -33,63 +72,70 @@
}
/* --- Tables --- */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--text-main); /* This forces Bootstrap to obey */
--bs-table-border-color: var(--border);
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--text-main);
/* This forces Bootstrap to obey */
--bs-table-border-color: var(--border);
--bs-table-hover-color: var(--text-main);
--bs-table-hover-bg: var(--input-bg);
color: var(--text-main) !important;
color: var(--text-main) !important;
}
.table thead th {
background: var(--bg);
color: var(--text-muted);
font-size: 0.75rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
.table thead th {
background: var(--bg);
color: var(--text-muted);
font-size: 0.75rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
}
.table td, .table th {
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--text-main);
.table td,
.table th {
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--text-main);
}
/* --- Buttons --- */
.btn-accent { background: var(--accent); color: #fff; border: none; }
.btn-accent:hover { background: var(--accent-hover); color: #fff; }
.btn-accent {
background: var(--accent);
color: #fff;
border: none;
}
.btn-accent:hover {
background: var(--accent-hover);
color: #fff;
}
/* --- Dark Mode Overrides --- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body { color: var(--text-main); }
[data-theme="dark"] .table { --bs-table-hover-bg: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .table thead th { background: #292b2f; color: var(--text-muted); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body {
color: var(--text-main);
}
[data-theme="dark"] .table {
--bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .table thead th {
background: #292b2f;
color: var(--text-muted);
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] .text-muted {
color: var(--text-muted) !important;
}
</style>
</head>
<body>
<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;">Ventas</small></span>
<div class="ms-3 gap-2 d-flex">
<a href="/" class="btn btn-outline-primary btn-sm"><i class="bi bi-box-seam me-1"></i>Inventario</a>
<a href="/checkout" class="btn btn-outline-primary btn-sm"><i class="bi bi-cart-fill me-1"></i>Caja</a>
<a href="/dicom" class="btn btn-outline-danger btn-sm">
<i class="bi bi-journal-x me-1"></i>Dicom
</a>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-accent dropdown-toggle" type="button" data-bs-toggle="dropdown">
<i class="bi bi-person-circle me-1"></i> <span class="d-none d-sm-inline">{{ user.username }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow">
<li><button class="dropdown-item" onclick="toggleTheme()"><i class="bi bi-moon-stars me-2" id="theme-icon"></i><span id="theme-label">Modo Oscuro</span></button></li>
<li><hr class="dropdown-divider" style="border-color: var(--border);"></li>
<li><a class="dropdown-item text-danger" href="/logout"><i class="bi bi-box-arrow-right me-2"></i>Salir</a></li>
</ul>
</div>
</div>
</nav>
{% with active_page='sales' %}{% include 'navbar.html' %}{% endwith %}
<div class="container-fluid px-3">
@@ -99,19 +145,24 @@
<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>
<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;">Últimos 7
Días</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>
@@ -120,12 +171,14 @@
<div class="d-flex justify-content-between align-items-center mb-3">
<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>
<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)">
<label for="date-filter" class="form-label mb-0 text-muted small d-none d-sm-block">Filtrar
Día:</label>
<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>
<a href="/sales" class="btn btn-sm btn-outline-secondary" title="Limpiar filtro"><i
class="bi bi-x-lg"></i></a>
{% endif %}
</div>
</div>
@@ -148,7 +201,8 @@
<td class="text-capitalize">{{ s[3] }}</td>
<td class="price-cell fw-bold" data-value="{{ s[2] }}"></td>
<td>
<button class="btn btn-sm btn-outline-secondary" onclick="viewSale({{ s[0] }}, '{{ s[1] }}', {{ s[2] }})">
<button class="btn btn-sm btn-outline-secondary"
onclick="viewSale({{ s[0] }}, '{{ s[1] }}', {{ s[2] }})">
<i class="bi bi-eye"></i> Ver Detalle
</button>
</td>
@@ -164,7 +218,8 @@
<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">
@@ -178,7 +233,7 @@
</tr>
</thead>
<tbody id="receipt-items">
</tbody>
</tbody>
<tfoot>
<tr>
<th colspan="2" class="text-end">TOTAL:</th>
@@ -188,7 +243,7 @@
</table>
</div>
<div class="modal-body">
</div>
</div>
<div class="modal-footer d-flex justify-content-between border-0 pt-0">
<button class="btn btn-outline-danger btn-sm" id="btn-reverse-sale">
<i class="bi bi-arrow-counterclockwise me-1"></i>Anular Venta
@@ -208,8 +263,9 @@
<div class="modal-body text-center pt-0 pb-4">
<i class="bi bi-exclamation-triangle-fill text-danger mb-3" style="font-size: 3rem;"></i>
<h4 class="mb-3">¿Anular Venta #<span id="reverse-modal-id"></span>?</h4>
<p class="text-muted small px-3">Los productos regresarán automáticamente al inventario y el ticket será eliminado permanentemente.</p>
<p class="text-muted small px-3">Los productos regresarán automáticamente al inventario y el ticket
será eliminado permanentemente.</p>
<div class="d-flex gap-2 justify-content-center mt-4 px-3">
<button class="btn btn-secondary w-50" data-bs-dismiss="modal">Cancelar</button>
<button class="btn btn-danger w-50" onclick="executeReverseSale()">Sí, Anular</button>
@@ -228,9 +284,9 @@
document.querySelectorAll('.utc-date').forEach(el => {
const date = new Date(el.innerText + " UTC");
if (!isNaN(date)) {
el.innerText = date.toLocaleString('es-CL', {
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute:'2-digit'
el.innerText = date.toLocaleString('es-CL', {
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit'
});
}
});
@@ -243,13 +299,13 @@
async function viewSale(id, rawDate, total) {
document.getElementById('modal-ticket-id').innerText = `#${id}`;
document.getElementById('modal-total').innerText = clp.format(total);
const localDate = new Date(rawDate + " UTC").toLocaleString('es-CL');
document.getElementById('modal-date').innerText = localDate !== "Invalid Date" ? localDate : rawDate;
const tbody = document.getElementById('receipt-items');
tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Cargando...</td></tr>';
// Attach the ID to the delete button
document.getElementById('btn-reverse-sale').setAttribute('onclick', `reverseSale(${id})`);
@@ -259,7 +315,7 @@
try {
const res = await fetch(`/api/sale/${id}`);
const items = await res.json();
tbody.innerHTML = items.map(item => `
<tr>
<td>
@@ -286,10 +342,10 @@
function reverseSale(id) {
saleToReverse = id;
document.getElementById('reverse-modal-id').innerText = id;
// Hide the receipt modal so we don't have overlapping popups
bootstrap.Modal.getInstance(document.getElementById('receiptModal')).hide();
// Show the new confirmation modal
const confirmModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('reverseConfirmModal'));
confirmModal.show();
@@ -297,10 +353,10 @@
async function executeReverseSale() {
if (!saleToReverse) return;
try {
const res = await fetch(`/api/sale/${saleToReverse}`, { method: 'DELETE' });
if (res.ok) {
window.location.reload(); // Refresh the dashboard
} else {
@@ -311,26 +367,10 @@
console.error(err);
alert("Error de conexión con el servidor.");
}
}
/* Theme Management */
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
const isDark = t === 'dark';
const icon = document.getElementById('theme-icon');
const label = document.getElementById('theme-label');
if (icon) icon.className = isDark ? 'bi bi-sun me-2' : 'bi bi-moon-stars me-2';
if (label) label.innerText = isDark ? 'Modo Claro' : 'Modo Oscuro';
localStorage.setItem('theme', t);
}
function toggleTheme() {
applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
}
(function initTheme() {
applyTheme(localStorage.getItem('theme') || 'light');
})();
</script>
<script src="./static/cookieStuff.js"></script>
<script src="./static/themeStuff.js"></script>
</body>
</html>