Escalation Queue

Items requiring escalation.

html

<div class="esc esc--all">
  <p class="esc__title">Support escalations</p>
  <div class="esc__row esc__row--medium">#4471 payment retry<span class="esc__tag">medium</span><small>2h</small></div>
  <div class="esc__row esc__row--high">#4472 data mismatch<span class="esc__tag esc__tag--high">high</span><small>6h</small></div>
  <div class="esc__row esc__row--critical" style="border-left-color:#E8A020;">#4473 outage report<span class="esc__tag esc__tag--critical" style="background:#E8A020;">critical</span><small>19h</small></div>
</div>
<style>
.esc { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.esc__title { margin: 0 0 10px; font-weight: 700; }
.esc__row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #ffffff; border: 1px solid #24143014; border-left: 3px solid transparent; margin-bottom: 6px; }
.esc__row small { margin-left: auto; color: #24143080; font-size: 10px; }
.esc__tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #24143014; }
.esc__tag--high { background: #24143024; }
.esc__tag--critical { color: #241430; font-weight: 700; }
.esc--high .esc__row--medium { display: none; }
.esc--critical .esc__row--medium, .esc--critical .esc__row--high { display: none; }
</style>

tailwind

<div class="esctw esctw--all font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 font-bold">Support escalations</p>
  <div class="esctw__row esctw__row--medium flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] border-l-[3px] mb-1.5">#4471 payment retry<span class="text-[10px] py-0.5 px-1.5 rounded-full bg-[#24143014]">medium</span><small class="ml-auto text-[#24143080] text-[10px]">2h</small></div>
  <div class="esctw__row esctw__row--high flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] border-l-[3px] mb-1.5">#4472 data mismatch<span class="text-[10px] py-0.5 px-1.5 rounded-full bg-[#24143024]">high</span><small class="ml-auto text-[#24143080] text-[10px]">6h</small></div>
  <div class="esctw__row esctw__row--critical flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] border-l-[3px] mb-1.5" style="border-left-color:#E8A020;">#4473 outage report<span class="text-[10px] py-0.5 px-1.5 rounded-full font-bold" style="background:#E8A020;">critical</span><small class="ml-auto text-[#24143080] text-[10px]">19h</small></div>
</div>
<style>
.esctw--high .esctw__row--medium { display: none; }
.esctw--critical .esctw__row--medium, .esctw--critical .esctw__row--high { display: none; }
</style>

react

export function EscalationQueue({
  queueName = "Support escalations",
  filter = "all",
  accent = "#E8A020",
  showAge = true,
}) {
  const rows = [
    { id: "#4471 payment retry", sev: "medium", age: "2h", tag: { background: "#24143014" } },
    { id: "#4472 data mismatch", sev: "high", age: "6h", tag: { background: "#24143024" } },
    { id: "#4473 outage report", sev: "critical", age: "19h", tag: { background: accent, fontWeight: 700 }, border: accent },
  ];
  const order = { medium: 0, high: 1, critical: 2 };
  const min = { all: 0, high: 1, critical: 2 }[filter];
  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.filter((r) => order[r.sev] >= min).map((r) => (
        <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 8, padding: 8, borderRadius: 6, background: "#ffffff", border: "1px solid #24143014", borderLeft: `3px solid ${r.border ?? "transparent"}`, marginBottom: 6 }}>
          {r.id}
          <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 999, ...r.tag }}>{r.sev}</span>
          {showAge && <small style={{ marginLeft: "auto", color: "#24143080", fontSize: 10 }}>{r.age}</small>}
        </div>
      ))}
    </div>
  );
}