[CONSEJO — Doc 06] Contrarian: El dueño de PyME NO es el usuario primario del frontend de BookMind en el día a día — el contador lo es. Si el UI está optimizado para un usuario no técnico, el contador que entra a conciliar y a cerrar el mes lo encontrará frustrante. Hay que diseñar dos niveles de complejidad: vista "resumen ejecutivo" para el dueño y vista "contabilidad completa" para el contador. First Principles: Un sistema contable tiene que generar confianza. La confianza en un frontend contable viene de: (1) nunca perder un dato que el usuario ingresó, (2) mostrar siempre el origen de cada cifra (de dónde viene ese saldo), (3) errores y advertencias imposibles de ignorar. El "look and feel premium" es secundario a "nada se pierde y todo es trazable". Executor: La pantalla de tesorería predictiva es el momento de marketing más importante del producto. Cuando el dueño abre BookMind el lunes por la mañana y ve "En 18 días tienes un gap de $4,200 bajo el escenario conservador", esa es la pantalla que justifica el precio de $999/mes. Debe estar a un click del login. No enterrada en menús.

1. Stack frontend

Idéntico al stack MindStack Suite (ver StockMind Doc 06 §1):

2. Usuarios y sus pantallas principales

BookMind tiene tres perfiles de usuario con necesidades distintas:

3. Arquitectura de pantallas

/login                          ← Magic link auth
/dashboard                      ← Vista tesorería predictiva (North Star)
/fe                             ← Facturación electrónica
  /fe/emitir                    ← Nueva FE
  /fe/lista                     ← Historial FE emitidas/recibidas
  /fe/contingencia              ← FE pendientes de reenvío (fallos)
/contabilidad                   ← General Ledger
  /contabilidad/plan-cuentas    ← Plan de cuentas configurable
  /contabilidad/asientos        ← Asientos manuales + automáticos
  /contabilidad/balance         ← Balance de comprobación
  /contabilidad/estados         ← Estado de resultados / Balance general
/cuentas-cobrar                 ← Accounts Receivable
  /cuentas-cobrar/facturas      ← Facturas pendientes de cobro
  /cuentas-cobrar/scoring       ← Score de cobranza por cliente
  /cuentas-cobrar/aging         ← Aging report
/cuentas-pagar                  ← Accounts Payable
  /cuentas-pagar/facturas       ← Facturas de proveedores pendientes
  /cuentas-pagar/calendario     ← Calendario de vencimientos
/bancos                         ← Conciliación bancaria
  /bancos/cuentas               ← Cuentas bancarias conectadas
  /bancos/conciliacion          ← Wizard de conciliación
/tesoreria                      ← Motor predictivo (Pro+)
  /tesoreria/forecast           ← Forecast P10/P50/P90 90 días
  /tesoreria/alertas            ← Alertas de liquidez activas
  /tesoreria/escenarios         ← Editor de escenarios manuales
/reportes                       ← Reportes contables
  /reportes/iva                 ← Declaración IVA CR/MX/CO
  /reportes/retenciones         ← Retenciones en la fuente
  /reportes/auditoria           ← Log de auditoría
/configuracion                  ← Empresa, países, integraciones
  /configuracion/empresa        ← Datos fiscales por país
  /configuracion/fe             ← Credenciales FE por país
  /configuracion/bancos         ← Conexión Belvo/Prometeo
  /configuracion/integraciones  ← StockMind / SalesMind sync

4. Pantallas críticas — wireframes

4.1 Dashboard tesorería (vista dueño)

┌─────────────────────────────────────────────────────────────────┐
│ BookMind          Empresa Distribuidora XYZ S.A.    [CPA: Ana R.]│
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ⚠️ ALERTA DE LIQUIDEZ                                          │
│  En 18 días el saldo proyectado cae a $1,200 (escenario base).  │
│  Recomendación: cobrar Factura #A-0234 a Distribuidora Ramírez. │
│  [Ver detalle]  [Llamar a cliente]                               │
│                                                                  │
├──────────────────────────────────┬──────────────────────────────┤
│  SALDO HOY                       │  SALDO EN 30 DÍAS            │
│  💰 $18,450 (BAC CR #4521)      │  🟡 $7,200 (P50)            │
│  + $3,200 (Davivienda CO #8812) │  📊 Rango: $2,100 – $14,800  │
│  ─────────────                   │  (P10 – P90)                │
│  Total: **$21,650**              │                              │
├──────────────────────────────────┴──────────────────────────────┤
│                                                                  │
│  FORECAST DE TESORERÍA — 90 días                                 │
│                                                                  │
│  $25k ┤                                                          │
│  $20k ┤ ████ ─────────────────── P90                           │
│  $15k ┤ ████████ ─────────────── P50 (línea base)              │
│  $10k ┤ ████████████ ─────────── P10                           │
│   $5k ┤ ┌──────── ▲ ALERTA: día 18                             │
│    $0 ┤─┴──────────────────────────────────────────────────    │
│       Hoy   +15d  +30d  +45d  +60d  +75d  +90d                 │
│                                                                  │
│  [Descargar forecast PDF]  [Enviar a banco]  [Ver supuestos]    │
├──────────────────────────────────┬──────────────────────────────┤
│  COBRAR ESTA SEMANA              │  PAGAR ESTA SEMANA           │
│  · Ramírez $8,500 (vence hoy)   │  · Proveedor A $3,200 (jue) │
│  · Cliente B $4,200 (+3 días)   │  · Alquiler $1,800 (vie)    │
│  · Cliente C $1,800 (+5 días)   │                              │
│  Total pendiente: $14,500        │  Total comprometido: $5,000  │
├──────────────────────────────────┴──────────────────────────────┤
│  FE DEL MES: 234 emitidas ✅  2 con error ❌  [Ver errores]     │
└─────────────────────────────────────────────────────────────────┘

4.2 Pantalla de emitir FE

┌─────────────────────────────────────────────────────────────────┐
│  NUEVA FACTURA ELECTRÓNICA              País: [🇨🇷 Costa Rica ▼]│
├─────────────────────────────────────────────────────────────────┤
│  Cliente: [Buscar por nombre o cédula...              ] [+Nuevo] │
│  Cédula receptor: _____________________ [Validar Hacienda]       │
│                                                                  │
│  LÍNEAS                                                          │
│  ┌────────────────┬────────┬──────────┬──────────┬───────────┐  │
│  │ Detalle        │ Cant.  │ P.Unit.  │ IVA      │ Subtotal  │  │
│  ├────────────────┼────────┼──────────┼──────────┼───────────┤  │
│  │ [Buscar SKU..] │ [   ]  │ [      ] │ 13% ▼   │ $0.00     │  │
│  └────────────────┴────────┴──────────┴──────────┴───────────┘  │
│  [+ Agregar línea]                                               │
│                                                                  │
│  Subtotal:          $0.00                                        │
│  IVA 13%:           $0.00                                        │
│  **TOTAL:           $0.00**                                      │
│                                                                  │
│  Tipo pago: [Contado ▼]  Moneda: [CRC ▼]   Actividad: [______] │
│                                                                  │
│  [Guardar borrador]          [Emitir y enviar a Hacienda ✉️]    │
│                                                                  │
│  ⓘ Las FE se envían a Hacienda en <30 segundos. Si el envío    │
│  falla, se reintentará automáticamente y recibirás una alerta.  │
└─────────────────────────────────────────────────────────────────┘

4.3 Conciliación bancaria (wizard)

┌─────────────────────────────────────────────────────────────────┐
│  CONCILIACIÓN BANCARIA — BAC Costa Rica  Ago 2026               │
│  Paso 2 de 3: Emparejar transacciones                           │
├──────────────────────────────┬──────────────────────────────────┤
│  MOVIMIENTOS BANCARIOS       │  ASIENTOS BOOKMIND               │
│  (importados automáticamente)│  (sin emparejar)                 │
│                              │                                  │
│  01/08 Pago cliente $8,500   │ ✓ Fact. A-0234 Ramírez $8,500   │
│  [Emparejar]  [Ignorar]      │   → AUTO-MATCH ✅ (100%)        │
│  ───                         │ ─────                            │
│  03/08 Transferencia $3,200  │   Ningún match automático        │
│  [Emparejar con asiento ▼]   │ · Fact. A-0221 $3,180 (-0.6%)   │
│                              │ · Pago proveedor $3,200           │
│                              │ [Seleccionar]                    │
│  ───                         │ ─────                            │
│  05/08 Comisión banco -$15   │ ❌ Sin asiento BookMind          │
│  [Crear asiento automático ▼]│ [Crear: Gasto bancario $15]     │
├──────────────────────────────┴──────────────────────────────────┤
│  Progreso: 18/23 transacciones emparejadas (78%)                │
│  Diferencia sin conciliar: $215.00                              │
│  [Continuar → Paso 3: Revisar y cerrar]                         │
└─────────────────────────────────────────────────────────────────┘

5. Componentes de UI especializados

5.1 FEStatusBadge

type FEStatus = 'emitida' | 'rechazada' | 'en_cola' | 'contingencia' | 'anulada';

const FEStatusBadge = ({ status }: { status: FEStatus }) => {
  const styles = {
    emitida:      'bg-green-100 text-green-800',
    rechazada:    'bg-red-100 text-red-800',
    en_cola:      'bg-yellow-100 text-yellow-800',
    contingencia: 'bg-orange-100 text-orange-800',
    anulada:      'bg-gray-100 text-gray-500',
  };
  return <span className={`px-2 py-1 rounded-full text-xs ${styles[status]}`}>{status}</span>;
};

5.2 TreasuryForecastChart

Gráfico crítico: tres bandas (P10/P50/P90) sobre 90 días con marcadores de alertas.

interface ForecastDataPoint {
  date: string;
  p10: number;
  p50: number;
  p90: number;
  alert?: { type: 'critical' | 'warning'; label: string };
}

const TreasuryForecastChart = ({ data }: { data: ForecastDataPoint[] }) => {
  // Recharts AreaChart con 3 áreas (P10-P90 relleno suave, P50 línea sólida)
  // Marcadores verticales en fechas con alertas (color rojo = critical, amarillo = warning)
  // Tooltip contextual: "Día 18: P50 = $1,200 — Alerta: gap de liquidez detectado"
  // Línea horizontal de $0 en rojo (zona de riesgo)
};

5.3 ARAgingTable

Aging report de cuentas por cobrar con heat-mapping por antigüedad:

6. Estados y manejo de errores FE

La FE es el módulo de mayor criticidad. Los estados de error deben ser imposibles de ignorar:

7. Vista contador (modo CPA)

El contador accede con un rol diferente que muestra: - Panel multi-empresa (lista de empresas clientes del CPA) - Acceso al GL completo y asientos manuales - Generación de estados financieros PCGA CR - Cola de cierre mensual: checklist de pasos (conciliación ✅ → ajustes ✅ → estados ✅ → cierre ✅) - Exportación a Excel/CSV de cualquier reporte

El CPA ve una empresa a la vez después de seleccionarla del panel. No hay vista consolidada multi-empresa en V1.0 (es una feature de roadmap Business).

8. Performance targets

9. Accesibilidad e i18n

• WCAG 2.1 AA — formularios de FE son críticos para el negocio, no pueden tener barreras de accesibilidad.
• i18n: es-CR default. Cambio de idioma disponible en configuración (es-MX y es-CO para expansión).
• Formato de fechas: DD/MM/AAAA (CR/CO) vs AAAA-MM-DD (MX requerido por SAT). El módulo FE adapta el formato según el país seleccionado.
• Moneda: CRC (₡) para CR, MXN ($) para MX, COP ($) para CO. El sistema mantiene siempre la moneda funcional del país + conversión a USD para el dashboard consolidado.

10. Fuera de alcance — V1.0

• App móvil nativa (la web es responsive, suficiente para V1.0)
• Portal de cliente final (para que los clientes de la empresa consulten sus facturas)
• Integración directa con plataformas bancarias (solo Belvo/Prometeo como middleware)
• Contabilidad multi-entidad consolidada (Business V1.1)
• Módulo de nómina (PayMind es módulo separado)

Ver también: Doc 07 (SRD Backend — APIs y FE endpoints) · Doc 08 (Modelo de Datos — tablas bk_) · Doc 09 (Motor Core — tesorería predictiva P10/P50/P90) · Doc 11 (Branding — colores Green BookMind)*