consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pos): add 5 quick improvements — dark mode, email quotes, barcode scan, returns, offline catalog

Browse Source 
1. Auto dark mode: detect system prefers-color-scheme, auto-switch industrial/modern theme
2. Email quotation endpoint: POST /quotations/:id/email sends HTML email via SMTP
3. Camera barcode scanner: BarcodeDetector API with getUserMedia overlay in catalog
4. Returns with warranty: POST /returns endpoint with stock restoration and sale status tracking
5. Partial offline catalog: cache top 500 parts in IndexedDB, search when offline

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-04 08:03:28 +00:00
parent 39f2aaf98f
commit c61e58ac6a
9 changed files with 751 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pos/static/js/app-init.js
View File

@@ -128,8 +128,16 @@
});
// ─── Theme management ───
// Persist theme in localStorage, apply on load
var savedTheme = localStorage.getItem('pos_theme') || 'industrial';
// Determine theme: saved preference > system preference > default 'industrial'
var savedTheme = localStorage.getItem('pos_theme');
if (!savedTheme) {
// No saved preference — use system color scheme
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
savedTheme = 'industrial';
} else {
savedTheme = 'modern';
}
}
document.documentElement.setAttribute('data-theme', savedTheme);
// Hide all theme bars (they overlap content with position:fixed)
@@ -146,6 +154,18 @@
// Override any page-level setTheme functions so they use our persistent version
window.setTheme = window.posSetTheme;
// Listen for system color scheme changes and auto-switch (only if user hasn't manually set a preference)
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
// Only auto-switch if user hasn't explicitly set a preference
var userExplicit = localStorage.getItem('pos_theme');
if (!userExplicit) {
var autoTheme = e.matches ? 'industrial' : 'modern';
document.documentElement.setAttribute('data-theme', autoTheme);
}
});
}
// Also prevent any DOMContentLoaded theme switchers from overriding
// by re-applying our saved theme after a tick
setTimeout(function() {

15
pos/static/js/catalog.js
View File

@@ -1005,6 +1005,20 @@
}
// ─── EXPOSE GLOBALS (for backward compat) ───
// ─── BARCODE CAMERA SCAN ───
function startBarcodeScan() {
if (!window.NexusNative) {
alert('El modulo de escaneo no esta cargado.');
return;
}
window.NexusNative.scanBarcode().then(function (code) {
if (code) {
searchInput.value = code;
runSearch(code);
}
});
}
window.CatalogApp = {
toggleCart: toggleCart,
goToCheckout: goToCheckout,
@@ -1018,6 +1032,7 @@
vsModelChanged: vsModelChanged,
vsEngineChanged: vsEngineChanged,
vsClear: vsClearAll,
startBarcodeScan: startBarcodeScan,
};
// ─── INIT ───

116
pos/static/js/native-bridge.js
View File

@@ -6,21 +6,114 @@
window.NexusNative = {
isNative: typeof Capacitor !== 'undefined',
_scanStream: null,
_scanVideo: null,
// Camera for barcode scanning
// Camera barcode scanning — works in native (Capacitor) and web (BarcodeDetector / getUserMedia)
async scanBarcode() {
if (!this.isNative) return null;
try {
const { Camera } = await import('@capacitor/camera');
const photo = await Camera.getPhoto({
quality: 90,
resultType: 'base64'
});
// In production, send to a barcode decode service
return photo;
} catch(e) {
// Native Capacitor path
if (this.isNative) {
try {
const { Camera } = await import('@capacitor/camera');
const photo = await Camera.getPhoto({
quality: 90,
resultType: 'base64'
});
return photo;
} catch(e) {
return null;
}
}
// Web path: use BarcodeDetector API (Chrome 83+)
if (!('BarcodeDetector' in window)) {
alert('Tu navegador no soporta escaneo de codigos de barras. Usa Chrome 83+ o un dispositivo movil.');
return null;
}
return new Promise(async (resolve) => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } }
});
this._scanStream = stream;
// Create overlay UI
const overlay = document.createElement('div');
overlay.id = 'barcode-scan-overlay';
overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;';
const video = document.createElement('video');
video.autoplay = true;
video.playsInline = true;
video.style.cssText = 'width:90%;max-width:500px;border-radius:12px;border:3px solid #F5A623;';
video.srcObject = stream;
this._scanVideo = video;
const label = document.createElement('p');
label.textContent = 'Apunta al codigo de barras...';
label.style.cssText = 'color:#fff;font-size:16px;margin-top:16px;font-family:sans-serif;';
const cancelBtn = document.createElement('button');
cancelBtn.textContent = 'Cancelar';
cancelBtn.style.cssText = 'margin-top:16px;padding:10px 24px;background:#F5A623;color:#000;border:none;border-radius:6px;font-size:15px;cursor:pointer;font-weight:bold;';
cancelBtn.onclick = () => {
this.stopScan();
overlay.remove();
resolve(null);
};
overlay.appendChild(video);
overlay.appendChild(label);
overlay.appendChild(cancelBtn);
document.body.appendChild(overlay);
const detector = new BarcodeDetector({
formats: ['ean_13', 'ean_8', 'code_128', 'code_39', 'qr_code', 'upc_a', 'upc_e']
});
const scanFrame = async () => {
if (!this._scanStream) return;
try {
const barcodes = await detector.detect(video);
if (barcodes.length > 0) {
const code = barcodes[0].rawValue;
label.textContent = 'Codigo detectado: ' + code;
label.style.color = '#4CAF50';
// Small delay so user sees the result
setTimeout(() => {
this.stopScan();
overlay.remove();
resolve(code);
}, 400);
return;
}
} catch(e) { /* frame failed, retry */ }
requestAnimationFrame(scanFrame);
};
// Wait for video to be ready
video.onloadedmetadata = () => {
video.play();
requestAnimationFrame(scanFrame);
};
} catch(e) {
console.error('Camera access error:', e);
alert('No se pudo acceder a la camara: ' + e.message);
resolve(null);
}
});
},
stopScan() {
if (this._scanStream) {
this._scanStream.getTracks().forEach(t => t.stop());
this._scanStream = null;
}
this._scanVideo = null;
var overlay = document.getElementById('barcode-scan-overlay');
if (overlay) overlay.remove();
},
// Push notification registration
@@ -34,7 +127,6 @@
}
PushNotifications.addListener('registration', token => {
console.log('Push token:', token.value);
// Send token to server for this employee
});
PushNotifications.addListener('pushNotificationReceived', notification => {
console.log('Push received:', notification);

72
pos/static/js/sync-engine.js
View File

@@ -5,9 +5,10 @@
'use strict';
var DB_NAME = 'nexus_pos_offline';
var DB_VERSION = 1;
var QUEUE_STORE = 'sync_queue';
var INVENTORY_STORE = 'inventory_cache';
var DB_VERSION = 2;
var QUEUE_STORE = 'sync_queue';
var INVENTORY_STORE = 'inventory_cache';
var TOP_PARTS_STORE = 'cached_parts';
var db = null;
@@ -26,6 +27,11 @@
inv.createIndex('sku', 'sku', { unique: false });
inv.createIndex('name', 'name', { unique: false });
}
if (!d.objectStoreNames.contains(TOP_PARTS_STORE)) {
var tp = d.createObjectStore(TOP_PARTS_STORE, { keyPath: 'part_number' });
tp.createIndex('name', 'name', { unique: false });
tp.createIndex('category', 'category', { unique: false });
}
};
req.onsuccess = function (e) {
db = e.target.result;
@@ -156,6 +162,52 @@
});
}
// ─── Top parts cache (offline catalog) ────────────────────────
function cacheTopParts() {
return fetch('/pos/api/sync/top-parts').then(function (resp) {
if (!resp.ok) throw new Error('Sync top-parts failed: ' + resp.status);
return resp.json();
}).then(function (data) {
var parts = data.parts || [];
return openDB().then(function (d) {
return new Promise(function (resolve, reject) {
var tx = d.transaction(TOP_PARTS_STORE, 'readwrite');
var store = tx.objectStore(TOP_PARTS_STORE);
store.clear();
parts.forEach(function (p) { store.put(p); });
tx.oncomplete = function () {
console.log('[SyncEngine] Cached ' + parts.length + ' top parts');
resolve(parts.length);
};
tx.onerror = function () { reject(tx.error); };
});
});
});
}
function searchCachedParts(query) {
return openDB().then(function (d) {
return new Promise(function (resolve, reject) {
var tx = d.transaction(TOP_PARTS_STORE, 'readonly');
var req = tx.objectStore(TOP_PARTS_STORE).getAll();
req.onsuccess = function () {
var all = req.result;
if (!query) { resolve(all); return; }
var q = query.toLowerCase();
var filtered = all.filter(function (p) {
return (p.part_number && p.part_number.toLowerCase().indexOf(q) !== -1) ||
(p.name && p.name.toLowerCase().indexOf(q) !== -1) ||
(p.category && p.category.toLowerCase().indexOf(q) !== -1) ||
(p.brand && p.brand.toLowerCase().indexOf(q) !== -1);
});
resolve(filtered);
};
req.onerror = function () { reject(req.error); };
});
});
}
// ─── Connectivity helpers ─────────────────────────────────────
function isOnline() {
return navigator.onLine;
@@ -193,12 +245,14 @@
// ─── Public API ───────────────────────────────────────────────
window.SyncEngine = {
queueOperation: queueOperation,
processQueue: processQueue,
getQueueCount: getQueueCount,
isOnline: isOnline,
cacheInventory: cacheInventory,
getCachedInventory: getCachedInventory
queueOperation: queueOperation,
processQueue: processQueue,
getQueueCount: getQueueCount,
isOnline: isOnline,
cacheInventory: cacheInventory,
getCachedInventory: getCachedInventory,
cacheTopParts: cacheTopParts,
searchCachedParts: searchCachedParts
};
})();