esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refine queue metrics and devices ui

Browse source
This commit is contained in:
Esdras Renan 2025-11-04 19:53:54 -03:00
parent 1e45324460
commit c2acd65764
11 changed files with 181 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/tickets/new-ticket-dialog.tsx
View file

@ -544,7 +544,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
</DialogTrigger>
<DialogContent className="max-w-4xl gap-0 overflow-hidden rounded-3xl border border-slate-200 bg-white p-0 shadow-2xl lg:max-w-5xl">
<div className="max-h-[88vh] overflow-y-auto">
<div className="space-y-5 px-6 py-7 sm:px-8 md:px-10">
<div className="space-y-5 px-6 pt-7 pb-12 sm:px-8 md:px-10">
<form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
<div className="flex flex-col gap-4 border-b border-slate-200 pb-5 md:flex-row md:items-start md:justify-between">
<DialogHeader className="gap-1.5 p-0">

15
src/components/tickets/play-next-ticket-card.tsx
View file

@ -64,8 +64,9 @@ export function PlayNextTicketCard({ context }: PlayNextTicketCardProps) {
id: "default",
name: "Geral",
pending: queueSummary.reduce((acc, item) => acc + item.pending, 0),
waiting: queueSummary.reduce((acc, item) => acc + item.waiting, 0),
breached: 0,
inProgress: queueSummary.reduce((acc, item) => acc + item.inProgress, 0),
paused: queueSummary.reduce((acc, item) => acc + item.paused, 0),
breached: queueSummary.reduce((acc, item) => acc + item.breached, 0),
},
nextTicket: nextTicketUi,
}
@ -127,11 +128,15 @@ export function PlayNextTicketCard({ context }: PlayNextTicketCardProps) {
<span className="font-semibold text-neutral-900">{cardContext.queue.pending}</span>
</div>
<div className="flex items-center justify-between">
<span>Em espera</span>
<span className="font-semibold text-neutral-900">{cardContext.queue.waiting}</span>
<span>Em andamento</span>
<span className="font-semibold text-neutral-900">{cardContext.queue.inProgress}</span>
</div>
<div className="flex items-center justify-between">
<span>SLA violado</span>
<span>Pausados</span>
<span className="font-semibold text-neutral-900">{cardContext.queue.paused}</span>
</div>
<div className="flex items-center justify-between">
<span>Fora do SLA</span>
<span className="font-semibold text-red-600">{cardContext.queue.breached}</span>
</div>
</div>

4
src/components/tickets/ticket-csat-card.tsx
View file

@ -221,10 +221,6 @@ export function TicketCsatCard({ ticket }: TicketCsatCardProps) {
</span>
{ratedAtRelative ? ` • ${ratedAtRelative}` : null}
</p>
) : viewerIsStaff ? (
<div className="flex items-center gap-2 rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-2 text-xs text-neutral-600">
Nenhuma avaliação registrada ainda.
</div>
) : null}
{canSubmit ? (
<div className="space-y-2">

21
src/components/tickets/ticket-queue-summary.tsx
View file

@ -38,8 +38,8 @@ export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
return (
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(22rem,1fr))]">
{data.map((queue) => {
const total = queue.pending + queue.waiting
const breachPercent = total === 0 ? 0 : Math.round((queue.breached / total) * 100)
const totalOpen = queue.pending + queue.inProgress + queue.paused
const breachPercent = totalOpen === 0 ? 0 : Math.round((queue.breached / totalOpen) * 100)
return (
<Card
key={queue.id}
@ -52,7 +52,7 @@ export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
</CardTitle>
</CardHeader>
<CardContent className="space-y-3 sm:space-y-4">
<div className="grid min-w-0 grid-cols-1 gap-2.5 sm:grid-cols-2">
<div className="grid min-w-0 grid-cols-1 gap-2.5 sm:grid-cols-3">
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-slate-200 bg-gradient-to-br from-white via-white to-slate-100 px-3 py-2.5 text-left shadow-sm lg:px-4 lg:py-3">
<p className="min-w-0 pr-0.5 text-[0.68rem] font-semibold uppercase leading-tight tracking-[0.02em] text-neutral-500 sm:text-[0.72rem] lg:text-xs">
Pendentes
@ -63,25 +63,28 @@ export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
</div>
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-sky-200 bg-gradient-to-br from-white via-white to-sky-50 px-3 py-2.5 text-left shadow-sm lg:px-4 lg:py-3">
<p className="min-w-0 pr-0.5 text-[0.68rem] font-semibold uppercase leading-tight tracking-[0.02em] text-sky-700 sm:text-[0.72rem] lg:text-xs">
Aguardando resposta
Em andamento
</p>
<p className="text-2xl font-bold tracking-tight text-sky-700 tabular-nums sm:text-3xl">
{queue.waiting}
{queue.inProgress}
</p>
</div>
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-amber-200 bg-gradient-to-br from-white via-white to-amber-50 px-3 py-2.5 text-left shadow-sm sm:col-span-2 lg:px-4 lg:py-3">
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-amber-200 bg-gradient-to-br from-white via-white to-amber-50 px-3 py-2.5 text-left shadow-sm lg:px-4 lg:py-3">
<p className="min-w-0 pr-0.5 text-[0.68rem] font-semibold uppercase leading-tight tracking-[0.02em] text-amber-700 sm:text-[0.72rem] lg:text-xs">
Violados
Pausados
</p>
<p className="text-2xl font-bold tracking-tight text-amber-700 tabular-nums sm:text-3xl">
{queue.breached}
{queue.paused}
</p>
</div>
</div>
<div className="pt-1">
<Progress value={breachPercent} className="h-1.5 bg-slate-100" indicatorClassName="bg-[#00e8ff]" />
<span className="mt-2 block text-xs text-neutral-500">
{breachPercent}% com SLA violado nesta fila
{breachPercent}% dos chamados da fila estão fora do SLA
</span>
<span className="mt-1 block text-xs text-neutral-400">
Em atraso: {queue.breached}
</span>
</div>
</CardContent>