SLA timer for help desks: a dial that drains and warms from primary to destructive as the due time nears, rolling digits, an overdue arc once breached, and a pill for lists. One announcement per change. From the Support & Requests Kit → ai.osagi.finance/kits/support-requests
"use client";
import { useEffect, useState } from "react";
import { SlaTimer } from "@/components/ui/sla-timer";
const settings = {
label: "First response · ticket 1043",
showList: true,
/** Demo seconds that pass in one real second; 0 stands the clock still. */
speed: 60,
/** Share of the time after which a clock warns. */
warnAt: 0.75,
};
const SECOND = 1000;
const MINUTE = 60 * SECOND;
/** One tick a second: the digits roll once and rest, instead of rolling without a pause. */
const TICK_MS = 1000;
/** The demo's own clock, from a fixed moment so every visit shows the same story. */
const START = Date.parse("2026-10-18T10:00:00.000Z");
const at = (minutes: number) => START + minutes * MINUTE;
/** The first response runs four minutes over, then the story starts again. */
const LOOP_AT = at(8);
const TICKETS = [
{
dueAt: at(225),
id: "1044",
startedAt: at(-15),
subject: "Add a cost centre to requests",
},
{
dueAt: at(90),
id: "1045",
pausedSince: at(-30),
startedAt: at(-60),
subject: "Waiting for the customer's logs",
},
{
dueAt: at(60),
id: "1046",
startedAt: at(-40),
stoppedAt: at(-5),
subject: "Password reset link expired",
},
];
/** A help desk's clocks: a first response that runs out, a resolution on track, and a list. */
export default function Demo(props: Partial<typeof settings>) {
const { label, showList, speed, warnAt } = { ...settings, ...props };
const [now, setNow] = useState(START);
useEffect(() => {
if (speed <= 0) {
return;
}
const id = setInterval(
() =>
setNow((current) => {
const next = current + speed * TICK_MS;
return next > LOOP_AT ? START : next;
}),
TICK_MS
);
return () => clearInterval(id);
}, [speed]);
return (
<div className="flex min-h-[560px] w-full flex-col items-center justify-center gap-5 bg-background p-6">
<div className="grid w-full max-w-3xl justify-items-center gap-4 md:grid-cols-2">
<SlaTimer
dueAt={at(4)}
label={label}
now={now}
startedAt={at(-16)}
warnAt={warnAt}
/>
<SlaTimer
dueAt={at(110)}
label="Resolution · ticket 1042"
now={now}
startedAt={at(-130)}
warnAt={warnAt}
/>
</div>
{showList ? (
<ul
aria-label="Open tickets"
className="w-full max-w-3xl divide-y divide-border rounded-2xl border border-border bg-card"
>
{TICKETS.map((ticket) => (
<li
className="flex flex-wrap items-center justify-between gap-3 px-4 py-3 text-sm"
key={ticket.id}
>
<span className="min-w-0">
<span className="text-muted-foreground">{ticket.id}</span>{" "}
{ticket.subject}
</span>
<SlaTimer
dueAt={ticket.dueAt}
label={`Ticket ${ticket.id}`}
now={now}
pausedSince={ticket.pausedSince ?? null}
startedAt={ticket.startedAt}
stoppedAt={ticket.stoppedAt ?? null}
variant="pill"
warnAt={warnAt}
/>
</li>
))}
</ul>
) : null}
</div>
);
}