08 — Propuesta UI/UX del catálogo

Esta fase define requisitos, no una interfaz implementada ni validada en navegador. Se consultaron DESIGN.md, matriz de skills, patrones de listados/diálogos, componentes y procedimiento Playwright. Fuentes normativas: DESIGN, listados, diálogos, componentes.

Skill principal ux-tables: colección amplia en tabla paginada, jerarquía legible, texto alineado a izquierda, estados y acciones reconocibles. Complementaria ux-search: búsqueda por producto conocido, consulta persistente y recuperación al no encontrarlo, sin imponer elección previa de ámbito. vercel-react-best-practices: evitar carga de historiales completos en selectores, estado derivado y cascadas innecesarias; el control de acceso debe estar en servidor. Se leyeron sus SKILL.md y reglas async-parallel, rerender-derived-state-no-effect y server-auth-actions; el ejemplo Next.js no se traslada a esta SPA Express.

No hay skills locales de arquitectura backend, Sequelize, bases de datos ni seguridad en .agents/skills/skills-lock inspeccionados. Los auditores especializados ux-heuristics-audit, ux-accessibility-audit, ux-aesthetics-audit y ux-microcopy-audit no están instalados. No se instalaron ni se simula su revisión; las reglas de proyecto y skills disponibles cubren los requisitos de esta propuesta documental.

Ubicación

CONFIRMADO: Catálogos globales ya aloja ResourceCatalogPage para campos/plantillas. Las compañías tienen ResourcesPage para recursos concretos. No existe aún catálogo global de productos. globalUI: global-catalog-content.tsx:8 resourceController: use-resources-page-controller.ts:24.

PROPUESTO: dentro de Recursos, añadir una entrada global «Aplicaciones compartidas» o equivalente traducido y aprobado, junto al catálogo de definiciones sin confundirlos. Sección administrativa del módulo existente, no nuevo módulo independiente. La navegación debe distinguir «Aplicaciones» (productos) y «Campos y plantillas» (definiciones). Entrada de edición solo para el permiso global; lectura puede abrirse desde el selector o ficha de producto.

Catálogo amplio

Reutilizar EntityListHeader, EntityTable, EntityRowActions y estados de @repo/rdx-ui, con primitivas shadcn/Base UI sin modificar vendor. Cabecera con finalidad del catálogo y alta a la derecha según permisos. Tabla propuesta:

Columna	Dato real o requisito	Interacción
Aplicación	values.name	Enlace a ficha; orden estable
Proveedor	Característica field:provider	Búsqueda/filtro textual; no asumir registro de fabricantes
Ámbito	Global / De la compañía	Texto accesible; no solo color
Estado	active	Filtro activas/inactivas; inactivas fuera de altas ordinarias
Categoría	Aún no existe	No mostrar ni filtrar hasta aprobarla
Acciones	Consultar; editar/desactivar según permiso	Visibles mediante patrón de acciones existente

Búsqueda y filtros en toolbar, query en URL, conservar búsqueda/filtros/orden/página al regresar de ficha. Filtrar antes de paginar en servidor. Mostrar carga inicial, actualización, error recuperable, denegación y vacío distinguidos. Sin valor en celdas: exclusivamente —, conservar cero/false. No formulario incrustado junto al catálogo. Vista móvil según ancho real del contenedor; mantener nombre/origen/estado y acciones accesibles sin perder columnas ocultas.

Se puede ofrecer filtro de origen al explorar un catálogo combinado, pero el catálogo administrativo global ya tiene origen fijo. No convertir ese filtro opcional en un paso obligatorio del selector.

Selección desde instalaciones y perfiles

Objetivo: escribir «Chrome» y encontrar resultados globales elegibles y locales de la compañía en una sola búsqueda. Mostrar nombre, proveedor cuando exista y texto «Global» / «De la compañía». Si ambos tienen igual nombre, conservar ambas filas y UUID; origen desambigua. No seleccionar ni reemplazar automáticamente un recurso local por uno global.

CONFIRMADO: SelectWithAction actual solo admite options locales (value/label/disabled), no búsqueda remota. OptionPickerList ya compone EntityTable y selección única; la ampliación para resultados remotos debe respetar su contrato real, sin afirmar que ya lo soporta. select: select-with-action.tsx:19 picker: option-picker-list.tsx:7.

PROPUESTO: usar el patrón de selector con búsqueda existente (OptionPickerDialog/List o extensión justificada), o ampliar una composición común con dos consumidores reales: software y aplicación. Datos/carga/errores/acciones los aporta cada módulo; componente visual genérico no conoce DTOs, Resource, endpoints ni Sequelize. Contrato de selección mantiene resourceId; origen es información, no otra identidad.

Requisitos de interacción:

Modal abre con altura estable; búsqueda accesible enfocada, resultado y estado de selección legibles. Si usa tabla, columna selection compacta al principio y selección al pulsar zona no interactiva; teclado y lectores deben disponer de la misma acción.
Buscar no borra selección provisional. Confirmar devuelve UUID; cancelar mantiene formulario padre. La opción actual se conserva aunque esté fuera de página o inactiva, indicando estado sin permitir nuevas selecciones inválidas.
Buscar/borrar filtros/paginar conserva contexto de compañía. Cambiar compañía descarta consultas/selección ajenas. Error de carga ofrece reintento sin vaciar selección válida silenciosamente.
Sin resultados: explicar consulta y ofrecer limpiar búsqueda; alta local según permisos, con aviso de evitar duplicados. No abrir un tercer nivel modal. No otorgar creación global desde alta rápida local.
Edición mantiene recurso fijo según contrato del agregado. Estado, versión y notas siguen en la instalación/configuración; elegir global no rellena versión ni licencia.
Licencia sigue en selector local independiente, con caducidad/actividad. Etiqueta global del producto no significa software gratuito ni derechos de uso.

Conservar FormDialog/FormBody/FormActions; formularios variables con layout stable y selectores de tabla con layout picker cuando se integre con el patrón real. Ayuda contextual inmediatamente antes de pie Guardar/Cancelar. Etiquetas y mensajes es/en, foco de retorno al disparador y cierre por Escape sin pérdida al cancelar. No añadir recent searches, trending o imágenes por recomendación genérica de skill: no hay necesidad demostrada.

Ficha y permisos

CONFIRMADO: ResourceDetail muestra especificación, actividad, características, integración, notas y revisiones con actor. Puede reutilizarse presentación de campos/historial de producto; acepta ResourceDTO con companyId obligatorio, por lo que su contrato debe adaptarse antes de globales. resourceDetail: resource-detail.tsx:11 dto: inventory.ts:35.

Propuesta: ficha de aplicación con nombre, origen, plantilla, estado y atributos del producto. Acciones de edición/desactivación según permiso global; usuario ordinario consulta. Integraciones Access/SMB/mailbox no aplican al producto global y se rechazan al crearlo, no se ocultan solo en UI. Historial global puede revelar nombres internos de operadores y notas: aprobar una proyección de lectura pública al espacio de soporte y otra administrativa. No servir el historial interno completo a todos por reutilizar ResourceDetail.

Las referencias «usado por instalaciones/perfiles» se calculan solo para la compañía autorizada en la ficha contextual. Una ficha global no lista otras compañías, personas, versiones instaladas ni licencias. Una vista transversal de impacto de desactivación requiere permiso administrativo y datos mínimos; nunca se añade al DTO de selección.

Los enlaces actuales /companies/C/resources/ID necesitan resolución contextual del global o una ficha global explícita; decidir URL sin romper retorno al activo/perfil y sin inventar propietario. Ver consumidores de puesto/entorno en 05.

Validación pendiente de implementación

No se arrancó aplicación, no se tomaron capturas ni se ejecutó Playwright: no hay nueva UI que validar y la tarea prohíbe siembra. No se afirma cumplimiento visual actual. El procedimiento futuro debe usar API/BD desechable metis_desk_test, al menos 15 compañías y principal con 50 personas, 50 activos, 50 recursos y volumen equivalente de perfiles/puestos relevante; incluir globales/locales homónimos, nombres largos y con tildes, inactivos, vacíos, errores y permisos. Esta auditoría utilizó cero datos sintéticos persistidos.

Criterios futuros: escritorio y 320 px, zoom, teclado completo, foco en altas anidadas y errores, búsqueda y paginación a volumen, selección tras cambio de consulta, historial de inactivos, permisos rechazados por servidor, ausencia de datos de B operando en C. Conservar evidencias conforme a Playwright MCP. Skills no sustituyen estas comprobaciones.

9.5 KiB Raw Blame History