Reports: add charts to Produtividade (areas + channels), CSAT (bar), Backlog (pie+bar), Horas (stacked bar); deploy Convex reports agent productivity

src/components/reports/hours-report.tsx

@@ -15,6 +15,8 @@ import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
 import { Progress } from "@/components/ui/progress"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 
 type HoursItem = {
   companyId: string
@@ -92,6 +94,34 @@ export function HoursReport() {
 
   return (
     <div className="space-y-6">
+      <Card className="border-slate-200">
+        <CardHeader>
+          <CardTitle>Top clientes por horas</CardTitle>
+          <CardDescription>Comparativo empilhado de horas internas x externas (top 10).</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {!filteredWithComputed || filteredWithComputed.length === 0 ? (
+            <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">Sem dados para o período.</p>
+          ) : (
+            <ChartContainer config={{}} className="aspect-auto h-[260px] w-full">
+              <BarChart
+                data={filteredWithComputed
+                  .slice()
+                  .sort((a, b) => b.total - a.total)
+                  .slice(0, 10)
+                  .map((r) => ({ name: r.name, internas: r.internal, externas: r.external }))}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8} interval={0} angle={-30} height={60} />
+                <Bar dataKey="internas" stackId="a" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} />
+                <ChartTooltip content={<ChartTooltipContent className="w-[200px]" />} />
+              </BarChart>
+            </ChartContainer>
+          )}
+        </CardContent>
+      </Card>
+
       <Card className="border-slate-200">
         <CardHeader>
           <CardTitle>Horas</CardTitle>