style: restyle ticket details panel

src/components/tickets/ticket-details-panel.tsx

@@ -1,19 +1,45 @@
 import { useMemo } from "react"
 import { format } from "date-fns"
 import { ptBR } from "date-fns/locale"
-import { IconAlertTriangle, IconClockHour4 } from "@tabler/icons-react"
 
 import type { TicketWithDetails } from "@/lib/schemas/ticket"
 import { Badge } from "@/components/ui/badge"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
 
 interface TicketDetailsPanelProps {
   ticket: TicketWithDetails
 }
 
-const queueBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-neutral-700"
+type SummaryTone = "default" | "info" | "warning" | "success" | "muted" | "danger"
-const iconAccentClass = "size-3 text-neutral-700"
+
+const statusLabel: Record<TicketWithDetails["status"], string> = {
+  PENDING: "Pendente",
+  AWAITING_ATTENDANCE: "Em andamento",
+  PAUSED: "Pausado",
+  RESOLVED: "Resolvido",
+}
+
+const statusTone: Record<TicketWithDetails["status"], SummaryTone> = {
+  PENDING: "muted",
+  AWAITING_ATTENDANCE: "info",
+  PAUSED: "warning",
+  RESOLVED: "success",
+}
+
+const priorityLabel: Record<TicketWithDetails["priority"], string> = {
+  LOW: "Baixa",
+  MEDIUM: "Média",
+  HIGH: "Alta",
+  URGENT: "Urgente",
+}
+
+const priorityTone: Record<TicketWithDetails["priority"], SummaryTone> = {
+  LOW: "muted",
+  MEDIUM: "info",
+  HIGH: "warning",
+  URGENT: "danger",
+}
 
 function formatDuration(ms?: number | null) {
   if (!ms || ms <= 0) return "0s"
@@ -30,9 +56,51 @@ function formatDuration(ms?: number | null) {
   return `${seconds}s`
 }
 
+function formatMinutes(value?: number | null) {
+  if (value === null || value === undefined) return "—"
+  return `${value} min`
+}
+
 export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
   const isAvulso = Boolean(ticket.company?.isAvulso)
   const companyLabel = ticket.company?.name ?? (isAvulso ? "Cliente avulso" : "Sem empresa vinculada")
+
+  const summaryChips = useMemo(
+    () => [
+      {
+        key: "queue",
+        label: "Fila",
+        value: ticket.queue ?? "Sem fila",
+        tone: ticket.queue ? ("default" as SummaryTone) : ("muted" as SummaryTone),
+      },
+      {
+        key: "company",
+        label: "Empresa",
+        value: companyLabel,
+        tone: isAvulso ? ("warning" as SummaryTone) : ("default" as SummaryTone),
+      },
+      {
+        key: "status",
+        label: "Status",
+        value: statusLabel[ticket.status] ?? ticket.status,
+        tone: statusTone[ticket.status] ?? "default",
+      },
+      {
+        key: "priority",
+        label: "Prioridade",
+        value: priorityLabel[ticket.priority] ?? ticket.priority,
+        tone: priorityTone[ticket.priority] ?? "default",
+      },
+      {
+        key: "assignee",
+        label: "Responsável",
+        value: ticket.assignee?.name ?? "Não atribuído",
+        tone: ticket.assignee ? ("default" as SummaryTone) : ("muted" as SummaryTone),
+      },
+    ],
+    [companyLabel, isAvulso, ticket.assignee, ticket.priority, ticket.queue, ticket.status]
+  )
+
   const agentTotals = useMemo(() => {
     const totals = ticket.workSummary?.perAgentTotals ?? []
     return totals
@@ -49,90 +117,160 @@ export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
   return (
     <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
       <CardHeader className="px-4 pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1">
             <CardTitle className="text-lg font-semibold text-neutral-900">Detalhes</CardTitle>
+            <CardDescription className="text-sm text-neutral-500">
+              Resumo do ticket, métricas de SLA e tempo dedicado pela equipe.
+            </CardDescription>
+          </div>
+          {isAvulso ? (
+            <Badge className="h-7 rounded-full border border-amber-200 bg-amber-50 px-3 text-xs font-semibold uppercase tracking-wide text-amber-700">
+              Cliente avulso
+            </Badge>
+          ) : null}
+        </div>
       </CardHeader>
-      <CardContent className="flex flex-col gap-5 px-4 pb-6 text-sm text-neutral-700">
+      <CardContent className="space-y-6 px-4 pb-6">
-        <div className="space-y-1 break-words">
+        <section className="space-y-3">
-          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Fila</p>
+          <h3 className="text-sm font-semibold text-neutral-900">Resumo</h3>
-          <Badge className={queueBadgeClass}>{ticket.queue ?? "Sem fila"}</Badge>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {summaryChips.map(({ key, label, value, tone }) => (
+              <SummaryChip key={key} label={label} value={value} tone={tone} />
+            ))}
           </div>
-        <Separator className="bg-slate-200" />
+        </section>
-        <div className="space-y-1 break-words">
+
-          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Empresa</p>
+        <section className="space-y-3">
-          <Badge className={queueBadgeClass}>{companyLabel}</Badge>
+          <div className="flex flex-wrap items-center justify-between gap-2">
-        </div>
+            <h3 className="text-sm font-semibold text-neutral-900">SLA & métricas</h3>
-        <Separator className="bg-slate-200" />
-        <div className="space-y-2 break-words">
-          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">SLA</p>
             {ticket.slaPolicy ? (
-            <div className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-sm">
+              <span className="text-xs font-medium text-neutral-500">{ticket.slaPolicy.name}</span>
-              <span className="text-sm font-semibold text-neutral-900">{ticket.slaPolicy.name}</span>
-              <div className="flex flex-col gap-1 text-xs text-neutral-600">
-                {ticket.slaPolicy.targetMinutesToFirstResponse ? (
-                  <span>Resposta inicial: {ticket.slaPolicy.targetMinutesToFirstResponse} min</span>
-                ) : null}
-                {ticket.slaPolicy.targetMinutesToResolution ? (
-                  <span>Resolução: {ticket.slaPolicy.targetMinutesToResolution} min</span>
             ) : null}
           </div>
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
+              <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Política de SLA</p>
+              {ticket.slaPolicy ? (
+                <div className="mt-3 space-y-2 text-sm text-neutral-700">
+                  <div className="flex items-center justify-between gap-4">
+                    <span className="text-xs text-neutral-500">Resposta inicial</span>
+                    <span className="text-sm font-semibold text-neutral-900">
+                      {formatMinutes(ticket.slaPolicy.targetMinutesToFirstResponse)}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between gap-4">
+                    <span className="text-xs text-neutral-500">Resolução</span>
+                    <span className="text-sm font-semibold text-neutral-900">
+                      {formatMinutes(ticket.slaPolicy.targetMinutesToResolution)}
+                    </span>
+                  </div>
                 </div>
               ) : (
-            <span className="text-neutral-600">Sem política atribuída.</span>
+                <p className="mt-3 text-sm text-neutral-600">Sem política de SLA atribuída.</p>
               )}
             </div>
-        <Separator className="bg-slate-200" />
+            <div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
-        <div className="space-y-2">
               <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Métricas</p>
               {ticket.metrics ? (
-            <div className="flex flex-col gap-2 text-xs text-neutral-700">
+                <div className="mt-3 space-y-2 text-sm text-neutral-700">
-              <span className="flex items-center gap-2">
+                  <div className="flex items-center justify-between gap-4">
-                <IconClockHour4 className={iconAccentClass} /> Tempo aguardando: {ticket.metrics.timeWaitingMinutes ?? "-"} min
+                    <span className="text-xs text-neutral-500">Tempo aguardando</span>
+                    <span className="text-sm font-semibold text-neutral-900">
+                      {formatMinutes(ticket.metrics.timeWaitingMinutes)}
                     </span>
-              <span className="flex items-center gap-2">
+                  </div>
-                <IconAlertTriangle className={iconAccentClass} /> Tempo aberto: {ticket.metrics.timeOpenedMinutes ?? "-"} min
+                  <div className="flex items-center justify-between gap-4">
+                    <span className="text-xs text-neutral-500">Tempo aberto</span>
+                    <span className="text-sm font-semibold text-neutral-900">
+                      {formatMinutes(ticket.metrics.timeOpenedMinutes)}
                     </span>
                   </div>
+                </div>
               ) : (
-            <span className="text-neutral-600">Sem dados de SLA ainda.</span>
+                <p className="mt-3 text-sm text-neutral-600">Sem dados registrados ainda.</p>
               )}
             </div>
-        <Separator className="bg-slate-200" />
+          </div>
+        </section>
+
+        <section className="space-y-3">
+          <h3 className="text-sm font-semibold text-neutral-900">Tempo por agente</h3>
           {agentTotals.length > 0 ? (
-          <>
+            <div className="grid gap-2">
-            <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Tempo por agente</p>
-              <div className="flex flex-col gap-2">
               {agentTotals.map((agent) => (
                 <div
                   key={agent.agentId}
-                    className="flex flex-col gap-1 rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-neutral-700 shadow-sm"
+                  className="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm"
                 >
-                    <div className="flex items-center justify-between text-sm font-semibold text-neutral-900">
+                  <div className="flex items-center justify-between gap-4">
-                      <span>{agent.agentName ?? "Agente removido"}</span>
+                    <span className="text-sm font-semibold text-neutral-900">
-                      <span>{formatDuration(agent.totalWorkedMs)}</span>
+                      {agent.agentName ?? "Agente removido"}
+                    </span>
+                    <span className="text-sm font-semibold text-neutral-900">
+                      {formatDuration(agent.totalWorkedMs)}
+                    </span>
                   </div>
-                    <div className="flex flex-wrap gap-4 text-xs text-neutral-600">
+                  <div className="mt-2 flex flex-wrap gap-4 text-xs text-neutral-500">
-                      <span>Interno: {formatDuration(agent.internalWorkedMs)}</span>
+                    <span>
-                      <span>Externo: {formatDuration(agent.externalWorkedMs)}</span>
+                      Interno:{" "}
+                      <span className="font-medium text-neutral-800">{formatDuration(agent.internalWorkedMs)}</span>
+                    </span>
+                    <span>
+                      Externo:{" "}
+                      <span className="font-medium text-neutral-800">{formatDuration(agent.externalWorkedMs)}</span>
+                    </span>
                   </div>
                 </div>
               ))}
             </div>
+          ) : (
+            <p className="text-sm text-neutral-600">Nenhum tempo registrado neste ticket ainda.</p>
+          )}
+        </section>
+
+        <section className="space-y-3">
+          <h3 className="text-sm font-semibold text-neutral-900">Histórico</h3>
+          <div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm text-sm text-neutral-700">
+            <div className="flex items-center justify-between gap-4 border-b border-slate-100 pb-2">
+              <span className="text-xs uppercase tracking-wide text-neutral-500">Criado em</span>
+              <span className="font-semibold text-neutral-900">
+                {format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
+              </span>
             </div>
-            <Separator className="bg-slate-200" />
+            <div className="flex items-center justify-between gap-4 border-b border-slate-100 py-2">
-          </>
+              <span className="text-xs uppercase tracking-wide text-neutral-500">Atualizado em</span>
-        ) : null}
+              <span className="font-semibold text-neutral-900">
-        <div className="space-y-1">
+                {format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
-          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Histórico</p>
+              </span>
-          <div className="flex flex-col gap-1 text-xs text-neutral-600">
+            </div>
-            <span>Criado: {format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
+            <div className="flex items-center justify-between gap-4 pt-2">
-            <span>Atualizado: {format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
+              <span className="text-xs uppercase tracking-wide text-neutral-500">Resolvido em</span>
-            {ticket.resolvedAt ? (
+              <span className="font-semibold text-neutral-900">
-              <span>Resolvido: {format(ticket.resolvedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
+                {ticket.resolvedAt ? format(ticket.resolvedAt, "dd/MM/yyyy HH:mm", { locale: ptBR }) : "—"}
-            ) : null}
+              </span>
             </div>
           </div>
+        </section>
       </CardContent>
     </Card>
   )
 }
+
+function SummaryChip({ label, value, tone = "default" }: { label: string; value: string; tone?: SummaryTone }) {
+  const toneClasses: Record<SummaryTone, string> = {
+    default: "border-slate-200 bg-white text-neutral-900",
+    info: "border-sky-200 bg-sky-50 text-sky-900",
+    warning: "border-amber-200 bg-amber-50 text-amber-800",
+    success: "border-emerald-200 bg-emerald-50 text-emerald-800",
+    muted: "border-slate-200 bg-slate-50 text-neutral-600",
+    danger: "border-rose-200 bg-rose-50 text-rose-700",
+  }
+
+  return (
+    <div className={cn("rounded-xl border px-3 py-2 shadow-sm", toneClasses[tone])}>
+      <p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">{label}</p>
+      <p className="mt-1 truncate text-sm font-semibold text-current">{value}</p>
+    </div>
+  )
+}

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

@@ -157,7 +157,6 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
     useQuery(queuesEnabled ? api.queues.summary : "skip", queueArgs) as TicketQueueSummary[] | undefined
   ) ?? []
   const { categories, isLoading: categoriesLoading } = useTicketCategories(ticket.tenantId)
-  const [status] = useState<TicketStatus>(ticket.status)
   const workSummaryRemote = useQuery(
     api.tickets.workSummary,
     convexUserId
@@ -595,8 +594,8 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
         sessionId?: Id<"ticketWorkSessions">
         serverNow?: number
       }
-      const status = resultMeta?.status ?? "started"
+      const startStatus = resultMeta?.status ?? "started"
-      if (status === "already_started") {
+      if (startStatus === "already_started") {
         toast.info("O atendimento já estava em andamento", { id: "work" })
       } else {
         toast.success("Atendimento iniciado", { id: "work" })
@@ -608,7 +607,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
         typeof startedAtMsRaw === "number" && Number.isFinite(startedAtMsRaw) ? startedAtMsRaw : getServerNow()
       if (typeof startedAtMsRaw === "number") {
         localStartOriginRef.current = "remote"
-      } else if (status === "already_started") {
+      } else if (startStatus === "already_started") {
         localStartOriginRef.current = "already-running-fallback"
       } else {
         localStartOriginRef.current = "fresh-local"