Skip to main content

09. Diseño de Interfaz y Arquitectura de Vistas (Basado en Anexo B)

Esta sección define la arquitectura de navegación y el mapa de pantallas de la Single Page Application (SPA) en React de MDX-Cloud. La interfaz está diseñada para acoplarse estrictamente a los 10 Dominios Lógicos (Bounded Contexts) establecidos en la arquitectura backend, garantizando que la estructura visual sea un reflejo íntegro de la estructura de base de datos.

09.1 Principios Globales de Diseño (Híbrido)​

  1. Responsive a Nivel General (Mobile-First y Adaptabilidad): La SPA se adaptará fluidamente a cualquier pantalla. Los DataGrids complejos mutarán a vistas de tarjetas condensadas (Cards) en dispositivos móviles, asegurando operatividad desde un smartphone.
  2. Alta Densidad Visual (Desktop-First): Para estaciones fijas (Mostrador, Compras, Cobranza), se prioriza el aprovechamiento de la pantalla mediante tipografía compacta y tablas de datos masivas.
  3. Keyboard-First (Operación Ágil): Las pantallas principales permitirán ejecutar flujos utilizando únicamente el teclado o un lector láser.
  4. Layout Adaptable: El Panel de navegación lateral (Sidebar) se transforma en un menú inferior en smartphones.
  5. Modos de Visualización: Soporte nativo para Tema Oscuro/Claro (Dark Mode) para reducir la fatiga visual.

09.2 Estructura Exhaustiva de Vistas por Dominio (10 Módulos)​

El árbol de navegación se renderiza dinámicamente según los Claims del Token JWT. A continuación se desglosa el 100% de las pantallas operativas, organizadas por módulo arquitectónico:

1. Catálogos Centrales (/catalogos)​

Módulo administrativo para la gestión de entidades core (CRUDs). Orientación: Escritorio.

  • /catalogos/productos: CRUD de la tabla maestra productos y sus presentaciones.
  • /catalogos/categorias: Agrupaciones operativas.
  • /catalogos/laboratorios: Origen de manufactura.
  • /catalogos/unidades-medida: Estandarización de capacidades y cajas.

2. Fiscal y SAT (/fiscal)​

Módulo administrativo gubernamental. Orientación: Escritorio.

  • /fiscal/claves-sat: CRUD para mapear y buscar sat_unidades y sat_productos_servicios.
  • /fiscal/regimenes: Catálogo de regímenes fiscales para clientes y facturación.

3. Ventas y Mostrador (/ventas)​

Orientación: Responsivo fluido (Campo) y Escritorio (Oficina/Mostrador).

  • /ventas/clientes: CRUD de clientes. Ficha comercial y saldos.
  • /ventas/matriz-precios: Asignación de reglas de precios y márgenes.
  • /ventas/cotizador: Pantalla híbrida. Captura única de pedidos B2B (RF-COM-02) con motor de cálculo dinámico de precios (RF-COM-01).
  • /ventas/pedidos: Listado general, edición de borradores y estatus de rastreo (RF-COM-03).
  • /ventas/mostrador: Interfaz POS (Punto de Venta) ultra rápida para Recepcionista (RF-FAC-01, RF-FAC-03).
  • /ventas/corte-caja: Conciliación del turno operativo de caja.

4. Compras (/compras)​

Orientación: Escritorio (Alta Densidad).

  • /compras/proveedores: CRUD administrativo de proveedores y condiciones comerciales.
  • /compras/sugerencias: DataGrid masivo accionado por el Algoritmo de Reabastecimiento (RF-WMS-06).
  • /compras/ordenes: Creación y seguimiento a las Órdenes de Compra generadas.

5. WMS, Logística y Sanitario (/wms)​

Orientación: Híbrida (PDAs industriales/Smartphones para Auxiliares, Escritorio para Encargado).

  • /wms/cedis: CRUD administrativo de sucursales y ubicaciones.
  • /wms/operacion/recepcion: Interfaz móvil (PDA) para escaneo contra OC (RF-WMS-01).
  • /wms/operacion/picking: Interfaz de botones inmensos guiada por el Algoritmo FEFO (RF-WMS-03).
  • /wms/inventario/kardex: Visor inmutable para movimientos_inventario.
  • /wms/inventario/ajustes: Flujo de captura de mermas y reacomodos.
  • /wms/transferencias: Panel híbrido para emitir solicitudes inter-sucursal (RF-WMS-07) y recepción física (RF-WMS-11).
  • /wms/sanitario/alertas: Monitor para bloquear comercialmente lotes ante Recalls (RF-WMS-04).

6. Cuentas por Cobrar (/cobranza)​

Orientación: Híbrida (Escritorio para operadores, Móvil para Gerencia).

  • /cobranza/cartera: Visor masivo de deudas vencidas que dispara el Bloqueo Automático Preventivo (RF-CRE-01).
  • /cobranza/pagos: Interfaz ancha de conciliación financiera impulsada por el Algoritmo FIFO de Abonos (RF-CRE-05).
  • /cobranza/autorizaciones: Buzón de excepciones de límite de crédito (RF-CRE-04). 100% Mobile-First.

7. Facturación Electrónica CFDI (/facturacion)​

Orientación: Escritorio.

[!IMPORTANT] Cero Facturación Manual: El sistema prohíbe la creación arbitraria de facturas. Todo CFDI timbrado emana estrictamente de un pedido (B2B) o de un ticket (Mostrador) ya validado. El ERP no es un portal genérico de facturación libre.

  • /facturacion/folios: Herramienta para ejecutar el Algoritmo de División Automática de Folios (RF-FAC-04).
  • /facturacion/comprobantes: Visor y cancelador de CFDI y Remisiones en bóveda.

8. Control de Acceso y Usuarios (/usuarios)​

Módulo administrativo. Orientación: Escritorio.

  • /usuarios/cuentas: Gestión estricta de cuentas de acceso (altas, bajas, reseteo de contraseñas) para el personal operativo.
  • /usuarios/roles-permisos: Matriz visual para la asignación dinámica de permisos granulares (RBAC). Permite al administrador crear perfiles híbridos a la medida, activando o desactivando accesos atómicos (ej. ventas.CrearPedidoCampo).

9. Auditoría Forense (/auditoria)​

Orientación: Escritorio (Alta Densidad).

  • /auditoria/logs: Visor global inmutable del esquema de auditoría para rastreo de operaciones críticas (RNF-PER-12), registrando la traza de EF Core.

10. Configuración del Sistema (/configuracion)​

Módulo administrativo transversal. Orientación: Escritorio.

  • /configuracion/ajustes: Panel central técnico. Gestión de llaves SMTP (envío de correos), credenciales API del PAC (Entorno Sandbox/Producción) y variables globales del ERP.

09.3 Consolidación Visual Offline y Eventos en Vivo​

  • Operación sin Conexión (Offline-First): Ante cortes de internet con el VPS, las rutas críticas (/ventas/cotizador, /wms/picking) operarán de forma continua gracias a Dexie.js (IndexedDB).
  • Badge de Conexión y Notificaciones: En la barra de navegación existirá un semáforo (Verde: Online / Ámbar: Offline). El sistema usará Service Workers para inyectar notificaciones de autorización inmediatas (Push) al teléfono del Gerente.

09.4 Integración de Hardware Periférico​

  • Escáneres Láser (Emulación de Teclado HID): Las pantallas POS y de recepción interceptan la ráfaga veloz de los escáneres en memoria para inyectar los códigos a React sin obligar al usuario a dar clic en un input.
  • Impresoras Térmicas 80mm: Emisión en segundo plano (vía Hangfire) utilizando CSS @media print para no pausar el flujo de caja del mostrador.
  • Facturas PDF Tamaño Carta: El servidor en .NET procesa el timbrado, deposita el archivo binario en Cloudflare R2, y devuelve la URL a React para su visualización.