Todos los componentes (244)

Cadena de aprobación

Gestión · ApprovalFlow

Qué es y cuándo usarlo

Una cadena de aprobación: los pasos en orden, quién tiene que decidir en cada uno, lo que decidió y cuándo, y con qué nota.

Cuándo usarlo

Aprobar un gasto, una vacación, un contrato o una publicación que pasa por varias personas.
steps son los pasos y cada uno lleva sus approvers con su decisión (pending, approved, rejected, skipped). mode="any" hace que baste con uno; por defecto aprueban todos.
El primer paso pendiente es el que toca y los siguientes esperan. Un solo rechazo rechaza el conjunto.
Con currentUserId y onDecide, quien tiene la decisión pendiente en el paso actual ve «Aprobar» y «Rechazar»; rechazar pide un motivo (requireReason).

Cuándo no

Un asistente de pasos de un formulario: Wizard.
El componente no cambia steps: llama a onDecide y lo cambia la aplicación. El servidor tiene que comprobar de nuevo que esa persona puede decidir.

Teclado: son botones y un campo de texto normales; el paso que toca lleva aria-current="step".

Accesibilidad: el estado de cada paso y la decisión de cada persona van escritos, así que el color no es lo único que informa. Cada decisión se anuncia, y si falla se dice en una alerta.

Aspecto fino: cada paso es una caja con una raya a la izquierda: acento el que toca, éxito el aprobado, error el rechazado.

Cómo se ve

En curso1 de 2 pasos aprobados

Paso 1Responsable de comprasAprobado
- Marta Ruiz Aprobó
  Cuadra con el presupuesto.
Paso 2DirecciónLe toca
- Aitor Mena Pendiente
- Carla Gil Pendiente

<ApprovalFlow
  label="Compra de 4.200 € en material"
  steps={pasos}
  currentUserId="aitor"
  requireReason
  onDecide={(paso, decision, comentario) => guardarDecision(paso, decision, comentario)}
/>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que se aprueba («Aprobación del gasto 2026-114»). Obligatorio.
`steps`obligatoria	`readonly ApprovalStep[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currentUserId`	`string`	Quien mira: si le toca decidir en el paso actual, salen sus botones. Sin esto es solo de lectura.
`onDecide`	`(stepId: string, decision: ApprovalDecision, comment: string) => void \| Promise<void>`	Registrar la decision de `currentUserId` en un paso. Si lanza o rechaza, se dice y los botones siguen donde estaban. La biblioteca no cambia `steps`: lo hace la aplicacion, y el servidor tiene que comprobar que esa persona puede decidir.
`requireReason`	`boolean`	Exigir un motivo para rechazar. Por defecto, si.

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: