views: criar página /views com gráficos (Canais movido do dashboard, CSAT distribuição, Filas abertas); dashboard: trocar por gráfico Abertos x Resolvidos (últimos 7/30/90 dias); reports: nova query openedResolvedByDay

convex/reports.ts

@@ -226,6 +226,52 @@ export const csatOverview = query({
   },
 });
 
+export const openedResolvedByDay = query({
+  args: { tenantId: v.string(), viewerId: v.id("users"), range: v.optional(v.string()), companyId: v.optional(v.id("companies")) },
+  handler: async (ctx, { tenantId, viewerId, range, companyId }) => {
+    const viewer = await requireStaff(ctx, viewerId, tenantId);
+    let tickets = await fetchScopedTickets(ctx, tenantId, viewer);
+    if (companyId) tickets = tickets.filter((t) => t.companyId === companyId)
+
+    const days = range === "7d" ? 7 : range === "30d" ? 30 : 90;
+    const end = new Date();
+    end.setUTCHours(0, 0, 0, 0);
+    const endMs = end.getTime() + ONE_DAY_MS;
+    const startMs = endMs - days * ONE_DAY_MS;
+
+    const opened: Record<string, number> = {}
+    const resolved: Record<string, number> = {}
+
+    // pre-fill buckets
+    for (let i = days - 1; i >= 0; i--) {
+      const d = new Date(endMs - (i + 1) * ONE_DAY_MS)
+      const key = formatDateKey(d.getTime())
+      opened[key] = 0
+      resolved[key] = 0
+    }
+
+    for (const t of tickets) {
+      if (t.createdAt >= startMs && t.createdAt < endMs) {
+        const key = formatDateKey(t.createdAt)
+        opened[key] = (opened[key] ?? 0) + 1
+      }
+      if (t.resolvedAt && t.resolvedAt >= startMs && t.resolvedAt < endMs) {
+        const key = formatDateKey(t.resolvedAt)
+        resolved[key] = (resolved[key] ?? 0) + 1
+      }
+    }
+
+    const series: Array<{ date: string; opened: number; resolved: number }> = []
+    for (let i = days - 1; i >= 0; i--) {
+      const d = new Date(endMs - (i + 1) * ONE_DAY_MS)
+      const key = formatDateKey(d.getTime())
+      series.push({ date: key, opened: opened[key] ?? 0, resolved: resolved[key] ?? 0 })
+    }
+
+    return { rangeDays: days, series }
+  },
+})
+
 export const backlogOverview = query({
   args: { tenantId: v.string(), viewerId: v.id("users"), range: v.optional(v.string()), companyId: v.optional(v.id("companies")) },
   handler: async (ctx, { tenantId, viewerId, range, companyId }) => {

src/app/dashboard/page.tsx

@@ -3,7 +3,7 @@ import { SectionCards } from "@/components/section-cards"
 import { SiteHeader } from "@/components/site-header"
 import { RecentTicketsPanel } from "@/components/tickets/recent-tickets-panel"
 import { TicketQueueSummaryCards } from "@/components/tickets/ticket-queue-summary"
-import { ChartAreaInteractive } from "@/components/chart-area-interactive"
+import { ChartOpenedResolved } from "@/components/charts/chart-opened-resolved"
 import { NewTicketDialogDeferred } from "@/components/tickets/new-ticket-dialog.client"
 
 export default function Dashboard() {
@@ -20,7 +20,7 @@ export default function Dashboard() {
     >
       <SectionCards />
       <div className="grid gap-6 px-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] lg:px-6 lg:[&>*]:min-w-0">
-        <ChartAreaInteractive />
+        <ChartOpenedResolved />
         <RecentTicketsPanel />
       </div>
       <div className="px-4 lg:px-6">

src/app/views/page.tsx

@@ -0,0 +1,22 @@
+import { AppShell } from "@/components/app-shell"
+import { SiteHeader } from "@/components/site-header"
+import { ChartAreaInteractive } from "@/components/chart-area-interactive"
+import { ViewsCharts } from "@/components/charts/views-charts"
+
+export const dynamic = "force-dynamic"
+
+export default function ViewsPage() {
+  return (
+    <AppShell
+      header={<SiteHeader title="Visualizações" lead="Relatórios visuais e insights" />}
+    >
+      <div className="mx-auto w-full max-w-6xl space-y-6 px-4 pb-12 lg:px-6">
+        {/* Canais por período (movido do dashboard) */}
+        <ChartAreaInteractive />
+        {/* Conjunto extra de gráficos relevantes (CSAT, filas) */}
+        <ViewsCharts />
+      </div>
+    </AppShell>
+  )
+}
+

src/components/charts/chart-opened-resolved.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { useQuery } from "convex/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 { usePersistentCompanyFilter } from "@/lib/use-company-filter"
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+import { Skeleton } from "@/components/ui/skeleton"
+
+type SeriesPoint = { date: string; opened: number; resolved: number }
+
+const chartConfig = {
+  opened: { label: "Abertos", color: "var(--chart-1)" },
+  resolved: { label: "Resolvidos", color: "var(--chart-2)" },
+} as const
+
+export function ChartOpenedResolved() {
+  const [timeRange, setTimeRange] = React.useState("30d")
+  const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
+  const { session, convexUserId } = useAuth()
+  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
+
+  const data = useQuery(
+    api.reports.openedResolvedByDay,
+    convexUserId
+      ? ({
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange,
+          companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+        })
+      : "skip"
+  ) as { rangeDays: number; series: SeriesPoint[] } | undefined
+
+  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 <Skeleton className="h-[300px] w-full" />
+  }
+
+  return (
+    <Card className="@container/card">
+      <CardHeader>
+        <CardTitle>Abertos x Resolvidos</CardTitle>
+        <CardDescription>
+          Evolução diária nos últimos {data.rangeDays} dias
+        </CardDescription>
+        <CardAction>
+          <div className="flex flex-wrap items-center justify-end gap-2 md:gap-3">
+            <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>
+            <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>
+          </div>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        {data.series.length === 0 ? (
+          <div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
+            Sem dados suficientes no período selecionado.
+          </div>
+        ) : (
+          <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
+            <LineChart data={data.series} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={32}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator="line" />}
+              />
+              <Line dataKey="opened" type="natural" stroke="var(--color-opened)" strokeWidth={2} dot={false} />
+              <Line dataKey="resolved" type="natural" stroke="var(--color-resolved)" strokeWidth={2} dot={false} />
+            </LineChart>
+          </ChartContainer>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+

src/components/charts/views-charts.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Pie, PieChart, LabelList, Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import { useQuery } from "convex/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 { usePersistentCompanyFilter } from "@/lib/use-company-filter"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardAction } from "@/components/ui/card"
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function ViewsCharts() {
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      <CsatPie />
+      <QueuesOpenBar />
+    </div>
+  )
+}
+
+function CsatPie() {
+  const [companyId, setCompanyId] = usePersistentCompanyFilter("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">, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
+      : "skip"
+  ) as { totalSurveys: number; distribution: { score: number; total: number }[] } | undefined
+  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 <Skeleton className="h-[300px] w-full" />
+  const chartData = (data.distribution ?? []).map((d) => ({ score: `Nota ${d.score}`, total: d.total }))
+  const chartConfig: any = { total: { label: "Respostas" } }
+
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="pb-0">
+        <CardTitle>CSAT - Distribuição</CardTitle>
+        <CardDescription>Frequência de respostas por nota</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>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        {chartData.length === 0 ? (
+          <div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
+            Sem respostas no período.
+          </div>
+        ) : (
+          <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background">
+            <PieChart>
+              <ChartTooltip content={<ChartTooltipContent nameKey="total" hideLabel />} />
+              <Pie data={chartData} dataKey="total" nameKey="score">
+                <LabelList dataKey="score" className="fill-background" stroke="none" fontSize={12} />
+              </Pie>
+            </PieChart>
+          </ChartContainer>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function QueuesOpenBar() {
+  const [companyId, setCompanyId] = usePersistentCompanyFilter("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">, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
+      : "skip"
+  ) as { queueBreakdown: { id: string; name: string; open: number }[] } | undefined
+  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 <Skeleton className="h-[300px] w-full" />
+  const chartData = (data.queueBreakdown ?? []).map((q) => ({ queue: q.name, open: q.open }))
+  const chartConfig: any = { open: { label: "Abertos" } }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Filas com maior volume aberto</CardTitle>
+        <CardDescription>Distribuição atual por fila</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>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        {chartData.length === 0 ? (
+          <div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
+            Sem filas com tickets abertos.
+          </div>
+        ) : (
+          <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
+            <BarChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12 }}>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="queue" tickLine={false} axisLine={false} tickMargin={8} minTickGap={32} />
+              <ChartTooltip content={<ChartTooltipContent nameKey="open" hideLabel />} />
+              <Bar dataKey="open" radius={6} />
+            </BarChart>
+          </ChartContainer>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+