feat: CSV exports, PDF improvements, play internal/external with hour split, roles cleanup, admin companies with 'Cliente avulso', ticket list spacing/alignment fixes, status translations and mappings

src/components/reports/backlog-report.tsx

@@ -1,13 +1,15 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { useQuery } from "convex/react"
 import { IconInbox, IconAlertTriangle, IconFilter } from "@tabler/icons-react"
 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 { 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"
 
@@ -23,15 +25,15 @@ const STATUS_LABELS: Record<string, string> = {
   AWAITING_ATTENDANCE: "Aguardando atendimento",
   PAUSED: "Pausados",
   RESOLVED: "Resolvidos",
-  CLOSED: "Encerrados",
 }
 
 export function BacklogReport() {
+  const [timeRange, setTimeRange] = useState("90d")
   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"> } : "skip"
+    convexUserId ? { tenantId, viewerId: convexUserId as Id<"users">, range: timeRange } : "skip"
   )
 
   const mostCriticalPriority = useMemo(() => {
@@ -99,6 +101,24 @@ export function BacklogReport() {
           <CardDescription className="text-neutral-600">
             Acompanhe a evolução dos tickets pelas fases do fluxo de atendimento.
           </CardDescription>
+          <CardAction>
+            <Button asChild size="sm" variant="outline">
+              <a href={`/api/reports/backlog.csv?range=${timeRange}`} download>
+                Exportar CSV
+              </a>
+            </Button>
+            <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>
+          </CardAction>
         </CardHeader>
         <CardContent>
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">