From e2a5b560b1e547be109237d6d34eade87bce1911 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Tue, 7 Oct 2025 17:51:12 -0300
Subject: [PATCH] =?UTF-8?q?views:=20substituir=20CSAT=20pizza=20por=20pizz?=
 =?UTF-8?q?a=20de=20prioridade=20do=20backlog=20(com=20LabelList,=20toolti?=
 =?UTF-8?q?p,=20filtros=20de=20empresa=20e=20per=C3=ADodo)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/views-charts.tsx | 77 +++++++++++++++++---------
 1 file changed, 51 insertions(+), 26 deletions(-)

diff --git a/src/components/charts/views-charts.tsx b/src/components/charts/views-charts.tsx
index 300109f..ce426e7 100644
--- a/src/components/charts/views-charts.tsx
+++ b/src/components/charts/views-charts.tsx
@@ -17,58 +17,84 @@ import { Skeleton } from "@/components/ui/skeleton"
 export function ViewsCharts() {
   return (
     <div className="grid gap-6 lg:grid-cols-2">
-      <CsatPie />
+      <BacklogPriorityPie />
       <QueuesOpenBar />
     </div>
   )
 }
 
-function CsatPie() {
+function BacklogPriorityPie() {
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
+  const [timeRange, setTimeRange] = React.useState("30d")
   const { session, convexUserId } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const data = useQuery(
-    api.reports.csatOverview,
+    api.reports.backlogOverview,
     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"
-  ) 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
 
   if (!data) return <Skeleton className="h-[300px] w-full" />
-  const chartData = (data.distribution ?? []).map((d) => ({ score: `Nota ${d.score}`, total: d.total }))
-  const chartConfig: any = { total: { label: "Respostas" } }
+  const PRIORITY_LABELS: Record<string, string> = { LOW: "Baixa", MEDIUM: "Média", HIGH: "Alta", URGENT: "Crítica" }
+  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 (
     <Card className="flex flex-col">
       <CardHeader className="pb-0">
-        <CardTitle>CSAT - Distribuição</CardTitle>
-        <CardDescription>Frequência de respostas por nota</CardDescription>
+        <CardTitle>Backlog por prioridade</CardTitle>
+        <CardDescription>Distribuição de tickets no período</CardDescription>
         <CardAction>
-          <Select value={companyId} onValueChange={setCompanyId}>
-            <SelectTrigger className="w-56">
-              <SelectValue placeholder="Todas as empresas" />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl">
-              <SelectItem value="all">Todas as empresas</SelectItem>
-              {(companies ?? []).map((c) => (
-                <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex flex-wrap items-center justify-end gap-2 md:gap-3">
+            <Select value={companyId} onValueChange={setCompanyId}>
+              <SelectTrigger className="w-56">
+                <SelectValue placeholder="Todas as empresas" />
+              </SelectTrigger>
+              <SelectContent className="rounded-xl">
+                <SelectItem value="all">Todas as empresas</SelectItem>
+                {(companies ?? []).map((c) => (
+                  <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                ))}
+              </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>
       </CardHeader>
       <CardContent className="flex-1 pb-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">
-            Sem respostas no período.
+            Sem dados no período selecionado.
           </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>
-              <ChartTooltip content={<ChartTooltipContent nameKey="total" hideLabel />} />
-              <Pie data={chartData} dataKey="total" nameKey="score">
-                <LabelList dataKey="score" className="fill-background" stroke="none" fontSize={12} />
+              <ChartTooltip content={<ChartTooltipContent nameKey="value" hideLabel />} />
+              <Pie data={chartData} dataKey="value" nameKey="name">
+                <LabelList dataKey="name" className="fill-background" stroke="none" fontSize={12} />
               </Pie>
             </PieChart>
           </ChartContainer>
@@ -132,4 +158,3 @@ function QueuesOpenBar() {
     </Card>
   )
 }
-