Add live ticket animations and fix sidebar hydration

This commit is contained in:
codex-bot 2025-10-24 17:24:51 -03:00
parent 2a9170f7dd
commit ddbf019d12
6 changed files with 90 additions and 32 deletions

View file

@ -46,20 +46,22 @@ export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
<CardDescription className="text-xs uppercase tracking-wide text-neutral-500">Fila</CardDescription>
<CardTitle className="text-lg font-semibold text-neutral-900">{queue.name}</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-3 text-sm text-neutral-600">
<div className="flex justify-between">
<span>Pendentes</span>
<span className="font-semibold text-neutral-900">{queue.pending}</span>
<CardContent className="space-y-4">
<div className="grid gap-3 sm:grid-cols-3">
<div className="flex h-full flex-col justify-between gap-2 rounded-xl border border-slate-200 bg-gradient-to-br from-white via-white to-slate-100 px-4 py-3 shadow-sm">
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Pendentes</p>
<p className="text-3xl font-bold tracking-tight text-neutral-900 tabular-nums">{queue.pending}</p>
</div>
<div className="flex h-full flex-col justify-between gap-2 rounded-xl border border-sky-200 bg-gradient-to-br from-white via-white to-sky-50 px-4 py-3 shadow-sm">
<p className="text-xs font-semibold uppercase tracking-wide text-sky-700">Aguardando resposta</p>
<p className="text-3xl font-bold tracking-tight text-sky-700 tabular-nums">{queue.waiting}</p>
</div>
<div className="flex h-full flex-col justify-between gap-2 rounded-xl border border-amber-200 bg-gradient-to-br from-white via-white to-amber-50 px-4 py-3 shadow-sm">
<p className="text-xs font-semibold uppercase tracking-wide text-amber-700">Violados</p>
<p className="text-3xl font-bold tracking-tight text-amber-700 tabular-nums">{queue.breached}</p>
</div>
</div>
<div className="flex justify-between">
<span>Aguardando resposta</span>
<span className="font-semibold text-neutral-900">{queue.waiting}</span>
</div>
<div className="flex items-center justify-between">
<span>Violados</span>
<span className="font-semibold text-red-600">{queue.breached}</span>
</div>
<div className="pt-1.5">
<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