blob: 3b3926bd9b2b3c24ef1a223c6d946fd4fc84b5ac (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/**
* TicketCard.tsx
* Card de ticket para uso na lista do dashboard.
*/
import { useNavigate } from 'react-router-dom';
import type { Ticket } from '@/lib/api';
import { StatusBadge } from './StatusBadge';
import { PriorityBadge } from './PriorityBadge';
import styles from './TicketCard.module.css';
interface TicketCardProps {
ticket: Ticket;
}
function formatDate(iso: string): string {
return new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: 'short',
hour: '2-digit',
minute: '2-digit',
}).format(new Date(iso));
}
export function TicketCard({ ticket }: TicketCardProps) {
const navigate = useNavigate();
return (
<article
className={`${styles.card} ${styles[`priority_${ticket.priority}`]}`}
onClick={() => navigate(`/tickets/${ticket.id}`)}
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === 'Enter' && navigate(`/tickets/${ticket.id}`)}
aria-label={`Ticket #${ticket.id}: ${ticket.title}`}
>
<div className={styles.top}>
<div className={styles.badges}>
<StatusBadge status={ticket.status} />
<PriorityBadge priority={ticket.priority} />
</div>
<span className={styles.id}>#{ticket.id}</span>
</div>
<h3 className={styles.title}>{ticket.title}</h3>
<p className={styles.description}>{ticket.description}</p>
<div className={styles.footer}>
<span className={styles.meta}>
Aberto em {formatDate(ticket.createdAt)}
</span>
{ticket.assigneeId ? (
<span className={styles.assigned}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
</svg>
Agente #{ticket.assigneeId}
</span>
) : (
<span className={styles.unassigned}>Sem agente</span>
)}
</div>
</article>
);
}
|
