Discrepancia entre fuentes.

<section class="ui-sample ui-document" data-source-conflict="true" role="alert"><header><strong>Fuentes en conflicto</strong><span class="badge badge--warn">Requiere revisión</span></header><table><thead><tr><th>Fuente</th><th>Valor</th></tr></thead><tbody><tr><td>Inventario</td><td>Folio 126</td></tr><tr><td>Carátula física</td><td>Folio 127</td></tr></tbody></table><p>Las fuentes registran folios distintos para el mismo documento. Se conservan ambos valores hasta revisar el expediente.</p><div class="ui-actions"><button class="btn btn--primary" type="button">Abrir investigación</button></div></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-source-conflict="true" role="alert"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Fuentes en conflicto</strong><span class="badge badge--warn">Requiere revisión</span></header><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Fuente</th><th class="border-b border-slate-300 p-2 align-top">Valor</th></tr></thead><tbody><tr><td class="border-b border-slate-300 p-2 align-top">Inventario</td><td class="border-b border-slate-300 p-2 align-top">Folio 126</td></tr><tr><td class="border-b border-slate-300 p-2 align-top">Carátula física</td><td class="border-b border-slate-300 p-2 align-top">Folio 127</td></tr></tbody></table><p>Las fuentes registran folios distintos para el mismo documento. Se conservan ambos valores hasta revisar el expediente.</p><div class="ui-actions"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Abrir investigación</button></div></section>

import type { MouseEventHandler } from "react";

/** Tono de la insignia de estado: `warn` pendiente de revisión, `ok` resuelta, `err` bloquea el trámite, `neutral` sin tono. */
export type SourceConflictTone = "ok" | "warn" | "err" | "neutral";

export interface SourceConflictRow {
  /** Fuente consultada («Inventario», «Carátula física»). */
  source: string;
  /** Valor que registra esa fuente. */
  value: string;
}

export interface SourceConflictProps {
  title?: string;
  /** Estado de la discrepancia («Requiere revisión», «Bloquea el trámite»); va en una insignia. Vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Requiere revisión» y «Revisión humana» → `warn`, «Resuelta» → `ok`, «Bloquea el trámite» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: SourceConflictTone;
  /** Encabezados de las columnas: fuente y valor. */
  columns?: [string, string];
  /** Una fila por fuente, con el valor que registra; todas se muestran, sin elegir una. */
  rows?: SourceConflictRow[];
  /** Explicación bajo la tabla; vacío la oculta. */
  description?: string;
  /** Texto del botón que abre la investigación; vacío lo oculta. */
  actionLabel?: string;
  /** Se llama al pulsar el botón; abre la investigación de la discrepancia. */
  onAction?: MouseEventHandler<HTMLButtonElement>;
  /** Peso del botón: `primary` si es la acción principal de la página, `secondary` si ya hay otra. */
  actionTone?: "primary" | "secondary";
  className?: string;
}

const COLUMNS: [string, string] = ["Fuente", "Valor"];

const ROWS: SourceConflictRow[] = [
  { source: "Inventario", value: "Folio 126" },
  { source: "Carátula física", value: "Folio 127" },
];

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

const SOURCE_CONFLICT_TONES: Record<string, SourceConflictTone> = {
  "Requiere revisión": "warn",
  "Revisión humana": "warn",
  "Resuelta": "ok",
  "Bloquea el trámite": "err",
};

/**
 * Aviso de discrepancia entre dos o más fuentes sobre un mismo dato, con el valor de cada una y la acción para investigarla; se usa cuando el sistema no debe elegir un valor por su cuenta.
 *
 * El estado va en texto dentro de una insignia con tono. Lleva `role="alert"`: los lectores de pantalla lo anuncian al aparecer.
 *
 * @example <SourceConflict rows={[{ source: "Inventario", value: "Folio 126" }, { source: "Carátula física", value: "Folio 125" }]} onAction={abrirInvestigacion} />
 * @example <SourceConflict status="Bloquea el trámite" description="El expediente no se puede archivar hasta resolver la diferencia de folios." onAction={abrirInvestigacion} />
 */
export function SourceConflict({
  title = "Fuentes en conflicto",
  status = "Requiere revisión",
  statusTone,
  columns = COLUMNS,
  rows = ROWS,
  description = "Las fuentes registran folios distintos para el mismo documento. Se conservan ambos valores hasta revisar el expediente.",
  actionLabel = "Abrir investigación",
  onAction,
  actionTone = "primary",
  className,
}: SourceConflictProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-source-conflict role="alert">
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span className={SOURCE_CONFLICT_BADGE[statusTone ?? SOURCE_CONFLICT_TONES[status] ?? "neutral"]}>{status}</span> : null}
        </header>
      ) : null}
      {rows.length ? (
        <table>
          <thead>
            <tr>
              {columns.map((column, i) => (
                <th key={`${column}-${i}`}>{column}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row, i) => (
              <tr key={`${row.source}-${i}`}>
                <td>{row.source}</td>
                <td>{row.value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
      {description ? <p>{description}</p> : null}
      {actionLabel ? (
        <div className="ui-actions">
          <button className={`btn btn--${actionTone}`} type="button" onClick={onAction}>{actionLabel}</button>
        </div>
      ) : null}
    </section>
  );
}