Flujo de aprobación.

<section class="ui-sample ui-document" data-approval-flow><header><strong>Flujo de aprobación</strong><span>En revisión</span></header><ol><li>Autoría · completo</li><li>Legal · en curso</li><li>Representante · pendiente</li><li>Firma · pendiente</li></ol></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-approval-flow><header class="flex flex-wrap items-center justify-between gap-3"><strong>Flujo de aprobación</strong><span>En revisión</span></header><ol class="grid gap-2"><li>Autoría · completo</li><li>Legal · en curso</li><li>Representante · pendiente</li><li>Firma · pendiente</li></ol></section>

export interface ApprovalFlowStep {
  /** Etapa o responsable de la aprobación («Autoría», «Legal», «Firma»). */
  label: string;
  /** Estado de la etapa («completo», «en curso», «observado», «pendiente»); vacío muestra sólo el nombre. */
  status?: string;
}

export interface ApprovalFlowProps {
  title?: string;
  /** Estado del documento en el flujo («En revisión», «Requiere cambios»); vacío lo oculta. */
  status?: string;
  /** Etapas en el orden en que se aprueban, cada una con su estado. */
  steps?: ApprovalFlowStep[];
  className?: string;
}

const APPROVAL_FLOW_STEPS: ApprovalFlowStep[] = [
  { label: "Autoría", status: "completo" },
  { label: "Legal", status: "en curso" },
  { label: "Representante", status: "pendiente" },
  { label: "Firma", status: "pendiente" },
];

/**
 * Flujo de aprobación de un documento con su estado general y las etapas en orden, cada una con su estado; se usa para ver en qué etapa está un contrato antes de la firma.
 *
 * Las etapas van en una lista ordenada: el orden es el de aprobación.
 *
 * @example <ApprovalFlow status="En revisión" />
 * @example <ApprovalFlow status="Requiere cambios" steps={[{ label: "Autoría", status: "completo" }, { label: "Legal", status: "observado" }, { label: "Firma", status: "pendiente" }]} />
 */
export function ApprovalFlow({
  title = "Flujo de aprobación",
  status = "En revisión",
  steps = APPROVAL_FLOW_STEPS,
  className,
}: ApprovalFlowProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-approval-flow>
      <header>
        <strong>{title}</strong>
        {status ? <span>{status}</span> : null}
      </header>
      {steps.length ? (
        <ol>
          {steps.map((step, i) => (
            <li key={`${step.label}-${i}`}>{step.status ? `${step.label} · ${step.status}` : step.label}</li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}