feat: enhance tickets portal and admin flows

src/components/reports/backlog-report.tsx

@@ -3,7 +3,6 @@
 import { useMemo } from "react"
 import { useQuery } from "convex/react"
 import { IconInbox, IconAlertTriangle, IconFilter } from "@tabler/icons-react"
-// @ts-expect-error Convex runtime API lacks TypeScript declarations
 import { api } from "@/convex/_generated/api"
 import type { Id } from "@/convex/_generated/dataModel"
 import { useAuth } from "@/lib/auth-client"
@@ -20,12 +19,11 @@ const PRIORITY_LABELS: Record<string, string> = {
 }
 
 const STATUS_LABELS: Record<string, string> = {
-  NEW: "Novo",
-  OPEN: "Em andamento",
-  PENDING: "Pendente",
-  ON_HOLD: "Em espera",
-  RESOLVED: "Resolvido",
-  CLOSED: "Encerrado",
+  PENDING: "Pendentes",
+  AWAITING_ATTENDANCE: "Aguardando atendimento",
+  PAUSED: "Pausados",
+  RESOLVED: "Resolvidos",
+  CLOSED: "Encerrados",
 }
 
 export function BacklogReport() {
@@ -38,7 +36,7 @@ export function BacklogReport() {
 
   const mostCriticalPriority = useMemo(() => {
     if (!data) return null
-    const entries = Object.entries(data.priorityCounts)
+    const entries = Object.entries(data.priorityCounts) as Array<[string, number]>
     if (entries.length === 0) return null
     return entries.reduce((prev, current) => (current[1] > prev[1] ? current : prev))
   }, [data])
@@ -104,7 +102,7 @@ export function BacklogReport() {
         </CardHeader>
         <CardContent>
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {Object.entries(data.statusCounts).map(([status, total]) => (
+            {(Object.entries(data.statusCounts) as Array<[string, number]>).map(([status, total]) => (
               <div key={status} className="rounded-xl border border-slate-200 p-4">
                 <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
                   {STATUS_LABELS[status] ?? status}
@@ -125,7 +123,7 @@ export function BacklogReport() {
         </CardHeader>
         <CardContent>
           <div className="space-y-3">
-            {Object.entries(data.priorityCounts).map(([priority, total]) => (
+            {(Object.entries(data.priorityCounts) as Array<[string, number]>).map(([priority, total]) => (
               <div key={priority} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
                 <span className="text-sm font-medium text-neutral-800">
                   {PRIORITY_LABELS[priority] ?? priority}
@@ -153,7 +151,7 @@ export function BacklogReport() {
             </p>
           ) : (
             <ul className="space-y-3">
-              {data.queueCounts.map((queue) => (
+            {data.queueCounts.map((queue: { id: string; name: string; total: number }) => (
                 <li key={queue.id} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
                   <div className="flex flex-col">
                     <span className="text-sm font-medium text-neutral-900">{queue.name}</span>

src/components/reports/csat-report.tsx

@@ -2,7 +2,6 @@
 
 import { useQuery } from "convex/react"
 import { IconMoodSmile, IconStars, IconMessageCircle2 } from "@tabler/icons-react"
-// @ts-expect-error Convex runtime API lacks TypeScript declarations
 import { api } from "@/convex/_generated/api"
 import type { Id } from "@/convex/_generated/dataModel"
 import { useAuth } from "@/lib/auth-client"
@@ -68,7 +67,7 @@ export function CsatReport() {
             {data.recent.length === 0 ? (
               <p className="text-sm text-neutral-500">Ainda não coletamos nenhuma avaliação.</p>
             ) : (
-              data.recent.map((item) => (
+              data.recent.map((item: { ticketId: string; reference: number; score: number; receivedAt: number }) => (
                 <div key={`${item.ticketId}-${item.receivedAt}`} className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2 text-sm">
                   <span>#{item.reference}</span>
                   <Badge variant="outline" className="rounded-full border-neutral-300 text-neutral-600">
@@ -90,7 +89,7 @@ export function CsatReport() {
         </CardHeader>
         <CardContent>
           <ul className="space-y-3">
-            {data.distribution.map((entry) => (
+            {data.distribution.map((entry: { score: number; total: number }) => (
               <li key={entry.score} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
                 <div className="flex items-center gap-3">
                   <Badge variant="outline" className="rounded-full border-neutral-300 text-neutral-600">

src/components/reports/sla-report.tsx

@@ -3,7 +3,6 @@
 import { useMemo } from "react"
 import { useQuery } from "convex/react"
 import { IconAlertTriangle, IconGraph, IconClockHour4 } from "@tabler/icons-react"
-// @ts-expect-error Convex runtime API lacks TypeScript declarations
 import { api } from "@/convex/_generated/api"
 import type { Id } from "@/convex/_generated/dataModel"
 import { useAuth } from "@/lib/auth-client"
@@ -29,7 +28,10 @@ export function SlaReport() {
     convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
   )
 
-  const queueTotal = useMemo(() => data?.queueBreakdown.reduce((acc, queue) => acc + queue.open, 0) ?? 0, [data])
+  const queueTotal = useMemo(
+    () => data?.queueBreakdown.reduce((acc: number, queue: { open: number }) => acc + queue.open, 0) ?? 0,
+    [data]
+  )
 
   if (!data) {
     return (
@@ -104,7 +106,7 @@ export function SlaReport() {
             </p>
           ) : (
             <ul className="space-y-3">
-              {data.queueBreakdown.map((queue) => (
+            {data.queueBreakdown.map((queue: { id: string; name: string; open: number }) => (
                 <li key={queue.id} className="flex items-center justify-between gap-4 rounded-xl border border-slate-200 px-4 py-3">
                   <div className="flex flex-col">
                     <span className="text-sm font-medium text-neutral-900">{queue.name}</span>