Progreso de firma.

<section class="ui-sample ui-document" data-signature-progress="true"><header><strong>Progreso de firma</strong><span>2 de 2</span></header><ol><li><span class="badge badge--ok">Firmado</span> Martín Illanes · 25 ago 18:24 CLT</li><li><span class="badge badge--ok">Firmado</span> Contraparte · 25 ago 18:42 CLT</li></ol><a href="#recibo">Ver recibo y digest</a></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-signature-progress="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Progreso de firma</strong><span>2 de 2</span></header><ol class="grid gap-2"><li><span class="badge badge--ok">Firmado</span> Martín Illanes · 25 ago 18:24 CLT</li><li><span class="badge badge--ok">Firmado</span> Contraparte · 25 ago 18:42 CLT</li></ol><a class="underline underline-offset-4" href="#recibo">Ver recibo y digest</a></section>

/** Tono de la insignia de estado de una firma: `ok` firmada, `warn` pendiente, `err` rechazada o vencida, `neutral` sin tono. */
export type SignatureProgressTone = "ok" | "warn" | "err" | "neutral";

export interface SignatureProgressSigner {
  /** Estado de esta firma («Firmado», «Pendiente»); va en una insignia. Vacío muestra sólo el nombre y el detalle. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Firmado» → `ok`, «Pendiente» → `warn`, «Rechazado» y «Vencido» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: SignatureProgressTone;
  /** Nombre de la persona o de la parte («Martín Illanes», «Contraparte»). */
  name: string;
  /** Hora de la firma o plazo de la pendiente («25 ago 18:24 CLT», «vence 29 ago»); vacío muestra sólo el nombre. */
  detail?: string;
}

export interface SignatureProgressProps {
  title?: string;
  /** Firmas completas sobre el total («2 de 2»); vacío lo oculta. */
  status?: string;
  /** Firmantes en el orden de la solicitud, con el estado de cada firma. */
  signers?: SignatureProgressSigner[];
  /** Destino del recibo de firma; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace al recibo; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const SIGNERS: SignatureProgressSigner[] = [
  { status: "Firmado", name: "Martín Illanes", detail: "25 ago 18:24 CLT" },
  { status: "Firmado", name: "Contraparte", detail: "25 ago 18:42 CLT" },
];

const SIGNATURE_PROGRESS_BADGE: Record<SignatureProgressTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const SIGNATURE_PROGRESS_TONES: Record<string, SignatureProgressTone> = {
  "Firmado": "ok",
  "Firmada": "ok",
  "Pendiente": "warn",
  "Rechazado": "err",
  "Rechazada": "err",
  "Vencido": "err",
  "Vencida": "err",
};

/**
 * Progreso de una solicitud de firma, con las firmas completadas sobre el total y el estado de cada firmante; se usa después de enviar un documento a firma para seguir quién ya firmó.
 *
 * El estado de cada firma va en texto dentro de una insignia con tono.
 *
 * @example <SignatureProgress status="1 de 2" signers={[{ status: "Firmado", name: "Martín Illanes", detail: "25 ago 18:24 CLT" }, { status: "Pendiente", name: "Contraparte", detail: "vence 29 ago" }]} />
 */
export function SignatureProgress({
  title = "Progreso de firma",
  status = "2 de 2",
  signers = SIGNERS,
  href = "#recibo",
  linkLabel = "Ver recibo y digest",
  className,
}: SignatureProgressProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-signature-progress>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span>{status}</span> : null}
        </header>
      ) : null}
      {signers.length ? (
        <ol>
          {signers.map((signer, i) => {
            const texto = signer.detail ? `${signer.name} · ${signer.detail}` : signer.name;
            return (
              <li key={`${signer.name}-${i}`}>
                {signer.status ? (
                  <>
                    <span className={SIGNATURE_PROGRESS_BADGE[signer.statusTone ?? SIGNATURE_PROGRESS_TONES[signer.status] ?? "neutral"]}>{signer.status}</span>
                    {` ${texto}`}
                  </>
                ) : texto}
              </li>
            );
          })}
        </ol>
      ) : null}
      {href && linkLabel ? <a href={href}>{linkLabel}</a> : null}
    </section>
  );
}