feat: scaffold tickets experience

web/src/components/tickets/tickets-table.tsx

@@ -0,0 +1,172 @@
+import Link from "next/link"
+import { formatDistanceToNow } from "date-fns"
+import { ptBR } from "date-fns/locale"
+
+import { tickets as ticketsMock } from "@/lib/mocks/tickets"
+import type { Ticket } from "@/lib/schemas/ticket"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { TicketPriorityPill } from "@/components/tickets/priority-pill"
+import { TicketStatusBadge } from "@/components/tickets/status-badge"
+
+const channelLabel: Record<string, string> = {
+  EMAIL: "E-mail",
+  WHATSAPP: "WhatsApp",
+  CHAT: "Chat",
+  PHONE: "Telefone",
+  API: "API",
+  MANUAL: "Manual",
+}
+
+const cellClass = "py-4 align-top"
+
+function AssigneeCell({ ticket }: { ticket: Ticket }) {
+  if (!ticket.assignee) {
+    return <span className="text-sm text-muted-foreground">Sem responsável</span>
+  }
+
+  const initials = ticket.assignee.name
+    .split(" ")
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("")
+
+  return (
+    <div className="flex items-center gap-2">
+      <Avatar className="size-8">
+        <AvatarImage src={ticket.assignee.avatarUrl} alt={ticket.assignee.name} />
+        <AvatarFallback>{initials}</AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col">
+        <span className="text-sm font-medium leading-none text-foreground">
+          {ticket.assignee.name}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {ticket.assignee.teams?.[0] ?? "Agente"}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+type TicketsTableProps = {
+  tickets?: Ticket[]
+}
+
+export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
+  return (
+    <Card className="border-none shadow-none">
+      <CardContent className="px-4 py-4 sm:px-6">
+        <Table className="min-w-full">
+          <TableHeader>
+            <TableRow className="text-xs uppercase text-muted-foreground">
+              <TableHead className="w-[110px]">Ticket</TableHead>
+              <TableHead>Assunto</TableHead>
+              <TableHead className="hidden lg:table-cell">Fila</TableHead>
+              <TableHead className="hidden md:table-cell">Canal</TableHead>
+              <TableHead className="hidden md:table-cell">Prioridade</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="hidden xl:table-cell">Responsável</TableHead>
+              <TableHead className="w-[140px]">Atualizado</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tickets.map((ticket) => (
+              <TableRow key={ticket.id} className="group">
+                <TableCell className={cellClass}>
+                  <div className="flex flex-col gap-0.5">
+                    <Link
+                      href={`/tickets/${ticket.id}`}
+                      className="font-semibold tracking-tight text-primary hover:underline"
+                    >
+                      #{ticket.reference}
+                    </Link>
+                    <span className="text-xs text-muted-foreground">
+                      {ticket.queue ?? "Sem fila"}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell className={cellClass}>
+                  <div className="flex flex-col gap-1">
+                    <Link
+                      href={`/tickets/${ticket.id}`}
+                      className="line-clamp-1 font-medium text-foreground hover:underline"
+                    >
+                      {ticket.subject}
+                    </Link>
+                    <span className="line-clamp-1 text-sm text-muted-foreground">
+                      {ticket.summary ?? "Sem resumo"}
+                    </span>
+                    <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
+                      <span>{ticket.requester.name}</span>
+                      {ticket.tags?.map((tag) => (
+                        <Badge
+                          key={tag}
+                          variant="outline"
+                          className="rounded-full border-transparent bg-slate-100 px-2 py-1 text-xs text-slate-600"
+                        >
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell className={`${cellClass} hidden lg:table-cell`}>
+                  <Badge className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
+                    {ticket.queue ?? "Sem fila"}
+                  </Badge>
+                </TableCell>
+                <TableCell className={`${cellClass} hidden md:table-cell`}>
+                  <Badge className="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-600">
+                    {channelLabel[ticket.channel] ?? ticket.channel}
+                  </Badge>
+                </TableCell>
+                <TableCell className={`${cellClass} hidden md:table-cell`}>
+                  <TicketPriorityPill priority={ticket.priority} />
+                </TableCell>
+                <TableCell className={cellClass}>
+                  <div className="flex flex-col gap-1">
+                    <TicketStatusBadge status={ticket.status} />
+                    {ticket.metrics?.timeWaitingMinutes ? (
+                      <span className="text-xs text-muted-foreground">
+                        Espera {ticket.metrics.timeWaitingMinutes} min
+                      </span>
+                    ) : null}
+                  </div>
+                </TableCell>
+                <TableCell className={`${cellClass} hidden xl:table-cell`}>
+                  <AssigneeCell ticket={ticket} />
+                </TableCell>
+                <TableCell className={cellClass}>
+                  <span className="text-sm text-muted-foreground">
+                    {formatDistanceToNow(ticket.updatedAt, {
+                      addSuffix: true,
+                      locale: ptBR,
+                    })}
+                  </span>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {tickets.length === 0 && (
+          <div className="flex flex-col items-center justify-center gap-2 py-10 text-center">
+            <p className="text-sm font-medium">Nenhum ticket encontrado</p>
+            <p className="text-sm text-muted-foreground">
+              Ajuste os filtros ou selecione outra fila.
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}