Tilamerkit

StatusBadge — tilamerkki

<StatusBadge tone="success">Valmis</StatusBadge>
<StatusBadge tone="info" pulse>Käsittelyssä</StatusBadge>

Paketti omistaa sävyt ja sykkivän pisteen; palvelu omistaa sanaston.

pulse lisää sykkivän pisteen. Käytä sitä käynnissä olevalle työlle — se saa tilan lukeutumaan eläväksi eikä jumittuneeksi. Piste perii tekstin värin ja pysähtyy motion-reducella.

Kiinteä sanasto: createStatusBadge

// lib/status.tsx — kerran palvelua kohti
export const StatusBadge = createStatusBadge({
  received:  { tone: "info",    label: "Vastaanotettu" },
  sending:   { tone: "warning", label: "Lähetetään", pulse: true },
  forwarded: { tone: "success", label: "Välitetty" },
  failed:    { tone: "error",   label: "Epäonnistui" },
});

// käyttöpaikoilla
<StatusBadge status={rivi.status} />

TypeScript tarkistaa että status on kartan avain, joten tuntematon tila on käännösaikainen virhe eikä tyhjä merkki.

Kartoittamaton arvo renderöityy neutraalina ja säilyttää alkuperäisen arvon title-attribuutissa — ulkopuolisesta putkesta tuleva uusi tila on siis selvitettävissä ilman lokien kaivamista.

StatusDot — tilapiste

Väripiste, tila sanoin ja valinnainen tarkenne alla. Taulukkoon, jonka jokaisella rivillä on tila: StatusBadge on pilleri, ja 17 pilleriä päällekkäin on seinä.

<StatusDot tone="error" detail="2 ajoa jäänyt väliin">Pysähtynyt</StatusDot>
<StatusDot tone="info" pulse detail="saapui 1 min sitten · 34 Mt">Käsittelyssä</StatusDot>
<StatusDot tone="success">Ajallaan</StatusDot>

Piste on aria-hidden ja sana pakollinen: väri ei kanna merkitystä yksinään. detail kertoo miksi tila on juuri tämä — se on se tieto jota operaattori etsii, ja tuotannossa se puuttui joka riviltä.