Todos los componentes (244)

Historial de cambios

Gestión · AuditLogViewer

Qué es y cuándo usarlo

El historial de cambios de algo: quién hizo qué, sobre qué y cuándo, con lo que cambió campo a campo y, si la aplicación lo permite, un botón para revertir con su confirmación.

Cuándo usarlo

La pestaña de historial de una ficha: una factura, un cliente, un usuario.
Cada entrada lleva actor, at, action y, opcionalmente, target y changes. Cada cambio se enseña con DiffViewer.
searchable añade un campo para buscar por persona, acción, objeto o campo; onLoadMore pide más entradas por tandas.
Las entradas se agrupan por día (groupByDay) en la zona horaria del navegador o en la de timeZone. El orden es el que llega.
Con onRevert, cada entrada lleva un botón con confirmación; revertible: false lo quita de una entrada.

Cuándo no

Notificaciones o avisos de lo que pasa ahora: la bandeja de notificaciones.
Revertir no lo hace la biblioteca: lo hace tu función, y el servidor tiene que comprobar de nuevo que se puede.

Teclado: cada entrada se despliega con Intro o Espacio sobre su resumen; la búsqueda y los botones son controles normales.

Accesibilidad: la lista es un grupo con nombre (label, obligatorio), los días son títulos y cada hora lleva su fecha completa. Mientras carga, la lista se marca como ocupada.

Aspecto fino: las cajas usan los tokens de superficie y borde de la biblioteca; el diff de cada campo, las variables --amset-diff-*.

Cómo se ve

Buscar en el historial

Viernes, 30 de octubre de 2026

Marta Ruiz cambió el precio de Anillo Aurelia
17:42
Ver 1 cambio
- Precio
  Línea quitada: 89
  Línea añadida: 95
Aitor Mena archivó el pedido #1042
12:05
Ver 1 cambio
- Estado
  Línea quitada: enviado
  Línea añadida: archivado

Jueves, 29 de octubre de 2026

Carla Gil dio de alta a Lucía Ferrer
19:20
Ver 2 cambios
- Rol
  Línea añadida: gestor
- Activo
  Línea añadida: true

Pulsa «Revertir» en el cambio de precio.

<AuditLogViewer
  label="Registro de cambios"
  entries={entradas}
  timeZone="Europe/Madrid"
  searchable
  defaultExpanded
  onRevert={(entrada) => deshacer(entrada)}
/>

Props

Se importa con import { AuditLogViewer } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`entries`obligatoria	`readonly AuditEntry[]`	—
`label`obligatoria	`string`	Que historial es («Historial de la factura 2026-0142»): nombra la lista. Obligatorio.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`dayHeadingLevel`	`AuditHeadingLevel`	El nivel del titulo de cada dia. Por defecto, 3.
`defaultExpanded`	`boolean`	Con las entradas desplegadas desde el principio. Por defecto, no.
`emptyText`	`string`	Lo que se dice cuando no hay entradas.
`groupByDay`	`boolean`	Agrupa las entradas bajo el dia en que pasaron. Por defecto, si.
`loading`	`boolean`	El historial se esta pidiendo: se enseña la espera en lugar de «no hay nada».
`onLoadMore`	`() => void \| Promise<void>`	Pedir mas entradas: sale el boton de cargar mas, con el recuento si se pasa `total`.
`onRevert`	`(entry: AuditEntry) => void \| Promise<void>`	Revertir una entrada. Si se pasa, cada entrada revertible lleva su boton, con una confirmacion antes. Si falla (lanza o rechaza), se dice en la propia confirmacion y la entrada se queda como estaba. La biblioteca no deshace nada: lo hace esta funcion, y el servidor tiene que comprobar de nuevo que se puede.
`searchable`	`boolean`	Un campo para buscar por quien, que hizo, sobre que o en que campos. Por defecto, no.
`timeZone`	`string`	La zona horaria en que se escriben los dias y las horas. Por defecto, la del navegador.
`total`	`number`	Cuantas entradas hay en total, para el recuento del boton.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: