Buscar en la documentación

Módulo de auditoría (frontend)

Pantalla de auditoría con una pestaña por registro, filtros en la URL, "Cargar más" y el detalle de cada registro con IP y navegador.

5 min de lecturaVer en GitHub

Muestra la auditoría global (Módulo Audit). Las reglas viven en la API: qué pestañas existen sale de los permisos de la sesión, qué registros llegan lo decide el alcance del back, y qué enlaces se pueden abrir sale del campo links de cada registro. El front no calcula la jerarquía.

El menú muestra “Auditoría” con cualquiera de los dos permisos (audit.incidents.view o audit.admin.view). Una entrada del menú ahora admite una lista de permisos y aparece con uno de ellos.

Pantallas

RutaPantalla
/auditoriaLleva a la primera pestaña que la persona puede ver (incidentes, si no, administración)
/auditoria/incidentesHistorial de todos los incidentes
/auditoria/administracionRegistro de la administración

Con las dos pestañas, arriba aparece el selector “Incidentes · Administración” (AppSegmented). Cambiar de pestaña empieza sin filtros. Elegir la pestaña de /auditoria va en un beforeEnter, no en un redirect: así corre después de la guarda que recupera la sesión y ya se conocen los permisos.

Por vista

VistaListaDetalle
Portátil y monitorTabla (AppDataTable): fecha, hecho por, acción, sobre qué y el primer cambioPanel que entra por la derecha, encima de la tabla (AppSheet). La tabla no cambia de tamaño ni pierde columnas, y la fila elegida queda marcada. Se cierra con la X, con Esc o con un clic fuera.
Tablet y celularTarjetasPanel inferior (AppSheet)

Filtros

  • En la URL: from, to, actor, type, y incident o user y role, según la pestaña. Un enlace o una recarga conservan la búsqueda.
  • Los campos:
    • Fecha (AppDateRangeField, “Últimos 30 días” si está vacía).
    • Hecho por y Persona afectada: AppSelect con filterable, para escribir y encontrar entre muchas personas.
    • Acción (varias).
    • En incidentes, el código (se aplica al dejar de escribir).
    • En administración, el rol afectado.
  • En tablet y celular, “Filtros (n)” abre el panel con los filtros en borrador. Ahí el código pasa al borrador de inmediato, para que tocar “Ver resultados” no lo pierda.
  • En la fila de los filtros, a la derecha, el rango que la API aplicó (“Del 26 de sept al 26 de oct de 2026”; el año va una sola vez si las dos fechas son del mismo año). En celular y tablet queda junto al botón “Filtros” (en celular sin el ícono, para que quepa). Si la fila no tiene espacio, como en portátil con los cuatro filtros, pasa a la línea siguiente, siempre a la derecha.
  • Un código de incidente mal escrito muestra el mensaje junto al campo y, en el lugar de la lista, “Revisa el código del incidente” con “Quitar el código”. En celular el campo queda dentro del panel, así que el aviso también se ve fuera.

Lista y detalle

  • “Cargar más” pide la siguiente tanda con el cursor y la agrega al final. Al terminar, se lee “No hay más registros en este rango”.
  • El detalle muestra:
    • Cuándo (fecha y hace cuánto).
    • Hecho por, con “Ver su actividad”, que filtra por esa persona.
    • Sobre qué, con “Abrir incidente”, “Abrir ficha” o “Abrir rol” si links lo permite.
    • “Qué cambió”, campo por campo, y la nota que dejó la persona (la solución, el motivo de cancelar o de reabrir), si la hay.
    • “Desde dónde”: IP y navegador. Los datos de demostración no traen IP y se lee “Sin registro (datos de demostración)”.
  • Los textos salen de auditTexts.ts:
    • Cada campo se escribe como “valor anterior → valor nuevo”.
    • Roles y permisos se muestran por su nombre; si ya no existen, por su código.
    • La política de MFA usa el mismo texto de la pantalla de roles.
    • Una exportación de incidentes dice “Sobre qué: Incidentes” y muestra las filas exportadas y cada filtro usado (búsqueda, estado, prioridad, personas, rangos de fechas, solo vencidos, eliminados). Sin filtros, lo aclara: “Ninguno: todo lo que la persona podía ver”.

Desde otras pantallas

La ficha de una persona tiene “Ver su actividad” (auditLocation). Lleva a la administración filtrada por esa persona; si quien mira solo tiene la auditoría de incidentes, a esa.

Capas

CapaPiezaQué hace
domainaudit.tsRegistros de cada pestaña, catálogo, criterios y cuántos filtros hay activos
infrastructureauditApi.ts/audit/catalog, /audit/incidents y /audit/admin, y la traducción de la respuesta
applicationauditQuery, useAudit (useAuditList, useAuditCatalog), auditLinkCriterios en la URL, lista por cursor y catálogo, y enlace filtrado desde otras pantallas
presentationAuditPage, list/AuditToolbar, list/AuditFilterFields, list/AuditTable, list/AuditCards, list/AuditDetailPantalla, filtros, tabla, tarjetas y detalle
presentationauditTexts.tsSobre qué fue y qué cambió, en texto claro
—errors.ts, routes.ts, navigation.tsMensajes, rutas y entrada del menú

Piezas compartidas nuevas:

  • useCursorList (shared/listing): listado por cursor ligado a la URL. El cursor no va en la URL, así que una recarga vuelve al principio.
  • AppSheet (shared/ui): panel desde la derecha o desde abajo. Es ahora la base de AppFilterSheet.
  • La opción filterable de AppSelect.

Dónde está en el código