From a23b429e4d0f2c4d577346d49da07bb371f7c740 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Tue, 7 Oct 2025 16:33:22 -0300
Subject: [PATCH] =?UTF-8?q?ui(reports):=20padroniza=20headers=20de=20CSAT?=
 =?UTF-8?q?=20e=20SLA=20com=20wrapper=20flex=20e=20adiciona=20seletor=20de?=
 =?UTF-8?q?=20per=C3=ADodo=20(7d/30d/90d);=20links=20de=20CSV=20passam=20r?=
 =?UTF-8?q?ange=20e=20companyId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/reports/csat-report.tsx | 59 +++++++++++++++++---------
 src/components/reports/sla-report.tsx  | 51 ++++++++++++++--------
 2 files changed, 72 insertions(+), 38 deletions(-)

diff --git a/src/components/reports/csat-report.tsx b/src/components/reports/csat-report.tsx
index 39f19b1..61e33d9 100644
--- a/src/components/reports/csat-report.tsx
+++ b/src/components/reports/csat-report.tsx
@@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge"
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
 function formatScore(value: number | null) {
   if (value === null) return "—"
@@ -20,12 +21,13 @@ function formatScore(value: number | null) {
 
 export function CsatReport() {
   const [companyId, setCompanyId] = useState<string>("all")
+  const [timeRange, setTimeRange] = useState<string>("90d")
   const { session, convexUserId } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const data = useQuery(
     api.reports.csatOverview,
     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"
   )
   const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
@@ -45,27 +47,42 @@ export function CsatReport() {
       <div className="grid gap-4 md:grid-cols-3">
         <Card className="border-slate-200">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
-              <IconMoodSmile className="size-4 text-teal-500" /> CSAT médio
-            </CardTitle>
-            <CardDescription className="text-neutral-600">Média das respostas recebidas.</CardDescription>
+          <CardTitle className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
+            <IconMoodSmile className="size-4 text-teal-500" /> CSAT médio
+          </CardTitle>
+          <CardDescription className="text-neutral-600">Média das respostas recebidas.</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>
-              <Button asChild size="sm" variant="outline">
-                <a href={`/api/reports/csat.csv${companyId !== "all" ? `?companyId=${companyId}` : ""}`} download>
-                  Exportar CSV
-                </a>
-              </Button>
+              <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>
+
+                <ToggleGroup
+                  type="single"
+                  value={timeRange}
+                  onValueChange={setTimeRange}
+                  variant="outline"
+                  className="hidden *:data-[slot=toggle-group-item]:!px-4 md:flex"
+                >
+                  <ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
+                  <ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
+                  <ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
+                </ToggleGroup>
+
+                <Button asChild size="sm" variant="outline">
+                  <a href={`/api/reports/csat.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
+                    Exportar CSV
+                  </a>
+                </Button>
+              </div>
             </CardAction>
           </CardHeader>
           <CardContent className="text-3xl font-semibold text-neutral-900">
diff --git a/src/components/reports/sla-report.tsx b/src/components/reports/sla-report.tsx
index bb0bf8e..2735bb0 100644
--- a/src/components/reports/sla-report.tsx
+++ b/src/components/reports/sla-report.tsx
@@ -13,6 +13,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { useState } from "react"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
 function formatMinutes(value: number | null) {
   if (value === null) return "—"
@@ -25,12 +26,13 @@ function formatMinutes(value: number | null) {
 
 export function SlaReport() {
   const [companyId, setCompanyId] = useState<string>("all")
+  const [timeRange, setTimeRange] = useState<string>("90d")
   const { session, convexUserId } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const data = useQuery(
     api.reports.slaOverview,
     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"
   )
   const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
@@ -105,22 +107,37 @@ export function SlaReport() {
               </CardDescription>
             </div>
             <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>
-              <Button asChild size="sm" variant="outline">
-                <a href={`/api/reports/sla.csv${companyId !== "all" ? `?companyId=${companyId}` : ""}`} download>
-                  Exportar CSV
-                </a>
-              </Button>
+              <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>
+
+                <ToggleGroup
+                  type="single"
+                  value={timeRange}
+                  onValueChange={setTimeRange}
+                  variant="outline"
+                  className="hidden *:data-[slot=toggle-group-item]:!px-4 md:flex"
+                >
+                  <ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
+                  <ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
+                  <ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
+                </ToggleGroup>
+
+                <Button asChild size="sm" variant="outline">
+                  <a href={`/api/reports/sla.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
+                    Exportar CSV
+                  </a>
+                </Button>
+              </div>
             </CardAction>
           </div>
         </CardHeader>