Style guide · Kitchen sink
Catálogo vivo de tokens, primitives, botones y patrones canónicos.
Catálogo vivo de tokens, primitives, botones y patrones canónicos.
Fondo arena, card 400px centrada, lema editorial. Sin sidebar ni header.
Cascarón canónico: sidebar 256/64, header con selector de sucursal, command palette, notificaciones, alertas FEM/SAT.
KPIs del día, gráfico de ventas por hora, equipo en piso, alertas, top productos.
Tabla densa de 40 SKUs con filtros laterales, búsqueda, densidad compact/comfort, side panel quickview.
Hero del SKU, tabs (Info, Stock, Costos, Lotes, Precios, Movimientos), inline editing, aprobación gerente.
3 columnas: escaneo · ticket · acciones. Touch ≥ 44px, cobrar/facturar/apartar. Modo kiosko tablet.
Folio, comprador, líneas, totales, métodos de pago, devolución/factura/reimpresión.
Wizard de 4 pasos: OC → líneas con lote/caducidad/pedimento → discrepancias → confirmar. Importación con prorrateo.
Master-detail: lista de solicitudes a la izquierda, detalle + acciones a la derecha. SLA por rol, banner de vencimiento.
Tablero analítico: caducidades, stock crítico, devoluciones, mermas, dead-letter del sync FEM ↔ ERP.
Padrón fiscal con búsqueda, filtros, bulk select, validación SAT v4.0 y archivado de duplicados. 247 clientes mock con régimen y uso CFDI reales.
Ficha completa con 6 tabs (Generales/Fiscal/Direcciones/Historial/CxC/Bitácora), 4 KPI cards (balance, vencido, vendido YTD, ticket promedio), notas internas y etiquetas.
Wizard guiado de alta con validación SAT en tiempo real, auto-save de borrador (~90 seg), detección de duplicados por RFC y pantalla de éxito con folio.
Padrón de surtidores con 4 KPIs (total, activos, con pagos vencidos, bloqueados), tabla con calificación de estrellas, categoría, estado y saldo CxP. 9 sucursales + CEDIS · evaluación trimestral.
Hero con razón social, calificación 4.8★, chip ESTRATÉGICO, RFC, sucursal asignada. 4 KPIs (saldo CxP, vencido, comprado YTD, lead time). 8 tabs: Generales, Fiscal, Contactos, Productos, Historial OC, CxP, Calificación, Bitácora.
Alta validada contra SAT v4.0 · 3 pasos guiados · ~120 segundos. Identificación → Fiscal y comercial → Productos iniciales (opcional). Detección de duplicados por RFC, aprobación si crédito > 30 días.
Plantilla activa con 4 KPIs (total, activos hoy, de baja este mes, vacaciones/permiso). Tabla con avatar, folio EMP-XXXXX, puesto, sucursal, email, teléfono, estado y última actividad. 9 sucursales + CEDIS · 5 roles preconfigurados.
Hero con avatar, nombre completo, chips Activo/Gerente/Indefinido, folio + sucursal + ingreso + antigüedad. 4 KPIs (asistencia %, retardos, comisiones YTD, última actividad). 7 tabs: Generales, Puesto, Sucursal, Permisos (matriz 12×6), Horarios (calendario semanal), Asistencias 30d, Bitácora.
Alta con validación SAT/IMSS · 4 pasos guiados · ~180 segundos. Personales (CURP+RFC+NSS validados) → Puesto (contrato como radio cards + prestaciones chips) → Permisos (6 roles preconfig + Custom matriz) → Foto y credencial (drag&drop con detección de cara + PIN 4 dígitos + preview imprimible con QR).
Red completa de operación · 10 sucursales (9 activas + CEDIS) · 5 plazas CDMX/MTY/GDL/QRO/PUE · vista dual: tabla maestro con tipo (Matriz/Sucursal/Franquicia/Pop-up) + mapa MX con pins coloreados por estado · 4 KPIs (total · operando · ventas mes consolid · empleados totales) · ventas mes consolidadas $4,843,400.
Ficha SUC-CDMX-01 Polanco · Boutique Insurgentes · hero con pills (Operando/Matriz/CDMX) + dirección + gerente vinculado + apertura · mapa embebido (Av. Horacio 1234) con CTA "Abrir en Maps" · 4 KPIs (ventas mes · ticket prom · empleados activos · cajas abiertas hoy) · 6 tabs (Generales SAT + horario · Operación listas/métodos/folios · Personal 14 con rol chips · Inventario 158 SKUs · Cajas grid 4 · Bitácora).
Alta de sucursal con validación SAT · 3 pasos guiados · ~150 segundos. Datos básicos (4 tipos como radio cards: Matriz/Sucursal/Franquicia/Pop-up · si Franquicia → extra-fields razón social + RFC + regalías % + vigencia) → Dirección SAT con validación CP (catálogo SAT + coordenadas) + horario semanal toggle por día + feriados como chips → Configuración inicial (4 listas precios checkbox · 6 métodos pago chips · gerente con autocomplete · primera caja).
Listado de cortes con banner persistente "Tienes caja abierta", 4 KPIs (Cajas abiertas, Ventas hoy, Diferencia neta, Cortes pendientes) y filtros por sucursal vinculados a §M4.
Form de apertura con hero "Sucursal · Caja", cajero por defecto, monto inicial $2,000 y conteo de denominación inicial con controles +/− y total live.
Stepper Conteo → Comparación → Justificación → Cierre con sidebar "Resumen del turno" (apertura, ventas esperadas, total contado) y autorización requerida si la diferencia excede tolerancia.
Form rápido con 4 radio cards de color (Retiro coral · Depósito turquesa · Cambio chico verde · Préstamo morado), monto, chips de sugerencias y nota libre. Bloqueo > $1,000 sin PIN.
Tabla 12 columnas con 15 OCs, 6 workflow pills, %recibido bar coloreado, 4 KPIs (Activas 47 / Pendientes 23 / Vencidas 5 / Por confirmar 8) y modal de sugerencias de reorden por proveedor. Generado v0.50 (pendiente verificación visual · budget reset 20 may).
Header sticky con folio mono + 4 fechas KPI + action bar condicional según estado (borrador/enviada/confirmada/parcial/cerrada/cancelada). Tabs Generales · Líneas (8 SKUs) · Recepciones (timeline %) · Facturas (3-way-match) · Bitácora. Generado v0.50.
Stepper Proveedor → Líneas → Términos. Paso 1 combobox + sucursal con mini-mapa + prioridad radio cards con SLA. Paso 2 tabla editable con drawer "Agregar SKU" y badge costo histórico. Paso 3 toggle "Enviar inmediatamente" con preview email. Generado v0.50.
Vista pivot 12 SKUs × 9 sucursales con semáforo (crítico/bajo/cerca/ok), sticky first column y valor inventario. Toggle [Por SKU | Por Sucursal | Por Lote]. Filtros bajo-mínimo, por-caducar (<30 días), sin-movimiento (>60 días). Modales ajuste y traspaso rápido. v0.51.
Folio TRA-2026-NNNNN. Paso 1 origen+destino cards visuales con stock disponible. Paso 2 tabla líneas con highlight stock-insuficiente (QUE-025). Paso 3 confirmación. Pantalla en-tránsito con pulse + progress bar. v0.51.
Folio AJU-2026-NNNNN. Form SKU + sucursal + delta (+/-) color rojo/verde + 6 motivos radio (error conteo · robo · daño · vencimiento · muestra · otro) + comprobante. Auth supervisor automática si delta >50u o valor >$5,000. v0.51.
Folio CNT-2026-NNNNN. Wizard 5 pasos: Definir alcance (ABC checkboxes) → Contando (progress bar) → Comparar vs sistema con impacto monetario → Justificar diferencias por SKU → Cerrar con firma. Cycle o full count. v0.51.
Folio MER-2026-NNNNN. 10 mermas mock con 7 motivos chip (vencimiento · daño · derrame · contaminación · robo · muestra · otro). Modal alta con foto + auth condicional >$500 o >10 unidades. v0.51.
9 promos mock (PRM-2026-0038 a 0046) con toggle [Lista|Calendario], 4 KPIs (Activas 4 · Programadas 2 · Veces aplicada 3,318 · Descuento otorgado $126,320 mayo). Banner coral conflicto "3x2 Yogurt griego" con lista Mayoreo en CDMX-01 + MTY-04. Pills Activa/Programada/Pausada/Conflicto/Expirada. v0.52.
PRM-2026-0042 "2x1 Aguas Frescas 1L" · Header con pills Activa/2x1/9 sucursales + acciones Duplicar/Pausar/Editar · 4 KPIs (Veces aplicada 412 · Ticket prom $385 · Descuento $14,820 · Conversión 18.4%). Tabs Generales/Productos(5)/Restricciones/Métricas. Simulador POS lateral: carrito vivo con cálculo descuento (-$38) + IVA + total $214. v0.52.
Stepper Tipo → Productos → Vigencia → Restricciones. Paso 1: 7 cards mecánica (2x1 POPULAR · 3x2 · % descuento POPULAR · Monto fijo · Paquete · Cupón · Cashback). Folio auto sugerido PRM-2026-0046. v0.52.
7 listas mock (LP-001 Pública 2026 Default · LP-002 Mayoreo > $5,000 · LP-003 Distribuidor Pro · LP-004 Evento Día del Padre · LP-005 Eventos Yogateca CONFLICTO · LP-006 Pública Legado 2025 · LP-007 Mayorista Centro). 4 KPIs: 4 activas · 1 por expirar · 578 SKUs override · 1 conflicto. Banner naranja "Eventos Yogateca tiene precios de YOG-007 distintos a Mayoreo > $5,000 en CDMX-01 + MTY-04". v0.53.
LP-003 Distribuidor Pro · Hero con 4 sucursales aplicables · Toolbar [Markup masivo · Copiar · Importar CSV · Exportar CSV]. Tabla SKU × precio con edición inline (click en celda) + columna diff vs base con flechas ↑↓ color. 124 SKUs override de 412 totales. Modal markup masivo con preview side-by-side antes/después. Pantalla importing-csv con terminal log + progress bar. Pantalla csv-errors con tabla 6 errores. v0.53.
Stepper Datos básicos → Base → Vigencia. Paso 1: 4 cards tipo (Pública · Mayoreo · Distribuidor · Evento). Paso 2: radio "Empezar desde lista existente" (selector LP-001..LP-007) o "Lista vacía con markup default sobre catálogo". Paso 3: rango fechas + 9 checkboxes sucursales. Folio sugerido LP-008. v0.53.
8 métodos mock (MP-001 Efectivo · MP-002 Tarjeta Crédito 3.5% · MP-003 Débito 1.9% · MP-004 SPEI · MP-005 Cheque solo 4 sucs · MP-006 Vales Sodexo · MP-007 Mercado Pago 4.2% · MP-008 CLIP Terminal PAUSADO). 4 KPIs: Activos 7 · Pendientes conciliación $14,820 · Comisiones del mes $9,460 · Próximo depósito 16/may. Toggle Lista/Conciliación. Banner ámbar "Conciliación pendiente desde 12/may" en MP-008. v0.54.
Drawer lateral 560px. Form: nombre · tipo · comisión % · días corte · cuenta bancaria · toggle Requiere autorización · monto máx · chips 9 sucursales con "Seleccionar todas" · plataforma (MP/CLIP/Conekta) · notas. Footer [Cancelar] [Guardar] [Deshabilitar método]. v0.54.
Header "Cuentas por cobrar · $1,284,520" · 47 clientes con saldo · 18 vencidas. 5 cards aging (Por vencer 48% $618,400 · 0-30 27% $342,180 · 31-60 14% $178,920 · 61-90 7% $84,600 · 90+ 5% $60,420). 15 clientes mock con RFCs reales: Súper Aurora SA, Distribuidora El Roble, Cremerías Yogateca, Cafeterías La Sirenita, Hotelería Vista Mar, Mercado Mayoreo CDMX, etc. Vista rápida: Todo / Por vencer 7d / Solo vencidas / Mi cartera. v0.55.
Distribuidora El Roble (DER-901215-XY2) · tags [Score AAA · Sin disputa] · balance $128,400 / límite $200,000 (64% util). 3 KPIs (días vencido prom 6 · gestiones último mes 2 · facturas abiertas 4). 4 tabs (Facturas/Cobros/Gestiones/Bitácora). Acciones [Aplicar pago] [Recordatorio] [Programar gestión] [Estado cuenta PDF] [Cambiar límite]. v0.55.
Stepper 4 pasos: Cliente → Monto + Método (lee M10) → Distribución por facturas (split editable con suma viva $48,400 / $50,000 check verde) → Comprobante (drag&drop PDF) + preview CFDI 4.0 complemento de pago con UUID auto-generado. Folio COB-2026-0852. v0.55.
Header "Cuentas por pagar · $842,180" · 22 proveedores · 6 facturas vencidas · 4 programadas próx 7 días. 6 cards aging (Por vencer 55% $462,800 · 0-30 22% $186,400 · 31-60 13% $112,200 · 61-90 6% $52,780 · 90+ 3% $28,000 · PROGRAMADOS PRÓX 7D $186,400 CTA "Ver layout SPEI"). 12 proveedores mock: Frescos del Valle SAPI (FVA-150420-A12), Empacadora La Higuera, Lácteos San Bernardo, Cosmoetiquetas, etc. v0.56.
Frescos del Valle SAPI · tags [Preferente · 8 años · Sin disputa · Score AA] · saldo $128,400 / límite $250,000 (51% util). 3 KPIs (días pago prom 24 · OCs último trimestre 18 · facturas abiertas 5). 5 tabs (Facturas/Pagos/OCs vinculadas/Notas/Bitácora). Acciones [Programar pago] [Conciliar saldo] [Contra-recibo] [Solicitar NC] [Bloquear pagos]. v0.56.
Header "Lote LOTE-2026-038 · Borrador" · 6 facturas seleccionadas $186,400 · saldo bancario disponible $1,420,800 BBVA. Workflow pill: Borrador → En aprobación → Aprobado → Enviado al banco → Confirmado. Wizard 4 pasos: seleccionar facturas → fecha+método → validación bancaria → generar layout SPEI formato BBVA M4. v0.56.
15 CFDIs mock con UUIDs reales formato SAT · 5 KPIs (Timbrados 2,840 · Pendientes 4 · Cancelados 12 · Rechazados 3 · IVA $384,620) · pills SAT (timbrado verde / pendiente ámbar / cancelado gris / rechazado coral) · filtros tipo I/E/P/N/T + estado + sucursal + RFC receptor + rango fechas + serie/folio. RFCs receptor reales (LIM920506HG3, COC011126KF4, etc). v0.57.
Header UUID + tipo + serie-folio + emisor + receptor + total + estado SAT. 4 tabs: Visor PDF · Visor XML con highlight de campos · Acuse SAT (TFD: UUID, RfcProvCertif, FechaTimbrado, SelloCFD, SelloSAT, NoCertificadoSAT) · Bitácora timeline (creado→PAC→timbrado). Acciones: Descargar XML / Descargar PDF / Enviar email / Cancelar / Sustituir. v0.57.
Hero "Cancelación SAT · A-3104 · UUID abc12-...-fe34" + advertencia ámbar "Las cancelaciones reportadas al SAT son irreversibles". 4 motivos: 01 errores con relación (+ sustituto) · 02 errores sin relación · 03 no se llevó a cabo · 04 nominativa relacionada en factura global. Paso 2 sólo si motivo=01 (search autocomplete CFDI sustituto). Paso 3 confirmación SAT + acuse PDF preview. v0.57.
3 complementos críticos · Pago (CFDI tipo P · MMP método · TipoCambio) · Nómina 1.2 (ejemplo Hernández: sueldo mensual + ISR + IMSS + INFONAVIT) · Carta Porte 2.0 (T-0042 traspaso CDMX-Polanco → MTY-Apodaca con 412 kg café molido, placas operador, rutas). CTA "Emitir complemento" + tabla últimos 5 emitidos por cada uno. v0.57.