From 54343f61d5bf82a196372a1f6bab310be7e6b438 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Wed, 19 Nov 2025 11:43:29 -0300
Subject: [PATCH] Add SLA tone to queue cards

---
 .../tickets/ticket-queue-summary.tsx           | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/tickets/ticket-queue-summary.tsx b/src/components/tickets/ticket-queue-summary.tsx
index a97a5b1..f584ae7 100644
--- a/src/components/tickets/ticket-queue-summary.tsx
+++ b/src/components/tickets/ticket-queue-summary.tsx
@@ -14,6 +14,19 @@ interface TicketQueueSummaryProps {
   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) {
   const { convexUserId, isStaff } = useAuth()
   const enabled = Boolean(isStaff && convexUserId)
@@ -52,6 +65,7 @@ export function TicketQueueSummaryCards({ queues, layout = "default" }: TicketQu
         {data.map((queue, index) => {
           const totalOpen = queue.pending + queue.inProgress + queue.paused
           const breachPercent = totalOpen === 0 ? 0 : Math.round((queue.breached / totalOpen) * 100)
+          const slaTone = resolveSlaTone(breachPercent)
           return (
             <Card
               key={queue.id ?? `${queue.name ?? "queue"}-${index}`}
@@ -92,8 +106,8 @@ export function TicketQueueSummaryCards({ queues, layout = "default" }: TicketQu
                   </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">
+                  <Progress value={breachPercent} className="h-1.5 bg-slate-100" indicatorClassName={slaTone.indicator} />
+                  <span className={`mt-2 block text-xs font-medium ${slaTone.text}`}>
                     {breachPercent}% dos chamados da fila estão fora do SLA
                   </span>
                   <span className="mt-1 block text-xs text-neutral-400">