ums

UMS — Propuesta de Diseño UX/UIRol:Lead UX/UI Designer & Product Designer SeniorVersión:1.0 — 2026-05-15Audiencia:Equipo frontend, Product Owner, Tech LeadEstado:Propuesta lista para revisión y validación

Tabla de Contenidos

  1. Resumen UX del Producto
  2. Personas y Objetivos de Usuario
  3. Mapa de Módulos Principales
  4. Flujos Críticos de Usuario
  5. Arquitectura de Información
  6. Navegación Propuesta
  7. Wireframes Descriptivos
  8. Componentes UI Recomendados
  9. Estados de Pantalla
  10. Reglas de Accesibilidad y Usabilidad
  11. Propuesta Responsive
  12. Priorización MVP vs Futuras Mejoras
  13. Riesgos UX y Recomendaciones
  14. Supuestos y Preguntas Abiertas

1. Resumen UX del Producto

Naturaleza del sistema

UMS es unportal de administración de identidades y autorizaciónde clase enterprise (B2B SaaS multi-tenant). No es un producto de consumo masivo: sus usuarios son administradores IT, analistas de seguridad, aprobadores de accesos y —marginalmente— usuarios finales B2B que completan formularios de onboarding.

La experiencia de usuario tiene tres capas funcionalmente distintas con audiencias distintas:

Capa Interfaz Audiencia principal  
PAP — Policy Administration Point Portal administrativo complejo Admins de plataforma, admins de tenant  
Portal de aprobaciones Bandeja de tareas + formularios de decisión Aprobadores, sponsors  
Login Portal Pantalla de autenticación personalizable por tenant Usuarios finales B2B ### Principio de diseño central

Complejidad bajo la superficie, claridad en la superficie.UMS gestiona conceptos técnicamente densos (grafos de permisos, jerarquías de roles, templates, RLS). El diseño debeesconder la complejidad técnicatras interfaces orientadas a tareas de negocio: “Aprobar acceso de este usuario”, “Ver qué permisos tiene esta persona”, “Bloquear acceso por documento vencido”.

Tono y estilo visual

2. Personas y Objetivos de Usuario

Persona 1 — Platform Super AdminContexto:Arquitecto o DevOps engineer del equipo que opera UMS como plataforma. Acceso ilimitado. Responsable de registrar sistemas cliente, configurar IdPs globales y monitorear la salud de la plataforma.

Objetivos primarios:

Persona 2 — Tenant Admin (IT Admin del cliente B2B)

Contexto:Responsable IT de una empresa cliente (ej: Logistics Corp). Gestiona usuarios de su organización, asigna perfiles, aprueba solicitudes de acceso y revisa documentos de cumplimiento.

Objetivos primarios:

Frecuencia de uso:Alta, 2-4 veces por día

Persona 3 — Aprobador (Approver)

Contexto:Manager o Jefe de área que recibe solicitudes de aprobación: onboarding de nuevo usuario, solicitud de acceso externo, promoción de rol. No es técnico; opera principalmente desde la bandeja de aprobaciones.

Objetivos primarios:

Frecuencia de uso:Esporádica, picos en momentos de onboarding masivo

Persona 4 — Sponsor User (Usuario Patrocinador)

Contexto:Empleado interno que solicita acceso externo para un contratista o partner B2B. Inicia el flujo de External Access Request.

Objetivos primarios:

Persona 5 — Compliance Officer / IGA AnalystContexto:Analista de seguridad o cumplimiento que supervisa el estado documental de todos los usuarios, la validez de los accesos y el proceso de promoción de roles.

Objetivos primarios:

Persona 6 — Usuario Final B2B (End User)

Contexto:Empleado de empresa cliente (ej: operador de montacargas en Logistics Corp) que debe autenticarse y, en ocasiones, subir documentos o completar su perfil de onboarding.

Objetivos primarios:

3. Mapa de Módulos Principales

UMS Portal
├── Dashboard Global
│
├── IDENTITY (Identidad)
│ ├── Tenants (Organizaciones)
│ │ ├── Árbol jerárquico de tenants
│ │ └── Detalle de tenant + configuración IdP
│ ├── Usuarios
│ │ ├── Lista filtrable de usuarios
│ │ ├── Detalle de usuario (perfil, estado, documentos, permisos)
│ │ └── Registro de nuevo usuario
│ └── Sedes (Branches)
│
├── AUTHORIZATION (Autorización)
│ ├── Sistemas (System Suites)
│ │ ├── Lista de sistemas registrados
│ │ └── Topología: Módulos → Menús → Opciones → Acciones
│ ├── Roles
│ │ ├── Jerarquía de roles por sistema
│ │ └── Criterios de promoción (IGA)
│ ├── Templates de Permisos
│ │ ├── Lista + estado (DRAFT / PUBLISHED / DEPRECATED)
│ │ └── Editor de permisos del template
│ └── Perfiles
│ ├── Lista de perfiles activos
│ └── Asignación de templates a perfiles
│
├── APPROVALS (Aprobaciones)
│ ├── Bandeja de Aprobaciones (Inbox)
│ │ ├── Pendientes (con indicador SLA)
│ │ ├── Historial (aprobadas / rechazadas / vencidas)
│ │ └── Detalle de solicitud + formulario de decisión
│ └── Configuración de Workflows
│ └── Definición de flujos, aprobadores, SLA
│
├── IGA (Governance)
│ ├── Procesos de Promoción
│ │ ├── Lista de procesos activos por estado
│ │ └── Detalle: criterios cumplidos / pendientes
│ └── Delegaciones
│ ├── Delegaciones activas
│ └── Crear / revocar delegación
│
├── COMPLIANCE (Cumplimiento)
│ ├── Dashboard de Cumplimiento
│ │ ├── Documentos próximos a vencer
│ │ └── Usuarios con documentos críticos vencidos
│ ├── Tipos de Documento
│ │ ├── Catálogo con criticidad y políticas
│ │ └── Reglas de notificación
│ ├── Documentos de Usuario
│ │ ├── Bandeja de validación (PENDING_REVIEW)
│ │ └── Historial de documentos por usuario
│ └── Políticas de Acceso por Expiración
│
├── CONFIGURATION (Configuración)
│ ├── Parámetros del Sistema (jerarquía ENV > SYSTEM > TENANT)
│ ├── Feature Flags
│ │ └── Toggles con targeting multi-dimensional
│ └── Configuración IdP (por tenant)
│
├── AUDIT (Auditoría)
│ ├── Log de Eventos de Dominio
│ ├── Log de Eventos de Seguridad
│ └── Cambios de Permisos
│
└── HERRAMIENTAS
 ├── Visualizador del Grafo de Permisos
 └── Monitor de Sesiones Activas

4. Flujos Críticos de Usuario

Flujo 1 — Onboarding de Usuario Interno (FS-01, FS-05, FS-06)

[Admin de Tenant]
 │
 ▼
 Dashboard → Usuarios → Nuevo Usuario
 │
 ▼
 Formulario: nombre, email, categoría (INTERNAL), sede
 │
 ▼
 Sistema asigna: status=PENDING
 Auto-asignación de template si aplica regla (FS-06)
 │
 ├─ [SIN workflow de aprobación] → status=ACTIVE automáticamente
 │
 └─ [CON workflow de aprobación] → Notificación al aprobador
 │
 ▼
 Bandeja del Aprobador → Revisar → Aprobar
 │
 ▼
 status=ACTIVE → Notificación al usuario registrado

Pantallas involucradas:Dashboard, Lista de Usuarios, Formulario de Usuario, Detalle de Usuario, Bandeja de Aprobaciones, Detalle de Solicitud

Flujo 2 — Solicitud de Acceso Externo B2B (FS-10)

[Sponsor User]
 │
 ▼
 Aprobaciones → Nueva Solicitud → Tipo: B2B Access Request
 │
 ▼
 Formulario: datos del usuario externo, organización,
 justificación, sistema solicitado,
 documentos adjuntos requeridos
 │
 ▼
 Solicitud creada → status=PENDING
 Notificación al aprobador designado por workflow
 │
 ▼
 [Aprobador]
 Bandeja → Solicitud con risk_score visible
 → Revisar contexto, documentos, sponsor
 → Decisión: APPROVE / REJECT / ESCALATE / DELEGATE
 │
 ├─ APPROVED → Usuario B2B creado, perfil asignado, notificación
 └─ REJECTED → Notificación al sponsor con motivo

Pantallas involucradas:Bandeja de Aprobaciones, Formulario de Nueva Solicitud, Detalle de Solicitud con panel de decisión, Historial de Solicitudes

Flujo 3 — Validación de Documento de Cumplimiento (FS-11, FS-16)

[Usuario Final]
 │
 ▼
 Mi Perfil → Documentos → Subir Documento
 (tipo, archivo, fecha emisión, fecha vencimiento)
 │
 ▼
 status=PENDING_REVIEW

[Compliance Officer]
 │
 ▼
 Compliance → Bandeja de Validación → Documento pendiente
 → Previsualización + metadatos
 → VALIDAR o RECHAZAR (con motivo)
 │
 ├─ VALID → Documento activo, acceso habilitado si era bloqueante
 └─ REJECTED → Notificación al usuario, debe resubir
 │
 ▼
 [Sistema — background worker cada hora]
 Si fecha_vencimiento <= hoy:
 status=EXPIRED →
 EnforcementAction según política:
 BLOCK_ACCESS / NOTIFY_ONLY / DOWNGRADE_ROLE / SUSPEND

Pantallas involucradas:Mi Perfil (sección Documentos), Bandeja de Validación de Documentos, Dashboard de Cumplimiento (alerta de expiración)

Flujo 4 — Diagnóstico de Permisos (FS-07)

[Admin / Compliance Officer]
 │
 ▼
 Herramientas → Visualizador de Grafo de Permisos
 │
 ▼
 Seleccionar: Usuario + Sistema + [Sede opcional]
 │
 ▼
 Visualización del grafo compilado:
- Perfiles activos del usuario
- Templates vinculados a cada perfil
- ALLOW / DENY por acción (con fuente del permiso)
- Regla de Deny Dominance destacada si aplica
 │
 ▼
 [Opcional] Exportar reporte en JSON / CSV

Pantallas involucradas:Herramientas → Visualizador de Grafo

Flujo 5 — Proceso de Promoción de Rol IGA (FS-12)

[Sistema — background worker continuo]
 Evaluando: UserPromotionProcess.status=EVALUATING
 Verifica flags: seniority, compliance docs, business score
 │
 ├─ No cumplido → continúa EVALUATING (visible en IGA)
 └─ Cumplido → status=CRITERIA_MET → Crea ApprovalRequest
 │
[Aprobador IGA]
 ▼
 Bandeja → Solicitud de tipo ROLE_PROMOTION
 → Ver: usuario, rol actual, rol destino, criterios cumplidos
 → APPROVE / REJECT
 │
 ├─ APPROVED → status=PROMOTED, perfil actualizado
 └─ REJECTED → status=EVALUATING (reinicia ciclo)

Pantallas involucradas:IGA → Procesos de Promoción (lista + detalle), Bandeja de Aprobaciones

Flujo 6 — Login Portal Personalizado (FS-08, FS-09)

[Usuario Final B2B]
 │
 ▼
 Downstream App → Redirect a UMS Login Portal
 (URL incluye: tenant_id, system_id, redirect_uri)
 │
 ▼
 Login Portal muestra:
- Logo y branding del tenant
- Métodos de auth disponibles:
 • Passkey / FIDO2
 • Magic Link
 • Email + MFA
 • SSO (si tenant tiene IdP externo)
 │
 ▼
 Sistema calcula risk_score (6 factores):
 score < 20 → login directo
 score 20-40 → MFA recomendado / requerido
 score > 70 → MFA + Security Review
 │
 ▼
 Auth exitosa → JWT firmado → Redirect a downstream app

Pantallas involucradas:Login Portal (pantalla única, altamente customizable por tenant)

5. Arquitectura de Información

Jerarquía de navegación de 3 niveles

Nivel 1 (Módulo) Nivel 2 (Sección) Nivel 3 (Vista de detalle)
───────────────── ────────────────────── ──────────────────────────
Identity → Tenants → Detalle de Tenant
 Usuarios → Detalle de Usuario
 Sedes → Detalle de Sede

Authorization → Sistemas → Topología del Sistema
 Roles → Detalle de Rol + Jerarquía
 Templates → Editor de Template
 Perfiles → Detalle de Perfil

Approvals → Bandeja → Detalle de Solicitud
 Configuración → Editor de Workflow

IGA → Promociones → Detalle de Proceso
 Delegaciones → Detalle de Delegación

Compliance → Dashboard → (vista de cuadro de mando)
 Tipos de Documento → Detalle de Tipo
 Documentos → Detalle de Documento
 Políticas → Editor de Política

Configuration → Parámetros → Editor de Parámetro
 Feature Flags → Editor de Flag
 Configuración IdP → Editor de IdP

Audit → Eventos de Dominio → Detalle de Evento
 Eventos de Seguridad → Detalle de Evento
 Cambios de Permisos → Detalle de Cambio

Herramientas → Grafo de Permisos → Vista del grafo
 Monitor de Sesiones → Vista de sesiones

Relaciones de entidad clave (para navegación contextual)

Navegación contextual requerida: al ver el detalle de un usuario, deben existir accesos rápidos a sus perfiles, sus documentos y sus solicitudes de aprobación pendientes sin salir de la vista.

6. Navegación Propuesta

Shell principal (authenticated)

┌─────────────────────────────────────────────────────────────────┐
│ [UMS Logo] [Tenant Switcher ▼] [ 3] [Avatar ▼] │
├────────────┬────────────────────────────────────────────────────┤
│ │ │
│ SIDEBAR │ CONTENT AREA │
│ │ │
│ ● Dashboard│ │
│ │ │
│ IDENTITY │ │
│ Tenants │ │
│ Usuarios │ │
│ Sedes │ │
│ │ │
│ AUTHORIZ. │ │
│ Sistemas │ │
│ Roles │ │
│ Templates │ │
│ Perfiles │ │
│ │ │
│ APPROVALS │ │
│ Bandeja ⁽³⁾│ │
│ Workflows │ │
│ │ │
│ IGA │ │
│ Promoc. │ │
│ Delegac. │ │
│ │ │
│ COMPLIANCE │ │
│ Dashboard │ │
│ Documentos│ │
│ Políticas │ │
│ │ │
│ CONFIG │ │
│ Parámetros│ │
│ Feat. Flags│ │
│ IdP │ │
│ │ │
│ AUDIT │ │
│ Eventos │ │
│ │ │
│ HERRAM. │ │
│ Grafo │ │
│ Sesiones │ │
│ │ │
└────────────┴────────────────────────────────────────────────────┘

Reglas de navegación

  1. Sidebar colapsable:En pantallas < 1280px el sidebar colapsa a íconos únicamente
  2. Breadcrumbs obligatoriosen vistas de nivel 3 (detalle): Identity > Usuarios > Maria García
  3. Tenant Switchersolo visible para Super Admin; los Tenant Admins ven únicamente su tenant
  4. Contador de pendientesen “Bandeja” del sidebar actualizado en tiempo real (WebSocket o polling 30s)
  5. Notificaciones:campana en header con dropdown de últimas 5 alertas (documentos vencidos, solicitudes SLA crítico)
  6. Perfil de usuario:avatar en header → Mis datos, Mis delegaciones, Cerrar sesión

Roles y visibilidad del sidebar

Sección sidebar Super Admin Tenant Admin Approver Compliance IGA Analyst  
Identity completo su tenant   lectura lectura  
Authorization completo parcial   lectura lectura  
Approvals            
IGA            
Compliance         lectura  
Configuration   parcial        
Audit   su tenant     lectura  
Herramientas           —

7. Wireframes Descriptivos

7.1 — Dashboard Global

┌─────────────────────────────────────────────────────────────────┐
│ Dashboard Hoy: 15 May 2026│
├───────────┬───────────┬───────────┬─────────────────────────────┤
│ USUARIOS │ PENDIENTES│ DOCS │ ALERTAS CRÍTICAS │
│ ACTIVOS │ APROBAR │ POR VENCER│ │
│ │ │ │ 3 usuarios con docs │
│ 1,247 │ 8 │ 15 │ CRÍTICOS vencidos │
│ ↑ 12 hoy │ 2 SLA < 1h│ < 30 días │ [Ver Compliance] │
│ │ │ │ │
│ [Ver todos│[Ir Bandeja│[Ver Docs] │ SLA vencido: Solicitud │
│ usuarios]│ ] │ │ #REQ-0041 — B2B Access │
│ │ │ │ [Ir a solicitud] │
└───────────┴───────────┴───────────┴─────────────────────────────┤
│ │
│ ACTIVIDAD RECIENTE SOLICITUDES PENDIENTES│
│ ───────────────── ──────────────────────│
│ • maria.garcia activada hace 5m #REQ-0041 B2B Access │
│ • Template "Logistics" publ. hace 1h SLA: vence en 1h │
│ • juan.perez BLOCKED hace 2h #REQ-0039 Onboarding │
│ (doc CRITICAL vencido) SLA: vence en 4h │
│ • Sistema "Route Planner" hace 3h #REQ-0038 Promoción │
│ actualizado SLA: vence mañana │
│ [Ver audit log completo] [Ver todos →] │
│ │
└──────────────────────────────────────────────────────────────────┘

7.2 — Lista de Usuarios

┌──────────────────────────────────────────────────────────────────┐
│ Identity > Usuarios │
│ [+ Nuevo Usuario] │
├──────────────────────────────────────────────────────────────────┤
│ Buscar por nombre, email... [Tenant ▼] [Status ▼] [Cat ▼]│
│ [Exportar CSV] │
├────┬──────────────────┬─────────────────┬────────┬──────┬───────┤
│ │ NOMBRE │ EMAIL │ STATUS │ CAT │ACCIONES│
├────┼──────────────────┼─────────────────┼────────┼──────┼───────┤
│ │ Maria García │ m.garcia@co.com │ ACTIVE │ INT │ ⋯ │
│ │ Juan Pérez │ j.perez@co.com │ BLOCKED│ EXT │ ⋯ │
│ │ │ │ Doc │ │ │
│ │ Carlos Lima │ c.lima@b2b.com │ PENDING│ B2B │ ⋯ │
│ │ │ │ ⏳ Apro│ │ │
│ │ Ana Torres │ a.torres@co.com │ ACTIVE │ INT │ ⋯ │
├────┴──────────────────┴─────────────────┴────────┴──────┴───────┤
│ Mostrando 1-25 de 1,247 [< Prev] Pág 1 de 50 [Next >] │
└──────────────────────────────────────────────────────────────────┘

Notas de implementación:

7.3 — Detalle de Usuario

┌──────────────────────────────────────────────────────────────────┐
│ Identity > Usuarios > Maria García [Editar] │
├──────────────────────────────────────────────────────────────────┤
│ ┌────────┐ Maria García Status: ● ACTIVE │
│ │ Avatar │ maria.garcia@logistics.com Cat: INTERNAL │
│ │ MG │ Tenant: Logistics Corp Sede: Callao │
│ └────────┘ Creado: 2026-01-10 Último login: Hoy │
│ │
│ ────────────────────────────────────────────────────────────── │
│ TABS: [Perfiles] [Documentos] [Solicitudes] [Sesiones] [Audit] │
│ ────────────────────────────────────────────────────────────── │
│ │
│ [TAB ACTIVO: PERFILES] [+ Asignar Perfil] │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Perfil: Logistics Analyst │ │
│ │ Sede: Callao Terminal Sistema: Route Planner │ │
│ │ Scope: BRANCH_SCOPED Templates: 3 asignados │ │
│ │ [Ver] [Revocar] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Perfil: WMS Basic Access │ │
│ │ Sede: — Sistema: WMS │ │
│ │ Scope: ORG_WIDE Templates: 1 asignado │ │
│ │ [Ver] [Revocar] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ─────────────────────────────── ACCIONES RÁPIDAS ───────────── │
│ [Ver Grafo de Permisos] [Bloquear Usuario] [Reset MFA] │
└──────────────────────────────────────────────────────────────────┘

TAB: Documentos

│ [TAB ACTIVO: DOCUMENTOS] [+ Subir Documento] │
│ │
│ ┌──────────────┬──────────────────┬────────────┬──────────────┐ │
│ │ TIPO │ CRITICIDAD │ VENCE │ STATUS │ │
│ ├──────────────┼──────────────────┼────────────┼──────────────┤ │
│ │ Carnet Sanid.│ CRITICAL │ 2026-06-01 │ ● VALID │ │
│ │ ID Nacional │ HIGH │ 2028-12-31 │ ● VALID │ │
│ │ Cert. Seguri.│ MEDIUM │ 2026-05-30 │ VENCE 15d │ │
│ └──────────────┴──────────────────┴────────────┴──────────────┘ │

7.4 — Bandeja de Aprobaciones

┌──────────────────────────────────────────────────────────────────┐
│ Approvals > Bandeja de Aprobaciones │
├──────────────────────────────────────────────────────────────────┤
│ TABS: [Pendientes (8)] [En progreso (2)] [Historial] [Delegadas]│
├──────────────────────────────────────────────────────────────────┤
│ Buscar... [Tipo ▼] [Prioridad ▼] Ordenar: SLA ▲ │
├────┬──────────────┬──────────────┬──────────┬────────────────────┤
│SLA │ ID / TIPO │ SOLICITANTE │ SUJETO │ ACCIONES │
├────┼──────────────┼──────────────┼──────────┼────────────────────┤
│1h │ REQ-0041 │ Luis Ramos │ ext.b2b@ │ [Revisar] │
│ │ B2B Access │ (Sponsor) │ corp.com │ │
├────┼──────────────┼──────────────┼──────────┼────────────────────┤
│ 4h │ REQ-0039 │ Ana Torres │ new.user │ [Revisar] │
│ │ Onboarding │ │ @co.com │ │
├────┼──────────────┼──────────────┼──────────┼────────────────────┤
│ 1d │ REQ-0038 │ Sistema IGA │ j.perez │ [Revisar] │
│ │ Rol Promoc. │ (Automático) │ @co.com │ │
├────┴──────────────┴──────────────┴──────────┴────────────────────┤
│ 8 solicitudes pendientes · 2 con SLA crítico (<2h) │
└──────────────────────────────────────────────────────────────────┘

7.5 — Detalle de Solicitud de Aprobación

┌──────────────────────────────────────────────────────────────────┐
│ Approvals > Bandeja > REQ-0041 SLA: vence en 1h │
├──────────────────────────────────────────────────────────────────┤
│ SOLICITUD DE ACCESO EXTERNO B2B │
│ ─────────────────────────────────────────────────────────────── │
│ Usuario solicitado: external.user@contractor.com │
│ Organización: FastFreight Logistics SA │
│ Sistema: Route Planner │
│ Perfil solicitado: Freight Analyst (ORG_WIDE) │
│ Sponsor: Luis Ramos · Operations Manager │
│ Justificación: "Proveedor contratado para Q2-2026. │
│ Requiere acceso para gestión de rutas." │
│ │
│ RISK SCORE: ██████████░░ 68/100 (RECOMEND. REVISIÓN) │
│ · Geographic Anomaly: IP fuera del país (+25) │
│ · Device: dispositivo nuevo (+20) │
│ · Login Frequency: primera vez (+23) │
│ │
│ DOCUMENTOS ADJUNTOS: │
│ Contrato-FastFreight-2026.pdf [Ver] │
│ ID-Carlos-Lima.pdf [Ver] │
│ │
│ HISTORIAL: │
│ 2026-05-15 09:00 Solicitud creada por Luis Ramos │
│ 2026-05-15 10:00 Asignada a ti para aprobación │
│ ─────────────────────────────────────────────────────────────── │
│ │
│ TU DECISIÓN: │
│ [Motivo / Comentario (requerido si rechaza o escala)...] │
│ │
│ [ APROBAR] [ RECHAZAR] [ ESCALAR] [↗ DELEGAR] │
└──────────────────────────────────────────────────────────────────┘

7.6 — Editor de Topology de Sistema (FS-04)

┌──────────────────────────────────────────────────────────────────┐
│ Authorization > Sistemas > Route Planner [Publicar] [···]│
├──────────────────────────────────────────────────────────────────┤
│ TOPOLOGÍA DE MÓDULOS [+ Módulo] │
│ ─────────────────────────────────────────────────────────────── │
│ ▼ Planning Module [+ Menú]│
│ ▼ Route Menu [+ Opción] │
│ ├─ Route List View [+ Acción│
│ │ └─ route.read ] │
│ │ └─ route.create │
│ └─ Route Detail View │
│ └─ route.read │
│ └─ route.edit │
│ └─ route.delete │
│ ▶ Reporting Module [+ Menú]│
│ ▶ Admin Module [+ Menú]│
│ ─────────────────────────────────────────────────────────────── │
│ Arrastra para reordenar módulos y menús │
└──────────────────────────────────────────────────────────────────┘

7.7 — Visualizador del Grafo de Permisos (FS-07)

┌──────────────────────────────────────────────────────────────────┐
│ Herramientas > Visualizador de Grafo de Permisos │
├──────────────────────────────────────────────────────────────────┤
│ Usuario: [Maria García ▼] Sistema: [Route Planner ▼] │
│ Sede: [Callao Terminal ▼] [Analizar] │
├──────────────────────────────────────────────────────────────────┤
│ │
│ RESULTADO: PERMISOS COMPILADOS │
│ ─────────────────────────────────────────────────────────────── │
│ │
│ PERFIL: Logistics Analyst (Callao) │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Template: Analyst Base v2.1 (PUBLISHED) │ │
│ │ route.read route.create │ │
│ │ route.delete (DENY explícito) │ │
│ │ │ │
│ │ Template: Reporting Access v1.0 (PUBLISHED) │ │
│ │ report.view report.export │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ PERFIL: WMS Basic Access (ORG_WIDE) │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Template: WMS Reader v1.0 (PUBLISHED) │ │
│ │ wms.read │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ DENY DOMINANCE activo en: route.delete │
│ Fuente: Template "Analyst Base v2.1" — regla explícita │
│ │
│ RESUMEN: 5 acciones permitidas · 1 denegada explícitamente │
│ [Exportar JSON] [Exportar CSV] │
└──────────────────────────────────────────────────────────────────┘

7.8 — Dashboard de Cumplimiento

┌──────────────────────────────────────────────────────────────────┐
│ Compliance > Dashboard │
├──────────────────────────────────────────────────────────────────┤
│ ┌───────────────┬───────────────┬──────────────┬───────────────┐│
│ │ DOCS VÁLIDOS │ EN REVISIÓN │ POR VENCER │ VENCIDOS ││
│ │ │ │ (< 30 días) │ CRÍTICOS ││
│ │ 1,203 │ 12 │ 15 │ 3 ││
│ │ │ │ Atención │ URGENTE ││
│ └───────────────┴───────────────┴──────────────┴───────────────┘│
│ │
│ USUARIOS BLOQUEADOS POR DOCUMENTOS [Ver todos] │
│ ─────────────────────────────────────────────────────────────── │
│ Juan Pérez — Carnet Sanitario vencido 2026-05-01 │
│ Enforcement: BLOCK_ACCESS · [Ver usuario] │
│ Carlos Ríos — ID Nacional vencido 2026-04-15 │
│ Enforcement: BLOCK_ACCESS · [Ver usuario] │
│ │
│ PRÓXIMOS A VENCER (< 30 días) [Ver todos] │
│ ─────────────────────────────────────────────────────────────── │
│ Maria García — Cert. Seguridad · Vence 2026-05-30 (15 días) │
│ Ana Torres — Carnet Sanitario · Vence 2026-06-01 (17 días) │
│ │
│ BANDEJA DE VALIDACIÓN (12 documentos) [Ver bandeja] │
└──────────────────────────────────────────────────────────────────┘

7.9 — Login Portal (FS-08, FS-09)

┌──────────────────────────────────────────────────────────────────┐
│ │
│ [LOGO DEL TENANT — dinámico] │
│ │
│ Accede a Route Planner — Logistics Corp │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Email │ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ usuario@empresa.com │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [ Continuar con Passkey / FIDO2 ] │ │
│ │ [ Continuar con Magic Link ] │ │
│ │ [ Continuar con SSO corporativo ] │ │
│ │ │ │
│ │ ──────────── o usa contraseña ──────────── │ │
│ │ [ Ingresar con Email + Contraseña ] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ¿Problemas para acceder? Contacta a tu administrador │
│ │
│ ────────────────────────────────────────────────────────────── │
│ Powered by UMS · Política de Privacidad · Términos de Uso │
└──────────────────────────────────────────────────────────────────┘

Variante MFA requerida (score > 40):

│ Verificación adicional requerida │
│ Hemos detectado un inicio de sesión desde una ubicación nueva. │
│ │
│ [ Verificar con App Authenticator ] │
│ [ Enviar código a m***@empresa.com ] │
│ [ Enviar SMS a +51 9** *** **89 ] │

7.10 — Mi Perfil / Self-service (Usuario Final)

┌──────────────────────────────────────────────────────────────────┐
│ Mi Perfil │
├──────────────────────────────────────────────────────────────────┤
│ ┌────────┐ Carlos Lima │
│ │ CL │ carlos.lima@fastfreight.com │
│ └────────┘ Organización: FastFreight Logistics │
│ Status: ● ACTIVE │
│ │
│ TABS: [Mis Accesos] [Mis Documentos] [Seguridad] │
│ │
│ [TAB: MIS DOCUMENTOS] [+ Subir Documento] │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ ● Carnet Sanitario VALID Vence: 2026-12-01 │ │
│ │ Certificado de Seguridad PENDING Subido ayer │ │
│ │ └─ En revisión por el equipo de compliance │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ + Subir nuevo documento │ │
│ │ Tipo: [Seleccionar tipo ▼] │ │
│ │ Archivo: [Seleccionar archivo...] │ │
│ │ Fecha emisión: [__/__/____] │ │
│ │ Fecha vencimiento: [__/__/____] │ │
│ │ [Subir] │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘

8. Componentes UI Recomendados

Design tokens base

Colors:
 primary-900: "#1e2a4a" # Azul profundo — header, sidebar
 primary-700: "#2d4080" # Azul medio — botones primarios
 primary-100: "#e8edff" # Azul claro — fondos de selección

 success: "#16a34a" # Verde — ACTIVE, VALID, APPROVED
 warning: "#d97706" # Ámbar — PENDING, por vencer, SLA warning
 danger: "#dc2626" # Rojo — BLOCKED, EXPIRED, REJECTED, SLA crítico
 neutral: "#6b7280" # Gris — texto secundario, bordes

Typography:
 font-family: "Inter", system-ui, sans-serif
 font-mono: "JetBrains Mono", "Fira Code", monospace # para IDs, JSON
 size-base: 14px
 size-sm: 12px
 size-lg: 16px
 size-xl: 20px

Spacing: 4px base grid (4, 8, 12, 16, 24, 32, 48, 64)

Border-radius: 6px (inputs, cards), 4px (badges), 8px (modals)

Componentes fundamentales

Componente Uso en UMS Nota  
StatusBadge Estado de usuario, documento, solicitud Colores semánticos + ícono  
SlaCountdown SLA en bandeja de aprobaciones Se vuelve rojo < 2h  
RiskScoreBar Puntaje de riesgo en aprobaciones Barra con breaks: 20/40/70  
DataTable Todas las listas (usuarios, perfiles, docs) Sort, filter, export  
FilterBar Encima de cada DataTable Tags visibles por filtro activo  
ConfirmDialog Acciones destructivas (bloquear, revocar) Requiere texto de confirmación  
TabPanel Detalle de usuario, sistemas, etc. URL hash por tab  
TreeView Jerarquía de tenant, topología de módulos Expandable/colapsable  
PermissionMatrix Editor de templates Grid Recurso × Acción con toggle ALLOW/DENY  
GraphViewer Visualizador de permisos compilados Expandable por perfil/template  
FileUploader Carga de documentos Drag & drop, validación de tipo/tamaño  
NotificationToast Feedback de acciones Stack, auto-dismiss 5s  
ApprovalDecisionForm Formulario en detalle de solicitud Motivo requerido en REJECT/ESCALATE  
ActivityFeed Historial en detalle de usuario Timeline vertical  
TenantSwitcher Header — solo Super Admin Search + recent  
BrandingPreview Editor de branding del Login Portal Preview en tiempo real ### Patrón de formularios

9. Estados de Pantalla

Estado: Carga (Loading)

Estado: Vacío (Empty State)

Contexto Mensaje CTA  
Lista de usuarios (sin resultados de búsqueda) “No se encontraron usuarios con estos filtros” [Limpiar filtros]  
Lista de usuarios (tenant sin usuarios) “Aún no hay usuarios registrados en este tenant” [+ Crear primer usuario]  
Bandeja de aprobaciones “No tienes solicitudes pendientes · Todo al día “ —  
Tab documentos (usuario sin docs) “Este usuario no ha subido documentos” [Subir documento]  
Historial de audit “No hay eventos registrados para este período” [Ampliar rango de fechas]  
Grafo de permisos (sin perfiles) “Este usuario no tiene perfiles asignados” [Asignar perfil] —

Estado: Error

┌──────────────────────────────────────────────────────────────────┐
│ │
│ Error al cargar los usuarios │
│ │
│ No se pudo obtener la información. Puede ser un problema │
│ de conectividad temporal. │
│ │
│ Código de error: [UUID del trace si disponible] │
│ │
│ [Reintentar] [Volver al Dashboard] │
│ │
└──────────────────────────────────────────────────────────────────┘

Estado: Éxito

Estado: Permisos Insuficientes

┌──────────────────────────────────────────────────────────────────┐
│ │
│ Sin acceso a esta sección │
│ │
│ No tienes permisos para ver Configuración > Feature Flags. │
│ │
│ Si crees que deberías tener acceso, contacta a tu │
│ administrador de tenant. │
│ │
│ [Volver al Dashboard] │
│ │
└──────────────────────────────────────────────────────────────────┘

Estado: SLA Crítico (específico de Aprobaciones)

┌──────────────────────────────────────────────────────────────────┐
│ ATENCIÓN: Solicitud REQ-0041 vence en 47 minutos │
│ Si no hay decisión, la solicitud expirará automáticamente. │
│ El usuario externo NO obtendrá acceso. [Revisar ahora]│
└──────────────────────────────────────────────────────────────────┘

Banner fijo al tope del contenido (no modal) cuando hay solicitudes con SLA < 2h.

10. Reglas de Accesibilidad y Usabilidad

WCAG 2.1 AA — Requisitos mínimos

Regla Implementación en UMS  
Contraste de color Ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande. Verificar todos los badges de status  
Navegación por teclado Tab order lógico en formularios. Modales atrapa el foco. Escape cierra modal  
Etiquetas ARIA aria-label en íconos sin texto. aria-live en toasts y contadores de pendientes  
Roles semánticos <table> para DataTables con scope en headers. <nav> para sidebar. <main> para content area  
Estados de focus Outline visible (2px azul) en todos los elementos interactivos. Nunca outline: none sin alternativa  
Mensajes de error Asociados al input via aria-describedby. No solo con color  
Skip link “Ir al contenido principal” como primer elemento focusable de la página  
Textos alternativos Avatares con alt="Foto de {nombre}". Íconos decorativos con aria-hidden ### Reglas de usabilidad enterprise
  1. Confirmación de acciones destructivas:Bloquear usuario, revocar perfil, rechazar solicitud siempre requieren confirmación explícita
  2. Persistencia de filtros:Filtros de lista se guardan en URL (query params) para poder compartir búsquedas y soportar back del navegador
  3. Feedback inmediato:Toda acción que demora > 300ms muestra indicador de carga en el botón ([Guardando...])
  4. Prevención de pérdida de datos:Formularios con cambios no guardados muestran confirmación al navegar fuera
  5. Tooltips en íconos:Todos los íconos de acción (kebab menu items) tienen tooltip al hover
  6. Texto de ayuda en campos complejos:Campos como “Risk Score Threshold” deben tener ? con explicación inline
  7. Búsqueda por múltiples criterios:La búsqueda en listas debe funcionar por nombre, email e ID simultáneamente
  8. Acceso por URL directa:Todas las vistas de detalle tienen URL propia y permanente (deep linking)

11. Propuesta Responsive

Breakpoints

| Breakpoint | Ancho | Comportamiento | |———–|——-|—————-| | xs | < 640px | Mobile — solo Login Portal y Mi Perfil/Self-service | | sm | 640–1024px | Tablet — sidebar colapsado, tablas adaptadas | | md | 1024–1280px | Laptop — sidebar colapsado por defecto | | lg | 1280–1536px | Desktop — sidebar expandido, layout completo | | xl | > 1536px | Wide — posible panel lateral adicional en detalle | ### Estrategia por móduloPortal Administrativo (PAP) — optimizado para desktop (lg/xl):

Bandeja de Aprobaciones — soporte tablet (sm+):

Consideraciones táctiles (touch)

12. Priorización MVP vs Futuras Mejoras

MVP — Sprint 1-3 (funcionalidades bloqueantes)

Pantalla / Funcionalidad FS Justificación  
Login Portal (básico, con email+pass) FS-01, FS-08 Punto de entrada de todo usuario  
Gestión de Usuarios (CRUD + status) FS-01 Core del sistema  
Gestión de Tenants FS-03 Prerequisito de todo lo demás  
Gestión de Sistemas y Topología FS-04 Prerequisito de autorización  
Templates de Permisos (CRUD) FS-02 Core de autorización  
Perfiles (asignación manual) FS-05 Core de autorización  
Bandeja de Aprobaciones (básica) FS-10 Desbloqueante para B2B  
Dashboard básico (KPIs principales) — Orientación al admin ### MVP — Sprint 4-6 (funcionalidades de alto valor)
Pantalla / Funcionalidad FS Justificación  
Subida y Validación de Documentos FS-11 Requerido por Compliance  
Dashboard de Cumplimiento FS-15, FS-16 Visibilidad crítica  
Solicitud de Acceso B2B completa FS-10 Con risk score visible  
Auto-asignación de template FS-06 Reduce carga administrativa  
Configuración IdP por tenant FS-03 Para clientes enterprise  
Procesos de Promoción IGA FS-12 Governance de roles  
Delegación de administración FS-14 Escalabilidad de admins ### Post-MVP (mejoras progresivas)
Funcionalidad FS Esfuerzo Valor  
Visualizador Grafo de Permisos interactivo FS-07 Alto Alto  
Login Portal con Passkeys/FIDO2 FS-09 Alto Alto  
MFA Adaptativo con Risk Scoring FS-09 Muy alto Alto  
Feature Flags con UI de targeting FS-13 Medio Medio  
Configuración jerárquica de parámetros FS-13 Medio Medio  
Monitor de sesiones en tiempo real — Medio Medio  
Bulk operations en listas (bloqueo masivo) — Bajo Medio  
Exportación avanzada (audit reports) — Bajo Medio  
Branding editor del Login Portal FS-08 Medio Bajo  
Dark mode — Bajo Bajo —

13. Riesgos UX y Recomendaciones

Riesgo 1 — Sobrecarga cognitiva en la pantalla de Topología de SistemaProblema:El modelo Sistema → Módulo → Menú → Opción → Acción tiene hasta 5 niveles de profundidad. Un sistema real (ej: Route Planner) puede tener 50+ nodos.

Recomendación:Implementar el TreeView con lazy loading de nodos. Añadir búsqueda instantánea dentro del árbol. Ofrecer vista “tabla plana” alternativa con filtro por nivel. Prioridad: Alta.

Riesgo 2 — Confusión entre Template, Perfil y RolProblema:Los tres conceptos son jerárquicamente distintos (Rol → Template → Perfil) pero los admins IT pueden confundirlos. Esta confusión puede llevar a asignaciones de permisos erróneas.

Recomendación:Incluir tooltips educativos inline en cada concepto. Crear un flujo guiado (wizard) para la primera configuración de autorización. Documentación contextual: panel “¿Cómo funciona?” colapsable en la primera vez que el admin accede a Templates. Prioridad: Alta.

Riesgo 3 — El Grafo de Permisos es técnico para usuarios no técnicosProblema:El Visualizador de Grafo (FS-07) muestra conceptos como “Deny Dominance”, “Branch Scope Precedence” y nombres técnicos de acciones. Los Tenant Admins sin formación técnica pueden malinterpretarlo.

Recomendación:Ofrecer dos vistas: “Vista simplificada” (¿Puede este usuario hacer X en Y módulo? Sí/No) y “Vista técnica” con el detalle del grafo. Prioridad: Media.

Riesgo 4 — Bandeja de Aprobaciones bajo alta cargaProblema:En momentos de onboarding masivo (ej: nueva empresa cliente con 200 usuarios), la bandeja puede tener decenas de solicitudes simultáneas, muchas con SLA crítico.

Recomendación:Implementar aprobación en lote para solicitudes del mismo tipo (ej: “Aprobar todos los onboardings de FastFreight”). Ordenamiento inteligente por defecto: SLA más crítico primero. Vista de “modo concentrado” que solo muestra la solicitud más urgente. Prioridad: Alta.

Riesgo 5 — Acciones de alto impacto sin contexto de impactoProblema: “Revocar perfil” o “Deprecar template” pueden tener efectos en cascada que el admin no ve antes de confirmar (ej: deprecar un template que está en uso por 47 perfiles).

Recomendación:En el modal de confirmación de acciones de alto impacto, mostrar el impacto calculado: “Este template está actualmente asignado a 47 perfiles en 3 tenants. Deprecarlo no revocará los perfiles existentes, pero nuevas asignaciones no podrán usar esta versión.” Prioridad: Alta.

Riesgo 6 — Seguridad UX: exposición inadvertida de información sensibleProblema:La pantalla de Visualizador de Grafo, si está mal controlada por permisos, podría revelar la estructura de permisos de otros usuarios a quienes no deben tener esa visibilidad.

Recomendación:El Visualizador debe requerir un permiso explícito (diagnostic.permissions.read). Auditar cada consulta al grafo (quién consultó el grafo de quién). El resultado no debe ser cacheable en el browser. Prioridad: Crítica.

Riesgo 7 — Login Portal: branding dinámico vs tiempo de cargaProblema:El Login Portal carga assets de branding (logo, CSS, colores) desde la API de configuración en tiempo real. Si la API es lenta, el usuario ve un login sin branding o con flash de contenido sin estilo.

Recomendación:Pre-renderizar el branding via CDN con TTL corto (5 min). Establecer branding default (UMS genérico) como fallback instantáneo. Implementar skeleton del logo antes de cargar el asset real. Prioridad: Alta.

14. Supuestos y Preguntas Abiertas

Supuestos declarados

ID Supuesto Base  
S-01 El portal administrativo es una SPA (Single Page Application) con React o similar — no server-rendered pages Inferido de la arquitectura Hexagonal y el stack .NET API + frontend separado  
S-02 El Login Portal es una aplicación separada del PAP, servida en un subdominio diferente Documentado en FS-08: “hosted login portal” con redirect desde downstream apps  
S-03 Los admins siempre operan desde desktop (1280px+); los usuarios finales B2B pueden operar desde mobile Basado en naturaleza de operaciones y stakeholder profiles  
S-04 Las notificaciones in-app se implementan en la primera iteración como badge + dropdown; no como notificaciones push del browser No hay mención a Web Push API en la documentación  
S-05 El tenant switcher solo es visible para Super Admins; los Tenant Admins no ven datos de otros tenants Consistente con arquitectura RLS y scope de acceso  
S-06 El idioma del portal es configurable por tenant (multilenguaje), pero la MVP solo requiere español No hay mención de i18n obligatoria en los FS del MVP ### Preguntas abiertas para el Product Owner
ID Pregunta Impacto si no se decide  
Q-01 ¿El admin de tenant puede ver/editar usuarios de sedes hijo o solo de su sede? Afecta el árbol de navegación y los filtros de listas  
Q-02 ¿El flujo de onboarding de usuario interno requiere siempre aprobación, o solo cuando el workflow lo configura? Afecta el diseño del formulario de nuevo usuario y el flujo de estados  
Q-03 ¿Existen notificaciones por email al usuario cuando su solicitud es aprobada/rechazada en el MVP? Afecta la confirmación UX post-decisión del aprobador  
Q-04 ¿El editor de templates de permisos es un grid Acción×Recurso o una lista plana? ¿Cuántas acciones puede tener un sistema en producción? Crítico para el diseño del editor — puede ser muy complejo  
Q-05 ¿Los aprobadores pueden agregar comentarios internos (no visibles al solicitante) en una solicitud? Afecta el formulario de decisión  
Q-06 ¿El Visualizador de Grafo de Permisos es accesible desde el detalle de usuario directamente, o solo desde Herramientas? Afecta la navegación contextual  
Q-07 ¿Existe un límite en el número de perfiles que un usuario puede tener simultáneamente? Afecta el diseño del tab “Perfiles” en detalle de usuario  
Q-08 ¿El bulk upload de usuarios (CSV) está en el scope del MVP? Afecta la pantalla de Lista de Usuarios  
Q-09 ¿El Login Portal debe soportar modo oscuro / modo alto contraste desde el MVP? Afecta el esfuerzo de implementación del theming  
Q-10 ¿El Compliance Officer puede rechazar un documento con una razón libre o seleccionando de un catálogo de razones predefinidas? Afecta el formulario de validación de documentos —
Volver al Master Index Product Vision Functional Stories Index
This site is open source. Improve this page.