Finished workflow state.
All 312 payslips generated and sent
<div class="completion" data-outcome="Completed" style="--accent:#A8E6C1;">
<div class="completion__status">
<span class="completion__icon completion__icon--ok"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="completion__icon completion__icon--warn"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg></span>
<span class="completion__icon completion__icon--cancel"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="completion__text">Completed</span>
</div>
<h3 class="completion__title">Monthly payroll run</h3>
<p class="completion__detail">All 312 payslips generated and sent</p>
<p class="completion__timestamp">Finished 18 Aug 2026, 09:14</p>
</div>
<style>
.completion { font: 15px/1.5 system-ui, sans-serif; max-width: 340px; padding: 20px; background: #FAF7F2; color: #241430; border-radius: 14px; border: 1.5px solid #24143020; }
.completion__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #24143010; margin-bottom: 12px; }
.completion__icon { display: none; }
.completion[data-outcome="Completed"] .completion__icon--ok { display: inline-flex; color: #2f8a52; }
.completion[data-outcome="Completed with warnings"] .completion__icon--warn { display: inline-flex; color: var(--accent); }
.completion[data-outcome="Cancelled"] .completion__icon--cancel { display: inline-flex; color: #b23b3b; }
.completion__text { font-weight: 600; font-size: 13px; }
.completion__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.completion__detail { margin: 0 0 4px; font-size: 14px; color: #241430cc; }
.completion__timestamp { margin: 0; font-size: 12px; color: #24143099; }
</style><div class="completion-tw font-sans max-w-[340px] p-5 bg-[#FAF7F2] text-[#241430] rounded-2xl border-[1.5px] border-[#24143020]" data-outcome="Completed">
<div class="inline-flex items-center gap-1.5 py-1 px-2.5 rounded-full bg-[#24143010] mb-3">
<span class="completion-tw__icon completion-tw__icon--ok" style="color:#2f8a52"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="completion-tw__icon completion-tw__icon--warn" style="color:#A8E6C1"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M8 2.5l6.5 11h-13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6.5v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg></span>
<span class="completion-tw__icon completion-tw__icon--cancel" style="color:#b23b3b"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="font-semibold text-[13px]">Completed</span>
</div>
<h3 class="m-0 mb-1.5 text-[17px] font-semibold">Monthly payroll run</h3>
<p class="m-0 mb-1 text-sm text-[#241430]/80">All 312 payslips generated and sent</p>
<p class="m-0 text-xs text-[#241430]/60">Finished 18 Aug 2026, 09:14</p>
</div>
<style>
.completion-tw__icon { display: none; }
.completion-tw[data-outcome="Completed"] .completion-tw__icon--ok { display: inline-flex; }
.completion-tw[data-outcome="Completed with warnings"] .completion-tw__icon--warn { display: inline-flex; }
.completion-tw[data-outcome="Cancelled"] .completion-tw__icon--cancel { display: inline-flex; }
</style>export function CompletionState({
taskTitle = "Monthly payroll run",
detail = "All 312 payslips generated and sent",
timestamp = "Finished 18 Aug 2026, 09:14",
outcome = "Completed",
accent = "#A8E6C1",
}) {
const icons = {
"Completed": { svg: "<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>", color: "#2f8a52" },
"Completed with warnings": { svg: "<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M8 2.5l6.5 11h-13z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/><path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\"/></svg>", color: accent },
"Cancelled": { svg: "<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>", color: "#b23b3b" },
};
const active = icons[outcome] ?? icons["Completed"];
return (
<div style={{ fontFamily: "system-ui, sans-serif", maxWidth: 340, padding: 20, background: "#FAF7F2",
color: "#241430", borderRadius: 14, border: "1.5px solid #24143020" }}>
<div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px", borderRadius: 999, background: "#24143010", marginBottom: 12 }}>
<span style={{ color: active.color, display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: active.svg }} />
<span style={{ fontWeight: 600, fontSize: 13 }}>{outcome}</span>
</div>
<h3 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 600 }}>{taskTitle}</h3>
<p style={{ margin: "0 0 4px", fontSize: 14, color: "#241430cc" }}>{detail}</p>
<p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>{timestamp}</p>
</div>
);
}