Ticket Card
A support ticket with its SLA. Breach risk is computed from the due time, not from how old the ticket is — a two-week ticket with a monthly SLA is fine, and an hour-old one may not be.
src/components/ui/ticket-card.tsxAbout
From the component's own source, where it was written.
A support ticket with its SLA state.
The SLA clock is the point. A ticket list sorted by age is not the same as one sorted by time-to-breach — a low-priority ticket from last week may have days left while an urgent one from this morning is already overdue. Breach risk is computed from the due time, not inferred from age.
"Waiting on customer" pauses the clock, which is why it is a distinct status rather than a flavour of open. Counting that time against the team is how SLA reports become fiction.
Install
npx astralyx-ui add ticket-card
Usage
import { TicketCard } from '@/components/ui/ticket-card'
<TicketCard id="#4821" subject="Refund not received" status="open" priority="high" dueAt={due} />Composer
Change the props and the source below follows.
Refund for order 88213 has not arrived
<TicketCard
id="#4821"
subject="Refund not received"
status="open"
priority="high"
dueAt={due}
/>API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TicketCard
A support ticket with its SLA state.
Extends Omit<ComponentProps<'article'>, 'id'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| id | ReactNode | required | — |
| subject | ReactNode | required | — |
| status | TicketStatus | required | Separate axes. An urgent ticket that is resolved is not the same as a normal one that is open, and one badge cannot say both. |
| priority | TicketPriority | 'normal' | Separate axes. An urgent ticket that is resolved is not the same as a normal one that is open, and one badge cannot say both. |
| requester | ReactNode | — | Unassigned is stated in words rather than left blank — an empty slot reads as a rendering bug. |
| requesterAvatar | ReactNode | — | — |
| assignee | ReactNode | — | Unassigned is stated in words rather than left blank — an empty slot reads as a rendering bug. |
| updatedAt | Date | — | — |
| dueAt | Date | — | The SLA target. Approaching and breached states are derived from it; age alone never triggers a warning. |
| now | Date | — | — |
| replies | number | — | Reply count. A ticket with no replies and a passing SLA is the one to pick up. |
| tags | ReactNode | — | — |
| locale | string | 'en-GB' | — |
| breachedLabel | ReactNode | 'SLA breached' | Badge once dueAt has passed. |
| dueSoonLabel | ReactNode | 'Due soon' | — |
| updatedLabel | ReactNode | 'updated' | Precedes the last-updated time. |
| dueLabel | ReactNode | 'due' | Precedes the due time. |
| pausedLabel | ReactNode | 'SLA clock paused' | Shown for a status that stops the SLA clock. |
Types
| Type | Definition | Description |
|---|---|---|
TicketStatus | 'open' | 'pending' | 'waiting' | 'resolved' | 'closed' | — |
TicketPriority | 'urgent' | 'high' | 'normal' | 'low' | — |