78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
import { format } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { IconClock, IconUserCircle } from "@tabler/icons-react"
|
|
|
|
import type { TicketWithDetails } from "@/lib/schemas/ticket"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { TicketPriorityPill } from "@/components/tickets/priority-pill"
|
|
import { TicketStatusBadge } from "@/components/tickets/status-badge"
|
|
|
|
interface TicketHeaderProps {
|
|
ticket: TicketWithDetails
|
|
}
|
|
|
|
export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|
return (
|
|
<div className="space-y-4 rounded-xl border bg-card p-6 shadow-sm">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-3">
|
|
<Badge variant="outline" className="rounded-full px-3 py-1 text-xs uppercase tracking-wide">
|
|
#{ticket.reference}
|
|
</Badge>
|
|
<TicketPriorityPill priority={ticket.priority} />
|
|
<TicketStatusBadge status={ticket.status} />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-foreground">{ticket.subject}</h1>
|
|
<p className="max-w-2xl text-sm text-muted-foreground">{ticket.summary}</p>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div className="grid gap-4 text-sm text-muted-foreground sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="flex items-center gap-2">
|
|
<IconUserCircle className="size-4" />
|
|
Solicitante:
|
|
<span className="font-medium text-foreground">{ticket.requester.name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<IconUserCircle className="size-4" />
|
|
Responsavel:
|
|
<span className="font-medium text-foreground">
|
|
{ticket.assignee?.name ?? "Aguardando atribuicao"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<IconClock className="size-4" />
|
|
Atualizado em:
|
|
<span className="font-medium text-foreground">
|
|
{format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<IconClock className="size-4" />
|
|
Criado em:
|
|
<span className="font-medium text-foreground">
|
|
{format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
|
|
</span>
|
|
</div>
|
|
{ticket.dueAt ? (
|
|
<div className="flex items-center gap-2">
|
|
<IconClock className="size-4" />
|
|
SLA ate:
|
|
<span className="font-medium text-foreground">
|
|
{format(ticket.dueAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
{ticket.slaPolicy ? (
|
|
<div className="flex items-center gap-2">
|
|
<IconClock className="size-4" />
|
|
Politica:
|
|
<span className="font-medium text-foreground">{ticket.slaPolicy.name}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|