feat(pos): add invoicing frontend — CFDI queue, XML preview, cancel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pos/static/js/invoicing.js

@@ -0,0 +1,227 @@
+// /home/Autopartes/pos/static/js/invoicing.js
+// Invoicing module: CFDI queue management, cancel, PDF
+
+const Invoicing = (() => {
+    const API = '/pos/api/invoicing';
+
+    function token() {
+        return localStorage.getItem('pos_token') || '';
+    }
+
+    function headers() {
+        return { 'Authorization': `Bearer ${token()}`, 'Content-Type': 'application/json' };
+    }
+
+    async function api(path, opts = {}) {
+        const res = await fetch(`${API}${path}`, { headers: headers(), ...opts });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ error: res.statusText }));
+            throw new Error(err.error || 'Request failed');
+        }
+        return res.json();
+    }
+
+    function fmt(n) {
+        return parseFloat(n || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+
+    function badgeClass(status) {
+        return {
+            pending: 'badge-pending',
+            sending: 'badge-sending',
+            stamped: 'badge-stamped',
+            failed: 'badge-failed',
+            cancelled: 'badge-cancelled',
+        }[status] || '';
+    }
+
+    function badgeLabel(status) {
+        return {
+            pending: 'Pendiente',
+            sending: 'Enviando',
+            stamped: 'Timbrado',
+            failed: 'Fallido',
+            cancelled: 'Cancelado',
+        }[status] || status;
+    }
+
+    // ─── Queue List ────────────────────────────────
+
+    async function loadQueue() {
+        try {
+            const status = document.getElementById('filter-status').value;
+            const type = document.getElementById('filter-type').value;
+            let qs = '?per_page=50';
+            if (status) qs += `&status=${status}`;
+            if (type) qs += `&type=${type}`;
+
+            const res = await api(`/queue${qs}`);
+            renderQueue(res.data || []);
+            updateStats(res.data || []);
+        } catch (e) {
+            document.getElementById('queue-list').innerHTML =
+                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
+        }
+    }
+
+    function updateStats(items) {
+        const counts = { pending: 0, sending: 0, stamped: 0, failed: 0, cancelled: 0 };
+        items.forEach(i => { if (counts[i.status] !== undefined) counts[i.status]++; });
+
+        document.getElementById('queue-stats').innerHTML = `
+            <div class="stat-card"><div class="number">${counts.pending}</div><div class="label">Pendientes</div></div>
+            <div class="stat-card"><div class="number">${counts.sending}</div><div class="label">Enviando</div></div>
+            <div class="stat-card"><div class="number">${counts.stamped}</div><div class="label">Timbrados</div></div>
+            <div class="stat-card"><div class="number">${counts.failed}</div><div class="label">Fallidos</div></div>
+            <div class="stat-card"><div class="number">${counts.cancelled}</div><div class="label">Cancelados</div></div>`;
+    }
+
+    function renderQueue(items) {
+        const container = document.getElementById('queue-list');
+        if (!items.length) { container.innerHTML = '<p>No hay CFDIs en la cola.</p>'; return; }
+
+        let html = `<table class="queue-table">
+            <thead><tr>
+                <th>#</th><th>Venta</th><th>Tipo</th><th>Folio</th>
+                <th>UUID</th><th>Estado</th><th>Reintentos</th><th>Fecha</th><th>Acciones</th>
+            </tr></thead><tbody>`;
+
+        for (const item of items) {
+            const uuid = item.uuid_fiscal
+                ? `${item.uuid_fiscal.substring(0, 8)}...`
+                : '-';
+            html += `<tr>
+                <td>${item.id}</td>
+                <td>#${item.sale_id}</td>
+                <td>${item.type}</td>
+                <td>${item.provisional_folio || '-'}</td>
+                <td title="${item.uuid_fiscal || ''}">${uuid}</td>
+                <td><span class="badge ${badgeClass(item.status)}">${badgeLabel(item.status)}</span></td>
+                <td>${item.retry_count || 0}</td>
+                <td>${item.created_at ? new Date(item.created_at).toLocaleDateString('es-MX') : ''}</td>
+                <td>
+                    <button class="btn btn-secondary" style="padding:0.2rem 0.4rem;font-size:0.8rem;"
+                        onclick="Invoicing.showDetail(${item.id})">Ver</button>
+                    ${item.status === 'stamped' ? `<button class="btn btn-danger" style="padding:0.2rem 0.4rem;font-size:0.8rem;"
+                        onclick="Invoicing.showCancelModal(${item.id})">Cancelar</button>` : ''}
+                    ${item.sale_id ? `<a href="/pos/api/invoicing/${item.sale_id}/pdf" target="_blank"
+                        class="btn btn-secondary" style="padding:0.2rem 0.4rem;font-size:0.8rem;">PDF</a>` : ''}
+                </td>
+            </tr>`;
+        }
+        html += '</tbody></table>';
+        container.innerHTML = html;
+    }
+
+    // ─── Detail ────────────────────────────────────
+
+    async function showDetail(cfdiId) {
+        try {
+            const item = await api(`/queue/${cfdiId}`);
+            let html = `<h3>CFDI #${item.id}</h3>
+                <div class="detail-grid">
+                    <div class="detail-item"><label>Venta</label><span>#${item.sale_id}</span></div>
+                    <div class="detail-item"><label>Tipo</label><span>${item.type}</span></div>
+                    <div class="detail-item"><label>Estado</label><span class="badge ${badgeClass(item.status)}">${badgeLabel(item.status)}</span></div>
+                    <div class="detail-item"><label>Folio Provisional</label><span>${item.provisional_folio || '-'}</span></div>
+                    <div class="detail-item"><label>UUID Fiscal</label><span>${item.uuid_fiscal || '-'}</span></div>
+                    <div class="detail-item"><label>Reintentos</label><span>${item.retry_count}</span></div>
+                    <div class="detail-item"><label>Creado</label><span>${item.created_at || '-'}</span></div>
+                    <div class="detail-item"><label>Timbrado</label><span>${item.stamped_at || '-'}</span></div>
+                </div>`;
+
+            if (item.error_message) {
+                html += `<p style="color:var(--danger);"><strong>Error:</strong> ${item.error_message}</p>`;
+            }
+            if (item.cancel_motive) {
+                html += `<p><strong>Motivo cancelacion:</strong> ${item.cancel_motive}</p>`;
+            }
+
+            // XML preview
+            const xml = item.xml_signed || item.xml_unsigned;
+            if (xml) {
+                html += `<h4>XML</h4><div class="xml-preview">${escapeHtml(xml)}</div>`;
+            }
+
+            document.getElementById('detail-content').innerHTML = html;
+            document.getElementById('detail-modal').classList.add('active');
+        } catch (e) {
+            alert('Error: ' + e.message);
+        }
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // ─── Process Queue ─────────────────────────────
+
+    async function processQueue() {
+        if (!confirm('Procesar todos los CFDIs pendientes?')) return;
+        try {
+            const result = await api('/queue/process', { method: 'POST' });
+            alert(`Procesados: ${result.processed}, Timbrados: ${result.stamped}, Fallidos: ${result.failed}`);
+            loadQueue();
+        } catch (e) {
+            alert('Error: ' + e.message);
+        }
+    }
+
+    // ─── Cancel ────────────────────────────────────
+
+    function showCancelModal(cfdiId) {
+        document.getElementById('cancel-cfdi-id').value = cfdiId;
+        document.getElementById('cancel-motive').value = '';
+        document.getElementById('cancel-replacement-uuid').value = '';
+        document.getElementById('replacement-uuid-group').style.display = 'none';
+        document.getElementById('cancel-modal').classList.add('active');
+    }
+
+    function onMotiveChange() {
+        const motive = document.getElementById('cancel-motive').value;
+        document.getElementById('replacement-uuid-group').style.display =
+            motive === '01' ? 'block' : 'none';
+    }
+
+    async function confirmCancel() {
+        const cfdiId = document.getElementById('cancel-cfdi-id').value;
+        const motive = document.getElementById('cancel-motive').value;
+        const replacementUuid = document.getElementById('cancel-replacement-uuid').value;
+
+        if (!motive) { alert('Selecciona un motivo de cancelacion.'); return; }
+        if (motive === '01' && !replacementUuid) { alert('UUID sustituto requerido para motivo 01.'); return; }
+
+        if (!confirm('Confirmar cancelacion ante el SAT?')) return;
+
+        try {
+            const body = { motive };
+            if (replacementUuid) body.replacement_uuid = replacementUuid;
+
+            await api(`/cancel/${cfdiId}`, { method: 'POST', body: JSON.stringify(body) });
+            closeModal('cancel-modal');
+            loadQueue();
+            alert('CFDI cancelado exitosamente.');
+        } catch (e) {
+            alert('Error: ' + e.message);
+        }
+    }
+
+    // ─── Modal helpers ─────────────────────────────
+
+    function closeModal(id) {
+        document.getElementById(id).classList.remove('active');
+    }
+
+    // ─── Init ──────────────────────────────────────
+
+    document.addEventListener('DOMContentLoaded', () => {
+        loadQueue();
+    });
+
+    return {
+        loadQueue, processQueue, showDetail, showCancelModal,
+        onMotiveChange, confirmCancel, closeModal,
+    };
+})();

pos/templates/invoicing.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Facturacion - Nexus POS</title>
+    <link rel="stylesheet" href="/pos/static/css/common.css">
+    <style>
+        .queue-filters { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
+        .queue-filters select, .queue-filters input { padding: 0.4rem 0.5rem; border: 1px solid var(--border);
+                                                      border-radius: 4px; font-size: 0.9rem; }
+
+        .queue-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+        .queue-table th { text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--border);
+                          font-weight: 600; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; }
+        .queue-table td { padding: 0.5rem; border-bottom: 1px solid var(--border-light); }
+        .queue-table tr:hover { background: var(--bg-hover); cursor: pointer; }
+
+        .badge { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600;
+                 display: inline-block; }
+        .badge-pending { background: #fef3c7; color: #92400e; }
+        .badge-sending { background: #dbeafe; color: #1e40af; }
+        .badge-stamped { background: #dcfce7; color: #166534; }
+        .badge-failed { background: #fee2e2; color: #991b1b; }
+        .badge-cancelled { background: #f3f4f6; color: #6b7280; }
+
+        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+                         background: rgba(0,0,0,0.5); z-index: 1000; align-items: center;
+                         justify-content: center; }
+        .modal-overlay.active { display: flex; }
+        .modal { background: var(--bg); padding: 1.5rem; border-radius: 8px; width: 90%;
+                 max-width: 700px; max-height: 80vh; overflow-y: auto; }
+        .modal h3 { margin-top: 0; }
+
+        .xml-preview { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 6px;
+                       font-family: monospace; font-size: 0.8rem; white-space: pre-wrap;
+                       word-break: break-all; max-height: 300px; overflow-y: auto; }
+
+        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
+        .detail-item { padding: 0.5rem; background: var(--bg-subtle); border-radius: 4px; }
+        .detail-item label { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
+        .detail-item span { font-size: 0.95rem; }
+
+        .form-group { margin-bottom: 0.75rem; }
+        .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
+                            margin-bottom: 0.25rem; }
+        .form-group select, .form-group input { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border);
+                                                border-radius: 4px; font-size: 0.9rem; }
+
+        .stats { display: flex; gap: 1rem; margin-bottom: 1rem; }
+        .stat-card { background: var(--bg-subtle); padding: 0.75rem 1rem; border-radius: 6px; flex: 1;
+                     text-align: center; }
+        .stat-card .number { font-size: 1.5rem; font-weight: 700; }
+        .stat-card .label { font-size: 0.8rem; color: var(--text-muted); }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Facturacion CFDI</h1>
+            <div style="display:flex;gap:0.5rem;">
+                <button class="btn btn-primary" onclick="Invoicing.processQueue()">Procesar Cola</button>
+                <a href="/pos/sale" class="btn btn-secondary">POS</a>
+                <a href="/pos/accounting" class="btn btn-secondary">Contabilidad</a>
+            </div>
+        </div>
+
+        <!-- Stats -->
+        <div class="stats" id="queue-stats"></div>
+
+        <!-- Filters -->
+        <div class="queue-filters">
+            <select id="filter-status">
+                <option value="">Todos los estados</option>
+                <option value="pending">Pendiente</option>
+                <option value="sending">Enviando</option>
+                <option value="stamped">Timbrado</option>
+                <option value="failed">Fallido</option>
+                <option value="cancelled">Cancelado</option>
+            </select>
+            <select id="filter-type">
+                <option value="">Todos los tipos</option>
+                <option value="ingreso">Ingreso</option>
+                <option value="egreso">Egreso</option>
+                <option value="pago">Pago</option>
+            </select>
+            <button class="btn btn-secondary" onclick="Invoicing.loadQueue()">Filtrar</button>
+        </div>
+
+        <!-- Queue List -->
+        <div id="queue-list"></div>
+        <div id="queue-pagination"></div>
+    </div>
+
+    <!-- Detail Modal -->
+    <div class="modal-overlay" id="detail-modal">
+        <div class="modal">
+            <div id="detail-content"></div>
+            <div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1rem;">
+                <button class="btn btn-secondary" onclick="Invoicing.closeModal('detail-modal')">Cerrar</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Cancel Modal -->
+    <div class="modal-overlay" id="cancel-modal">
+        <div class="modal">
+            <h3>Cancelar CFDI</h3>
+            <input type="hidden" id="cancel-cfdi-id">
+            <div class="form-group">
+                <label>Motivo de cancelacion (SAT)</label>
+                <select id="cancel-motive" onchange="Invoicing.onMotiveChange()">
+                    <option value="">Seleccionar motivo</option>
+                    <option value="01">01 - Con relacion (requiere UUID sustituto)</option>
+                    <option value="02">02 - Sin relacion</option>
+                    <option value="03">03 - No se llevo a cabo la operacion</option>
+                    <option value="04">04 - Operacion nominativa en factura global</option>
+                </select>
+            </div>
+            <div class="form-group" id="replacement-uuid-group" style="display:none;">
+                <label>UUID del CFDI sustituto</label>
+                <input type="text" id="cancel-replacement-uuid" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
+            </div>
+            <div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1rem;">
+                <button class="btn btn-secondary" onclick="Invoicing.closeModal('cancel-modal')">Cancelar</button>
+                <button class="btn btn-danger" onclick="Invoicing.confirmCancel()">Confirmar Cancelacion</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="/pos/static/js/invoicing.js"></script>
+</body>
+</html>