Hours by client: add search and CSV filtering; add alerts cron (BRT 08:00 guard) + alerts panel filters; admin companies shows last alert; PDF Inter font from public/fonts; fix Select empty value; type cleanups; tests for CSV/TZ; remove Knowledge Base nav

2025-10-07 15:39:55 -03:00 · 2025-10-07 15:39:55 -03:00 · 08cc8037d5
commit 08cc8037d5
parent 2cf399dcb1
151 changed files with 1404 additions and 214 deletions
--- a/src/components/admin/companies/admin-companies-manager.tsx
+++ b/src/components/admin/companies/admin-companies-manager.tsx
@ -36,6 +36,7 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
  const [isPending, startTransition] = useTransition()
  const [form, setForm] = useState<Partial<Company>>({})
  const [editingId, setEditingId] = useState<string | null>(null)
+  const [lastAlerts, setLastAlerts] = useState<Record<string, { createdAt: number; usagePct: number; threshold: number } | null>>({})

  const resetForm = () => setForm({})

@ -43,6 +44,7 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
    const r = await fetch("/api/admin/companies", { credentials: "include" })
    const json = (await r.json()) as { companies: Company[] }
    setCompanies(json.companies)
+    void loadLastAlerts(json.companies)
  }

  function handleEdit(c: Company) {
@ -50,6 +52,20 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
    setForm({ ...c })
  }

+  async function loadLastAlerts(list: Company[] = companies) {
+    if (!list || list.length === 0) return
+    const params = new URLSearchParams({ slugs: list.map((c) => c.slug).join(",") })
+    try {
+      const r = await fetch(`/api/admin/companies/last-alerts?${params.toString()}`, { credentials: "include" })
+      const json = (await r.json()) as { items: Record<string, { createdAt: number; usagePct: number; threshold: number } | null> }
+      setLastAlerts(json.items ?? {})
+    } catch {
+      // ignore
+    }
+  }
+
+  useMemo(() => { void loadLastAlerts(companies) }, [])
+
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const payload = {
@ -191,6 +207,7 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
                <TableHead>Domínio</TableHead>
                <TableHead>Telefone</TableHead>
                <TableHead>CNPJ</TableHead>
+                <TableHead>Último alerta</TableHead>
                <TableHead>Ações</TableHead>
              </TableRow>
            </TableHeader>
@ -207,6 +224,11 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
                  <TableCell>{c.domain ?? "—"}</TableCell>
                  <TableCell>{c.phone ?? "—"}</TableCell>
                  <TableCell>{c.cnpj ?? "—"}</TableCell>
+                  <TableCell>
+                    {lastAlerts[c.slug]
+                      ? `${new Date(lastAlerts[c.slug]!.createdAt).toLocaleString("pt-BR")}`
+                      : "—"}
+                  </TableCell>
                  <TableCell>
                    <Button size="sm" variant="outline" onClick={() => handleEdit(c)}>
                      Editar
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@ -1,22 +1,21 @@
 "use client"

 import * as React from "react"
-import {
-  LayoutDashboard,
-  LifeBuoy,
-  Ticket,
-  PlayCircle,
-  BookOpen,
-  BarChart3,
-  Gauge,
-  PanelsTopLeft,
-  Users,
-  Waypoints,
+import {
+  LayoutDashboard,
+  LifeBuoy,
+  Ticket,
+  PlayCircle,
+  BarChart3,
+  Gauge,
+  PanelsTopLeft,
+  Users,
+  Waypoints,
  Timer,
  Layers3,
  UserPlus,
  Settings,
-} from "lucide-react"
+} from "lucide-react"
 import { usePathname } from "next/navigation"

 import { SearchForm } from "@/components/search-form"
@ -66,7 +65,6 @@ const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
        { title: "Tickets", url: "/tickets", icon: Ticket, requiredRole: "staff" },
        { title: "Visualizações", url: "/views", icon: PanelsTopLeft, requiredRole: "staff" },
        { title: "Modo Play", url: "/play", icon: PlayCircle, requiredRole: "staff" },
-        { title: "Base de conhecimento", url: "/knowledge", icon: BookOpen, requiredRole: "staff" },
      ],
    },
    {
@ -95,6 +93,7 @@ const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
        { title: "Empresas & clientes", url: "/admin/companies", icon: Users, requiredRole: "admin" },
        { title: "Campos personalizados", url: "/admin/fields", icon: Layers3, requiredRole: "admin" },
        { title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
+        { title: "Alertas enviados", url: "/admin/alerts", icon: Gauge, requiredRole: "admin" },
      ],
    },
    {
--- a/src/components/chart-area-interactive.tsx
+++ b/src/components/chart-area-interactive.tsx
@ -25,13 +25,14 @@ import {
  ChartTooltipContent,
 } from "@/components/ui/chart"
 import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Input } from "@/components/ui/input"
 import {
  ToggleGroup,
  ToggleGroupItem,
@ -43,6 +44,9 @@ export function ChartAreaInteractive() {
  const [mounted, setMounted] = React.useState(false)
  const isMobile = useIsMobile()
  const [timeRange, setTimeRange] = React.useState("7d")
+  // Use a non-empty sentinel value for "all" to satisfy Select.Item requirements
+  const [companyId, setCompanyId] = React.useState<string>("all")
+  const [companyQuery, setCompanyQuery] = React.useState("")
  const { session, convexUserId } = useAuth()
  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID

@ -59,9 +63,15 @@ export function ChartAreaInteractive() {
  const report = useQuery(
    api.reports.ticketsByChannel,
    convexUserId
-      ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange })
+      ? ({ 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
+  const filteredCompanies = React.useMemo(() => {
+    const q = companyQuery.trim().toLowerCase()
+    if (!q) return companies ?? []
+    return (companies ?? []).filter((c) => c.name.toLowerCase().includes(q))
+  }, [companies, companyQuery])

  const channels = React.useMemo(() => report?.channels ?? [], [report])

@ -120,46 +130,68 @@ export function ChartAreaInteractive() {
          <span className="@[540px]/card:hidden">Período: {timeRange}</span>
        </CardDescription>
        <CardAction>
-          <Button asChild size="sm" variant="outline">
-            <a
-              href={`/api/reports/tickets-by-channel.csv?range=${timeRange}`}
-              download
+          <div className="flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-end sm:gap-2">
+            {/* Company picker with search */}
+            <Select value={companyId} onValueChange={(v) => { setCompanyId(v); }}>
+              <SelectTrigger className="w-full min-w-56 sm:w-64">
+                <SelectValue placeholder="Todas as empresas" />
+              </SelectTrigger>
+              <SelectContent className="rounded-xl">
+                <div className="p-2">
+                  <Input
+                    placeholder="Pesquisar empresa..."
+                    value={companyQuery}
+                    onChange={(e) => setCompanyQuery(e.target.value)}
+                    className="h-8"
+                  />
+                </div>
+                <SelectItem value="all">Todas as empresas</SelectItem>
+                {filteredCompanies.map((c) => (
+                  <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {/* Desktop time range toggles */}
+            <ToggleGroup
+              type="single"
+              value={timeRange}
+              onValueChange={setTimeRange}
+              variant="outline"
+              className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
            >
-              Exportar CSV
-            </a>
-          </Button>
-          <ToggleGroup
-            type="single"
-            value={timeRange}
-            onValueChange={setTimeRange}
-            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
-          >
-            <ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
-            <ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
-            <ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
-          </ToggleGroup>
-          <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger
-              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
-              size="sm"
-              aria-label="Selecionar período"
-            >
-              <SelectValue placeholder="Selecionar período" />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Últimos 90 dias
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Últimos 30 dias
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Últimos 7 dias
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </CardAction>
+              <ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
+              <ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
+              <ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
+            </ToggleGroup>
+
+            {/* Mobile time range select */}
+            <Select value={timeRange} onValueChange={setTimeRange}>
+              <SelectTrigger
+                className="flex w-full min-w-40 @[767px]/card:hidden"
+                size="sm"
+                aria-label="Selecionar período"
+              >
+                <SelectValue placeholder="Selecionar período" />
+              </SelectTrigger>
+              <SelectContent className="rounded-xl">
+                <SelectItem value="90d" className="rounded-lg">Últimos 90 dias</SelectItem>
+                <SelectItem value="30d" className="rounded-lg">Últimos 30 dias</SelectItem>
+                <SelectItem value="7d" className="rounded-lg">Últimos 7 dias</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {/* Export button aligned at the end */}
+            <Button asChild size="sm" variant="outline" className="sm:ml-1">
+              <a
+                href={`/api/reports/tickets-by-channel.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`}
+                download
+              >
+                Exportar CSV
+              </a>
+            </Button>
+          </div>
+        </CardAction>
      </CardHeader>
      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
        {report === undefined ? (
--- a/src/components/reports/backlog-report.tsx
+++ b/src/components/reports/backlog-report.tsx
@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Badge } from "@/components/ui/badge"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

 const PRIORITY_LABELS: Record<string, string> = {
  LOW: "Baixa",
@ -29,12 +30,14 @@ const STATUS_LABELS: Record<string, string> = {

 export function BacklogReport() {
  const [timeRange, setTimeRange] = useState("90d")
+  const [companyId, setCompanyId] = useState<string>("all")
  const { session, convexUserId } = useAuth()
  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
  const data = useQuery(
    api.reports.backlogOverview,
-    convexUserId ? { tenantId, viewerId: convexUserId as Id<"users">, range: timeRange } : "skip"
+    convexUserId ? { 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

  const mostCriticalPriority = useMemo(() => {
    if (!data) return null
@ -102,8 +105,19 @@ export function BacklogReport() {
            Acompanhe a evolução dos tickets pelas fases do fluxo de atendimento.
          </CardDescription>
          <CardAction>
+            <Select value={companyId} onValueChange={setCompanyId}>
+              <SelectTrigger className="hidden w-56 md:flex">
+                <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/backlog.csv?range=${timeRange}`} download>
+              <a href={`/api/reports/backlog.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
                Exportar CSV
              </a>
            </Button>
--- a/src/components/reports/csat-report.tsx
+++ b/src/components/reports/csat-report.tsx
@ -6,9 +6,12 @@ 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, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardAction, 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 { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

 function formatScore(value: number | null) {
  if (value === null) return "—"
@ -16,12 +19,16 @@ function formatScore(value: number | null) {
 }

 export function CsatReport() {
+  const [companyId, setCompanyId] = useState<string>("all")
  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"> } : "skip"
+    convexUserId
+      ? ({ tenantId, viewerId: convexUserId as Id<"users">, 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

  if (!data) {
    return (
@ -42,6 +49,24 @@ export function CsatReport() {
              <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>
+            </CardAction>
          </CardHeader>
          <CardContent className="text-3xl font-semibold text-neutral-900">
            {formatScore(data.averageScore)}
--- a/src/components/reports/hours-report.tsx
+++ b/src/components/reports/hours-report.tsx
@ -11,23 +11,40 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle }
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import { Input } from "@/components/ui/input"

 function formatHours(ms: number) {
  const hours = ms / 3600000
  return hours.toFixed(2)
 }

+type HoursItem = {
+  companyId: string
+  name: string
+  isAvulso: boolean
+  internalMs: number
+  externalMs: number
+  totalMs: number
+  contractedHoursPerMonth?: number | null
+}
+
 export function HoursReport() {
  const [timeRange, setTimeRange] = useState("90d")
+  const [query, setQuery] = useState("")
  const { session, convexUserId } = useAuth()
  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID

  const data = useQuery(
    api.reports.hoursByClient,
    convexUserId ? { tenantId, viewerId: convexUserId as Id<"users">, range: timeRange } : "skip"
-  ) as { rangeDays: number; items: Array<{ companyId: string; name: string; isAvulso: boolean; internalMs: number; externalMs: number; totalMs: number; contractedHoursPerMonth?: number | null }> } | undefined
+  ) as { rangeDays: number; items: HoursItem[] } | undefined

  const items = data?.items ?? []
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return items
+    return items.filter((it) => it.name.toLowerCase().includes(q))
+  }, [items, query])

  return (
    <div className="space-y-6">
@ -35,17 +52,25 @@ export function HoursReport() {
        <CardHeader>
          <CardTitle>Horas por cliente</CardTitle>
          <CardDescription>Horas internas e externas registradas por empresa.</CardDescription>
-          <CardAction className="flex items-center gap-2">
-            <Button asChild size="sm" variant="outline">
-              <a href={`/api/reports/hours-by-client.csv?range=${timeRange}`} download>
+          <CardAction>
+            <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-end">
+              <Input
+                placeholder="Pesquisar cliente..."
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="h-9 w-full min-w-56 sm:w-72"
+              />
+              <ToggleGroup type="single" value={timeRange} onValueChange={setTimeRange} variant="outline" className="hidden 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/hours-by-client.csv?range=${timeRange}${query ? `&q=${encodeURIComponent(query)}` : ""}`} download>
                Exportar CSV
              </a>
-            </Button>
-            <ToggleGroup type="single" value={timeRange} onValueChange={setTimeRange} variant="outline" className="hidden md:flex">
-              <ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
-              <ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
-              <ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
-            </ToggleGroup>
+              </Button>
+            </div>
          </CardAction>
        </CardHeader>
        <CardContent>
@ -63,11 +88,11 @@ export function HoursReport() {
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
-                {items.map((row) => {
+                {filtered.map((row) => {
                  const totalH = Number(formatHours(row.totalMs))
                  const contracted = row.contractedHoursPerMonth ?? null
                  const pct = contracted ? Math.round((totalH / contracted) * 100) : null
-                  const pctBadgeVariant = pct !== null && pct >= 90 ? "destructive" : "secondary"
+                  const pctBadgeVariant: "secondary" | "destructive" = pct !== null && pct >= 90 ? "destructive" : "secondary"
                  return (
                    <tr key={row.companyId}>
                      <td className="py-2 pr-4 font-medium text-neutral-900">{row.name}</td>
@ -78,7 +103,7 @@ export function HoursReport() {
                      <td className="py-2 pr-4">{contracted ?? "—"}</td>
                      <td className="py-2 pr-4">
                        {pct !== null ? (
-                          <Badge variant={pctBadgeVariant as any} className="rounded-full px-3 py-1 text-[11px] uppercase tracking-wide">
+                          <Badge variant={pctBadgeVariant} className="rounded-full px-3 py-1 text-[11px] uppercase tracking-wide">
                            {pct}%
                          </Badge>
                        ) : (
@ -96,4 +121,3 @@ export function HoursReport() {
    </div>
  )
 }
-
--- a/src/components/reports/sla-report.tsx
+++ b/src/components/reports/sla-report.tsx
@ -7,9 +7,12 @@ 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, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 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"

 function formatMinutes(value: number | null) {
  if (value === null) return "—"
@ -21,12 +24,16 @@ function formatMinutes(value: number | null) {
 }

 export function SlaReport() {
+  const [companyId, setCompanyId] = useState<string>("all")
  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"> } : "skip"
+    convexUserId
+      ? ({ tenantId, viewerId: convexUserId as Id<"users">, 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

  const queueTotal = useMemo(
    () => data?.queueBreakdown.reduce((acc: number, queue: { open: number }) => acc + queue.open, 0) ?? 0,
@ -97,6 +104,24 @@ export function SlaReport() {
                Distribuição dos {queueTotal} tickets abertos por fila de atendimento.
              </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>
+            </CardAction>
          </div>
        </CardHeader>
        <CardContent>