Flujos de usuario (Wave 3 UX)
Este documento describe los cinco flujos de usuario representativos
(F1 a F5) que cubren los tres canales operativos de ExpressMX. Cada
flujo se encuentra en una pagina del archivo
ux-user-flows.puml (separadas via newpage)
y se modela como activity diagram con particiones que diferencian al
actor humano del sistema que reacciona. Cada paso cita el archivo
.tsx que lo materializa.
Ultima actualizacion: 2026-05-05
F1. Cliente nuevo solicita su primer servicio
| Etapa | Pantalla | Archivo |
|---|---|---|
| Inicio de la app | Splash | apps/mobile-client/app/index.tsx |
| Registro | Crear cuenta | apps/mobile-client/app/(auth)/register/index.tsx |
| Verificacion | Codigo OTP | (auth)/register |
| Login | Inicio de sesion | apps/mobile-client/app/(auth)/login/index.tsx |
| Home | Banners + servicios | apps/mobile-client/app/(tabs)/home/index.tsx |
| Catalogo | Buscar servicio | apps/mobile-client/app/(tabs)/services/index.tsx |
| Detalle | Servicio seleccionado | apps/mobile-client/app/service-detail/index.tsx |
| Solicitud | Stepper 4 pasos | apps/mobile-client/app/service-request/index.tsx |
| Tracking | Seguir prestador | apps/mobile-client/app/order-tracking/index.tsx |
| Pago | Cierre | apps/mobile-client/app/payment/index.tsx |
| Calificacion | Resena | apps/mobile-client/app/order-rating/index.tsx |
Resultado: orden completada y prestador calificado.
F2. Prestador toma trabajo y completa visita
Ciclo operativo del prestador desde la oferta hasta el cierre con PIN. El detalle de oferta tiene un timer de 12 segundos para forzar decision rapida; si vence, la oferta se libera al siguiente prestador disponible.
| Etapa | Pantalla | Archivo |
|---|---|---|
| Login | Inicio de sesion | apps/mobile-provider/app/(auth)/login/index.tsx |
| Cola | Trabajos disponibles | apps/mobile-provider/app/(tabs)/jobs/index.tsx |
| Oferta | Detalle 12s | apps/mobile-provider/app/job-detail/index.tsx |
| Inicio | Trabajo activo | apps/mobile-provider/app/job-active/index.tsx |
| PIN cliente | Validar llegada | apps/mobile-provider/app/job-active/pin-cliente.tsx |
| Evidencias | Foto antes | apps/mobile-provider/app/job-active/evidencias.tsx |
| Sobrecosto | Capturar y autorizar | apps/mobile-provider/app/job-active/sobrecosto.tsx |
| Evidencias | Foto despues | apps/mobile-provider/app/job-active/evidencias.tsx |
| Cierre | PIN prestador | apps/mobile-provider/app/job-active/pin-prestador.tsx |
Resultado: orden cerrada, evidencia almacenada, ambas calificaciones registradas.
F3. Admin de soporte investiga incidente con break-glass PIN
Flujo Zero Trust para acceso temporal a datos PII de un cliente desde
el workspace de soporte. Ningun admin tiene acceso permanente a perfil
de cliente; cada acceso requiere PIN de un solo uso, sesion de 15
minutos y registro en logs_acceso_cliente.
| Etapa | Pantalla | Archivo |
|---|---|---|
| Login | Panel admin | apps/web/src/app/(auth)/login/page.tsx |
| Workspace | Soporte | apps/web/src/app/dashboard/soporte/page.tsx |
| Ticket | Detalle | apps/web/src/app/dashboard/soporte/ticket/[id]/page.tsx |
| Acceso | Solicitar PIN | accion en ticket/[id] |
| Validacion | Ingresar PIN | modal en ticket/[id] |
| PII | Perfil cliente | apps/web/src/app/dashboard/clientes/[id]/page.tsx |
| Cierre | Sesion 15 min expira | sistema |
Resultado: hallazgo registrado en el ticket, evento auditable con duracion y motivo.
F4. Finanzas procesa corte mensual
Flujo del cierre quincenal/mensual: generar, revisar, exportar a banca y conciliar. La separacion de funciones (SoD) impide que el mismo admin genere y marque como depositado el lote.
| Etapa | Pantalla | Archivo |
|---|---|---|
| Workspace | Finanzas | apps/web/src/app/dashboard/finanzas/page.tsx |
| Cortes | Listado | apps/web/src/app/dashboard/cortes/page.tsx |
| Detalle | Corte revisado | apps/web/src/app/dashboard/finanzas/corte/[id]/page.tsx |
| Lote | Exportacion ACH | apps/web/src/app/dashboard/cortes/[id]/page.tsx |
| Conciliacion | Marcar depositado | apps/web/src/app/dashboard/cortes/[id]/page.tsx |
Resultado: corte cerrado, prestadores notificados con CFDI, archivo SPEI cargado en banca.
F5. Marketing crea campana programada
Flujo de creacion de banners segmentados con vigencia. El sistema indexa el segmento (zona, ciudad, rol) y sirve los banners desde la API que alimenta el home del cliente.
| Etapa | Pantalla | Archivo |
|---|---|---|
| Workspace | Marketing | apps/web/src/app/dashboard/marketing/page.tsx |
| Banners | Listado | apps/web/src/app/dashboard/banners/page.tsx |
| Creacion | Nuevo banner | apps/web/src/app/dashboard/banners/nuevo/page.tsx |
| Detalle | Banner activo | apps/web/src/app/dashboard/marketing/banner/[id]/page.tsx |
Resultado: campana programada, activa en su rango de fechas y con metricas accesibles desde el detalle.
Convenciones aplicadas
- Activity diagrams PlantUML con particiones por actor / sistema.
- Cada flujo en una pagina via
newpagepara encajar Letter portrait. - Cada paso cita el archivo
.tsxo ruta Next.js que lo materializa. - Sin emojis ni iconografia decorativa.
- Notas tecnicas a la derecha del paso para documentar invariantes (timers, expiraciones, validaciones).