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

views: substituir CSAT pizza por pizza de prioridade do backlog (com LabelList, tooltip, filtros de empresa e período)

Browse source
This commit is contained in:
Esdras Renan 2025-10-07 17:51:12 -03:00
parent 385e0fec11
commit e2a5b560b1
1 changed files with 51 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/components/charts/views-charts.tsx
View file

@ -17,58 +17,84 @@ import { Skeleton } from "@/components/ui/skeleton"
export function ViewsCharts() { export function ViewsCharts() {
return ( return (
<div className="grid gap-6 lg:grid-cols-2"> <div className="grid gap-6 lg:grid-cols-2">
<CsatPie /> <BacklogPriorityPie />
<QueuesOpenBar /> <QueuesOpenBar />
</div> </div>
) )
} }
function CsatPie() { function BacklogPriorityPie() {
const [companyId, setCompanyId] = usePersistentCompanyFilter("all") const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
const [timeRange, setTimeRange] = React.useState("30d")
const { session, convexUserId } = useAuth() const { session, convexUserId } = useAuth()
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
const data = useQuery( const data = useQuery(
api.reports.csatOverview, api.reports.backlogOverview,
convexUserId convexUserId
? ({ tenantId, viewerId: convexUserId as Id<"users">, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) }) ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
: "skip" : "skip"
) as { totalSurveys: number; distribution: { score: number; total: number }[] } | undefined ) as { priorityCounts: Record<string, number> } | undefined
const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
if (!data) return <Skeleton className="h-[300px] w-full" /> if (!data) return <Skeleton className="h-[300px] w-full" />
const chartData = (data.distribution ?? []).map((d) => ({ score: `Nota ${d.score}`, total: d.total })) const PRIORITY_LABELS: Record<string, string> = { LOW: "Baixa", MEDIUM: "Média", HIGH: "Alta", URGENT: "Crítica" }
const chartConfig: any = { total: { label: "Respostas" } } const keys = ["LOW", "MEDIUM", "HIGH", "URGENT"]
const fills = {
LOW: "var(--chart-1)",
MEDIUM: "var(--chart-2)",
HIGH: "var(--chart-3)",
URGENT: "var(--chart-4)",
} as const
const chartData = keys
.map((k) => ({ name: PRIORITY_LABELS[k] ?? k, value: data.priorityCounts?.[k] ?? 0, fill: fills[k as keyof typeof fills] }))
.filter((d) => d.value > 0)
const chartConfig: any = { value: { label: "Tickets" } }
return ( return (
<Card className="flex flex-col"> <Card className="flex flex-col">
<CardHeader className="pb-0"> <CardHeader className="pb-0">
<CardTitle>CSAT - Distribuição</CardTitle> <CardTitle>Backlog por prioridade</CardTitle>
<CardDescription>Frequência de respostas por nota</CardDescription> <CardDescription>Distribuição de tickets no período</CardDescription>
<CardAction> <CardAction>
<Select value={companyId} onValueChange={setCompanyId}> <div className="flex flex-wrap items-center justify-end gap-2 md:gap-3">
<SelectTrigger className="w-56"> <Select value={companyId} onValueChange={setCompanyId}>
<SelectValue placeholder="Todas as empresas" /> <SelectTrigger className="w-56">
</SelectTrigger> <SelectValue placeholder="Todas as empresas" />
<SelectContent className="rounded-xl"> </SelectTrigger>
<SelectItem value="all">Todas as empresas</SelectItem> <SelectContent className="rounded-xl">
{(companies ?? []).map((c) => ( <SelectItem value="all">Todas as empresas</SelectItem>
<SelectItem key={c.id} value={c.id}>{c.name}</SelectItem> {(companies ?? []).map((c) => (
))} <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
</SelectContent> ))}
</Select> </SelectContent>
</Select>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-40">
<SelectValue placeholder="Período" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="90d">Últimos 90 dias</SelectItem>
<SelectItem value="30d">Últimos 30 dias</SelectItem>
<SelectItem value="7d">Últimos 7 dias</SelectItem>
</SelectContent>
</Select>
</div>
</CardAction> </CardAction>
</CardHeader> </CardHeader>
<CardContent className="flex-1 pb-0"> <CardContent className="flex-1 pb-0">
{chartData.length === 0 ? ( {chartData.length === 0 ? (
<div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground"> <div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
Sem respostas no período. Sem dados no período selecionado.
</div> </div>
) : ( ) : (
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"> <ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
>
<PieChart> <PieChart>
<ChartTooltip content={<ChartTooltipContent nameKey="total" hideLabel />} /> <ChartTooltip content={<ChartTooltipContent nameKey="value" hideLabel />} />
<Pie data={chartData} dataKey="total" nameKey="score"> <Pie data={chartData} dataKey="value" nameKey="name">
<LabelList dataKey="score" className="fill-background" stroke="none" fontSize={12} /> <LabelList dataKey="name" className="fill-background" stroke="none" fontSize={12} />
</Pie> </Pie>
</PieChart> </PieChart>
</ChartContainer> </ChartContainer>
@ -132,4 +158,3 @@ function QueuesOpenBar() {
</Card> </Card>
) )
} }