76 lines
3.9 KiB
TypeScript
76 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { useQuery } from "convex/react"
|
|
import { api } from "@/convex/_generated/api"
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
|
import type { TicketQueueSummary } from "@/lib/schemas/ticket"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
|
|
interface TicketQueueSummaryProps {
|
|
queues?: TicketQueueSummary[]
|
|
}
|
|
|
|
export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
|
|
const { convexUserId, isStaff } = useAuth()
|
|
const enabled = Boolean(isStaff && convexUserId)
|
|
const queueArgs = enabled
|
|
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
|
: "skip"
|
|
const fromServer = useQuery(enabled ? api.queues.summary : "skip", queueArgs)
|
|
const data: TicketQueueSummary[] = (queues ?? (fromServer as TicketQueueSummary[] | undefined) ?? [])
|
|
|
|
if (!queues && fromServer === undefined) {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
<div className="h-4 w-24 animate-pulse rounded bg-slate-100" />
|
|
<div className="mt-4 h-3 w-full animate-pulse rounded bg-slate-100" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{data.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="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<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="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="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
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|