Files

consultoria-as 5fc47473b6 docs: add POS screen design guide for design team

10 screens, 20 reusable components, 6 states/variants,
CSS theme system. Complete wireframes and specifications
for each page, modal, and component.

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

2026-03-31 21:18:14 +00:00

20 KiB

Raw Blame History

Nexus POS — Guia de Pantallas para Equipo de Diseno

Fecha: 2026-03-27 Proyecto: Nexus Autoparts — Modulo POS + Inventario Tech: PWA instalable (HTML/CSS/JS) con CSS custom properties para theming

Resumen

10 pantallas a disenar (7 existentes + 3 pendientes)
15 componentes reutilizables
6 estados/variantes por pantalla
Sistema de temas via CSS variables (cada cliente puede tener su propio tema)

1. Pantallas Existentes (redisenar)

Archivo: login.html Usuarios: Todos los empleados Dispositivo: Desktop + tablet

Descripcion: Pantalla de entrada al sistema. El empleado ingresa un PIN de 4 digitos para identificarse. No hay usuario/contrasena — solo PIN.

Elementos:

Logo del negocio (configurable por tenant)
Titulo "Nexus POS" (o nombre del negocio)
Subtitulo "Ingresa tu PIN"
4 dots de progreso (se llenan al ingresar digitos)
Teclado numerico 3x4: [1-9], [Borrar], [0], [OK]
Area de mensaje de error ("PIN incorrecto", "Dispositivo bloqueado")
Los botones deben ser grandes (72px minimo) para uso tactil

Interacciones:

Auto-submit al ingresar 4 digitos
Soporte de teclado fisico (0-9, Backspace, Enter)
Animacion al llenar cada dot
Shake animation en error

Estados:

Default (vacio)
Ingresando (1-3 dots llenos)
Verificando (spinner o loading)
Error (mensaje + shake)
Bloqueado (mensaje de cooldown 15 min)

1.2 Catalogo

Archivo: catalog.html Usuarios: Cajero, Admin, Dueno Dispositivo: Desktop (landscape) + tablet

Descripcion: El inventario del negocio presentado como catalogo navegable. El cajero busca partes aqui y las agrega al carrito. Al terminar, salta al POS para cobrar.

Layout:

+------------------------------------------+--------+
| [Buscar parte...]  [Filtros]   [Carrito 3]|        |
+------------------------------------------+        |
| Categorias | Marcas |          CARRITO    |
|            |        |          SIDEBAR    |
| +--------+ +--------+ +--------+         |
| | Balatas| | Discos | | Bujias |  Item 1 |
| | Bosch  | | Brembo | | NGK    |  Item 2 |
| | $385   | | $720   | | $85    |  Item 3 |
| | Stock:8| | Stock:3| | Stock:0|         |
| |[+Cart] | |[+Cart] | |[Agot.] |  Total  |
| +--------+ +--------+ +--------+ [Cobrar]|
+------------------------------------------+--------+

Elementos:

Barra de busqueda con icono de barcode scanner
Chips de filtro: Categoria, Marca (fabricante), Solo en stock
Grid de tarjetas de producto:
- Imagen (placeholder si no hay)
- Nombre de la parte
- Numero de parte (font mono)
- Marca/fabricante
- Precio (segun tier del empleado)
- Badge de stock: verde (OK), amarillo (bajo minimo), rojo (agotado)
- Boton "Agregar al carrito"
Paginacion
Carrito sidebar (slide-in desde la derecha):
- Lista de items con cantidad editable
- Subtotal por item
- Subtotal, IVA, Total
- Boton "Ir a cobrar" (prominente)
- Boton "Vaciar carrito"
Seccion "Buscar en bodegas" (cuando hay internet):
- Disponibilidad externa con precio y bodega

Interacciones:

F1 enfoca busqueda
Enter en resultado agrega al carrito
Barcode scanner: detecta entrada rapida + Enter
Click en tarjeta abre detalle, doble-click agrega

1.3 Punto de Venta (POS)

Archivo: pos.html Usuarios: Cajero, Admin, Dueno Dispositivo: Desktop (landscape) — pantalla principal de trabajo

Descripcion: La pantalla de cobro. Aqui se procesan ventas, cotizaciones y apartados. Optimizada para velocidad — todo operable por teclado.

Layout:

+----------------------------+-----------------------------+
| [F1 Buscar parte...]       | Cliente: Taller Juarez      |
| [F2 Buscar cliente...]     | RFC: TAJJ850101XXX          |
|                            | Credito: $15,000 disp.      |
| Resultados de busqueda:    | Vehiculo: Suburban 2018     |
| - Balatas Bosch $385  [+]  | Ult. compra: filtro 3 meses |
| - Balatas TRW  $310   [+]  |-----------------------------|
|                            | #  Parte    Cant  Precio  ST|
|                            | 1  Balatas    2    $385  $770|
|                            | 2  Discos     1    $720  $720|
|                            | 3  Liquido    1     $95   $95|
|                            |-----------------------------|
|                            | Subtotal:          $1,585.00|
|                            | Descuento (5%):      -$79.25|
|                            | IVA 16%:             $241.12|
|                            | TOTAL:             $1,746.87|
|                            |-----------------------------|
| Si tiene permiso:          | [F3 Cobrar] [F4 Cotizacion] |
| Costo: $220 Margen: 43%   | [Apartado]  [Credito]       |
+----------------------------+-----------------------------+

Elementos principales:

Panel izquierdo:
- Busqueda de partes (F1)
- Busqueda de cliente (F2) con autocompletado
- Lista de resultados con boton agregar
Panel derecho:
- Banner de cliente (nombre, RFC, credito disponible, vehiculo, ultima compra)
- Tabla de items de la venta:
  - Numero de parte
  - Nombre
  - Cantidad (editable inline)
  - Precio unitario
  - Descuento % (editable, valida contra maximo del empleado)
  - Subtotal
  - Si tiene permiso pos.view_cost: columnas de Costo y Margen% (ocultas para cajeros)
- Barra de totales: Subtotal, Descuento, IVA, TOTAL (fuente grande mono)
- Botones de accion:
  - [F3] Cobrar (primario, prominente)
  - [F4] Cotizacion
  - Apartado
  - Credito
  - [F5] Ultima venta
  - [F6] Abrir cajon

Modal de pago (al presionar F3):

+--------------------------------+
| COBRAR — Total: $1,746.87     |
|--------------------------------|
| [Efectivo] [Transfer] [Tarjeta] [Mixto] |
|                                |
| Efectivo:                      |
| Recibido: [$ 2,000.00]        |
| Cambio:     $253.13           |
|                                |
| [  ] Facturar (CFDI)          |
|                                |
|          [Confirmar pago]      |
+--------------------------------+

Tab Efectivo: campo de monto recibido, calculo automatico de cambio
Tab Transferencia: campo de referencia bancaria
Tab Tarjeta: campo de referencia de terminal
Tab Mixto: multiples campos (ej: $1,000 efectivo + $746.87 transferencia)
Checkbox "Facturar" (genera CFDI)

Preview de ticket (despues de cobrar):

Layout termico 58/80mm
Datos del negocio (RFC, direccion)
Folio de venta
Items con cantidad, precio, subtotal
Totales
Forma de pago
Fecha y hora
Boton imprimir / PDF

Atajos de teclado (mostrar en footer o tooltip):

F1=Buscar  F2=Cliente  F3=Cobrar  F4=Cotizacion
F5=Ult.Venta  F6=Cajon  +/-=Cantidad  *=Descuento
Enter=Agregar  Delete=Quitar  Esc=Cerrar modal
Flechas=Navegar items

1.4 Inventario

Archivo: inventory.html Usuarios: Almacenista, Admin, Dueno Dispositivo: Desktop + tablet

Descripcion: Gestion completa del inventario. Tabs para cada operacion.

Tabs:

Tab 1 — Productos:

Tabla: parte#, nombre, marca, stock, costo, precio1/2/3, ubicacion
Busqueda por nombre/numero
Boton "Nuevo producto" (abre modal)
Click en row abre detalle/edicion
Badge de stock por colores

Tab 2 — Entradas (Compras):

Formulario: seleccionar producto, cantidad, costo unitario, # factura proveedor
Tabla de entradas recientes

Tab 3 — Ajustes:

Formulario: seleccionar producto, cantidad (+/-), razon (obligatorio)
Tabla de ajustes recientes

Tab 4 — Transferencias:

Formulario: producto, sucursal origen, sucursal destino, cantidad
Tabla de transferencias recientes

Tab 5 — Toma Fisica:

Dos fases:
1. Captura: tabla editable (producto → cantidad contada)
2. Revision: comparar esperado vs contado, mostrar diferencias
3. Boton "Aprobar ajustes"

Tab 6 — Alertas:

Lista con severidad:
- Rojo: stock en cero
- Amarillo: bajo minimo
- Azul: sobre maximo

Tab 7 — Reportes:

Botones para cada reporte:
- Inventario valorizado
- Clasificacion ABC
- Sin movimiento (>60 dias)
- Stock bajo minimo
- Comparativo sucursales

Modal Crear/Editar Producto:

Numero de parte (obligatorio)
Nombre (obligatorio)
Marca/fabricante
Unidad (PZA, JGO, LT, etc.)
Costo
Precio 1 (mostrador), Precio 2 (taller), Precio 3 (mayoreo)
Tasa de impuesto (default 16%)
Stock minimo y maximo
Ubicacion en almacen (ej: "Pasillo 3, Anaquel B")
Codigo de barras (auto-generado o manual)
Imagen
Stock inicial

1.5 Clientes

Archivo: customers.html Usuarios: Admin, Dueno, Contador Dispositivo: Desktop

Descripcion: Gestion de clientes con informacion fiscal, credito y vehiculos.

Layout:

+---------------------------+-------------------------+
| [Buscar cliente...]       |                         |
| [+ Nuevo]                 |   PANEL DE DETALLE      |
|                           |   (slide-in)            |
| Nombre    RFC     Tier    |                         |
| Taller J. TAJJ... Taller |   Nombre: Taller Juarez |
| Mech.Exp  MEEX... Mostrad|   RFC: TAJJ850101XXX    |
| AutoServ  AUTO... Mayoreo|   Credito: $10,000      |
|                           |   Saldo: $3,200         |
|                           |   Disponible: $6,800    |
|                           |                         |
|                           |   Vehiculos:            |
|                           |   - Suburban 2018       |
|                           |   - Tsuru 2015          |
|                           |                         |
|                           |   Compras recientes:    |
|                           |   - Balatas $770 (3d)   |
|                           |   - Filtro $120 (30d)   |
|                           |                         |
|                           |   [Estado de cuenta]    |
+---------------------------+-------------------------+

Modal Estado de Cuenta:

+----------------------------------------------+
| Estado de Cuenta — Taller Juarez             |
|----------------------------------------------|
| Fecha    | Concepto  | Cargo | Abono | Saldo |
| 01-abr   | Factura   | 5,800 |       | 5,800 |
| 08-abr   | Pago      |       | 3,000 | 2,800 |
| 15-abr   | Factura   | 2,300 |       | 5,100 |
|----------------------------------------------|
| Saldo actual: $5,100                         |
+----------------------------------------------+

Modal Crear/Editar Cliente:

Nombre (obligatorio)
RFC (13 caracteres)
Razon social
Regimen fiscal (catalogo SAT)
Uso CFDI (catalogo SAT)
Codigo postal
Email, telefono, direccion
Tier de precio: Mostrador (1), Taller (2), Mayoreo (3)
Limite de credito
Vehiculos (JSON array): marca, modelo, ano, VIN, placas

1.6 Facturacion

Archivo: invoicing.html Usuarios: Admin, Dueno, Contador Dispositivo: Desktop

Descripcion: Cola de facturacion electronica (CFDI). Muestra el status de cada factura y permite procesar, cancelar, y ver XML.

Elementos:

Tarjetas de resumen: Pendientes, Timbradas, Fallidas, Canceladas
Filtros: status, fecha
Tabla de cola CFDI:
- Folio provisional
- Tipo (Ingreso/Egreso/Pago)
- Cliente
- Total
- Status badge:
  - Azul: Pending
  - Amarillo: Sending
  - Verde: Stamped
  - Rojo: Failed
  - Gris: Cancelled
- UUID fiscal (si timbrada)
- Acciones: Ver detalle, Cancelar
Boton "Procesar cola" (prominente)

Modal Detalle CFDI:

XML preview (syntax highlighted)
Datos del comprobante
UUID, sello, cadena original (si timbrado)

Modal Cancelacion:

Motivo SAT (selector):
- 01: Con errores con relacion
- 02: Con errores sin relacion
- 03: No se llevo a cabo
- 04: Operacion nominativa
Campo UUID de sustitucion (solo si motivo 01)
Boton confirmar cancelacion

1.7 Contabilidad

Archivo: accounting.html Usuarios: Contador, Dueno Dispositivo: Desktop

Descripcion: Modulo contable con catalogo de cuentas, polizas automaticas, y reportes financieros.

Tabs:

Tab 1 — Catalogo de Cuentas:

Arbol colapsable con indentacion:

v 100 Activo
  v 110 Caja
  v 111 Bancos
  v 120 Clientes
  v 130 Inventarios
v 200 Pasivo
  v 210 Proveedores
  v 220 IVA Trasladado

Cada cuenta muestra: codigo, nombre, saldo actual
Boton "Nueva subcuenta"
Cuentas de sistema (is_system) no editables

Tab 2 — Polizas:

Filtros: fecha desde/hasta, tipo (ingreso/egreso/diario)
Tabla: #poliza, fecha, tipo, descripcion, cargo total, abono total
Click en poliza abre detalle con lineas
Boton "Nueva poliza manual"
Badge "Auto" para polizas generadas automaticamente

Tab 3 — Balanza de Comprobacion:

Selector: ano + mes
Tabla: cuenta, saldo inicial, cargos, abonos, saldo final
Totales al fondo (deben cuadrar)

Tab 4 — Estado de Resultados:

Selector de periodo
Ingresos (ventas)
(-) Costo de ventas
= Utilidad bruta
(-) Gastos operativos
= Utilidad operativa

Tab 5 — Balance General:

Activos (bancos, clientes, inventarios)
Pasivos (proveedores, IVA)
Capital (capital social + resultado del ejercicio)
Activo = Pasivo + Capital (debe cuadrar)

Tab 6 — Antiguedad de Saldos:

Tabla por cliente:
- Cliente, Corriente, 1-30 dias, 31-60 dias, 61-90 dias, 90+ dias
Highlight en rojo si >90 dias

Tab 7 — Periodos Fiscales:

Tabla: ano, mes, status (abierto/cerrado), cerrado por, fecha cierre
Boton "Cerrar periodo" (solo dueno)
Confirmacion antes de cerrar

2. Pantallas Pendientes (por construir)

2.1 Dashboard del Dueno

Archivo: dashboard.html Usuarios: Dueno Dispositivo: Movil (primary) + Desktop

Descripcion: Vista ejecutiva del negocio. El dueno lo ve en su celular.

Elementos movil:

+-------------------------+
| Refaccionaria Lopez     |
| Hoy, 15 abril 2026     |
|-------------------------|
| Ventas hoy              |
| $45,200  +12% vs ayer  |
| [===========----] 75%   |
| Meta: $60,000           |
|-------------------------|
| Cajas activas           |
| Caja 1 — Maria          |
| 23 ventas | $28,400     |
| Margen: 34%             |
|                         |
| Caja 2 — Pedro          |
| 15 ventas | $16,800     |
| Margen: 29% ⚠          |
|-------------------------|
| Alertas (3)             |
| ! Descuento $500 Maria  |
| ! Bujias NGK: stock 3   |
| ! Balatas: agotado       |
|-------------------------|
| Esta semana             |
| L  M  M  J  V  S  D    |
| 42 38 45 45  -  -  -   |
|         (miles)         |
+-------------------------+

Para multi-sucursal:

Toggle entre sucursales o vista consolidada
Comparativo entre sucursales

2.2 Configuracion

Archivo: config.html Usuarios: Dueno, Admin Dispositivo: Desktop

Tabs:

Tab 1 — Datos del Negocio:

Nombre, RFC, razon social, regimen fiscal
Direccion, codigo postal
Logo
Link a Horux para CSD (credenciales SAT)

Tab 2 — Sucursales:

Lista de sucursales (nombre, direccion, telefono)
Crear/editar sucursal

Tab 3 — Empleados:

Lista: nombre, email, rol, sucursal, descuento max, activo
Crear/editar empleado con asignacion de rol y permisos
Roles: Dueno, Admin, Cajero, Almacenista, Contador

Tab 4 — Tema:

Selector de tema predefinido
Preview en vivo
(Los temas los define el equipo de diseno)

2.3 Reportes

Archivo: reports.html Usuarios: Dueno, Admin, Contador Dispositivo: Desktop

Secciones:

Ventas:

Ventas por periodo (dia/semana/mes/ano) con grafica
Ventas por empleado
Ventas por categoria
Ventas por cliente
Ticket promedio y tendencia

Inventario:

Inventario valorizado
Clasificacion ABC
Productos sin movimiento
Stock bajo minimo
Comparativo entre sucursales

Financieros:

(Links a Contabilidad: balanza, estado de resultados, balance)
Flujo de efectivo
Cortes de caja historicos

3. Componentes Reutilizables

El equipo de diseno debe crear estos componentes como sistema de diseno:

#	Componente	Usado en	Notas
1	PIN Pad	Login	Teclado 3x4, dots de progreso, botones grandes
2	Barra de busqueda	Catalogo, POS, Inventario, Clientes	Con icono scanner, debounce 300ms
3	Carrito sidebar	Catalogo	Slide-in derecha, items con qty editable
4	Modal de pago	POS	4 tabs: Efectivo, Transferencia, Tarjeta, Mixto
5	Selector de cliente	POS	Autocompletado dropdown, banner con vehiculo
6	Badge de stock	Catalogo, Inventario	Verde=OK, Amarillo=bajo, Rojo=agotado
7	Badge de status CFDI	Facturacion	5 colores segun estado
8	Tabla paginada	Todas	Header sticky, rows hover, paginacion, busqueda
9	Modal generico	Todas	Header, body scrollable, footer con acciones
10	Panel deslizante	Clientes	Slide-in lateral, cierra con Esc o click fuera
11	Ticket termico	POS	Layout 58/80mm, monospaciado, logo arriba
12	Arbol colapsable	Contabilidad	Indentacion, expand/collapse, iconos
13	Tabs de navegacion	Inventario, Contabilidad	Horizontal, badge con conteo
14	Chips de filtro	Catalogo	Toggle on/off, multiples activos
15	Toast/notificacion	Todas	Exito (verde), Error (rojo), Info (azul), Warning (amarillo)
16	Tarjeta de metrica	Dashboard	Numero grande, label, tendencia (flecha up/down)
17	Grafica de barras	Dashboard, Reportes	Barras verticales con labels
18	Calculadora de cambio	Modal de pago	Input monto, muestra cambio en tiempo real
19	Selector de periodo	Contabilidad, Reportes	Ano + Mes dropdowns
20	Etiqueta codigo barras	Inventario	Formato imprimible para impresora de etiquetas

4. Estados y Variantes

Cada pantalla debe disenarse en estos estados:

Estado	Visual	Donde
Default	Contenido normal	Todas
Vacio	Ilustracion + texto "No hay datos" + CTA	Catalogo, Clientes, Inventario
Cargando	Skeleton placeholders o spinner	Tablas, listas, reportes
Error	Toast rojo con mensaje + retry	Fallas de API
Sin conexion	Banner amarillo "Modo offline — funciones limitadas"	Header global
Exito	Toast verde "Venta completada" / "Pago registrado"	Post-accion
Confirmacion	Modal "Estas seguro?" con motivo	Cancelar venta, cerrar caja, ajustar stock
Permiso denegado	Seccion oculta o deshabilitada	Costos/margen para cajeros, precios para almacenistas

5. Sistema de Temas (CSS Variables)

Cada tenant puede tener su propio tema. El equipo de diseno define los valores:

:root[data-theme="default"] {
    /* Colores principales */
    --color-primary: #1a73e8;
    --color-secondary: #5f6368;
    --color-accent: #ff6b35;

    /* Fondos */
    --color-bg: #ffffff;
    --color-surface: #f8f9fa;
    --color-surface-hover: #e8eaed;

    /* Texto */
    --color-text: #202124;
    --color-text-secondary: #5f6368;
    --color-text-muted: #9aa0a6;

    /* Bordes */
    --color-border: #dadce0;

    /* Semanticos */
    --color-success: #34a853;
    --color-warning: #f9ab00;
    --color-error: #ea4335;
    --color-info: #4285f4;

    /* Tipografia */
    --font-display: 'Sora', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Forma */
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
}

Variantes sugeridas a disenar:

Light (default)
Dark
High contrast (accesibilidad)

6. Notas Tecnicas para el Equipo

Responsive: Desktop-first. POS y Catalogo en landscape. Dashboard movil-first.
Impresion: Ticket termico necesita CSS @media print especifico para 58mm y 80mm.
Offline: Mostrar indicador visual cuando no hay conexion. Ocultar features que requieren internet (buscar en bodegas).
Permisos: Algunas columnas/secciones se ocultan segun el rol del empleado. Disenar con y sin esas columnas.
F-keys: El POS es operable 100% por teclado. Los shortcuts deben ser visibles pero no intrusivos (tooltips o footer).
Barcode scanner: El scanner USB escribe caracteres rapido + Enter. No requiere UI especial, solo que el campo de busqueda este enfocado.

20 KiB Raw Blame History

Nexus POS — Guia de Pantallas para Equipo de Diseno

Resumen

1. Pantallas Existentes (redisenar)

1.1 Login (PIN Pad)

1.2 Catalogo

1.3 Punto de Venta (POS)

1.4 Inventario

1.5 Clientes

1.6 Facturacion

1.7 Contabilidad

2. Pantallas Pendientes (por construir)

2.1 Dashboard del Dueno

2.2 Configuracion

2.3 Reportes

3. Componentes Reutilizables

4. Estados y Variantes

5. Sistema de Temas (CSS Variables)

6. Notas Tecnicas para el Equipo

20 KiB

Raw Blame History