consultoria-as
0b1dc89faf
Cards/Grid: - Add min-width:0 to .device-grid to prevent grid overflow - Add max-width:100%, overflow:hidden, word-break:break-word to .device-card - Add min-width:0 and overflow-wrap to .device-card__body - Bump config.css cache-bust to v=2 Onboarding: - Add GET/POST /pos/api/config/onboarding-status endpoints in config_bp.py - onboarding.js now checks server first before showing wizard - On finish, POSTs completion to server (tenant_config table) - Falls back to localStorage for fast path and offline resilience - Bump onboarding.js cache-bust to v=2 in catalog.html
484 lines
16 KiB
JavaScript
484 lines
16 KiB
JavaScript
/* ==========================================================================
|
|
NEXUS POS — Onboarding Wizard for New Tenants
|
|
Shows a step-by-step setup guide on first login.
|
|
Persists completion in localStorage('pos_onboarding_done') and server.
|
|
========================================================================== */
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
/* ------------------------------------------------------------------
|
|
GUARD — skip if already completed locally (fast path)
|
|
------------------------------------------------------------------ */
|
|
|
|
if (localStorage.getItem('pos_onboarding_done') === 'true') return;
|
|
|
|
/* ------------------------------------------------------------------
|
|
CHECK SERVER — if completed on server, cache locally and skip
|
|
------------------------------------------------------------------ */
|
|
|
|
function checkServerAndMaybeInit() {
|
|
var token = '';
|
|
try { token = localStorage.getItem('pos_token') || ''; } catch (e) {}
|
|
fetch('/pos/api/config/onboarding-status', {
|
|
headers: token ? { 'Authorization': 'Bearer ' + token } : {}
|
|
}).then(function (r) {
|
|
if (!r.ok) return null;
|
|
return r.json();
|
|
}).then(function (data) {
|
|
if (data && data.completed) {
|
|
localStorage.setItem('pos_onboarding_done', 'true');
|
|
return;
|
|
}
|
|
initWizard();
|
|
}).catch(function () {
|
|
initWizard();
|
|
});
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
STATE
|
|
------------------------------------------------------------------ */
|
|
|
|
var currentStep = 0;
|
|
var totalSteps = 5;
|
|
var overlay, body;
|
|
var stepState = {
|
|
branchRenamed: false,
|
|
productCreated: false,
|
|
employeeCreated: false
|
|
};
|
|
|
|
/* ------------------------------------------------------------------
|
|
HELPERS
|
|
------------------------------------------------------------------ */
|
|
|
|
function h(tag, attrs, children) {
|
|
var el = document.createElement(tag);
|
|
if (attrs) Object.keys(attrs).forEach(function (k) {
|
|
if (k === 'className') el.className = attrs[k];
|
|
else if (k.indexOf('on') === 0) el.addEventListener(k.slice(2).toLowerCase(), attrs[k]);
|
|
else el.setAttribute(k, attrs[k]);
|
|
});
|
|
if (children) {
|
|
if (!Array.isArray(children)) children = [children];
|
|
children.forEach(function (c) {
|
|
if (typeof c === 'string') el.appendChild(document.createTextNode(c));
|
|
else if (c) el.appendChild(c);
|
|
});
|
|
}
|
|
return el;
|
|
}
|
|
|
|
function getToken() {
|
|
try { return localStorage.getItem('pos_token') || ''; } catch (e) { return ''; }
|
|
}
|
|
|
|
async function api(url, opts) {
|
|
var token = getToken();
|
|
var headers = { 'Content-Type': 'application/json' };
|
|
if (token) headers['Authorization'] = 'Bearer ' + token;
|
|
var res = await fetch(url, Object.assign({ headers: headers }, opts || {}));
|
|
var json = await res.json();
|
|
if (!res.ok) throw new Error(json.error || 'Error ' + res.status);
|
|
return json;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
STEP RENDERERS
|
|
Each returns a DOM fragment for the body area.
|
|
------------------------------------------------------------------ */
|
|
|
|
function renderStep0() {
|
|
/* Welcome */
|
|
var businessName = '';
|
|
try { businessName = localStorage.getItem('pos_business_name') || ''; } catch (e) {}
|
|
var greeting = businessName ? businessName : 'tu negocio';
|
|
|
|
return h('div', { className: 'onb-step-enter' }, [
|
|
h('div', { className: 'onb-icon' }, ['\uD83D\uDE80']),
|
|
h('h2', { className: 'onb-title' }, 'Bienvenido a Nexus POS'),
|
|
h('p', { className: 'onb-desc' },
|
|
'Vamos a configurar ' + greeting + ' en unos minutos. Este asistente te guiara por los pasos esenciales para empezar a vender.'),
|
|
]);
|
|
}
|
|
|
|
function renderStep1() {
|
|
/* Branch rename */
|
|
var container = h('div', { className: 'onb-step-enter' }, [
|
|
h('div', { className: 'onb-icon' }, ['\uD83C\uDFEA']),
|
|
h('h2', { className: 'onb-title' }, 'Tu Primera Sucursal'),
|
|
h('p', { className: 'onb-desc' },
|
|
'Ya creamos la sucursal "Principal" para ti. Puedes renombrarla si quieres.'),
|
|
]);
|
|
|
|
var input = h('input', {
|
|
className: 'onb-input',
|
|
type: 'text',
|
|
placeholder: 'Principal',
|
|
value: 'Principal',
|
|
id: 'onb-branch-name'
|
|
});
|
|
|
|
var msg = h('div', { className: 'onb-error', id: 'onb-branch-msg' });
|
|
|
|
container.appendChild(h('div', { className: 'onb-form' }, [
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Nombre de sucursal'),
|
|
input,
|
|
msg
|
|
])
|
|
]));
|
|
|
|
return container;
|
|
}
|
|
|
|
function renderStep2() {
|
|
/* Add first product */
|
|
var container = h('div', { className: 'onb-step-enter' }, [
|
|
h('div', { className: 'onb-icon' }, ['\uD83D\uDCE6']),
|
|
h('h2', { className: 'onb-title' }, 'Agrega Tu Primer Producto'),
|
|
h('p', { className: 'onb-desc' },
|
|
'Registra una pieza para probar el sistema. Despues podras agregar mas desde Inventario.'),
|
|
]);
|
|
|
|
if (stepState.productCreated) {
|
|
container.appendChild(h('div', { className: 'onb-success' }, [
|
|
'\u2705 ',
|
|
'Producto creado exitosamente.'
|
|
]));
|
|
return container;
|
|
}
|
|
|
|
var error = h('div', { className: 'onb-error', id: 'onb-product-msg' });
|
|
|
|
container.appendChild(h('div', { className: 'onb-form' }, [
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Numero de parte'),
|
|
h('input', { className: 'onb-input', type: 'text', id: 'onb-pn', placeholder: 'Ej: FIL-ACE-001' })
|
|
]),
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Nombre'),
|
|
h('input', { className: 'onb-input', type: 'text', id: 'onb-pname', placeholder: 'Ej: Filtro de aceite' })
|
|
]),
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Precio de venta ($)'),
|
|
h('input', { className: 'onb-input', type: 'number', id: 'onb-pprice', placeholder: '0.00', min: '0', step: '0.01' })
|
|
]),
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Stock inicial'),
|
|
h('input', { className: 'onb-input', type: 'number', id: 'onb-pstock', placeholder: '0', min: '0', step: '1' })
|
|
]),
|
|
error
|
|
]));
|
|
|
|
return container;
|
|
}
|
|
|
|
function renderStep3() {
|
|
/* Create employee */
|
|
var container = h('div', { className: 'onb-step-enter' }, [
|
|
h('div', { className: 'onb-icon' }, ['\uD83D\uDC64']),
|
|
h('h2', { className: 'onb-title' }, 'Crea Tu Primer Empleado'),
|
|
h('p', { className: 'onb-desc' },
|
|
'Agrega un usuario para el punto de venta. El PIN se usara para iniciar turno.'),
|
|
]);
|
|
|
|
if (stepState.employeeCreated) {
|
|
container.appendChild(h('div', { className: 'onb-success' }, [
|
|
'\u2705 ',
|
|
'Empleado creado exitosamente.'
|
|
]));
|
|
return container;
|
|
}
|
|
|
|
var error = h('div', { className: 'onb-error', id: 'onb-emp-msg' });
|
|
|
|
container.appendChild(h('div', { className: 'onb-form' }, [
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Nombre'),
|
|
h('input', { className: 'onb-input', type: 'text', id: 'onb-ename', placeholder: 'Ej: Juan Perez' })
|
|
]),
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'PIN (4 digitos)'),
|
|
h('input', { className: 'onb-input', type: 'password', id: 'onb-epin', placeholder: '****', maxlength: '4' })
|
|
]),
|
|
h('div', { className: 'onb-field' }, [
|
|
h('label', { className: 'onb-label' }, 'Rol'),
|
|
h('select', { className: 'onb-select', id: 'onb-erole' }, [
|
|
h('option', { value: 'cashier' }, 'Cajero'),
|
|
h('option', { value: 'warehouse' }, 'Almacenista'),
|
|
h('option', { value: 'admin' }, 'Administrador'),
|
|
h('option', { value: 'accountant' }, 'Contador')
|
|
])
|
|
]),
|
|
error
|
|
]));
|
|
|
|
return container;
|
|
}
|
|
|
|
function renderStep4() {
|
|
/* Done */
|
|
return h('div', { className: 'onb-step-enter' }, [
|
|
h('div', { className: 'onb-icon' }, ['\u2705']),
|
|
h('h2', { className: 'onb-title' }, 'Listo! Tu Sistema Esta Configurado'),
|
|
h('p', { className: 'onb-desc' },
|
|
'Ya puedes empezar a usar Nexus POS. Aqui tienes accesos rapidos:'),
|
|
h('div', { className: 'onb-links' }, [
|
|
h('a', { className: 'onb-link-card', href: '/pos/catalog' }, [
|
|
h('span', { className: 'onb-link-icon' }, '\uD83D\uDCD6'),
|
|
'Catalogo'
|
|
]),
|
|
h('a', { className: 'onb-link-card', href: '/pos/' }, [
|
|
h('span', { className: 'onb-link-icon' }, '\uD83D\uDCBB'),
|
|
'Punto de Venta'
|
|
]),
|
|
h('a', { className: 'onb-link-card', href: '/pos/inventory' }, [
|
|
h('span', { className: 'onb-link-icon' }, '\uD83D\uDCE6'),
|
|
'Inventario'
|
|
]),
|
|
])
|
|
]);
|
|
}
|
|
|
|
var stepRenderers = [renderStep0, renderStep1, renderStep2, renderStep3, renderStep4];
|
|
|
|
/* ------------------------------------------------------------------
|
|
ACTION HANDLERS — called when user clicks primary button
|
|
------------------------------------------------------------------ */
|
|
|
|
async function actionStep1() {
|
|
/* Rename branch (optional — just show success) */
|
|
var name = document.getElementById('onb-branch-name');
|
|
if (name && name.value.trim()) {
|
|
stepState.branchRenamed = true;
|
|
}
|
|
goNext();
|
|
}
|
|
|
|
async function actionStep2() {
|
|
/* Create product via API */
|
|
if (stepState.productCreated) { goNext(); return; }
|
|
|
|
var pn = (document.getElementById('onb-pn') || {}).value || '';
|
|
var pname = (document.getElementById('onb-pname') || {}).value || '';
|
|
var price = parseFloat((document.getElementById('onb-pprice') || {}).value) || 0;
|
|
var stock = parseInt((document.getElementById('onb-pstock') || {}).value) || 0;
|
|
var msg = document.getElementById('onb-product-msg');
|
|
|
|
if (!pn.trim() || !pname.trim()) {
|
|
if (msg) msg.textContent = 'Numero de parte y nombre son obligatorios.';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (msg) msg.textContent = '';
|
|
await api('/pos/api/inventory/items', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
part_number: pn.trim(),
|
|
name: pname.trim(),
|
|
price_1: price,
|
|
initial_stock: stock
|
|
})
|
|
});
|
|
stepState.productCreated = true;
|
|
renderCurrentStep();
|
|
setTimeout(goNext, 800);
|
|
} catch (e) {
|
|
if (msg) msg.textContent = e.message || 'Error al crear producto.';
|
|
}
|
|
}
|
|
|
|
async function actionStep3() {
|
|
/* Create employee via API */
|
|
if (stepState.employeeCreated) { goNext(); return; }
|
|
|
|
var ename = (document.getElementById('onb-ename') || {}).value || '';
|
|
var epin = (document.getElementById('onb-epin') || {}).value || '';
|
|
var erole = (document.getElementById('onb-erole') || {}).value || 'cashier';
|
|
var msg = document.getElementById('onb-emp-msg');
|
|
|
|
if (!ename.trim()) {
|
|
if (msg) msg.textContent = 'El nombre es obligatorio.';
|
|
return;
|
|
}
|
|
if (!epin || epin.length < 4) {
|
|
if (msg) msg.textContent = 'El PIN debe tener al menos 4 digitos.';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (msg) msg.textContent = '';
|
|
await api('/pos/api/config/employees', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
name: ename.trim(),
|
|
pin: epin,
|
|
role: erole
|
|
})
|
|
});
|
|
stepState.employeeCreated = true;
|
|
renderCurrentStep();
|
|
setTimeout(goNext, 800);
|
|
} catch (e) {
|
|
if (msg) msg.textContent = e.message || 'Error al crear empleado.';
|
|
}
|
|
}
|
|
|
|
function actionStep4() {
|
|
/* Finish */
|
|
finish();
|
|
}
|
|
|
|
var stepActions = [goNext, actionStep1, actionStep2, actionStep3, actionStep4];
|
|
|
|
/* ------------------------------------------------------------------
|
|
NAVIGATION
|
|
------------------------------------------------------------------ */
|
|
|
|
function goNext() {
|
|
if (currentStep < totalSteps - 1) {
|
|
currentStep++;
|
|
renderCurrentStep();
|
|
}
|
|
}
|
|
|
|
function goBack() {
|
|
if (currentStep > 0) {
|
|
currentStep--;
|
|
renderCurrentStep();
|
|
}
|
|
}
|
|
|
|
function skip() {
|
|
goNext();
|
|
}
|
|
|
|
function finish() {
|
|
localStorage.setItem('pos_onboarding_done', 'true');
|
|
var token = '';
|
|
try { token = localStorage.getItem('pos_token') || ''; } catch (e) {}
|
|
fetch('/pos/api/config/onboarding-status', {
|
|
method: 'POST',
|
|
headers: token ? { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ completed: true })
|
|
}).catch(function () {});
|
|
if (overlay && overlay.parentNode) {
|
|
overlay.style.opacity = '0';
|
|
overlay.style.transition = 'opacity var(--duration-normal) var(--ease-in)';
|
|
setTimeout(function () { overlay.parentNode.removeChild(overlay); }, 250);
|
|
}
|
|
}
|
|
|
|
function dismiss() {
|
|
finish();
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
RENDER
|
|
------------------------------------------------------------------ */
|
|
|
|
function renderCurrentStep() {
|
|
body.innerHTML = '';
|
|
body.appendChild(stepRenderers[currentStep]());
|
|
updateFooter();
|
|
}
|
|
|
|
function updateFooter() {
|
|
var footer = overlay.querySelector('.onboarding-footer');
|
|
if (!footer) return;
|
|
footer.innerHTML = '';
|
|
|
|
/* Action row */
|
|
var actions = h('div', { className: 'onb-actions' });
|
|
|
|
/* Back / skip */
|
|
if (currentStep === 0) {
|
|
actions.appendChild(h('span')); /* spacer */
|
|
} else if (currentStep < totalSteps - 1) {
|
|
actions.appendChild(
|
|
h('button', { className: 'onb-btn onb-btn--ghost', onClick: skip }, 'Saltar')
|
|
);
|
|
} else {
|
|
actions.appendChild(h('span'));
|
|
}
|
|
|
|
/* Primary button */
|
|
var labels = ['Empezar', 'Siguiente', 'Guardar Producto', 'Guardar Empleado', 'Ir al Sistema'];
|
|
var primaryBtn = h('button', {
|
|
className: 'onb-btn onb-btn--primary',
|
|
onClick: stepActions[currentStep]
|
|
}, labels[currentStep]);
|
|
|
|
/* If product/employee already created, change label */
|
|
if (currentStep === 2 && stepState.productCreated) primaryBtn.textContent = 'Siguiente';
|
|
if (currentStep === 3 && stepState.employeeCreated) primaryBtn.textContent = 'Siguiente';
|
|
|
|
actions.appendChild(primaryBtn);
|
|
footer.appendChild(actions);
|
|
|
|
/* Progress dots */
|
|
var progressRow = h('div', { className: 'onb-progress' });
|
|
for (var i = 0; i < totalSteps; i++) {
|
|
var dotClass = 'onb-dot';
|
|
if (i === currentStep) dotClass += ' is-active';
|
|
else if (i < currentStep) dotClass += ' is-done';
|
|
progressRow.appendChild(h('div', { className: dotClass }));
|
|
}
|
|
footer.appendChild(progressRow);
|
|
|
|
/* Step label */
|
|
footer.appendChild(
|
|
h('div', { className: 'onb-step-label' }, (currentStep + 1) + ' de ' + totalSteps)
|
|
);
|
|
|
|
/* Dismiss checkbox on last step */
|
|
if (currentStep === totalSteps - 1) {
|
|
var cb = h('input', { type: 'checkbox', id: 'onb-dismiss-cb', checked: 'checked' });
|
|
footer.appendChild(h('div', { className: 'onb-dismiss-row' }, [
|
|
cb,
|
|
h('label', { for: 'onb-dismiss-cb' }, 'No mostrar de nuevo')
|
|
]));
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
INIT — Build the modal and inject it
|
|
------------------------------------------------------------------ */
|
|
|
|
function init() {
|
|
overlay = h('div', { className: 'onboarding-overlay' });
|
|
|
|
/* Click backdrop to dismiss */
|
|
overlay.addEventListener('click', function (e) {
|
|
if (e.target === overlay) dismiss();
|
|
});
|
|
|
|
var modal = h('div', { className: 'onboarding-modal' });
|
|
|
|
body = h('div', { className: 'onboarding-body' });
|
|
var footer = h('div', { className: 'onboarding-footer' });
|
|
|
|
modal.appendChild(body);
|
|
modal.appendChild(footer);
|
|
overlay.appendChild(modal);
|
|
|
|
document.body.appendChild(overlay);
|
|
renderCurrentStep();
|
|
}
|
|
|
|
function initWizard() {
|
|
init();
|
|
}
|
|
|
|
/* Wait for DOM, then check server before showing wizard */
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', checkServerAndMaybeInit);
|
|
} else {
|
|
checkServerAndMaybeInit();
|
|
}
|
|
|
|
})();
|