style: restyle ticket details panel
This commit is contained in:
Esdras Renan
parent
3972f66c92
commit
96a6f73e30
2 changed files with 227 additions and 90 deletions
|
|
@ -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 { Separator } from "@/components/ui/separator"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
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"
|
||||
const iconAccentClass = "size-3 text-neutral-700"
|
||||
type SummaryTone = "default" | "info" | "warning" | "success" | "muted" | "danger"
|
||||
|
||||
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">
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Detalhes</CardTitle>
|
||||
<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">
|
||||
<div className="space-y-1 break-words">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Fila</p>
|
||||
<Badge className={queueBadgeClass}>{ticket.queue ?? "Sem fila"}</Badge>
|
||||
</div>
|
||||
<Separator className="bg-slate-200" />
|
||||
<div className="space-y-1 break-words">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Empresa</p>
|
||||
<Badge className={queueBadgeClass}>{companyLabel}</Badge>
|
||||
</div>
|
||||
<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-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>
|
||||
) : (
|
||||
<span className="text-neutral-600">Sem política atribuída.</span>
|
||||
)}
|
||||
</div>
|
||||
<Separator className="bg-slate-200" />
|
||||
<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">
|
||||
<span className="flex items-center gap-2">
|
||||
<IconClockHour4 className={iconAccentClass} /> Tempo aguardando: {ticket.metrics.timeWaitingMinutes ?? "-"} min
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<IconAlertTriangle className={iconAccentClass} /> Tempo aberto: {ticket.metrics.timeOpenedMinutes ?? "-"} min
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-neutral-600">Sem dados de SLA ainda.</span>
|
||||
)}
|
||||
</div>
|
||||
<Separator className="bg-slate-200" />
|
||||
{agentTotals.length > 0 ? (
|
||||
<>
|
||||
<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"
|
||||
>
|
||||
<div className="flex items-center justify-between text-sm font-semibold text-neutral-900">
|
||||
<span>{agent.agentName ?? "Agente removido"}</span>
|
||||
<span>{formatDuration(agent.totalWorkedMs)}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4 text-xs text-neutral-600">
|
||||
<span>Interno: {formatDuration(agent.internalWorkedMs)}</span>
|
||||
<span>Externo: {formatDuration(agent.externalWorkedMs)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="bg-slate-200" />
|
||||
</>
|
||||
) : null}
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Histórico</p>
|
||||
<div className="flex flex-col gap-1 text-xs text-neutral-600">
|
||||
<span>Criado: {format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
||||
<span>Atualizado: {format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
||||
{ticket.resolvedAt ? (
|
||||
<span>Resolvido: {format(ticket.resolvedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
||||
<CardContent className="space-y-6 px-4 pb-6">
|
||||
<section className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Resumo</h3>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h3 className="text-sm font-semibold text-neutral-900">SLA & métricas</h3>
|
||||
{ticket.slaPolicy ? (
|
||||
<span className="text-xs font-medium text-neutral-500">{ticket.slaPolicy.name}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</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>
|
||||
) : (
|
||||
<p className="mt-3 text-sm text-neutral-600">Sem política de SLA atribuída.</p>
|
||||
)}
|
||||
</div>
|
||||
<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">Métricas</p>
|
||||
{ticket.metrics ? (
|
||||
<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">Tempo aguardando</span>
|
||||
<span className="text-sm font-semibold text-neutral-900">
|
||||
{formatMinutes(ticket.metrics.timeWaitingMinutes)}
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
) : (
|
||||
<p className="mt-3 text-sm text-neutral-600">Sem dados registrados ainda.</p>
|
||||
)}
|
||||
</div>
|
||||
</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">
|
||||
{agentTotals.map((agent) => (
|
||||
<div
|
||||
key={agent.agentId}
|
||||
className="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm font-semibold text-neutral-900">
|
||||
{agent.agentName ?? "Agente removido"}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-neutral-900">
|
||||
{formatDuration(agent.totalWorkedMs)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-4 text-xs text-neutral-500">
|
||||
<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>
|
||||
<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>
|
||||
<span className="font-semibold text-neutral-900">
|
||||
{format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 pt-2">
|
||||
<span className="text-xs uppercase tracking-wide text-neutral-500">Resolvido em</span>
|
||||
<span className="font-semibold text-neutral-900">
|
||||
{ticket.resolvedAt ? format(ticket.resolvedAt, "dd/MM/yyyy HH:mm", { locale: ptBR }) : "—"}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
if (status === "already_started") {
|
||||
const startStatus = resultMeta?.status ?? "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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue