feat: scaffold tickets experience

web/src/components/tickets/ticket-summary-header.tsx

@@ -0,0 +1,78 @@
+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>
+  )
+}