chore: sync staging

src/components/reports/csat-report.tsx

@@ -6,16 +6,16 @@ import { api } from "@/convex/_generated/api"
 import type { Id } from "@/convex/_generated/dataModel"
 import { useAuth } from "@/lib/auth-client"
 import { DEFAULT_TENANT_ID } from "@/lib/constants"
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Badge } from "@/components/ui/badge"
 import { useState } from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
-import { Button } from "@/components/ui/button"
 import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
+import { ReportsFilterToolbar } from "@/components/reports/report-filter-toolbar"
+import { ReportScheduleDrawer } from "@/components/reports/report-schedule-drawer"
 
 function formatScore(value: number | null) {
   if (value === null) return "—"
@@ -25,7 +25,8 @@ function formatScore(value: number | null) {
 export function CsatReport() {
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
   const [timeRange, setTimeRange] = useState<string>("90d")
-  const { session, convexUserId, isStaff } = useAuth()
+  const [schedulerOpen, setSchedulerOpen] = useState(false)
+  const { session, convexUserId, isStaff, isAdmin } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const enabled = Boolean(isStaff && convexUserId)
   const data = useQuery(
@@ -78,41 +79,27 @@ export function CsatReport() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div className="space-y-1">
-          <h2 className="text-xl font-semibold text-neutral-900">CSAT — Satisfação dos chamados</h2>
-          <p className="text-sm text-neutral-600">
-            Avalie a experiência dos usuários e acompanhe o desempenho da equipe de atendimento.
-          </p>
-        </div>
-        <div className="flex flex-wrap items-center gap-2 md:justify-end">
-          <SearchableCombobox
-            value={selectedCompany}
-            onValueChange={handleCompanyChange}
-            options={comboboxOptions}
-            className="w-56"
-            placeholder="Filtrar por empresa"
-          />
-          <ToggleGroup
-            type="single"
-            value={timeRange}
-            onValueChange={(value) => {
-              if (value) setTimeRange(value)
-            }}
-            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.xlsx?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
-              Exportar XLSX
-            </a>
-          </Button>
-        </div>
-      </div>
+      {isAdmin ? (
+        <ReportScheduleDrawer
+          open={schedulerOpen}
+          onOpenChange={setSchedulerOpen}
+          defaultReports={["csat"]}
+          defaultRange={timeRange}
+          defaultCompanyId={companyId === "all" ? null : companyId}
+          companyOptions={comboboxOptions}
+        />
+      ) : null}
+      <ReportsFilterToolbar
+        companyId={selectedCompany}
+        onCompanyChange={(value) => handleCompanyChange(value)}
+        companyOptions={comboboxOptions}
+        timeRange={timeRange as "90d" | "30d" | "7d"}
+        onTimeRangeChange={(value) => setTimeRange(value)}
+        exportHref={`/api/reports/csat.xlsx?range=${timeRange}${
+          companyId !== "all" ? `&companyId=${companyId}` : ""
+        }`}
+        onOpenScheduler={isAdmin ? () => setSchedulerOpen(true) : undefined}
+      />
 
       <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <Card className="border-slate-200">