feat(config): agrega personalización de ticket con logo y opciones

- Nuevos endpoints /pos/api/config/receipt (GET/PUT)
- Sección en config.html para subir logo, datos del negocio y toggles visuales
- pos.js carga la config y renderiza el ticket usando logo, RFC, dirección,
  teléfono, mensajes y opciones de desglose/empleado/pago configurables
- Logo se redimensiona a 300px de ancho y se guarda como base64 JPEG en tenant_config

Tests: 35 passed

pos/blueprints/config_bp.py

@@ -752,3 +752,99 @@ def set_onboarding_status():
     cur.close()
     conn.close()
     return jsonify({'completed': completed == 'true'})
+
+
+# ─── Receipt / Ticket Customization ────────────────────────────────────────
+
+RECEIPT_CONFIG_KEYS = [
+    'receipt_logo',
+    'receipt_store_name',
+    'receipt_tagline',
+    'receipt_rfc',
+    'receipt_address',
+    'receipt_phone',
+    'receipt_footer',
+    'receipt_thanks_message',
+    'receipt_show_logo',
+    'receipt_show_rfc',
+    'receipt_show_address',
+    'receipt_show_phone',
+    'receipt_show_iva_breakdown',
+    'receipt_show_payment_details',
+    'receipt_show_employee',
+]
+
+
+@config_bp.route('/receipt', methods=['GET'])
+@require_auth('pos.view')
+def get_receipt_config():
+    """Get receipt customization settings."""
+    conn = get_tenant_conn(g.tenant_id)
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT key, value FROM tenant_config WHERE key = ANY(%s)",
+        (RECEIPT_CONFIG_KEYS,)
+    )
+    rows = {row[0]: row[1] for row in cur.fetchall()}
+    cur.close()
+    conn.close()
+
+    def _bool(key, default=False):
+        v = rows.get(key, 'true' if default else 'false')
+        return str(v).lower() == 'true'
+
+    return jsonify({
+        'logo': rows.get('receipt_logo', ''),
+        'store_name': rows.get('receipt_store_name', ''),
+        'tagline': rows.get('receipt_tagline', ''),
+        'rfc': rows.get('receipt_rfc', ''),
+        'address': rows.get('receipt_address', ''),
+        'phone': rows.get('receipt_phone', ''),
+        'footer': rows.get('receipt_footer', ''),
+        'thanks_message': rows.get('receipt_thanks_message', 'Gracias por su compra!'),
+        'show_logo': _bool('receipt_show_logo', True),
+        'show_rfc': _bool('receipt_show_rfc', True),
+        'show_address': _bool('receipt_show_address', False),
+        'show_phone': _bool('receipt_show_phone', False),
+        'show_iva_breakdown': _bool('receipt_show_iva_breakdown', True),
+        'show_payment_details': _bool('receipt_show_payment_details', True),
+        'show_employee': _bool('receipt_show_employee', False),
+    })
+
+
+@config_bp.route('/receipt', methods=['PUT'])
+@require_auth('config.edit')
+def update_receipt_config():
+    """Update receipt customization settings."""
+    data = request.get_json() or {}
+    conn = get_tenant_conn(g.tenant_id)
+    cur = conn.cursor()
+
+    settings = {
+        'receipt_logo': data.get('logo', ''),
+        'receipt_store_name': data.get('store_name', ''),
+        'receipt_tagline': data.get('tagline', ''),
+        'receipt_rfc': data.get('rfc', ''),
+        'receipt_address': data.get('address', ''),
+        'receipt_phone': data.get('phone', ''),
+        'receipt_footer': data.get('footer', ''),
+        'receipt_thanks_message': data.get('thanks_message', 'Gracias por su compra!'),
+        'receipt_show_logo': 'true' if data.get('show_logo') else 'false',
+        'receipt_show_rfc': 'true' if data.get('show_rfc') else 'false',
+        'receipt_show_address': 'true' if data.get('show_address') else 'false',
+        'receipt_show_phone': 'true' if data.get('show_phone') else 'false',
+        'receipt_show_iva_breakdown': 'true' if data.get('show_iva_breakdown') else 'false',
+        'receipt_show_payment_details': 'true' if data.get('show_payment_details') else 'false',
+        'receipt_show_employee': 'true' if data.get('show_employee') else 'false',
+    }
+
+    for key, value in settings.items():
+        cur.execute("""
+            INSERT INTO tenant_config (key, value) VALUES (%s, %s)
+            ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value
+        """, (key, value))
+
+    conn.commit()
+    cur.close()
+    conn.close()
+    return jsonify({'message': 'Receipt configuration updated'})

pos/static/js/config.js

@@ -443,6 +443,133 @@ const Config = (() => {
         }
     }
 
+    // -------------------------------------------------------------------------
+    // Receipt / ticket customization
+    // -------------------------------------------------------------------------
+    let _receiptLogo = '';
+
+    async function loadReceiptConfig() {
+        try {
+            var res = await fetch(API + '/receipt', { headers: headers() });
+            if (!res.ok) return;
+            var d = await res.json();
+            _receiptLogo = d.logo || '';
+            setVal('receipt-store-name', d.store_name);
+            setVal('receipt-tagline', d.tagline);
+            setVal('receipt-rfc', d.rfc);
+            setVal('receipt-address', d.address);
+            setVal('receipt-phone', d.phone);
+            setVal('receipt-thanks', d.thanks_message);
+            setVal('receipt-footer', d.footer);
+            setChecked('receipt-show-logo', d.show_logo);
+            setChecked('receipt-show-rfc', d.show_rfc);
+            setChecked('receipt-show-address', d.show_address);
+            setChecked('receipt-show-phone', d.show_phone);
+            setChecked('receipt-show-iva', d.show_iva_breakdown);
+            setChecked('receipt-show-payment', d.show_payment_details);
+            setChecked('receipt-show-employee', d.show_employee);
+            renderReceiptLogoThumb();
+        } catch (e) {
+            console.error('Config.loadReceiptConfig:', e);
+        }
+    }
+
+    function setChecked(id, v) {
+        var el = document.getElementById(id);
+        if (el) el.checked = !!v;
+    }
+
+    function getChecked(id) {
+        var el = document.getElementById(id);
+        return el ? el.checked : false;
+    }
+
+    function renderReceiptLogoThumb() {
+        var thumb = document.getElementById('receipt-logo-thumb');
+        var removeBtn = document.getElementById('receipt-logo-remove');
+        if (!thumb) return;
+        if (_receiptLogo) {
+            thumb.innerHTML = '<img src="' + escapeHtml(_receiptLogo) + '" style="max-width:100%;max-height:100%;object-fit:contain;" alt="Logo ticket">';
+            if (removeBtn) removeBtn.style.display = '';
+        } else {
+            thumb.innerHTML = '<span style="color:var(--color-text-muted);font-size:var(--text-caption);text-align:center;padding:var(--space-2);">Sin logo</span>';
+            if (removeBtn) removeBtn.style.display = 'none';
+        }
+    }
+
+    function handleReceiptLogo(input) {
+        var file = input && input.files ? input.files[0] : null;
+        if (!file) return;
+        if (!file.type.match(/^image\/(png|jpeg|jpg|webp)$/)) {
+            toast('Solo se permiten imágenes PNG, JPG o WebP', 'error');
+            input.value = '';
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            var img = new Image();
+            img.onload = function() {
+                var maxWidth = 300;
+                var scale = Math.min(1, maxWidth / img.width);
+                var w = Math.round(img.width * scale);
+                var h = Math.round(img.height * scale);
+                var canvas = document.createElement('canvas');
+                canvas.width = w;
+                canvas.height = h;
+                var ctx = canvas.getContext('2d');
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, w, h);
+                ctx.drawImage(img, 0, 0, w, h);
+                _receiptLogo = canvas.toDataURL('image/jpeg', 0.85);
+                renderReceiptLogoThumb();
+                toast('Logo cargado. Guarda los cambios para aplicarlo.', 'ok');
+            };
+            img.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+        input.value = '';
+    }
+
+    function removeReceiptLogo() {
+        _receiptLogo = '';
+        renderReceiptLogoThumb();
+    }
+
+    async function saveReceiptConfig() {
+        if (!checkAuth()) return;
+        var data = {
+            logo: _receiptLogo,
+            store_name: getVal('receipt-store-name'),
+            tagline: getVal('receipt-tagline'),
+            rfc: getVal('receipt-rfc'),
+            address: getVal('receipt-address'),
+            phone: getVal('receipt-phone'),
+            thanks_message: getVal('receipt-thanks'),
+            footer: getVal('receipt-footer'),
+            show_logo: getChecked('receipt-show-logo'),
+            show_rfc: getChecked('receipt-show-rfc'),
+            show_address: getChecked('receipt-show-address'),
+            show_phone: getChecked('receipt-show-phone'),
+            show_iva_breakdown: getChecked('receipt-show-iva'),
+            show_payment_details: getChecked('receipt-show-payment'),
+            show_employee: getChecked('receipt-show-employee'),
+        };
+        try {
+            var res = await fetch(API + '/receipt', {
+                method: 'PUT',
+                headers: headers(),
+                body: JSON.stringify(data),
+            });
+            if (!res.ok) {
+                var err = await res.json().catch(function() { return { error: res.statusText }; });
+                throw new Error(err.error || 'Error al guardar');
+            }
+            toast('Configuración de ticket guardada', 'ok');
+        } catch (e) {
+            toast(e.message, 'error');
+        }
+    }
+
     async function saveAll() {
         if (!checkAuth()) return;
         var btn = document.getElementById('btn-save-all');
@@ -454,6 +581,7 @@ const Config = (() => {
             await saveVehicleCompatSource();
             await saveAllowedBrands();
             await saveModules();
+            await saveReceiptConfig();
             toast('Configuración guardada', 'ok');
         } catch (e) {
             toast(e.message, 'error');
@@ -881,6 +1009,7 @@ const Config = (() => {
         loadVehicleCompatSource();
         loadAllowedBrands();
         loadModules();
+        loadReceiptConfig();
     }
 
     document.addEventListener('DOMContentLoaded', init);
@@ -900,6 +1029,7 @@ const Config = (() => {
         loadCurrency, saveCurrency,
         loadVehicleCompatSource, saveVehicleCompatSource,
         loadModules, saveModules,
+        loadReceiptConfig, saveReceiptConfig, handleReceiptLogo, removeReceiptLogo,
         openModal, closeModal, openBranchModal, editBranch
     };
 

pos/static/js/pos.js

@@ -30,6 +30,7 @@ const POS = (() => {
     let canEditPrice = false;
     let canCreateWorkshopOrder = false;
     let canCreateLayaway = false;
+    let receiptConfig = {};
 
     // Currency-aware formatter: reads pos_currency from localStorage
     const _posCurrency = localStorage.getItem('pos_currency') || 'MXN';
@@ -134,8 +135,9 @@ const POS = (() => {
             showToast(`Modo conversion: Cotizacion #${convertQuoteId}. El pago convertira la cotizacion en venta.`);
         }
 
-        // Load current register
+        // Load current register and receipt config
         await loadRegister();
+        await loadReceiptConfig();
 
         // Setup event listeners
         setupKeyboard();
@@ -163,6 +165,20 @@ const POS = (() => {
         }
     }
 
+    async function loadReceiptConfig() {
+        try {
+            receiptConfig = await api('/pos/api/config/receipt');
+        } catch (e) {
+            console.warn('Could not load receipt config:', e);
+            receiptConfig = {};
+        }
+    }
+
+    function rc(key, fallback) {
+        const v = receiptConfig[key];
+        return v !== undefined && v !== null && v !== '' ? v : fallback;
+    }
+
     function showOpenRegisterModal() {
         document.getElementById('openRegisterModal').classList.add('open');
         document.getElementById('registerOpenResult').innerHTML = '';
@@ -1283,12 +1299,37 @@ const POS = (() => {
                 </div>`;
         });
 
+        const cfg = receiptConfig || {};
+        const showLogo = cfg.show_logo && cfg.logo;
+        const showRfc = cfg.show_rfc !== false;
+        const showAddress = cfg.show_address;
+        const showPhone = cfg.show_phone;
+        const showIva = cfg.show_iva_breakdown !== false;
+        const showPayment = cfg.show_payment_details !== false;
+        const showEmployee = cfg.show_employee;
+        const storeName = rc('store_name', 'NEXUS AUTOPARTS');
+        const storeTagline = rc('tagline', 'Tu conexion con las refacciones');
+        const storeRfc = rc('rfc', 'NAU210315XX1');
+        const storeAddress = rc('address', '');
+        const storePhone = rc('phone', '');
+        const thanksMsg = rc('thanks_message', 'Gracias por su compra!');
+        const footerMsg = rc('footer', 'Conserve su ticket como comprobante.');
+
+        let storeInfoLines = [];
+        if (currentRegister && currentRegister.branch_name) storeInfoLines.push(`Sucursal: ${currentRegister.branch_name}`);
+        if (showEmployee && sale.employee_name) storeInfoLines.push(`Atendió: ${sale.employee_name}`);
+        if (showRfc && storeRfc) storeInfoLines.push(`RFC: ${storeRfc}`);
+        if (showAddress && storeAddress) storeInfoLines.push(storeAddress);
+        if (showPhone && storePhone) storeInfoLines.push(`Tel: ${storePhone}`);
+
+        const logoHtml = showLogo ? `<div class="ticket-logo-wrap"><img src="${cfg.logo}" alt="Logo" class="ticket-logo" style="max-width:140px;max-height:70px;object-fit:contain;"></div>` : '';
+
         const ticketHtml = `
-            <div class="store-name">NEXUS AUTOPARTS</div>
-            <div class="store-tagline">Tu conexion con las refacciones</div>
+            ${logoHtml}
+            <div class="store-name">${storeName}</div>
+            ${storeTagline ? `<div class="store-tagline">${storeTagline}</div>` : ''}
             <div class="store-info">
-                Sucursal: ${currentRegister ? currentRegister.branch_name || '' : ''}<br>
-                RFC: NAU210315XX1
+                ${storeInfoLines.join('<br>')}
             </div>
             <hr class="divider-double">
             <div class="folio-line">
@@ -1314,13 +1355,12 @@ const POS = (() => {
                     <span>Subtotal:</span><span>${fmt(sale.subtotal)}</span>
                 </div>
                 ${sale.discount_total > 0 ? `<div class="total-line"><span>Descuento:</span><span>-${fmt(sale.discount_total)}</span></div>` : ''}
-                <div class="total-line">
-                    <span>IVA 16%:</span><span>${fmt(sale.tax_total)}</span>
-                </div>
+                ${showIva ? `<div class="total-line"><span>IVA:</span><span>${fmt(sale.tax_total)}</span></div>` : ''}
                 <div class="total-line grand">
                     <span>TOTAL:</span><span>${fmt(sale.total)}</span>
                 </div>
             </div>
+            ${showPayment ? `
             <hr class="divider">
             <div class="payment-section">
                 <div class="ticket-row">
@@ -1333,11 +1373,11 @@ const POS = (() => {
                 <div class="ticket-row" style="font-weight: bold;">
                     <span>Cambio:</span><span>${fmt(sale.change_given || 0)}</span>
                 </div>` : ''}
-            </div>
+            </div>` : ''}
             <hr class="divider">
             <div class="footer-section">
-                <div class="thanks">Gracias por su compra!</div>
-                <div>Conserve su ticket como comprobante.</div>
+                <div class="thanks">${thanksMsg}</div>
+                ${footerMsg ? `<div>${footerMsg}</div>` : ''}
             </div>
         `;
 

pos/templates/config.html

@@ -255,7 +255,79 @@
         </div>
 
         <!-- ===============================================================
-             SECTION 3: MÓDULOS E INTEGRACIONES
+             SECTION 3: PERSONALIZACIÓN DE TICKET
+             =============================================================== -->
+        <div class="settings-section">
+          <div class="settings-section__header">
+            <div class="settings-section__icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+            </div>
+            <div>
+              <div class="settings-section__title">Personalización de Ticket</div>
+              <div class="settings-section__desc">Logo, datos y opciones que aparecen en el ticket de venta</div>
+            </div>
+          </div>
+
+          <div class="settings-card">
+            <div class="form-grid">
+              <div class="form-group form-group--full">
+                <label class="form-label">Logo del negocio</label>
+                <input type="file" id="receipt-logo" accept="image/png,image/jpeg,image/jpg,image/webp" onchange="Config.handleReceiptLogo(this)" style="display:none;" />
+                <div id="receipt-logo-preview" style="display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;">
+                  <div id="receipt-logo-thumb" style="width:80px;height:80px;border:1px dashed var(--color-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-surface-2);">
+                    <span style="color:var(--color-text-muted);font-size:var(--text-caption);text-align:center;padding:var(--space-2);">Sin logo</span>
+                  </div>
+                  <button class="btn btn--secondary btn--sm" onclick="document.getElementById('receipt-logo').click()">Subir imagen</button>
+                  <button class="btn btn--ghost btn--sm" id="receipt-logo-remove" onclick="Config.removeReceiptLogo()" style="display:none;">Quitar</button>
+                </div>
+                <div class="form-hint">Recomendado: PNG/JPG con fondo blanco o transparente, máx. 300x150 px.</div>
+              </div>
+              <div class="form-group">
+                <label class="form-label">Nombre en ticket</label>
+                <input class="form-input" id="receipt-store-name" type="text" placeholder="Ej: Refacciones El Toro" />
+              </div>
+              <div class="form-group">
+                <label class="form-label">Slogan / Línea debajo del nombre</label>
+                <input class="form-input" id="receipt-tagline" type="text" placeholder="Ej: Tu conexion con las refacciones" />
+              </div>
+              <div class="form-group">
+                <label class="form-label">RFC en ticket</label>
+                <input class="form-input" id="receipt-rfc" type="text" placeholder="Ej: RET260101ABC" maxlength="13" style="text-transform:uppercase;" />
+              </div>
+              <div class="form-group form-group--full">
+                <label class="form-label">Dirección en ticket</label>
+                <input class="form-input" id="receipt-address" type="text" placeholder="Calle, Número, Colonia, CP, Ciudad" />
+              </div>
+              <div class="form-group">
+                <label class="form-label">Teléfono en ticket</label>
+                <input class="form-input" id="receipt-phone" type="tel" placeholder="Ej: 664-123-4567" />
+              </div>
+              <div class="form-group form-group--full">
+                <label class="form-label">Mensaje de agradecimiento</label>
+                <input class="form-input" id="receipt-thanks" type="text" placeholder="Gracias por su compra!" />
+              </div>
+              <div class="form-group form-group--full">
+                <label class="form-label">Pie de página adicional</label>
+                <input class="form-input" id="receipt-footer" type="text" placeholder="Ej: Conserve su ticket como comprobante." />
+              </div>
+            </div>
+            <div class="form-grid" style="margin-top:var(--space-4);">
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-logo" style="width:auto;" checked /> Mostrar logo</label>
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-rfc" style="width:auto;" checked /> Mostrar RFC</label>
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-address" style="width:auto;" /> Mostrar dirección</label>
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-phone" style="width:auto;" /> Mostrar teléfono</label>
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-iva" style="width:auto;" checked /> Mostrar desglose de IVA</label>
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-payment" style="width:auto;" checked /> Mostrar detalle de pago</label>
+              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-employee" style="width:auto;" /> Mostrar nombre del empleado</label>
+            </div>
+            <div style="margin-top:var(--space-4);text-align:right;">
+              <button class="btn btn--primary" onclick="Config.saveReceiptConfig()">Guardar ticket</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- ===============================================================
+             SECTION 4: MÓDULOS E INTEGRACIONES
              =============================================================== -->
         <div class="settings-section">
           <div class="settings-section__header">