Cola de trabajo.

<section class="ui-sample ui-service" data-queue="true"><header><strong>Cola editorial</strong><span class="badge badge--ok">Sin atraso</span></header><table><thead><tr><th>Prioridad</th><th>Trabajo</th><th>Espera</th></tr></thead><tbody><tr><td>Alta</td><td>Render FYD</td><td>12 s</td></tr></tbody></table></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-queue="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Cola editorial</strong><span class="badge badge--ok">Sin atraso</span></header><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Prioridad</th><th class="border-b border-slate-300 p-2 align-top">Trabajo</th><th class="border-b border-slate-300 p-2 align-top">Espera</th></tr></thead><tbody><tr><td class="border-b border-slate-300 p-2 align-top">Alta</td><td class="border-b border-slate-300 p-2 align-top">Render FYD</td><td class="border-b border-slate-300 p-2 align-top">12 s</td></tr></tbody></table></section>

export interface QueueRow {
  /** Prioridad del trabajo («Alta», «Normal»). */
  priority: string;
  /** Nombre del trabajo en cola. */
  label: string;
  /** Tiempo que lleva esperando, con su unidad («12 s», «8 min»). */
  wait: string;
}

/** Tono de la insignia de estado: `ok` sin atraso, `warn` con atraso o pendientes acumulados, `err` detenida, `neutral` sin tono. */
export type QueueTone = "ok" | "warn" | "err" | "neutral";

export interface QueueProps {
  /** Nombre de la cola. */
  title?: string;
  /** Estado visible de la cola: atraso o cantidad de pendientes («Sin atraso», «4 pendientes»); va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Sin atraso» → `ok`, «Con atraso» y «4 pendientes» → `warn`, «Detenida» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: QueueTone;
  /** Encabezados de las columnas de prioridad, trabajo y espera. */
  columns?: [priority: string, job: string, wait: string];
  /** Filas de la tabla: trabajos en cola, en orden de atención; vacío oculta la tabla. */
  rows?: QueueRow[];
  className?: string;
}

const QUEUE_COLUMNS: [string, string, string] = ["Prioridad", "Trabajo", "Espera"];

const QUEUE_ROWS: QueueRow[] = [{ priority: "Alta", label: "Render FYD", wait: "12 s" }];

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

const QUEUE_TONES: [string, QueueTone][] = [
  ["sin atraso", "ok"],
  ["al día", "ok"],
  ["atraso", "warn"],
  ["pendiente", "warn"],
  ["detenida", "err"],
  ["falló", "err"],
];

function queueTone(status: string, tone?: QueueTone): QueueTone {
  const texto = status.toLowerCase();
  return tone ?? QUEUE_TONES.find(([clave]) => texto.includes(clave))?.[1] ?? "neutral";
}

/**
 * Cola de trabajos pendientes con prioridad, nombre y tiempo de espera de cada uno; se usa en tableros de operación para ver el atraso de un proceso.
 *
 * Los trabajos van en una tabla en el orden en que se atienden. El estado va en texto dentro de una insignia con tono.
 *
 * @example <Queue title="Cola editorial" status="Sin atraso" rows={[{ priority: "Alta", label: "Render FYD", wait: "12 s" }]} />
 * @example <Queue status="3 pendientes" rows={[{ priority: "Alta", label: "Render FYD", wait: "8 min" }, { priority: "Normal", label: "Boletín semanal", wait: "3 min" }, { priority: "Normal", label: "Índice de búsqueda", wait: "40 s" }]} />
 */
export function Queue({
  title = "Cola editorial",
  status = "Sin atraso",
  statusTone,
  columns = QUEUE_COLUMNS,
  rows = QUEUE_ROWS,
  className,
}: QueueProps) {
  const [prioridad, trabajo, espera] = columns;
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-queue>
      <header>
        <strong>{title}</strong>
        {status ? <span className={QUEUE_BADGE[queueTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {rows.length ? (
        <table>
          <thead>
            <tr>
              <th>{prioridad}</th>
              <th>{trabajo}</th>
              <th>{espera}</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row, i) => (
              <tr key={`${row.label}-${i}`}>
                <td>{row.priority}</td>
                <td>{row.label}</td>
                <td>{row.wait}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
    </section>
  );
}