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

Add SLA tone to queue cards

Browse source
This commit is contained in:
Esdras Renan 2025-11-19 11:43:29 -03:00
parent 7401ee366d
commit 54343f61d5
1 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,19 @@ interface TicketQueueSummaryProps {
layout?: "default" | "compact" layout?: "default" | "compact"
} }
function resolveSlaTone(percent: number) {
if (percent < 25) {
return { indicator: "bg-[#00e8ff]", text: "text-sky-600" }
}
if (percent < 50) {
return { indicator: "bg-emerald-400", text: "text-emerald-600" }
}
if (percent < 75) {
return { indicator: "bg-amber-400", text: "text-amber-600" }
}
return { indicator: "bg-rose-500", text: "text-rose-600" }
}
export function TicketQueueSummaryCards({ queues, layout = "default" }: TicketQueueSummaryProps) { export function TicketQueueSummaryCards({ queues, layout = "default" }: TicketQueueSummaryProps) {
const { convexUserId, isStaff } = useAuth() const { convexUserId, isStaff } = useAuth()
const enabled = Boolean(isStaff && convexUserId) const enabled = Boolean(isStaff && convexUserId)
@ -52,6 +65,7 @@ export function TicketQueueSummaryCards({ queues, layout = "default" }: TicketQu
{data.map((queue, index) => { {data.map((queue, index) => {
const totalOpen = queue.pending + queue.inProgress + queue.paused const totalOpen = queue.pending + queue.inProgress + queue.paused
const breachPercent = totalOpen === 0 ? 0 : Math.round((queue.breached / totalOpen) * 100) const breachPercent = totalOpen === 0 ? 0 : Math.round((queue.breached / totalOpen) * 100)
const slaTone = resolveSlaTone(breachPercent)
return ( return (
<Card <Card
key={queue.id ?? `${queue.name ?? "queue"}-${index}`} key={queue.id ?? `${queue.name ?? "queue"}-${index}`}
@ -92,8 +106,8 @@ export function TicketQueueSummaryCards({ queues, layout = "default" }: TicketQu
</div> </div>
</div> </div>
<div className="pt-1"> <div className="pt-1">
<Progress value={breachPercent} className="h-1.5 bg-slate-100" indicatorClassName="bg-[#00e8ff]" /> <Progress value={breachPercent} className="h-1.5 bg-slate-100" indicatorClassName={slaTone.indicator} />
<span className="mt-2 block text-xs text-neutral-500"> <span className={`mt-2 block text-xs font-medium ${slaTone.text}`}>
{breachPercent}% dos chamados da fila estão fora do SLA {breachPercent}% dos chamados da fila estão fora do SLA
</span> </span>
<span className="mt-1 block text-xs text-neutral-400"> <span className="mt-1 block text-xs text-neutral-400">