feat: scaffold tickets experience

web/src/components/tickets/ticket-queue-summary.tsx

@@ -0,0 +1,47 @@
+import { queueSummaries } from "@/lib/mocks/tickets"
+import type { TicketQueueSummary } from "@/lib/schemas/ticket"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+
+interface TicketQueueSummaryProps {
+  queues?: TicketQueueSummary[]
+}
+
+export function TicketQueueSummaryCards({ queues = queueSummaries }: TicketQueueSummaryProps) {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      {queues.map((queue) => {
+        const total = queue.pending + queue.waiting
+        const breachPercent = total === 0 ? 0 : Math.round((queue.breached / total) * 100)
+        return (
+          <Card key={queue.id} className="border border-border/60 bg-gradient-to-br from-background to-card p-4">
+            <CardHeader className="pb-2">
+              <CardDescription>Fila</CardDescription>
+              <CardTitle className="text-lg font-semibold">{queue.name}</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3 text-sm">
+              <div className="flex justify-between text-muted-foreground">
+                <span>Pendentes</span>
+                <span className="font-medium text-foreground">{queue.pending}</span>
+              </div>
+              <div className="flex justify-between text-muted-foreground">
+                <span>Aguardando resposta</span>
+                <span className="font-medium text-foreground">{queue.waiting}</span>
+              </div>
+              <div className="flex items-center justify-between text-muted-foreground">
+                <span>Violados</span>
+                <span className="font-medium text-destructive">{queue.breached}</span>
+              </div>
+              <div className="pt-1.5">
+                <Progress value={breachPercent} className="h-1.5" />
+                <span className="mt-2 block text-xs text-muted-foreground">
+                  {breachPercent}% com SLA violado nesta fila
+                </span>
+              </div>
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}