diff --git a/docs/design/design-system/components/arbol-colapsable.html b/docs/design/design-system/components/arbol-colapsable.html new file mode 100644 index 0000000..019883e --- /dev/null +++ b/docs/design/design-system/components/arbol-colapsable.html @@ -0,0 +1,606 @@ + + + + + + Nexus Autoparts — Árbol Colapsable + + + + +
+ + +
+ +

Árbol Colapsable

+

Catálogo de cuentas SAT con estructura jerárquica colapsable

+ +
+

Catálogo de Cuentas

+ +
+ + +
+ +
+
+ Cuenta + Saldo +
+ + +
+
+ ▶ + 1000 + Activo (3) + $1,245,800.00 +
+
+ +
+
+ ▶ + 1100 + Bancos (3) + $485,320.00 +
+
+
+
+ ▶ + 1101 + Banamex Cta. 7845 + $198,450.00 +
+
+
+
+ ▶ + 1102 + BBVA Cta. 3021 + $245,870.00 +
+
+
+
+ ▶ + 1103 + Banorte Cta. 5590 + $41,000.00 +
+
+
+
+ +
+
+ ▶ + 1200 + Inventarios (2) + $628,480.00 +
+
+
+
+ ▶ + 1201 + Almacén General + $520,300.00 +
+
+
+
+ ▶ + 1202 + Mercancía en Tránsito + $108,180.00 +
+
+
+
+ +
+
+ ▶ + 1300 + Cuentas por Cobrar (2) + $132,000.00 +
+
+
+
+ ▶ + 1301 + Clientes Nacionales + $118,500.00 +
+
+
+
+ ▶ + 1302 + Deudores Diversos + $13,500.00 +
+
+
+
+
+
+ + +
+
+ ▶ + 2000 + Pasivo (2) + $389,200.00 +
+
+
+
+ ▶ + 2100 + Proveedores (2) + $285,000.00 +
+
+
+
+ ▶ + 2101 + Proveedores Nacionales + $245,000.00 +
+
+
+
+ ▶ + 2102 + Proveedores Extranjeros + $40,000.00 +
+
+
+
+
+
+ ▶ + 2200 + Impuestos por Pagar (2) + $104,200.00 +
+
+
+
+ ▶ + 2201 + IVA Trasladado + $72,200.00 +
+
+
+
+ ▶ + 2202 + ISR por Pagar + $32,000.00 +
+
+
+
+
+
+ + +
+
+ ▶ + 3000 + Capital (2) + $500,000.00 +
+
+
+
+ ▶ + 3100 + Capital Social + $350,000.00 +
+
+
+
+ ▶ + 3200 + Utilidades Acumuladas + $150,000.00 +
+
+
+
+ + +
+
+ ▶ + 4000 + Ingresos (2) + $892,450.00 +
+
+
+
+ ▶ + 4100 + Ventas (2) + $845,200.00 +
+
+
+
+ ▶ + 4101 + Ventas Mostrador + $562,800.00 +
+
+
+
+ ▶ + 4102 + Ventas a Crédito + $282,400.00 +
+
+
+
+
+
+ ▶ + 4200 + Otros Ingresos + $47,250.00 +
+
+
+
+ + +
+
+ ▶ + 5000 + Gastos (2) + $536,050.00 +
+
+
+
+ ▶ + 5100 + Costo de Ventas (1) + $421,500.00 +
+
+
+
+ ▶ + 5101 + Costo Mercancía Vendida + $421,500.00 +
+
+
+
+
+
+ ▶ + 5200 + Gastos de Operación (3) + $114,550.00 +
+
+
+
+ ▶ + 5201 + Sueldos y Salarios + $68,000.00 +
+
+
+
+ ▶ + 5202 + Renta Local + $28,000.00 +
+
+
+
+ ▶ + 5203 + Servicios (Luz, Tel, Internet) + $18,550.00 +
+
+
+
+
+
+ + +
+ Total Activos - Pasivos + $856,600.00 +
+
+
+ + + + \ No newline at end of file diff --git a/docs/design/design-system/components/badge-cfdi.html b/docs/design/design-system/components/badge-cfdi.html new file mode 100644 index 0000000..6ef0f60 --- /dev/null +++ b/docs/design/design-system/components/badge-cfdi.html @@ -0,0 +1,353 @@ + + + + + + Nexus Autoparts — Badge CFDI + + + + +
+ + +
+ +

Badge CFDI

+

Indicadores de estatus para comprobantes fiscales digitales (CFDI)

+ + +
+

Variantes de Badge

+
+ Pendiente + Enviando + Timbrada + Fallida + Cancelada +
+
+ + +
+

Tamaño Grande

+
+ Pendiente + Enviando + Timbrada + Fallida + Cancelada +
+
+ + +
+

Leyenda

+
+
Pendiente Generada, sin enviar al PAC
+
Enviando En proceso de timbrado
+
Timbrada Timbrada correctamente por el SAT
+
Fallida Error al timbrar
+
Cancelada Cancelada ante el SAT
+
+
+ + +
+

En Contexto: Lista de CFDI

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FolioClienteUUIDFechaTotalEstatus
FA-00142Taller Hermanos Lópeza8d2e1f4-3b7c-...01/Abr/2026$18,450.00Timbrada
FA-00141Roberto Méndez G.c3f1a902-7d4e-...01/Abr/2026$4,828.50Enviando
FA-00140Auto Partes del Norte SA--31/Mar/2026$32,100.00Pendiente
FA-00139María Elena Ríosf7e2d301-1a9b-...30/Mar/2026$1,250.00Timbrada
FA-00138Servicio Automotriz Reyesb1c4d5e6-8f2a-...29/Mar/2026$7,680.00Fallida
FA-00137Transportes Garzae9a8b7c6-5d4f-...28/Mar/2026$55,200.00Cancelada
FA-00136Refaccionaria Centrald2f3e4a5-6b7c-...27/Mar/2026$9,320.00Timbrada
+
+ + \ No newline at end of file diff --git a/docs/design/design-system/components/banner-cliente.html b/docs/design/design-system/components/banner-cliente.html new file mode 100644 index 0000000..d174201 --- /dev/null +++ b/docs/design/design-system/components/banner-cliente.html @@ -0,0 +1,379 @@ + + + + + + Nexus Autoparts — Banner Cliente + + + + + +
+ + +
+ +

Banner Cliente

+

Información inline del cliente seleccionado en el panel derecho del POS.

+ + + + +
+

Variantes del Banner

+ +
+ + +
+

Cliente con crédito disponible

+
+
Panel de Venta
+ +
+
+ + +
+

Cliente con crédito bajo

+
+
Panel de Venta
+ + +
+
+ + +
+

Cliente sin crédito (público general)

+
+
Panel de Venta
+ +
+
+ + +
+

Sin cliente seleccionado

+
+
Panel de Venta
+ +
+
+ + +
+

Versión compacta (panel angosto)

+
+
Panel de Venta — Compacto
+ +
+
+ +
+
+ + + + diff --git a/docs/design/design-system/components/banner-offline.html b/docs/design/design-system/components/banner-offline.html new file mode 100644 index 0000000..79cfc46 --- /dev/null +++ b/docs/design/design-system/components/banner-offline.html @@ -0,0 +1,394 @@ + + + + + + Nexus Autoparts — Banner Offline + + + + +
+ + +
+

Banner Offline

+

Banners de estado de conexión: advertencia, error y reconexión exitosa.

+ + +
+

Demo interactivo

+

+ Haz clic en los botones para mostrar cada variante. Los banners se pueden cerrar con el botón × o simulan auto-dismiss. +

+
+ + + + +
+
+
+ + +
+

Variantes estáticas

+ + +
+ a) Warning — Modo offline + +
+ + +
+ b) Error — Conexión perdida + +
+ + +
+ c) Success — Conexión restaurada (auto-dismiss) + +
+
+ + +
+

Uso en contexto: Header de aplicación

+
+
+
+
+
+ Nexus Autoparts POS +
+
+ +
+

Contenido de la aplicación debajo del banner...

+
+
+
+
+ + + + diff --git a/docs/design/design-system/components/calculadora-cambio.html b/docs/design/design-system/components/calculadora-cambio.html new file mode 100644 index 0000000..1b3164c --- /dev/null +++ b/docs/design/design-system/components/calculadora-cambio.html @@ -0,0 +1,404 @@ + + + + + + Nexus Autoparts — Calculadora de Cambio + + + + +
+ + +
+ +

Calculadora de Cambio

+

Calcula el cambio a devolver al cliente en tiempo real

+ +
+
+ +
+ Total a cobrar + $4,828.50 +
+ + +
+ +
+ $ + +
+
+ + +
+ + + + + +
+ + +
+
Cambio
+
Ingrese monto
+
+ + +
+
Desglose sugerido
+
+
+
+
+ + + + \ No newline at end of file diff --git a/docs/design/design-system/components/columnas-costo-margen.html b/docs/design/design-system/components/columnas-costo-margen.html new file mode 100644 index 0000000..ccaa450 --- /dev/null +++ b/docs/design/design-system/components/columnas-costo-margen.html @@ -0,0 +1,507 @@ + + + + + + Nexus Autoparts — Columnas Costo y Margen + + + + + +
+ + +
+ +

Columnas Costo y Margen

+

2 columnas extra en la tabla de venta, visibles solo con permiso Admin/Owner. Costo unitario + Margen % con color semántico.

+ + + + +
+

Tabla de Venta — Columnas Visibles (Admin/Owner)

+ +
+ + + Admin + Owner +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#ProductoCantidadP. UnitarioCosto Unit.MargenImporte
1 +
+ Balatas cerám. del. Brembo P68034 + BRM-P68034 +
+ 		+
+ + 2 + +
+ 		$1,250.00$720.00 +
+ 42.4% +
+
+ 		$2,500.00
2 +
+ Filtro aceite Wix WL7200 + WIX-7200 +
+ 		+
+ + 1 + +
+ 		$185.00$138.00 +
+ 25.4% +
+
+ 		$185.00
3 +
+ Amortiguador tras. Monroe OESpec 72364 + MON-72364 +
+ 		+
+ + 2 + +
+ 		$1,071.25$950.00 +
+ 11.3% +
+
+ 		$2,142.50
4 +
+ Aceite Motor Mobil 1 5W-30 Sintético 5L + MOB-5W30-5L +
+ 		+
+ + 1 + +
+ 		$890.00$520.00 +
+ 41.6% +
+
+ 		$890.00
5 artículos, 6 piezasSubtotal: + $4,098.00 + + + Promedio: 32.8% + + $5,717.50
+
+ + +
+
+ + Verde: margen > 30% +
+
+ + Amarillo: margen 15% – 30% +
+
+ + Rojo: margen < 15% +
+
+
+ + + + +
+

Variantes del Badge de Margen

+

Los 3 niveles de color semántico

+ +
+
+

Alto (>30%)

+
+ 42.4% +
+
+
+
+

Medio (15-30%)

+
+ 25.4% +
+
+
+
+

Bajo (<15%)

+
+ 11.3% +
+
+
+
+

Negativo

+
+ -5.2% +
+
+
+
+
+ + + + diff --git a/docs/design/design-system/components/estado-vacio.html b/docs/design/design-system/components/estado-vacio.html new file mode 100644 index 0000000..5860a4d --- /dev/null +++ b/docs/design/design-system/components/estado-vacio.html @@ -0,0 +1,297 @@ + + + + + + Nexus Autoparts — Estado Vacío + + + + +
+ + +
+

Estado Vacío

+

Componente reutilizable para estados vacíos en tablas, cards y páginas completas.

+ + +
+

Variantes

+
+ + +
+ a) Sin productos +
+
📦
+
No se encontraron productos
+
Intenta con otro término de búsqueda
+ +
+
+ + +
+ b) Sin ventas +
+
🧾
+
No hay ventas registradas hoy
+
Las ventas aparecerán aquí conforme se realicen
+
+
+ + +
+ c) Sin resultados +
+
🔍
+
Sin resultados para 'BAL-2847'
+
Verifica el número de parte o nombre
+ +
+
+ + +
+ d) Sin conexión +
+
📡
+
Sin conexión al servidor
+
Verifica tu conexión a internet
+ +
+
+ +
+
+ + +
+

Uso en contexto: Dentro de tabla

+
+
+ Producto + No. Parte + Stock + Precio +
+
+
+
🔍
+
Sin resultados para 'xyz'
+
Verifica el número de parte o nombre
+ +
+
+
+
+ + +
+

Uso en contexto: Dentro de card

+
+
+ Ventas del día + 01 Abr 2026 +
+
+
+
🧾
+
No hay ventas registradas hoy
+
Las ventas aparecerán aquí conforme se realicen
+
+
+
+
+ + + diff --git a/docs/design/design-system/components/etiqueta-codigo-barras.html b/docs/design/design-system/components/etiqueta-codigo-barras.html new file mode 100644 index 0000000..24986c3 --- /dev/null +++ b/docs/design/design-system/components/etiqueta-codigo-barras.html @@ -0,0 +1,341 @@ + + + + + + Nexus Autoparts — Etiqueta Código de Barras + + + + +
+ + +
+ +

Etiqueta Código de Barras

+

Etiquetas para impresora de etiquetas. Fondo blanco fijo (para impresión). Tamaños estándar 50x25mm y 50x30mm.

+ +
+

Etiquetas 50x25mm

+
+
+ +
+

Etiquetas 50x30mm (con ubicación)

+
+
+ +
+

Acciones

+ +
+ Las etiquetas siempre se renderizan con fondo blanco y texto negro independientemente del tema activo. + El CSS @media print oculta la interfaz y deja solo las etiquetas para impresión directa. +
+
+ + + + diff --git a/docs/design/design-system/components/fkeys-footer.html b/docs/design/design-system/components/fkeys-footer.html new file mode 100644 index 0000000..4262f0e --- /dev/null +++ b/docs/design/design-system/components/fkeys-footer.html @@ -0,0 +1,338 @@ + + + + + + Nexus Autoparts — F-Keys Footer + + + + + +
+ + +
+ +

F-Keys Footer

+

Barra fija inferior con atajos de teclado del POS: F1-F6, +/-, *, Esc.

+ + + + +
+

Barra Estándar (Fixed Bottom)

+

Preview inline — la barra real se muestra fija abajo de la página

+ +
+
+ F1 + Buscar +
+
+ F2 + Cliente +
+
+ F3 + Cobrar +
+
+ F4 + Cotización +
+
+
+ F5 + Últ.Venta +
+
+ F6 + Cajón +
+
+
+ +/- + Cantidad +
+
+ * + Descuento +
+
+
+ Esc + Cancelar +
+
+
+ + + + +
+

Variante Compacta

+

Para pantallas chicas o cuando se necesita más espacio

+ +
+
F1Buscar
+
F2Cliente
+
F3Cobrar
+
F4Cotización
+
F5Últ.Venta
+
F6Cajón
+
+/-Cant
+
*Desc
+
EscSalir
+
+
+ + + + +
+

Variante Extendida (Admin)

+

Teclas adicionales para rol Admin/Owner

+ +
+
F1Buscar
+
F2Cliente
+
F3Cobrar
+
F4Cotización
+
F5Últ.Venta
+
F6Cajón
+
+
F7Corte
+
F8Devolución
+
F9Inventario
+
+
+/-Cant
+
*Desc
+
EscCancelar
+
+
+ + + + +
+

Estados de Tecla

+

Normal, hover, active, highlight, disabled

+ +
+
+

Normal

+
F1Buscar
+
+
+

Highlight (primary action)

+
F3Cobrar
+
+
+

Disabled

+
+ F8Devolución +
+
+
+
+ + +
+
F1Buscar
+
F2Cliente
+
F3Cobrar
+
F4Cotización
+
+
F5Últ.Venta
+
F6Cajón
+
+
+/-Cantidad
+
*Descuento
+
+
EscCancelar
+
+ + + + diff --git a/docs/design/design-system/components/grafica-barras.html b/docs/design/design-system/components/grafica-barras.html new file mode 100644 index 0000000..e93ed1e --- /dev/null +++ b/docs/design/design-system/components/grafica-barras.html @@ -0,0 +1,358 @@ + + + + + + Nexus Autoparts — Gráfica de Barras + + + + +
+ + +
+ +

Gráfica de Barras

+

Gráfica de barras verticales pura CSS/JS. Animación al cargar, tooltips al hover.

+ +
+

Ventas Semanales

+
+
Ventas por Día
+
Semana del 24 al 30 de marzo 2026
+ +
+
+
+
+
+
+
+
+ +
+
+
Total semanal
+
+
+
Promedio diario:
+
+
+
+ + + + diff --git a/docs/design/design-system/components/modal-confirmacion.html b/docs/design/design-system/components/modal-confirmacion.html new file mode 100644 index 0000000..a21bef2 --- /dev/null +++ b/docs/design/design-system/components/modal-confirmacion.html @@ -0,0 +1,477 @@ + + + + + + Nexus Autoparts — Modal de Confirmación + + + + +
+ + +
+

Modal de Confirmación

+

Diálogos modales para confirmar acciones destructivas o importantes del sistema POS.

+ + +
+

Demo interactivo — Abrir modales

+
+ +
+ a) Cancelar venta +

Confirma antes de descartar una venta en curso

+ +
+ +
+ b) Cerrar caja +

Genera corte de caja al final del turno

+ +
+ +
+ c) Ajustar stock +

Ajusta inventario de múltiples artículos

+ +
+ +
+ d) Cerrar periodo +

Cierra periodo fiscal contable

+ +
+ +
+
+ + +
+

Variantes estáticas

+
+ +
+ a) Cancelar venta +
+
⚠️
+
¿Cancelar venta?
+
Se perderán los artículos agregados al ticket actual.
+
+ + +
+
+
+ +
+ b) Cerrar caja +
+
ℹ️
+
¿Cerrar caja?
+
Se generará el corte de caja con total $15,800.00
+
+ + +
+
+
+ +
+ c) Ajustar stock +
+
⚠️
+
¿Ajustar stock?
+
Se ajustarán 5 artículos del inventario. Esta acción no se puede deshacer.
+
+ + +
+
+
+ +
+ d) Cerrar periodo fiscal +
+
🛑
+
¿Cerrar periodo fiscal?
+
Se cerrará el periodo Marzo 2026. No podrás registrar pólizas en este periodo.
+
+ + +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/design/design-system/components/modal-pago.html b/docs/design/design-system/components/modal-pago.html new file mode 100644 index 0000000..6677a0d --- /dev/null +++ b/docs/design/design-system/components/modal-pago.html @@ -0,0 +1,555 @@ + + + + + + Nexus Autoparts — Modal de Pago + + + + + +
+ + +
+ +

Modal de Pago

+

Componente de cobro con 4 métodos: Efectivo, Transferencia, Tarjeta, Mixto.

+ + + + +
+

Vista Completa del Modal

+

Preview interactivo — haz click en las tabs para cambiar de método

+ +
+ +
+

Cobrar Venta

+ +
+ + +
+ Total a Cobrar + $4,827.50 +
+ + +
+ 3 productos + • + Cliente: Taller Automotriz García + • + Folio: V-2026-0847 +
+ + +
+ + + + +
+ + +
+
+ + +
+
+ + + + +
+
+ Cambio + $172.50 +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
Verificar que la transferencia se haya recibido antes de confirmar
+
+
⏳ Pendiente de confirmación
+
+
+ + +
+
+ + +
+
+ +
+
+
Terminal 1
+
Clip Pro — Visa/MC
+
+
+
Terminal 2
+
Banorte TPV — Todas
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+
+
+ Restante por asignar: + $0.00 +
+
+ + +
+
+ + +
+ + + RFC: TAU150301XX1 — Régimen: 601 +
+ + +
+ + +
+
+
+ + + + +
+

Estados del Cambio

+

Indicador visual de cambio positivo, exacto y faltante

+
+
+ Cambio + $172.50 +
+
+ Cambio + $0.00 +
+
+ Faltante + -$327.50 +
+
+
+ + + + +
+

Estados de Transferencia

+
+
⏳ Pendiente de confirmación
+
✅ Transferencia confirmada
+
+
+ + + + diff --git a/docs/design/design-system/components/panel-deslizante.html b/docs/design/design-system/components/panel-deslizante.html new file mode 100644 index 0000000..1cc04ad --- /dev/null +++ b/docs/design/design-system/components/panel-deslizante.html @@ -0,0 +1,560 @@ + + + + + + Nexus Autoparts — Panel Deslizante + + + + +
+ + +
+ +

Panel Deslizante

+

Panel lateral que se desliza desde la derecha con detalle de cliente

+ +
+

Contexto: Lista de Clientes

+

+ Haz clic en un nombre para abrir el panel deslizante. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClienteRFCSaldoVehículos
Roberto Méndez GutiérrezMEGR820415QR3$12,450.003
Taller Mecánico Hermanos LópezTHL950220MN8$28,900.00--
María Elena RíosRIEM770903AB1$0.001
+ + +
+ + +
+ + +
+
+

Detalle de Cliente

+ +
+ +
+ +
+
RM
+
+
Roberto Méndez Gutiérrez
+
RFC: MEGR820415QR3
+
+
+ + +
+
Crédito
+
+
+
Límite
+
$50,000
+
+
+
Utilizado
+
$12,450
+
+
+
Disponible
+
$37,550
+
+
+
+
+
+
+ + +
+
Vehículos Registrados
+
+
🚗
+
+
Nissan Sentra 2019
+
JKL-4521 / Motor: MR20DE
+
+
+
+
🛻
+
+
Toyota Hilux 2021
+
ABC-7890 / Motor: 2GD-FTV
+
+
+
+
🚗
+
+
VW Jetta 2017
+
MNO-1234 / Motor: EA211
+
+
+
+ + +
+
Compras Recientes
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FechaFolioTotal
28/Mar/2026V-04521$3,240.00
15/Mar/2026V-04389$1,890.50
02/Mar/2026V-04210$5,620.00
18/Feb/2026V-04098$780.00
05/Feb/2026V-03955$2,410.00
+
+
+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/docs/design/design-system/components/selector-periodo.html b/docs/design/design-system/components/selector-periodo.html new file mode 100644 index 0000000..e3fea40 --- /dev/null +++ b/docs/design/design-system/components/selector-periodo.html @@ -0,0 +1,414 @@ + + + + + + Nexus Autoparts — Selector de Período + + + + +
+ + +
+ +

Selector de Período

+

Controles para seleccionar períodos de reporte: mes/año, presets rápidos y rango de fechas.

+ + +
+

Selector por Mes y Año

+
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+
+ Período seleccionado: Abril 2026 +
+
+ + +
+

Presets Rápidos

+
+
+ + + + +
+
+ Período: Abril 2026 (Este mes) +
+
+
+ + +
+

Rango de Fechas

+
+
+ + +
+ — +
+ + +
+ + +
+
+ Rango: 01/04/2026 — 30/04/2026 (30 días) +
+
+ + +
+

Variante Compacta (Inline)

+

+ Para uso en headers de tablas o secciones con espacio reducido. +

+
+
+ +
+
+ +
+ +
+
+ + + + diff --git a/docs/design/design-system/components/tarjeta-metrica.html b/docs/design/design-system/components/tarjeta-metrica.html new file mode 100644 index 0000000..4b5e628 --- /dev/null +++ b/docs/design/design-system/components/tarjeta-metrica.html @@ -0,0 +1,283 @@ + + + + + + Nexus Autoparts — Tarjeta Métrica + + + + +
+ + +
+ +

Tarjeta Métrica

+

Tarjetas de KPI con valor principal, tendencia y barra de progreso vs meta.

+ +
+

Dashboard de Ventas

+
+ + +
+
💰
+
+ $48,250 + ▲ 12.5% +
+
Ventas Hoy
+
+
+ Meta diaria + 85% +
+
+
+
+
+
+ + +
+
🧾
+
+ $1,285 + ▲ 3.2% +
+
Ticket Promedio
+
+
+ Meta $1,500 + 86% +
+
+
+
+
+
+ + +
+
📊
+
+ 32.4% + ▼ 1.8% +
+
Margen Promedio
+
+
+ Meta 35% + 93% +
+
+
+
+
+
+ + +
+
🏦
+
+ $15,800 + ▲ 8.7% +
+
Efectivo en Caja
+
+
+ Corte anterior + 105% +
+
+
+
+
+
+ +
+
+ + + + diff --git a/docs/design/design-system/components/ticket-termico.html b/docs/design/design-system/components/ticket-termico.html new file mode 100644 index 0000000..0ca3988 --- /dev/null +++ b/docs/design/design-system/components/ticket-termico.html @@ -0,0 +1,544 @@ + + + + + + Nexus Autoparts — Ticket Térmico + + + + + +
+ + +
+ +

Ticket Térmico

+

Layout de impresión para rollos de 58mm y 80mm. Fuente monoespaciada, CSS @media print.

+ + + + + + +
+

Comparativa: 58mm vs 80mm

+

Ambos formatos con los mismos datos de venta

+ +
+ +
+
58mm (Mini Printer)
+
+
NEXUS AUTOPARTS
+
Tu conexión con las refacciones
+
+ Av. Insurgentes Sur 1234
+ Col. Del Valle, CDMX 03100
+ Tel: (55) 1234-5678
+ RFC: NAU210315XX1 +
+ +
+ +
+ VENTA: V-0847 + 01/04/2026 +
+
+ Cajero: Carlos M. + 14:32 +
+ +
+ + +
+
Balatas cer. del. Brembo
+
SKU: BRM-P68034
+
+ 2 x $1,250.00 + $2,500.00 +
+
+ +
+
Filtro aceite Wix WL7200
+
SKU: WIX-7200
+
+ 1 x $185.00 + $185.00 +
+
+ +
+
Amort. trasero Monroe OESpec
+
SKU: MON-72364
+
+ 2 x $1,071.25 + $2,142.50 +
+
+ +
+ + +
+
+ Subtotal:$4,161.64 +
+
+ IVA 16%:$665.86 +
+
+ TOTAL:$4,827.50 +
+
+ +
+ + +
+
+ Forma pago:Efectivo +
+
+ Recibido:$5,000.00 +
+
+ Cambio:$172.50 +
+
+ +
+ +
+
¡Gracias por su compra!
+
Garantía sujeta a condiciones
+
del fabricante. Conserve su ticket.
+
www.nexusautoparts.com
+
+ +
||||| |||| |||||
+
V-2026-0847
+
+
+ + +
+
80mm (Standard POS)
+
+
NEXUS AUTOPARTS
+
Tu conexión con las refacciones
+
+ Av. Insurgentes Sur 1234, Col. Del Valle
+ Ciudad de México, CP 03100 | Tel: (55) 1234-5678
+ RFC: NAU210315XX1 +
+ +
+ +
+ VENTA: V-2026-0847 + 01/Abr/2026 14:32 +
+
+ Cajero: Carlos Martínez + Sucursal: Matriz +
+
+ Cliente: Taller Automotriz García + RFC: TAU150301XX1 +
+ +
+ + +
+ Cant + Descripción + P. Unit + Importe +
+
+ + +
+ 2 + Balatas cerám. del. Brembo P68034 + $1,250.00 + $2,500.00 +
+
+ 1 + Filtro aceite Wix WL7200 + $185.00 + $185.00 +
+
+ 2 + Amortiguador tras. Monroe OESpec 72364 + $1,071.25 + $2,142.50 +
+ +
+ + +
+
+ Subtotal (3 artículos, 5 piezas):$4,161.64 +
+
+ IVA 16%:$665.86 +
+
+ Descuento:$0.00 +
+
+ TOTAL:$4,827.50 +
+
+ +
+ + +
+
+ Forma de pago:01 — Efectivo +
+
+ Monto recibido:$5,000.00 +
+
+ Cambio:$172.50 +
+
+ +
+ + +
+ CFDI Timbrado: UUID a1b2c3d4-e5f6-7890-abcd-ef1234567890
+ Uso CFDI: G03 — Gastos en general
+ Régimen: 601 — General de Ley +
+ +
+ +
+
¡Gracias por su compra!
+
Garantía sujeta a condiciones del fabricante.
+
Conserve su ticket como comprobante.
+
Cambios y devoluciones: 15 días con ticket.
+
www.nexusautoparts.com
+
+ +
||||| |||| ||||| ||| ||||
+
V-2026-0847
+
+
+
+
+ + + + +
+

Variantes de Ticket

+

Cotización y Corte de Caja

+ +
+ +
+
Cotización (80mm)
+
+
NEXUS AUTOPARTS
+
Av. Insurgentes Sur 1234 | Tel: (55) 1234-5678
+
+
+ *** COTIZACIÓN *** +
+
+ COT-2026-0312 + 01/Abr/2026 +
+
+ Cliente: Taller Automotriz García | Vigencia: 7 días +
+
+
+ CantDescripción + P. UnitImporte +
+
+
+ 2Balatas cerám. del. Brembo + $1,250.00$2,500.00 +
+
+ 1Filtro aceite Wix WL7200 + $185.00$185.00 +
+
+
+ TOTAL:$2,685.00 +
+
+ Precios sujetos a cambio sin previo aviso.
+ Esta cotización NO es un comprobante fiscal. +
+
+
+ + +
+
Corte de Caja (80mm)
+
+
NEXUS AUTOPARTS
+
Sucursal: Matriz | Caja: 01
+
+
+ *** CORTE DE CAJA *** +
+
+ Cajero: Carlos M. + 01/Abr/2026 +
+
+ Apertura: 08:00 | Cierre: 20:00 +
+
+
RESUMEN DE VENTAS
+
Ventas realizadas:47
+
Artículos vendidos:128
+
Cancelaciones:2
+
Devoluciones:1
+
+
FORMAS DE PAGO
+
Efectivo:$35,420.00
+
Tarjeta crédito:$12,850.00
+
Tarjeta débito:$8,200.00
+
Transferencia:$5,670.00
+
+
TOTAL:$62,140.00
+
+
EFECTIVO EN CAJA
+
Fondo apertura:$3,000.00
+
+ Cobros efectivo:$35,420.00
+
- Retiros:$15,000.00
+
Debe haber:$23,420.00
+
Conteo físico:$23,380.00
+
Diferencia:-$40.00
+
+
+
+ Firma cajero: _______________

+ Firma supervisor: _______________ +
+
+
+
+
+
+ + + + diff --git a/docs/design/design-system/pages/clientes.html b/docs/design/design-system/pages/clientes.html index 18d81fc..7b894e0 100644 --- a/docs/design/design-system/pages/clientes.html +++ b/docs/design/design-system/pages/clientes.html @@ -188,7 +188,7 @@ ===================================================================== */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; diff --git a/docs/design/design-system/pages/configuracion.html b/docs/design/design-system/pages/configuracion.html index 963ed7b..c9c91a2 100644 --- a/docs/design/design-system/pages/configuracion.html +++ b/docs/design/design-system/pages/configuracion.html @@ -169,7 +169,7 @@ ========================================================================= */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; diff --git a/docs/design/design-system/pages/contabilidad.html b/docs/design/design-system/pages/contabilidad.html index 34ec9bd..8938db0 100644 --- a/docs/design/design-system/pages/contabilidad.html +++ b/docs/design/design-system/pages/contabilidad.html @@ -169,7 +169,7 @@ ========================================================================= */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; diff --git a/docs/design/design-system/pages/dashboard.html b/docs/design/design-system/pages/dashboard.html index 073b656..e896135 100644 --- a/docs/design/design-system/pages/dashboard.html +++ b/docs/design/design-system/pages/dashboard.html @@ -145,7 +145,7 @@ ========================================================================== */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; background-color: var(--color-bg-elevated); border-right: 1px solid var(--color-border); diff --git a/docs/design/design-system/pages/facturacion.html b/docs/design/design-system/pages/facturacion.html index 5f86d37..5b5981e 100644 --- a/docs/design/design-system/pages/facturacion.html +++ b/docs/design/design-system/pages/facturacion.html @@ -169,7 +169,7 @@ ========================================================================= */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; @@ -2573,6 +2573,131 @@ + + + + + + @@ -2633,6 +2758,28 @@ updateClock(); setInterval(updateClock, 1000); + + /* ------------------------------------------------------------------------- + MODAL HELPERS + ------------------------------------------------------------------------- */ + // Wire all XML buttons to open the detail modal + document.querySelectorAll('.btn--ghost').forEach(function(btn) { + if (btn.textContent.trim() === 'XML') { + btn.addEventListener('click', function() { + document.getElementById('modalDetalleOverlay').style.display = 'flex'; + }); + } + }); + + // Close modals on overlay click + ['modalDetalleOverlay', 'modalCancelOverlay'].forEach(function(id) { + var overlay = document.getElementById(id); + if (overlay) { + overlay.addEventListener('click', function(e) { + if (e.target === overlay) overlay.style.display = 'none'; + }); + } + }); diff --git a/docs/design/design-system/pages/inventario.html b/docs/design/design-system/pages/inventario.html index 2b395cc..e825ebb 100644 --- a/docs/design/design-system/pages/inventario.html +++ b/docs/design/design-system/pages/inventario.html @@ -169,7 +169,7 @@ ========================================================================= */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; diff --git a/docs/design/design-system/pages/login.html b/docs/design/design-system/pages/login.html index 47a619c..9dbf463 100644 --- a/docs/design/design-system/pages/login.html +++ b/docs/design/design-system/pages/login.html @@ -890,92 +890,8 @@
Seleccionar usuario
-
- - - - - - - - - - - - - +
+
@@ -1071,12 +987,61 @@ maxPinLength: 6, }; + /* ------------------------------------------------------------------ + EMPLEADOS DEL TENANT (dinámico — en producción viene de la API) + ------------------------------------------------------------------ */ + const tenantEmployees = [ + { id: 'JR', initials: 'JR', name: 'J. Ramírez', fullName: 'Jorge Ramírez', role: 'Vendedor' }, + { id: 'ML', initials: 'ML', name: 'M. López', fullName: 'María López', role: 'Cajero' }, + { id: 'AP', initials: 'AP', name: 'A. Peña', fullName: 'Alejandro Peña', role: 'Almacén' }, + { id: 'SC', initials: 'SC', name: 'S. Cruz', fullName: 'Sara Cruz', role: 'Supervisor' }, + { id: 'HG', initials: 'HG', name: 'H. García', fullName: 'Hugo García', role: 'Gerente' }, + { id: 'RT', initials: 'RT', name: 'R. Torres', fullName: 'Roberto Torres', role: 'Vendedor' }, + ]; + + function renderEmployees(employees) { + const grid = document.getElementById('users-grid'); + grid.innerHTML = employees.map(emp => ` + + `).join(''); + bindUserButtons(); + } + + function bindUserButtons() { + document.querySelectorAll('.user-avatar-btn').forEach(btn => { + btn.addEventListener('click', () => { + document.querySelectorAll('.user-avatar-btn').forEach(b => { + b.classList.remove('selected'); + b.setAttribute('aria-checked', 'false'); + }); + btn.classList.add('selected'); + btn.setAttribute('aria-checked', 'true'); + state.selectedUser = btn.dataset.user; + state.pin = []; + enablePinPad(); + updatePinDisplay(); + updateLoginButton(); + }); + }); + } + /* ------------------------------------------------------------------ DOM REFS ------------------------------------------------------------------ */ const html = document.documentElement; const themeBtns = document.querySelectorAll('.theme-btn'); - const userBtns = document.querySelectorAll('.user-avatar-btn'); const pinDisplay = document.getElementById('pin-display'); const pinPlaceholder = document.getElementById('pin-placeholder'); const pinDots = document.querySelectorAll('.pin-dot'); @@ -1105,28 +1070,9 @@ }); /* ------------------------------------------------------------------ - USER SELECTION + RENDER EMPLOYEES ON INIT ------------------------------------------------------------------ */ - userBtns.forEach(btn => { - btn.addEventListener('click', () => { - // Deselect all - userBtns.forEach(b => { - b.classList.remove('selected'); - b.setAttribute('aria-checked', 'false'); - }); - - // Select clicked - btn.classList.add('selected'); - btn.setAttribute('aria-checked', 'true'); - state.selectedUser = btn.dataset.user; - state.pin = []; - - // Enable PIN pad - enablePinPad(); - updatePinDisplay(); - updateLoginButton(); - }); - }); + renderEmployees(tenantEmployees); /* ------------------------------------------------------------------ PIN PAD LOGIC diff --git a/docs/design/design-system/pages/pos.html b/docs/design/design-system/pages/pos.html index 652e534..731da5e 100644 --- a/docs/design/design-system/pages/pos.html +++ b/docs/design/design-system/pages/pos.html @@ -804,6 +804,83 @@ color: var(--color-error); } + /* Columnas Costo/Margen (solo visibles con permiso Admin/Owner) */ + .cart-item__cost, + .cart-item__margin { + display: none; + font-family: var(--font-mono); + font-size: var(--text-caption); + text-align: right; + min-width: 56px; + flex-shrink: 0; + } + + .cart-item__cost { + color: var(--color-text-muted); + } + + .cart-item__margin { + font-weight: var(--font-weight-bold); + } + + .cart-item__margin.margin-high { color: var(--color-success); } + .cart-item__margin.margin-mid { color: var(--color-warning); } + .cart-item__margin.margin-low { color: var(--color-error); } + + /* When cost columns are visible */ + body.show-cost-columns .cart-item__cost, + body.show-cost-columns .cart-item__margin { + display: block; + } + + /* Margin footer summary */ + .margin-summary { + display: none; + padding: var(--space-2) var(--space-5); + border-top: 1px dashed var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + body.show-cost-columns .margin-summary { + display: flex; + justify-content: space-between; + } + + .margin-summary__value { + font-family: var(--font-mono); + font-weight: var(--font-weight-bold); + } + + /* Toggle button for cost columns */ + .cost-toggle { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-muted); + font-size: 10px; + font-family: var(--font-body); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-fast); + } + + .cost-toggle:hover { + border-color: var(--color-primary); + color: var(--color-text-accent); + } + + .cost-toggle.active { + background: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-text-accent); + } + /* Cart footer (totals + payment) */ .cart-footer { flex-shrink: 0; @@ -1423,6 +1500,7 @@
Venta #1247
+ Activa
@@ -1448,6 +1526,12 @@
+ +
+ Margen promedio ponderado: + -- +
+
@@ -1608,20 +1692,20 @@ DATA — Product catalogue ------------------------------------------------------------------ */ const PRODUCTS = [ - { id: 1, name: 'Balatas Delanteras', oem: 'TRW-GDB1246', price: 485.00, stock: 12, category: 'frenos', cat_label: 'Frenos' }, - { id: 2, name: 'Disco de Freno Ventilado',oem: 'BREMBO-09A388X',price: 1290.00, stock: 4, category: 'frenos', cat_label: 'Frenos' }, - { id: 3, name: 'Cilindro de Rueda', oem: 'LPR-4502', price: 320.00, stock: 7, category: 'frenos', cat_label: 'Frenos' }, - { id: 4, name: 'Bujía Iridium NGK', oem: 'NGK-ILKAR7L11', price: 185.00, stock: 48, category: 'motor', cat_label: 'Motor' }, - { id: 5, name: 'Empaque de Culata', oem: 'VICTOR-R10154', price: 890.00, stock: 2, category: 'motor', cat_label: 'Motor' }, - { id: 6, name: 'Correa de Distribución', oem: 'GATES-T236', price: 650.00, stock: 9, category: 'motor', cat_label: 'Motor' }, - { id: 7, name: 'Filtro de Aire Fram', oem: 'FRAM-CA10755', price: 195.00, stock: 23, category: 'filtros', cat_label: 'Filtros' }, - { id: 8, name: 'Filtro de Aceite Bosch', oem: 'BOSCH-0986AF10',price: 145.00, stock: 31, category: 'filtros', cat_label: 'Filtros' }, - { id: 9, name: 'Aceite Mobil 5W-30 1L', oem: 'MOBIL-5W30-1L', price: 210.00, stock: 64, category: 'aceites', cat_label: 'Aceites' }, - { id: 10, name: 'Aceite Pennzoil 10W-40', oem: 'PZ-10W40-1L', price: 175.00, stock: 50, category: 'aceites', cat_label: 'Aceites' }, - { id: 11, name: 'Amortiguador Delantero', oem: 'KYB-339123', price: 1450.00, stock: 3, category: 'suspension', cat_label: 'Suspensión'}, - { id: 12, name: 'Rótula de Dirección', oem: 'MOOG-K9648', price: 560.00, stock: 6, category: 'suspension', cat_label: 'Suspensión'}, - { id: 13, name: 'Bobina de Encendido', oem: 'DELPHI-GN10570',price: 780.00, stock: 5, category: 'electrico', cat_label: 'Eléctrico' }, - { id: 14, name: 'Sensor de Oxígeno Denso', oem: 'DENSO-234-4127',price: 920.00, stock: 4, category: 'electrico', cat_label: 'Eléctrico' }, + { id: 1, name: 'Balatas Delanteras', oem: 'TRW-GDB1246', price: 485.00, cost: 290.00, stock: 12, category: 'frenos', cat_label: 'Frenos' }, + { id: 2, name: 'Disco de Freno Ventilado',oem: 'BREMBO-09A388X',price: 1290.00, cost: 820.00, stock: 4, category: 'frenos', cat_label: 'Frenos' }, + { id: 3, name: 'Cilindro de Rueda', oem: 'LPR-4502', price: 320.00, cost: 195.00, stock: 7, category: 'frenos', cat_label: 'Frenos' }, + { id: 4, name: 'Bujía Iridium NGK', oem: 'NGK-ILKAR7L11', price: 185.00, cost: 98.00, stock: 48, category: 'motor', cat_label: 'Motor' }, + { id: 5, name: 'Empaque de Culata', oem: 'VICTOR-R10154', price: 890.00, cost: 580.00, stock: 2, category: 'motor', cat_label: 'Motor' }, + { id: 6, name: 'Correa de Distribución', oem: 'GATES-T236', price: 650.00, cost: 390.00, stock: 9, category: 'motor', cat_label: 'Motor' }, + { id: 7, name: 'Filtro de Aire Fram', oem: 'FRAM-CA10755', price: 195.00, cost: 85.00, stock: 23, category: 'filtros', cat_label: 'Filtros' }, + { id: 8, name: 'Filtro de Aceite Bosch', oem: 'BOSCH-0986AF10',price: 145.00, cost: 68.00, stock: 31, category: 'filtros', cat_label: 'Filtros' }, + { id: 9, name: 'Aceite Mobil 5W-30 1L', oem: 'MOBIL-5W30-1L', price: 210.00, cost: 155.00, stock: 64, category: 'aceites', cat_label: 'Aceites' }, + { id: 10, name: 'Aceite Pennzoil 10W-40', oem: 'PZ-10W40-1L', price: 175.00, cost: 120.00, stock: 50, category: 'aceites', cat_label: 'Aceites' }, + { id: 11, name: 'Amortiguador Delantero', oem: 'KYB-339123', price: 1450.00, cost: 950.00, stock: 3, category: 'suspension', cat_label: 'Suspensión'}, + { id: 12, name: 'Rótula de Dirección', oem: 'MOOG-K9648', price: 560.00, cost: 320.00, stock: 6, category: 'suspension', cat_label: 'Suspensión'}, + { id: 13, name: 'Bobina de Encendido', oem: 'DELPHI-GN10570',price: 780.00, cost: 480.00, stock: 5, category: 'electrico', cat_label: 'Eléctrico' }, + { id: 14, name: 'Sensor de Oxígeno Denso', oem: 'DENSO-234-4127',price: 920.00, cost: 610.00, stock: 4, category: 'electrico', cat_label: 'Eléctrico' }, ]; /* ------------------------------------------------------------------ @@ -1857,6 +1941,8 @@ const p = getProduct(item.productId); if (!p) return ''; const lineTotal = p.price * item.qty; + const margin = p.cost ? ((p.price - p.cost) / p.price * 100) : 0; + const marginClass = margin > 30 ? 'margin-high' : margin > 15 ? 'margin-mid' : 'margin-low'; return `
@@ -1868,6 +1954,8 @@
${p.name}
${fmt(p.price)} c/u
+
${p.cost ? fmt(p.cost) : '—'}
+
${margin.toFixed(1)}%
${fmt(lineTotal)}
`; @@ -1890,8 +1978,41 @@ // disable cobrar if cart is empty $btnCobrar.disabled = state.cart.length === 0; + + // update weighted average margin + updateAvgMargin(); } + function updateAvgMargin() { + const $avg = document.getElementById('avgMargin'); + if (!$avg) return; + let totalRevenue = 0, totalCost = 0; + state.cart.forEach(item => { + const p = getProduct(item.productId); + if (p && p.cost) { + totalRevenue += p.price * item.qty; + totalCost += p.cost * item.qty; + } + }); + if (totalRevenue > 0) { + const avg = ((totalRevenue - totalCost) / totalRevenue * 100); + $avg.textContent = avg.toFixed(1) + '%'; + $avg.className = 'margin-summary__value ' + + (avg > 30 ? 'margin-high' : avg > 15 ? 'margin-mid' : 'margin-low'); + $avg.style.color = avg > 30 ? 'var(--color-success)' : avg > 15 ? 'var(--color-warning)' : 'var(--color-error)'; + } else { + $avg.textContent = '--'; + } + } + + /* ------------------------------------------------------------------ + COST/MARGIN TOGGLE (Admin/Owner only) + ------------------------------------------------------------------ */ + document.getElementById('costToggle').addEventListener('click', function() { + document.body.classList.toggle('show-cost-columns'); + this.classList.toggle('active'); + }); + /* ------------------------------------------------------------------ DISCOUNT INPUT ------------------------------------------------------------------ */ diff --git a/docs/design/design-system/pages/reportes.html b/docs/design/design-system/pages/reportes.html index ab4a887..7484802 100644 --- a/docs/design/design-system/pages/reportes.html +++ b/docs/design/design-system/pages/reportes.html @@ -165,7 +165,7 @@ ========================================================================= */ .sidebar { - width: 220px; + width: 260px; flex-shrink: 0; display: flex; flex-direction: column;