Exception Queue

Items requiring special handling.

html

<div class="exq exq--all">
  <p class="exq__title">Payment exceptions</p>
  <div class="exq__row exq__row--fraud-check">Order #9021 <span class="exq__tag" style="background:#F5C2E0;">fraud-check</span><button type="button" class="exq__btn">Resolve</button></div>
  <div class="exq__row exq__row--address-mismatch">Order #9033 <span class="exq__tag" style="background:#F5C2E0;">address-mismatch</span><button type="button" class="exq__btn">Resolve</button></div>
  <div class="exq__row exq__row--fraud-check">Order #9044 <span class="exq__tag" style="background:#F5C2E0;">fraud-check</span><button type="button" class="exq__btn">Resolve</button></div>
</div>
<style>
.exq { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.exq__title { margin: 0 0 10px; font-weight: 700; }
.exq__row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #ffffff; border: 1px solid #24143014; margin-bottom: 6px; }
.exq__tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; color: #241430; font-weight: 600; }
.exq__btn { margin-left: auto; border: none; background: #24143014; padding: 4px 9px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; color: #241430; }
.exq--fraud-check .exq__row--address-mismatch, .exq--address-mismatch .exq__row--fraud-check { display: none; }
</style>

tailwind

<div class="exqtw exqtw--all font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 font-bold">Payment exceptions</p>
  <div class="exqtw__row exqtw__row--fraud-check flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] mb-1.5">Order #9021 <span class="text-[10px] py-0.5 px-1.5 rounded-full font-semibold" style="background:#F5C2E0;">fraud-check</span><button type="button" class="ml-auto border-none bg-[#24143014] py-1 px-2.5 rounded-md text-[10px] font-semibold cursor-pointer">Resolve</button></div>
  <div class="exqtw__row exqtw__row--address-mismatch flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] mb-1.5">Order #9033 <span class="text-[10px] py-0.5 px-1.5 rounded-full font-semibold" style="background:#F5C2E0;">address-mismatch</span><button type="button" class="ml-auto border-none bg-[#24143014] py-1 px-2.5 rounded-md text-[10px] font-semibold cursor-pointer">Resolve</button></div>
  <div class="exqtw__row exqtw__row--fraud-check flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] mb-1.5">Order #9044 <span class="text-[10px] py-0.5 px-1.5 rounded-full font-semibold" style="background:#F5C2E0;">fraud-check</span><button type="button" class="ml-auto border-none bg-[#24143014] py-1 px-2.5 rounded-md text-[10px] font-semibold cursor-pointer">Resolve</button></div>
</div>
<style>
.exqtw--fraud-check .exqtw__row--address-mismatch, .exqtw--address-mismatch .exqtw__row--fraud-check { display: none; }
</style>

react

export function ExceptionQueue({
  queueName = "Payment exceptions",
  reasonFilter = "all",
  accent = "#F5C2E0",
  showResolve = true,
}) {
  const rows = [
    { id: "Order #9021", reason: "fraud-check" },
    { id: "Order #9033", reason: "address-mismatch" },
    { id: "Order #9044", reason: "fraud-check" },
  ].filter((r) => reasonFilter === "all" || r.reason === reasonFilter);
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontWeight: 700 }}>{queueName}</p>
      {rows.map((r) => (
        <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: 8, borderRadius: 6, background: "#ffffff", border: "1px solid #24143014", marginBottom: 6 }}>
          {r.id}
          <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 999, color: "#241430", fontWeight: 600, background: accent }}>{r.reason}</span>
          {showResolve && <button type="button" style={{ marginLeft: "auto", border: "none", background: "#24143014", padding: "4px 9px", borderRadius: 6, fontSize: 10, fontWeight: 600, cursor: "pointer", color: "#241430" }}>Resolve</button>}
        </div>
      ))}
    </div>
  );
}