From d7d6b748cc1c391c299eae92af75c134d8c639cc Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Thu, 6 Nov 2025 01:40:10 -0300
Subject: [PATCH] feat: refresh dashboards experience

---
 convex/metrics.ts                             | 319 +++++-
 .../dashboards/dashboard-builder.tsx          | 912 ++++++++++++++----
 src/components/dashboards/dashboard-list.tsx  |  21 +-
 src/components/dashboards/metric-catalog.ts   | 312 ++++++
 src/components/dashboards/report-canvas.tsx   |  47 +-
 src/components/dashboards/widget-renderer.tsx | 247 +++--
 src/components/site-header.tsx                |  22 +-
 src/components/ui/searchable-combobox.tsx     |  13 +-
 src/server/company-service.ts                 |  14 +
 9 files changed, 1626 insertions(+), 281 deletions(-)
 create mode 100644 src/components/dashboards/metric-catalog.ts

diff --git a/convex/metrics.ts b/convex/metrics.ts
index 91d03a9..9da0090 100644
--- a/convex/metrics.ts
+++ b/convex/metrics.ts
@@ -1,4 +1,4 @@
-import { v } from "convex/values"
+import { ConvexError, v } from "convex/values"
 
 import type { Doc, Id } from "./_generated/dataModel"
 import { query } from "./_generated/server"
@@ -90,6 +90,178 @@ function filterTicketsByQueue<T extends { queueId?: Id<"queues"> | null }>(
   })
 }
 
+type AgentStatsRaw = {
+  agentId: Id<"users">
+  name: string | null
+  email: string | null
+  open: number
+  paused: number
+  resolved: number
+  totalSla: number
+  compliantSla: number
+  resolutionMinutes: number[]
+  firstResponseMinutes: number[]
+}
+
+type AgentStatsComputed = {
+  agentId: string
+  name: string | null
+  email: string | null
+  open: number
+  paused: number
+  resolved: number
+  slaRate: number | null
+  avgResolutionMinutes: number | null
+  avgFirstResponseMinutes: number | null
+  totalSla: number
+  compliantSla: number
+}
+
+function average(values: number[]): number | null {
+  if (!values || values.length === 0) return null
+  const sum = values.reduce((acc, value) => acc + value, 0)
+  return sum / values.length
+}
+
+function isTicketCompliant(ticket: Doc<"tickets">, now: number) {
+  const dueAt = typeof ticket.dueAt === "number" ? ticket.dueAt : null
+  const resolvedAt = typeof ticket.resolvedAt === "number" ? ticket.resolvedAt : null
+  if (dueAt) {
+    if (resolvedAt) {
+      return resolvedAt <= dueAt
+    }
+    return dueAt >= now
+  }
+  return resolvedAt !== null
+}
+
+function ensureAgentStats(map: Map<string, AgentStatsRaw>, ticket: Doc<"tickets">): AgentStatsRaw | null {
+  const assigneeId = ticket.assigneeId
+  if (!assigneeId) return null
+  const key = String(assigneeId)
+  let stats = map.get(key)
+  const snapshot = ticket.assigneeSnapshot as { name?: string | null; email?: string | null } | undefined
+  const snapshotName = snapshot?.name ?? null
+  const snapshotEmail = snapshot?.email ?? null
+  if (!stats) {
+    stats = {
+      agentId: assigneeId,
+      name: snapshotName,
+      email: snapshotEmail,
+      open: 0,
+      paused: 0,
+      resolved: 0,
+      totalSla: 0,
+      compliantSla: 0,
+      resolutionMinutes: [],
+      firstResponseMinutes: [],
+    }
+    map.set(key, stats)
+  } else {
+    if (!stats.name && snapshotName) stats.name = snapshotName
+    if (!stats.email && snapshotEmail) stats.email = snapshotEmail
+  }
+  return stats
+}
+
+async function computeAgentStats(
+  ctx: QueryCtx,
+  tenantId: string,
+  viewer: Viewer,
+  rangeDays: number,
+  agentFilter?: Id<"users">,
+) {
+  const scopedTickets = await fetchScopedTickets(ctx, tenantId, viewer)
+  const end = new Date()
+  end.setUTCHours(0, 0, 0, 0)
+  const endMs = end.getTime() + ONE_DAY_MS
+  const startMs = endMs - rangeDays * ONE_DAY_MS
+
+  const statsMap = new Map<string, AgentStatsRaw>()
+
+  const matchesFilter = (ticket: Doc<"tickets">) => {
+    if (!ticket.assigneeId) return false
+    if (agentFilter && ticket.assigneeId !== agentFilter) return false
+    return true
+  }
+
+  for (const ticket of scopedTickets) {
+    if (!matchesFilter(ticket)) continue
+    const stats = ensureAgentStats(statsMap, ticket)
+    if (!stats) continue
+    const status = normalizeStatus(ticket.status)
+    if (status === "PAUSED") {
+      stats.paused += 1
+    } else if (OPEN_STATUSES.has(status)) {
+      stats.open += 1
+    }
+  }
+
+  const inRange = scopedTickets.filter(
+    (ticket) => matchesFilter(ticket) && ticket.createdAt >= startMs && ticket.createdAt < endMs,
+  )
+  const now = Date.now()
+  for (const ticket of inRange) {
+    const stats = ensureAgentStats(statsMap, ticket)
+    if (!stats) continue
+    stats.totalSla += 1
+    if (isTicketCompliant(ticket, now)) {
+      stats.compliantSla += 1
+    }
+    const status = normalizeStatus(ticket.status)
+    if (
+      status === "RESOLVED" &&
+      typeof ticket.resolvedAt === "number" &&
+      ticket.resolvedAt >= startMs &&
+      ticket.resolvedAt < endMs
+    ) {
+      stats.resolved += 1
+      stats.resolutionMinutes.push((ticket.resolvedAt - ticket.createdAt) / 60000)
+    }
+    if (
+      typeof ticket.firstResponseAt === "number" &&
+      ticket.firstResponseAt >= startMs &&
+      ticket.firstResponseAt < endMs
+    ) {
+      stats.firstResponseMinutes.push((ticket.firstResponseAt - ticket.createdAt) / 60000)
+    }
+  }
+
+  const agentIds = Array.from(statsMap.keys()) as string[]
+  if (agentIds.length > 0) {
+    const docs = await Promise.all(agentIds.map((id) => ctx.db.get(id as Id<"users">)))
+    docs.forEach((doc, index) => {
+      const stats = statsMap.get(agentIds[index])
+      if (!stats || !doc) return
+      if (!stats.name && doc.name) stats.name = doc.name
+      if (!stats.email && doc.email) stats.email = doc.email
+    })
+  }
+
+  const computed = new Map<string, AgentStatsComputed>()
+  for (const [key, raw] of statsMap.entries()) {
+    const avgResolution = average(raw.resolutionMinutes)
+    const avgFirstResponse = average(raw.firstResponseMinutes)
+    const slaRate =
+      raw.totalSla > 0 ? Math.min(1, Math.max(0, raw.compliantSla / raw.totalSla)) : null
+    computed.set(key, {
+      agentId: key,
+      name: raw.name ?? raw.email ?? null,
+      email: raw.email ?? null,
+      open: raw.open,
+      paused: raw.paused,
+      resolved: raw.resolved,
+      slaRate,
+      avgResolutionMinutes: avgResolution,
+      avgFirstResponseMinutes: avgFirstResponse,
+      totalSla: raw.totalSla,
+      compliantSla: raw.compliantSla,
+    })
+  }
+
+  return computed
+}
+
 const metricResolvers: Record<string, MetricResolver> = {
   "tickets.opened_resolved_by_day": async (ctx, { tenantId, viewer, params }) => {
     const rangeDays = parseRange(params)
@@ -419,6 +591,151 @@ const metricResolvers: Record<string, MetricResolver> = {
       data: summary,
     }
   },
+  "agents.self_ticket_status": async (ctx, { tenantId, viewer, viewerId, params }) => {
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays, viewerId)
+    const stats = statsMap.get(String(viewerId))
+    const data = [
+      { status: "Abertos", total: stats?.open ?? 0 },
+      { status: "Pausados", total: stats?.paused ?? 0 },
+      { status: "Resolvidos", total: stats?.resolved ?? 0 },
+    ]
+    return {
+      meta: { kind: "collection", key: "agents.self_ticket_status", rangeDays },
+      data,
+    }
+  },
+  "agents.self_open_total": async (ctx, { tenantId, viewer, viewerId, params }) => {
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays, viewerId)
+    const stats = statsMap.get(String(viewerId))
+    return {
+      meta: { kind: "single", key: "agents.self_open_total", unit: "tickets", rangeDays },
+      data: { value: stats?.open ?? 0 },
+    }
+  },
+  "agents.self_paused_total": async (ctx, { tenantId, viewer, viewerId, params }) => {
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays, viewerId)
+    const stats = statsMap.get(String(viewerId))
+    return {
+      meta: { kind: "single", key: "agents.self_paused_total", unit: "tickets", rangeDays },
+      data: { value: stats?.paused ?? 0 },
+    }
+  },
+  "agents.self_resolved_total": async (ctx, { tenantId, viewer, viewerId, params }) => {
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays, viewerId)
+    const stats = statsMap.get(String(viewerId))
+    return {
+      meta: { kind: "single", key: "agents.self_resolved_total", unit: "tickets", rangeDays },
+      data: { value: stats?.resolved ?? 0 },
+    }
+  },
+  "agents.self_sla_rate": async (ctx, { tenantId, viewer, viewerId, params }) => {
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays, viewerId)
+    const stats = statsMap.get(String(viewerId))
+    return {
+      meta: { kind: "single", key: "agents.self_sla_rate", rangeDays },
+      data: {
+        value: stats?.slaRate ?? 0,
+        total: stats?.totalSla ?? 0,
+        compliant: stats?.compliantSla ?? 0,
+      },
+    }
+  },
+  "agents.self_avg_resolution_minutes": async (ctx, { tenantId, viewer, viewerId, params }) => {
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays, viewerId)
+    const stats = statsMap.get(String(viewerId))
+    const raw = stats?.avgResolutionMinutes ?? null
+    const value = raw !== null ? Math.round(raw * 10) / 10 : 0
+    return {
+      meta: { kind: "single", key: "agents.self_avg_resolution_minutes", unit: "minutes", rangeDays },
+      data: { value },
+    }
+  },
+  "agents.team_overview": async (ctx, { tenantId, viewer, params }) => {
+    if (viewer.role !== "ADMIN" && viewer.role !== "MANAGER") {
+      throw new ConvexError("Apenas administradores podem acessar esta métrica.")
+    }
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays)
+    const data = Array.from(statsMap.values())
+      .map((stats) => ({
+        agentId: stats.agentId,
+        agentName: stats.name ?? stats.email ?? "Agente",
+        open: stats.open,
+        paused: stats.paused,
+        resolved: stats.resolved,
+        slaRate: stats.slaRate !== null ? Math.round(stats.slaRate * 1000) / 10 : null,
+        avgResolutionMinutes:
+          stats.avgResolutionMinutes !== null ? Math.round(stats.avgResolutionMinutes * 10) / 10 : null,
+      }))
+      .sort((a, b) => b.resolved - a.resolved)
+    return {
+      meta: { kind: "collection", key: "agents.team_overview", rangeDays },
+      data,
+    }
+  },
+  "agents.team_resolved_total": async (ctx, { tenantId, viewer, params }) => {
+    if (viewer.role !== "ADMIN" && viewer.role !== "MANAGER") {
+      throw new ConvexError("Apenas administradores podem acessar esta métrica.")
+    }
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays)
+    const data = Array.from(statsMap.values())
+      .map((stats) => ({
+        agentId: stats.agentId,
+        agentName: stats.name ?? stats.email ?? "Agente",
+        resolved: stats.resolved,
+      }))
+      .sort((a, b) => b.resolved - a.resolved)
+    return {
+      meta: { kind: "collection", key: "agents.team_resolved_total", rangeDays },
+      data,
+    }
+  },
+  "agents.team_sla_rate": async (ctx, { tenantId, viewer, params }) => {
+    if (viewer.role !== "ADMIN" && viewer.role !== "MANAGER") {
+      throw new ConvexError("Apenas administradores podem acessar esta métrica.")
+    }
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays)
+    const data = Array.from(statsMap.values())
+      .map((stats) => ({
+        agentId: stats.agentId,
+        agentName: stats.name ?? stats.email ?? "Agente",
+        compliance: stats.slaRate ?? 0,
+        total: stats.totalSla,
+        compliant: stats.compliantSla,
+      }))
+      .sort((a, b) => (b.compliance ?? 0) - (a.compliance ?? 0))
+    return {
+      meta: { kind: "collection", key: "agents.team_sla_rate", rangeDays },
+      data,
+    }
+  },
+  "agents.team_avg_resolution_minutes": async (ctx, { tenantId, viewer, params }) => {
+    if (viewer.role !== "ADMIN" && viewer.role !== "MANAGER") {
+      throw new ConvexError("Apenas administradores podem acessar esta métrica.")
+    }
+    const rangeDays = parseRange(params)
+    const statsMap = await computeAgentStats(ctx, tenantId, viewer, rangeDays)
+    const data = Array.from(statsMap.values())
+      .map((stats) => ({
+        agentId: stats.agentId,
+        agentName: stats.name ?? stats.email ?? "Agente",
+        minutes:
+          stats.avgResolutionMinutes !== null ? Math.round(stats.avgResolutionMinutes * 10) / 10 : 0,
+      }))
+      .sort((a, b) => (a.minutes ?? 0) - (b.minutes ?? 0))
+    return {
+      meta: { kind: "collection", key: "agents.team_avg_resolution_minutes", rangeDays },
+      data,
+    }
+  },
 }
 
 export const run = query({
diff --git a/src/components/dashboards/dashboard-builder.tsx b/src/components/dashboards/dashboard-builder.tsx
index 2a22e37..d60c8c4 100644
--- a/src/components/dashboards/dashboard-builder.tsx
+++ b/src/components/dashboards/dashboard-builder.tsx
@@ -34,6 +34,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
+import { Textarea } from "@/components/ui/textarea"
 import {
   Dialog,
   DialogContent,
@@ -75,16 +76,23 @@ import { z } from "zod"
 import { useForm } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import {
+  Check,
   Copy,
   Download,
   Edit3,
   LayoutTemplate,
+  Maximize2,
+  Minimize2,
   MonitorPlay,
+  PauseCircle,
+  PlayCircle,
   Plus,
   Sparkles,
   Table2,
   Trash2,
 } from "lucide-react"
+import { IconPencil } from "@tabler/icons-react"
+import { getMetricDefinition, getMetricOptionsForRole } from "@/components/dashboards/metric-catalog"
 
 const GRID_COLUMNS = 12
 const DEFAULT_ROW_HEIGHT = 80
@@ -133,6 +141,8 @@ type LayoutItemFromServer = {
   h: number
   minW?: number
   minH?: number
+  maxW?: number
+  maxH?: number
   static?: boolean
 }
 
@@ -142,6 +152,8 @@ type LayoutStateItem = {
   h: number
   minW?: number
   minH?: number
+  maxW?: number
+  maxH?: number
   static?: boolean
 }
 
@@ -155,6 +167,8 @@ type CanvasRenderableItem = {
   layout: PackedLayoutItem
   minW?: number
   minH?: number
+  maxW?: number
+  maxH?: number
   element: React.ReactNode
 }
 
@@ -183,35 +197,50 @@ const WIDGET_LIBRARY: Array<{
   title: string
   description: string
 }> = [
-  { type: "kpi", title: "KPI", description: "Número agregado com destaque e tendência." },
-  { type: "bar", title: "Barras", description: "Comparação de valores por categoria ou tempo." },
-  { type: "line", title: "Linha", description: "Evolução temporal com curva contínua." },
-  { type: "area", title: "Área", description: "Tendência acumulada com preenchimento suave." },
-  { type: "pie", title: "Pizza/Donut", description: "Distribuição percentual por categoria." },
-  { type: "radar", title: "Radar", description: "Comparativo entre dimensões em formato radial." },
-  { type: "gauge", title: "Gauge", description: "Indicador circular de performance (0-100%)." },
-  { type: "table", title: "Tabela", description: "Visão tabular detalhada com drill-down." },
-  { type: "text", title: "Texto", description: "Notas, destaques e orientações em rich-text." },
+  { type: "kpi", title: "Indicador KPI", description: "Valor agregado com destaque visual e variação opcional." },
+  { type: "bar", title: "Gráfico de barras", description: "Comparação entre categorias ou períodos em colunas verticais." },
+  { type: "line", title: "Gráfico de linhas", description: "Evolução temporal contínua para séries múltiplas." },
+  { type: "area", title: "Gráfico de área", description: "Tendência temporal com preenchimento suave e suporte a empilhamento." },
+  { type: "pie", title: "Gráfico de pizza/donut", description: "Participação percentual por categoria com rótulos opcionais." },
+  { type: "radar", title: "Gráfico radar", description: "Comparação radial entre dimensões de performance." },
+  { type: "gauge", title: "Indicador radial", description: "Mede um percentual (0-100%) em formato de gauge." },
+  { type: "table", title: "Tabela dinâmica", description: "Lista tabular com cabeçalhos personalizáveis e ordenação." },
+  { type: "text", title: "Bloco de texto", description: "Destaques, insights ou instruções em rich-text." },
 ]
 
+const WIDGET_TYPE_LABELS = Object.fromEntries(WIDGET_LIBRARY.map((item) => [item.type, item.title])) as Record<
+  string,
+  string
+>
+
 const widgetSizePresets: Record<
   string,
-  { default: { w: number; h: number }; min: { w: number; h: number } }
+  {
+    default: { w: number; h: number }
+    min: { w: number; h: number }
+    max: { w: number; h: number }
+  }
 > = {
-  kpi: { default: { w: 4, h: 4 }, min: { w: 3, h: 3 } },
-  bar: { default: { w: 6, h: 6 }, min: { w: 4, h: 4 } },
-  line: { default: { w: 6, h: 6 }, min: { w: 4, h: 4 } },
-  area: { default: { w: 6, h: 6 }, min: { w: 4, h: 4 } },
-  pie: { default: { w: 5, h: 6 }, min: { w: 4, h: 4 } },
-  radar: { default: { w: 5, h: 6 }, min: { w: 4, h: 4 } },
-  gauge: { default: { w: 4, h: 5 }, min: { w: 3, h: 4 } },
-  table: { default: { w: 8, h: 8 }, min: { w: 6, h: 5 } },
-  text: { default: { w: 6, h: 4 }, min: { w: 4, h: 3 } },
+  kpi: { default: { w: 4, h: 4 }, min: { w: 3, h: 3 }, max: { w: 6, h: 6 } },
+  bar: { default: { w: 6, h: 6 }, min: { w: 4, h: 4 }, max: { w: 10, h: 10 } },
+  line: { default: { w: 6, h: 6 }, min: { w: 4, h: 4 }, max: { w: 10, h: 10 } },
+  area: { default: { w: 6, h: 6 }, min: { w: 4, h: 4 }, max: { w: 10, h: 10 } },
+  pie: { default: { w: 5, h: 6 }, min: { w: 4, h: 4 }, max: { w: 8, h: 9 } },
+  radar: { default: { w: 5, h: 6 }, min: { w: 4, h: 4 }, max: { w: 8, h: 9 } },
+  gauge: { default: { w: 4, h: 5 }, min: { w: 3, h: 4 }, max: { w: 6, h: 7 } },
+  table: { default: { w: 8, h: 8 }, min: { w: 6, h: 5 }, max: { w: 12, h: 12 } },
+  text: { default: { w: 6, h: 4 }, min: { w: 4, h: 3 }, max: { w: 10, h: 8 } },
 }
 
 function getWidgetSize(type: string) {
   const preset = widgetSizePresets[type] ?? widgetSizePresets.text
-  return { ...preset.default, minW: preset.min.w, minH: preset.min.h }
+  return {
+    ...preset.default,
+    minW: preset.min.w,
+    minH: preset.min.h,
+    maxW: preset.max.w,
+    maxH: preset.max.h,
+  }
 }
 
 function useDebounce<T>(value: T, delay: number): T {
@@ -310,8 +339,16 @@ function packLayout(items: LayoutStateItem[], columns: number): PackedLayoutItem
   }
 
   for (const item of items) {
-    const width = Math.max(1, Math.min(columns, Math.max(item.minW ?? 2, Math.round(item.w))))
-    const height = Math.max(1, Math.min(MAX_ROWS, Math.max(item.minH ?? 2, Math.round(item.h))))
+    const maxAllowedWidth = Math.min(columns, item.maxW ?? columns)
+    const maxAllowedHeight = Math.min(MAX_ROWS, item.maxH ?? MAX_ROWS)
+    const width = Math.max(
+      1,
+      Math.min(maxAllowedWidth, Math.max(item.minW ?? 2, Math.round(item.w))),
+    )
+    const height = Math.max(
+      1,
+      Math.min(maxAllowedHeight, Math.max(item.minH ?? 2, Math.round(item.h))),
+    )
     let placed = false
     let row = 0
     while (!placed && row < MAX_ROWS * 4) {
@@ -327,6 +364,8 @@ function packLayout(items: LayoutStateItem[], columns: number): PackedLayoutItem
             y: row,
             minW: item.minW,
             minH: item.minH,
+            maxW: item.maxW,
+            maxH: item.maxH,
             static: item.static,
           })
           placed = true
@@ -348,6 +387,8 @@ function packLayout(items: LayoutStateItem[], columns: number): PackedLayoutItem
         y: occupied.length - height,
         minW: item.minW,
         minH: item.minH,
+        maxW: item.maxW,
+        maxH: item.maxH,
         static: item.static,
       })
     }
@@ -364,23 +405,27 @@ function buildInitialLayout(
   existingLayout?.forEach((item) => layoutMap.set(item.i, item))
   return widgets.map((widget) => {
     const current = layoutMap.get(widget.widgetKey)
+    const defaults = getWidgetSize(widget.type)
     if (current) {
       return {
         i: widget.widgetKey,
         w: current.w,
         h: current.h,
-        minW: current.minW ?? getWidgetSize(widget.type).minW,
-        minH: current.minH ?? getWidgetSize(widget.type).minH,
+        minW: current.minW ?? defaults.minW,
+        minH: current.minH ?? defaults.minH,
+        maxW: current.maxW ?? defaults.maxW,
+        maxH: current.maxH ?? defaults.maxH,
         static: current.static ?? false,
       }
     }
-    const defaults = getWidgetSize(widget.type)
     return {
       i: widget.widgetKey,
       w: defaults.w,
       h: defaults.h,
       minW: defaults.minW,
       minH: defaults.minH,
+      maxW: defaults.maxW,
+      maxH: defaults.maxH,
       static: false,
     }
   })
@@ -395,8 +440,15 @@ function syncLayoutWithWidgets(
   const serverMap = new Map(layoutFromServer?.map((item) => [item.i, item]) ?? [])
   return widgets.map((widget) => {
     const existing = previousMap.get(widget.widgetKey)
+    const defaults = getWidgetSize(widget.type)
     if (existing) {
-      return existing
+      return {
+        ...existing,
+        minW: existing.minW ?? defaults.minW,
+        minH: existing.minH ?? defaults.minH,
+        maxW: existing.maxW ?? defaults.maxW,
+        maxH: existing.maxH ?? defaults.maxH,
+      }
     }
     const server = serverMap.get(widget.widgetKey)
     if (server) {
@@ -404,12 +456,23 @@ function syncLayoutWithWidgets(
         i: widget.widgetKey,
         w: server.w,
         h: server.h,
-        minW: server.minW ?? getWidgetSize(widget.type).minW,
-        minH: server.minH ?? getWidgetSize(widget.type).minH,
+        minW: server.minW ?? defaults.minW,
+        minH: server.minH ?? defaults.minH,
+        maxW: server.maxW ?? defaults.maxW,
+        maxH: server.maxH ?? defaults.maxH,
         static: server.static ?? false,
       }
     }
-    return buildInitialLayout([widget], layoutFromServer)[0]!
+    return {
+      i: widget.widgetKey,
+      w: defaults.w,
+      h: defaults.h,
+      minW: defaults.minW,
+      minH: defaults.minH,
+      maxW: defaults.maxW,
+      maxH: defaults.maxH,
+      static: false,
+    }
   })
 }
 
@@ -471,6 +534,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
   const viewerId = convexUserId as Id<"users"> | null
   const canEdit = editable && Boolean(viewerId) && isStaff
   const hasDashboardId = typeof dashboardId === "string" && dashboardId.length > 0
+  const userRole = session?.user.role ?? null
 
   const detail = useQuery(
     api.dashboards.get,
@@ -522,7 +586,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
       setLayoutState(syncedLayout)
     }
     filtersHydratingRef.current = false
-  }, [detail])
+  }, [detail, filters])
 
   useEffect(() => {
     layoutRef.current = layoutState
@@ -530,6 +594,8 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
 
   const packedLayout = useMemo(() => packLayout(layoutState, GRID_COLUMNS), [layoutState])
 
+  const metricOptions = useMemo(() => getMetricOptionsForRole(userRole), [userRole])
+
   const widgetMap = useMemo(() => {
     const map = new Map<string, DashboardWidgetRecord>()
     widgets.forEach((widget) => map.set(widget.widgetKey, widget))
@@ -604,6 +670,8 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
         ),
         ...(item.minW !== undefined ? { minW: item.minW } : {}),
         ...(item.minH !== undefined ? { minH: item.minH } : {}),
+        ...(item.maxW !== undefined ? { maxW: item.maxW } : {}),
+        ...(item.maxH !== undefined ? { maxH: item.maxH } : {}),
       } satisfies CanvasRenderableItem
     })
     .filter(Boolean) as CanvasRenderableItem[]
@@ -639,12 +707,13 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
     async (nextState: LayoutStateItem[]) => {
       if (!canEdit || !viewerId || !dashboard) return
       const packed = packLayout(nextState, GRID_COLUMNS)
+      const sanitized = packed.map(({ maxW, maxH, ...rest }) => rest)
       try {
         await updateLayoutMutation({
           tenantId,
           actorId: viewerId as Id<"users">,
           dashboardId: dashboard.id,
-          layout: packed,
+          layout: sanitized,
         })
       } catch (error) {
         console.error(error)
@@ -657,7 +726,18 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
   const handleLayoutResize = useCallback(
     (key: string, size: { w: number; h: number }, options?: { commit?: boolean }) => {
       setLayoutState((prev) => {
-        const next = prev.map((item) => (item.i === key ? { ...item, w: size.w, h: size.h } : item))
+        const next = prev.map((item) => {
+          if (item.i !== key) return item
+          const minW = item.minW ?? 1
+          const minH = item.minH ?? 1
+          const maxW = item.maxW ?? GRID_COLUMNS
+          const maxH = item.maxH ?? MAX_ROWS
+          return {
+            ...item,
+            w: Math.min(maxW, Math.max(minW, size.w)),
+            h: Math.min(maxH, Math.max(minH, size.h)),
+          }
+        })
         if (options?.commit) {
           persistLayout(next)
         }
@@ -748,29 +828,59 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
 
   const handleUpdateWidgetConfig = async (values: WidgetConfigFormValues) => {
     if (!configTarget || !canEdit || !viewerId || !dashboard) return
-    const currentConfig = configTarget.config && typeof configTarget.config === "object" ? (configTarget.config as Record<string, unknown>) : {}
-    const nextConfig = {
+    const currentConfig =
+      configTarget.config && typeof configTarget.config === "object"
+        ? (configTarget.config as Record<string, unknown>)
+        : {}
+    const preset = getMetricDefinition(values.metricKey)
+
+    const baseDataSource = (currentConfig.dataSource as Record<string, unknown> | undefined) ?? {}
+    const baseParams = (baseDataSource.params as Record<string, unknown> | undefined) ?? {}
+    const params: Record<string, unknown> = { ...baseParams }
+    if (values.rangeOverride && values.rangeOverride.trim().length > 0) {
+      params.range = values.rangeOverride.trim()
+    } else if ("range" in params) {
+      delete params.range
+    }
+
+    const baseEncoding = (currentConfig.encoding as Record<string, unknown> | undefined) ?? {}
+    const mergedEncoding: Record<string, unknown> = { ...baseEncoding }
+    if (preset?.encoding) {
+      Object.assign(mergedEncoding, preset.encoding)
+    }
+    mergedEncoding.stacked = values.stacked ?? preset?.stacked ?? false
+
+    const baseOptions = (currentConfig.options as Record<string, unknown> | undefined) ?? {}
+    const mergedOptions: Record<string, unknown> = {
+      ...baseOptions,
+      ...(preset?.options ?? {}),
+      legend: values.legend ?? true,
+      tooltip: values.showTooltip ?? true,
+    }
+    if (preset?.options?.indicator) {
+      mergedOptions.indicator = preset.options.indicator
+    }
+    if (preset?.options?.valueFormatter) {
+      mergedOptions.valueFormatter = preset.options.valueFormatter
+    }
+
+    const nextConfig: Record<string, unknown> = {
       ...currentConfig,
       type: values.type,
       title: values.title,
       dataSource: {
-        ...(currentConfig.dataSource as Record<string, unknown> | undefined),
+        ...baseDataSource,
         metricKey: values.metricKey,
-        params: {
-          ...((currentConfig.dataSource as { params?: Record<string, unknown> } | undefined)?.params ?? {}),
-          ...(values.rangeOverride ? { range: values.rangeOverride } : {}),
-        },
-      },
-      encoding: {
-        ...(currentConfig.encoding as Record<string, unknown> | undefined),
-        stacked: values.stacked ?? false,
-      },
-      options: {
-        ...(currentConfig.options as Record<string, unknown> | undefined),
-        legend: values.legend ?? true,
-        tooltip: values.showTooltip ?? true,
+        params,
       },
+      encoding: mergedEncoding,
+      options: mergedOptions,
     }
+
+    if (preset?.columns) {
+      nextConfig.columns = preset.columns
+    }
+
     try {
       await updateWidgetMutation({
         tenantId,
@@ -789,7 +899,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
     }
   }
 
-  const handleUpdateMetadata = async (payload: { name?: string; description?: string | null }) => {
+  const handleUpdateMetadata = async (payload: { name?: string; description?: string | null; tvIntervalSeconds?: number }) => {
     if (!dashboard || !viewerId || !canEdit) return
     try {
       await updateMetadataMutation({
@@ -798,6 +908,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
         dashboardId: dashboard.id,
         name: payload.name,
         description: payload.description ?? undefined,
+        tvIntervalSeconds: payload.tvIntervalSeconds,
       })
     } catch (error) {
       console.error(error)
@@ -848,6 +959,20 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
     }
   }
 
+  const handleToggleTvMode = useCallback(() => {
+    if (!dashboardId) return
+    const baseRoute = `/dashboards/${dashboardId}`
+    const params = new URLSearchParams(searchParams ? searchParams.toString() : "")
+    if (enforceTv) {
+      params.delete("tv")
+      const query = params.toString()
+      router.push(query ? `${baseRoute}?${query}` : baseRoute)
+    } else {
+      params.set("tv", "1")
+      router.push(`${baseRoute}?${params.toString()}`)
+    }
+  }, [dashboardId, enforceTv, router, searchParams])
+
   const handleFiltersChange = (next: DashboardFilters) => {
     setFilters(next)
   }
@@ -880,6 +1005,8 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
         enforceTv={enforceTv}
         activeSectionIndex={activeSectionIndex}
         totalSections={sections.length}
+        onToggleTvMode={handleToggleTvMode}
+        totalWidgets={widgets.length}
       />
 
       <DashboardFilterBar filters={filters} onChange={handleFiltersChange} />
@@ -921,11 +1048,23 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
         editable={canEdit && !enforceTv && mode !== "print"}
         columns={GRID_COLUMNS}
         rowHeight={DEFAULT_ROW_HEIGHT}
+        gap={20}
         ready={allWidgetsReady}
         onResize={handleLayoutResize}
         onReorder={handleLayoutReorder}
       />
 
+      {canEdit && !enforceTv ? (
+        <button
+          type="button"
+          onClick={() => handleAddWidget("kpi")}
+          className="flex h-28 w-full items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-100/40 text-sm font-medium text-slate-800 transition hover:border-slate-400 hover:bg-slate-200/60"
+        >
+          <Plus className="mr-2 size-4" />
+          Adicionar novo espaço de widget
+        </button>
+      ) : null}
+
       <WidgetConfigDialog
         open={isConfigOpen}
         onOpenChange={(open) => {
@@ -933,6 +1072,7 @@ export function DashboardBuilder({ dashboardId, editable = true, mode = "edit" }
           if (!open) setConfigTarget(null)
         }}
         widget={configTarget}
+        metricOptions={metricOptions}
         onSubmit={handleUpdateWidgetConfig}
       />
 
@@ -959,6 +1099,8 @@ function BuilderHeader({
   enforceTv,
   activeSectionIndex,
   totalSections,
+  onToggleTvMode,
+  totalWidgets,
 }: {
   dashboard: DashboardRecord
   canEdit: boolean
@@ -966,105 +1108,272 @@ function BuilderHeader({
   onExport: (format: "pdf" | "png") => Promise<void>
   isAddingWidget: boolean
   isExporting: boolean
-  onMetadataChange: (payload: { name?: string; description?: string | null }) => void
+  onMetadataChange: (payload: { name?: string; description?: string | null; tvIntervalSeconds?: number }) => void
   enforceTv: boolean
   activeSectionIndex: number
   totalSections: number
+  onToggleTvMode: () => void
+  totalWidgets: number
 }) {
   const [name, setName] = useState(dashboard.name)
   const [description, setDescription] = useState(dashboard.description ?? "")
-  const initialNameRef = useRef(dashboard.name)
-  const initialDescriptionRef = useRef(dashboard.description ?? "")
+  const [isEditingHeader, setIsEditingHeader] = useState(false)
+  const [draftName, setDraftName] = useState(dashboard.name)
+  const [draftDescription, setDraftDescription] = useState(dashboard.description ?? "")
+  const [isSavingHeader, setIsSavingHeader] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(false)
 
   useEffect(() => {
     setName(dashboard.name)
     setDescription(dashboard.description ?? "")
-    initialNameRef.current = dashboard.name
-    initialDescriptionRef.current = dashboard.description ?? ""
-  }, [dashboard.name, dashboard.description])
+    if (!isEditingHeader) {
+      setDraftName(dashboard.name)
+      setDraftDescription(dashboard.description ?? "")
+    }
+  }, [dashboard.name, dashboard.description, isEditingHeader])
 
-  const handleBlurName = () => {
+  useEffect(() => {
+    if (typeof document === "undefined") return
+    const handleFullscreenChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement))
+    }
+    document.addEventListener("fullscreenchange", handleFullscreenChange)
+    handleFullscreenChange()
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange)
+    }
+  }, [])
+
+  const toggleFullscreen = useCallback(() => {
+    if (typeof document === "undefined") return
+    if (document.fullscreenElement) {
+      const exit = document.exitFullscreen
+      if (typeof exit === "function") {
+        exit.call(document).catch(() => undefined)
+      }
+      return
+    }
+    const element = document.documentElement
+    if (element && typeof element.requestFullscreen === "function") {
+      element.requestFullscreen().catch(() => undefined)
+    }
+  }, [])
+
+  const rotationInterval = Math.max(5, dashboard.tvIntervalSeconds ?? 30)
+
+  const handleStartEditHeader = () => {
+    setDraftName(name)
+    setDraftDescription(description ?? "")
+    setIsEditingHeader(true)
+  }
+
+  const handleCancelEditHeader = () => {
+    setDraftName(name)
+    setDraftDescription(description ?? "")
+    setIsEditingHeader(false)
+  }
+
+  const handleSaveHeader = async () => {
     if (!canEdit) return
-    if (name.trim() && name.trim() !== initialNameRef.current.trim()) {
-      onMetadataChange({ name: name.trim() })
-      initialNameRef.current = name.trim()
-    } else {
-      setName(initialNameRef.current)
+    const trimmedName = draftName.trim()
+    if (!trimmedName) {
+      toast.error("Informe um nome para o dashboard.")
+      return
+    }
+    const trimmedDescription = draftDescription.trim()
+    const nextDescription = trimmedDescription.length > 0 ? trimmedDescription : null
+    const didChangeName = trimmedName !== name
+    const didChangeDescription = nextDescription !== (description ?? null)
+    if (!didChangeName && !didChangeDescription) {
+      setIsEditingHeader(false)
+      return
+    }
+    setIsSavingHeader(true)
+    try {
+      await onMetadataChange({
+        name: trimmedName,
+        description: nextDescription,
+      })
+      setName(trimmedName)
+      setDescription(nextDescription ?? "")
+      setIsEditingHeader(false)
+      toast.success("Informações atualizadas.")
+    } catch (error) {
+      console.error(error)
+      toast.error("Não foi possível atualizar o dashboard.")
+    } finally {
+      setIsSavingHeader(false)
     }
   }
 
-  const handleBlurDescription = () => {
-    if (!canEdit) return
-    if (description.trim() !== initialDescriptionRef.current.trim()) {
-      onMetadataChange({ description: description.trim() || null })
-      initialDescriptionRef.current = description.trim()
-    }
-  }
+  const isTvMode = enforceTv
+  const hasSections = totalSections > 0
 
   return (
-    <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
-      <div className="flex flex-col gap-2">
-        {canEdit ? (
-          <>
-            <Input
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              onBlur={handleBlurName}
-              className="h-12 w-full max-w-xl rounded-2xl text-2xl font-semibold"
-            />
-            <Input
-              value={description}
-              onChange={(event) => setDescription(event.target.value)}
-              onBlur={handleBlurDescription}
-              placeholder="Breve descrição para contextualizar o dashboard"
-              className="h-10 w-full max-w-xl rounded-xl text-sm"
-            />
-          </>
-        ) : (
-          <>
-            <h2 className="text-2xl font-semibold">{dashboard.name}</h2>
-            {dashboard.description ? (
-              <p className="text-sm text-muted-foreground">{dashboard.description}</p>
+    <Card className="rounded-2xl border border-border/60 bg-gradient-to-br from-white/90 via-white to-primary/5 shadow-sm">
+      <CardContent className="flex flex-col gap-6 p-6 md:p-7">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex flex-col gap-3">
+            {isEditingHeader ? (
+              <div className="space-y-3">
+                <Input
+                  value={draftName}
+                  onChange={(event) => setDraftName(event.target.value)}
+                  placeholder="Nome do dashboard"
+                  className="h-10 w-full max-w-xl rounded-lg border border-slate-300 px-3 text-lg font-semibold text-neutral-900"
+                />
+                <Textarea
+                  value={draftDescription}
+                  onChange={(event) => setDraftDescription(event.target.value)}
+                  placeholder="Adicionar uma descrição opcional"
+                  rows={3}
+                  className="w-full max-w-xl resize-none overflow-hidden rounded-lg border border-slate-300 bg-white p-3 text-sm text-neutral-800 shadow-sm"
+                />
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex flex-wrap items-center gap-3">
+                  <h1 className="text-2xl font-semibold text-neutral-900">{name}</h1>
+                  {canEdit ? (
+                    <Button
+                      size="icon"
+                      variant="outline"
+                      className="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white text-neutral-800 hover:bg-slate-50"
+                      onClick={handleStartEditHeader}
+                      aria-label="Editar título e descrição"
+                    >
+                      <IconPencil className="size-5" />
+                    </Button>
+                  ) : null}
+                </div>
+                {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+              </div>
+            )}
+            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              <Badge
+                variant="outline"
+                className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-neutral-700 shadow-sm"
+              >
+                <span className="h-2 w-2 rounded-full bg-neutral-400" />
+                Formato {dashboard.aspectRatio ?? "16:9"}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-neutral-700 shadow-sm"
+              >
+                <span className="h-2 w-2 rounded-full bg-neutral-400" />
+                Tema {dashboard.theme ?? "system"}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold text-neutral-700 shadow-sm"
+              >
+                <span className="h-2 w-2 rounded-full bg-neutral-400" />
+                {totalWidgets} bloco{totalWidgets === 1 ? "" : "s"}
+              </Badge>
+              {isTvMode && hasSections ? (
+                <Badge className="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-primary">
+                  <MonitorPlay className="size-3.5" />
+                  Slide {activeSectionIndex + 1} de {totalSections}
+                </Badge>
+              ) : null}
+            </div>
+          </div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end">
+            {isEditingHeader ? (
+              <div className="flex items-center justify-end gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-sm font-semibold text-neutral-700"
+                  onClick={handleCancelEditHeader}
+                  disabled={isSavingHeader}
+                >
+                  Cancelar
+                </Button>
+                <Button
+                  size="sm"
+                  className="inline-flex items-center gap-2 rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-black/85"
+                  onClick={handleSaveHeader}
+                  disabled={isSavingHeader}
+                >
+                  {isSavingHeader ? "Salvando..." : "Salvar"}
+                </Button>
+              </div>
             ) : null}
-          </>
-        )}
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-          <Badge variant="outline" className="rounded-full px-3 py-1">
-            {dashboard.aspectRatio ?? "16:9"}
-          </Badge>
-          <Badge variant="outline" className="rounded-full px-3 py-1">
-            Tema {dashboard.theme ?? "system"}
-          </Badge>
-          {enforceTv && totalSections > 0 ? (
-            <Badge variant="secondary" className="rounded-full px-3 py-1">
-              Slide {activeSectionIndex + 1} de {totalSections}
-            </Badge>
-          ) : null}
+            <div className="flex flex-wrap items-center gap-2">
+              {canEdit ? <WidgetPicker onSelect={onAddWidget} disabled={isAddingWidget} /> : null}
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2"
+                onClick={toggleFullscreen}
+              >
+                {isFullscreen ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
+                {isFullscreen ? "Sair da tela cheia" : "Tela cheia"}
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={isTvMode ? "secondary" : "default"}
+                    size="sm"
+                    className="gap-2"
+                  >
+                    {isTvMode ? <PauseCircle className="size-4" /> : <PlayCircle className="size-4" />}
+                    {isTvMode ? "Modo apresentação ativo" : "Modo apresentação"}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-60">
+                  <DropdownMenuLabel>Modo apresentação</DropdownMenuLabel>
+                  <DropdownMenuItem onSelect={onToggleTvMode}>
+                    {isTvMode ? "Encerrar modo apresentação" : "Iniciar modo apresentação"}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel>Tempo por seção</DropdownMenuLabel>
+                  {[10, 20, 30, 60, 90].map((seconds) => (
+                    <DropdownMenuItem
+                      key={seconds}
+                      disabled={!canEdit}
+                      className="flex items-center justify-between gap-2"
+                      onSelect={() => {
+                        if (!canEdit) return
+                        onMetadataChange({ tvIntervalSeconds: seconds })
+                      }}
+                    >
+                      <span>{seconds} segundos</span>
+                      {rotationInterval === seconds ? <Check className="size-3.5" /> : null}
+                    </DropdownMenuItem>
+                  ))}
+                  {canEdit ? null : (
+                    <DropdownMenuItem disabled>
+                      Apenas edição permite ajustar o tempo
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2">
+                  <Download className="size-4" />
+                  Exportar
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Exportar dashboard</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem disabled={isExporting} onSelect={() => onExport("pdf")}>
+                  Exportar como PDF
+                </DropdownMenuItem>
+                <DropdownMenuItem disabled={isExporting} onSelect={() => onExport("png")}>
+                  Exportar como PNG
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-wrap items-center gap-2">
-        {canEdit ? (
-          <WidgetPicker onSelect={onAddWidget} disabled={isAddingWidget} />
-        ) : null}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="icon" className="h-10 w-10">
-              <Download className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Exportar dashboard</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem disabled={isExporting} onSelect={() => onExport("pdf")}>
-              Exportar como PDF
-            </DropdownMenuItem>
-            <DropdownMenuItem disabled={isExporting} onSelect={() => onExport("png")}>
-              Exportar como PNG
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   )
 }
 
@@ -1074,11 +1383,11 @@ function WidgetPicker({ onSelect, disabled }: { onSelect: (type: string) => void
       <DropdownMenuTrigger asChild>
         <Button size="sm" className="gap-2" disabled={disabled}>
           <Plus className="size-4" />
-          Adicionar widget
+          Adicionar bloco
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-72">
-        <DropdownMenuLabel>Componentes disponíveis</DropdownMenuLabel>
+        <DropdownMenuLabel>Blocos disponíveis</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {WIDGET_LIBRARY.map((item) => (
           <DropdownMenuItem
@@ -1086,7 +1395,7 @@ function WidgetPicker({ onSelect, disabled }: { onSelect: (type: string) => void
             onSelect={() => onSelect(item.type)}
             className="flex items-start gap-3"
           >
-            <LayoutTemplate className="mt-1 size-4 text-primary" />
+            <LayoutTemplate className="mt-1 size-4 text-foreground" />
             <div className="flex flex-col">
               <span className="font-medium text-foreground">{item.title}</span>
               <span className="text-xs text-muted-foreground">{item.description}</span>
@@ -1119,6 +1428,16 @@ function DashboardFilterBar({
       : "skip",
   ) as Array<{ id: Id<"companies">; name: string }> | undefined
 
+  const queues = useQuery(
+    api.queues.list,
+    isStaff && viewerId
+      ? ({
+          tenantId,
+          viewerId,
+        } as const)
+      : "skip",
+  ) as Array<{ id: Id<"queues">; name: string }> | undefined
+
   const companyOptions: SearchableComboboxOption[] = useMemo(() => {
     const base: SearchableComboboxOption[] = [{ value: "all", label: "Todas as empresas" }]
     if (!companies || companies.length === 0) return base
@@ -1132,21 +1451,32 @@ function DashboardFilterBar({
     ]
   }, [companies])
 
+  const queueOptions: SearchableComboboxOption[] = useMemo(() => {
+    const base: SearchableComboboxOption[] = [{ value: "all", label: "Todas as filas" }]
+    if (!queues || queues.length === 0) return base
+    const sorted = [...queues].sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
+    return [
+      base[0],
+      ...sorted.map((queue) => ({
+        value: queue.id,
+        label: queue.name,
+      })),
+    ]
+  }, [queues])
+
   return (
-    <Card className="border-muted/60 bg-muted/10">
-      <CardContent className="flex flex-wrap items-center gap-3 py-4">
-        <div className="flex flex-col gap-1">
+    <Card className="rounded-2xl border border-border/60 bg-gradient-to-br from-white/90 via-white to-primary/5 shadow-sm">
+      <CardContent className="flex flex-wrap items-end gap-4 px-4 py-5 sm:px-6">
+        <div className="flex flex-col gap-2">
           <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
             Período
           </span>
           <Select
             value={filters.range ?? "30d"}
-            onValueChange={(value) =>
-              onChange({ ...filters, range: value as DashboardFilters["range"] })
-            }
+            onValueChange={(value) => onChange({ ...filters, range: value as DashboardFilters["range"] })}
           >
-            <SelectTrigger className="h-10 w-40 rounded-xl">
-              <SelectValue />
+            <SelectTrigger className="h-[46px] w-44 rounded-full border border-slate-300 bg-white px-4 text-sm font-medium text-neutral-800 shadow-sm focus-visible:ring-0 data-[state=open]:border-neutral-600">
+              <SelectValue placeholder="Selecione" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="7d">Últimos 7 dias</SelectItem>
@@ -1155,20 +1485,38 @@ function DashboardFilterBar({
             </SelectContent>
           </Select>
         </div>
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-2">
           <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
             Empresa
           </span>
           <SearchableCombobox
             value={filters.companyId ?? "all"}
-            onValueChange={(value) =>
-              onChange({ ...filters, companyId: value === "all" ? null : value })
-            }
+            onValueChange={(value) => onChange({ ...filters, companyId: value === "all" ? null : value })}
             options={companyOptions}
-            placeholder="Selecionar empresa"
+            placeholder="Todas as empresas"
             className="min-w-[220px]"
           />
         </div>
+        <div className="flex flex-col gap-2">
+          <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Fila
+          </span>
+          <SearchableCombobox
+            value={filters.queueId ?? "all"}
+            onValueChange={(value) => onChange({ ...filters, queueId: value === "all" ? null : value })}
+            options={queueOptions}
+            placeholder="Todas as filas"
+            className="min-w-[220px]"
+          />
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="ml-auto mt-2 text-muted-foreground hover:text-foreground"
+          onClick={() => onChange({ ...DEFAULT_FILTERS })}
+        >
+          Limpar filtros
+        </Button>
       </CardContent>
     </Card>
   )
@@ -1199,16 +1547,36 @@ function BuilderWidgetCard({
     <div className="group relative h-full">
       {editable && mode !== "tv" && mode !== "print" ? (
         <div className="absolute inset-x-3 top-3 z-10 flex items-center justify-end gap-1 opacity-0 transition group-hover:opacity-100">
-          <Button size="icon" variant="secondary" className="h-8 w-8" onClick={onEdit}>
-            <Edit3 className="size-3.5" />
+          <Button
+            size="icon"
+            variant="outline"
+            className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-400 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-slate-300"
+            onClick={onEdit}
+          >
+            <IconPencil className="size-4" />
           </Button>
-          <Button size="icon" variant="secondary" className="h-8 w-8" onClick={onDuplicate}>
+          <Button
+            size="icon"
+            variant="outline"
+            className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-400 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-slate-300"
+            onClick={onDuplicate}
+          >
             <Copy className="size-3.5" />
           </Button>
-          <Button size="icon" variant="secondary" className="h-8 w-8" onClick={onViewData}>
+          <Button
+            size="icon"
+            variant="outline"
+            className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-400 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-slate-300"
+            onClick={onViewData}
+          >
             <Table2 className="size-3.5" />
           </Button>
-          <Button size="icon" variant="destructive" className="h-8 w-8" onClick={onRemove}>
+          <Button
+            size="icon"
+            variant="outline"
+            className="flex h-8 w-8 items-center justify-center rounded-lg border border-rose-200 bg-white text-rose-600 shadow-sm transition hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600 focus-visible:ring-2 focus-visible:ring-rose-200"
+            onClick={onRemove}
+          >
             <Trash2 className="size-3.5" />
           </Button>
         </div>
@@ -1222,11 +1590,13 @@ function WidgetConfigDialog({
   open,
   onOpenChange,
   widget,
+  metricOptions,
   onSubmit,
 }: {
   open: boolean
   onOpenChange: (open: boolean) => void
   widget: DashboardWidgetRecord | null
+  metricOptions: SearchableComboboxOption[]
   onSubmit: (values: WidgetConfigFormValues) => Promise<void>
 }) {
   const normalizedConfig = getWidgetConfigForWidget(widget)
@@ -1246,6 +1616,21 @@ function WidgetConfigDialog({
     },
   })
 
+  useEffect(() => {
+    form.register("metricKey")
+  }, [form])
+
+  const metricKeyValue = form.watch("metricKey")
+  const widgetTypeValue = form.watch("type")
+  const legendValue = form.watch("legend")
+  const stackedValue = form.watch("stacked")
+  const showTooltipValue = form.watch("showTooltip")
+  const selectedMetric = useMemo(() => getMetricDefinition(metricKeyValue), [metricKeyValue])
+  const metricOptionValue = selectedMetric ? selectedMetric.key : null
+  const recommendedWidgetTitle = selectedMetric ? WIDGET_TYPE_LABELS[selectedMetric.recommendedWidget] ?? selectedMetric.recommendedWidget : null
+  const lastAppliedMetricRef = useRef<string | null>(null)
+  const lastTitleFromPresetRef = useRef<string | null>(null)
+
   useEffect(() => {
     if (!widget) return
     const config = getWidgetConfigForWidget(widget)
@@ -1261,8 +1646,76 @@ function WidgetConfigDialog({
           : "",
       showTooltip: Boolean(config?.options && "tooltip" in config.options ? config.options.tooltip : true),
     })
+    lastAppliedMetricRef.current =
+      typeof config?.dataSource?.metricKey === "string" ? (config.dataSource?.metricKey as string) : null
+    lastTitleFromPresetRef.current = config?.title ?? widget.title ?? null
   }, [widget, form])
 
+  useEffect(() => {
+    if (!selectedMetric) {
+      lastAppliedMetricRef.current = null
+      return
+    }
+    const normalizedKey = selectedMetric.key
+    if (lastAppliedMetricRef.current === normalizedKey) {
+      return
+    }
+    form.setValue("type", selectedMetric.recommendedWidget, { shouldDirty: true })
+    if (typeof selectedMetric.stacked === "boolean") {
+      form.setValue("stacked", selectedMetric.stacked, { shouldDirty: true })
+    }
+    if (selectedMetric.options?.legend !== undefined) {
+      form.setValue("legend", selectedMetric.options.legend, { shouldDirty: true })
+    }
+    if (selectedMetric.options?.tooltip !== undefined) {
+      form.setValue("showTooltip", selectedMetric.options.tooltip, { shouldDirty: true })
+    }
+    const currentTitle = form.getValues("title")
+    if (
+      !currentTitle ||
+      currentTitle.trim().length === 0 ||
+      currentTitle === (lastTitleFromPresetRef.current ?? "")
+    ) {
+      form.setValue("title", selectedMetric.defaultTitle, { shouldDirty: true })
+      lastTitleFromPresetRef.current = selectedMetric.defaultTitle
+    }
+    lastAppliedMetricRef.current = normalizedKey
+  }, [form, selectedMetric])
+
+  useEffect(() => {
+    const supportsStacked = ["bar", "area"].includes(widgetTypeValue)
+    if (!supportsStacked && stackedValue) {
+      form.setValue("stacked", false, { shouldDirty: true })
+    }
+    const supportsLegendLocal = ["bar", "line", "area", "pie", "radar"].includes(widgetTypeValue)
+    if (!supportsLegendLocal && legendValue) {
+      form.setValue("legend", false, { shouldDirty: true })
+    }
+    const supportsTooltipLocal = ["bar", "line", "area", "pie", "radar"].includes(widgetTypeValue)
+    if (!supportsTooltipLocal && showTooltipValue) {
+      form.setValue("showTooltip", false, { shouldDirty: true })
+    }
+  }, [form, legendValue, showTooltipValue, stackedValue, widgetTypeValue])
+
+  useEffect(() => {
+    if (!selectedMetric) {
+      lastAppliedMetricRef.current = null
+    }
+  }, [selectedMetric])
+
+  const supportsLegend = ["bar", "line", "area", "pie", "radar"].includes(widgetTypeValue)
+  const supportsStacked = ["bar", "area"].includes(widgetTypeValue)
+  const supportsTooltip = ["bar", "line", "area", "pie", "radar"].includes(widgetTypeValue)
+
+  const handleMetricOptionChange = (value: string | null) => {
+    if (!value) {
+      form.setValue("metricKey", "", { shouldDirty: true })
+      lastAppliedMetricRef.current = null
+      return
+    }
+    form.setValue("metricKey", value, { shouldDirty: true, shouldValidate: true })
+  }
+
   const handleSubmit = form.handleSubmit(async (values) => {
     await onSubmit(values)
     form.reset()
@@ -1273,7 +1726,7 @@ function WidgetConfigDialog({
       <DialogContent className="max-w-xl">
         <DialogHeader>
           <DialogTitle>Configurar widget</DialogTitle>
-          <DialogDescription>Personalize a fonte de dados, título e opções de exibição.</DialogDescription>
+          <DialogDescription>Personalize título, métrica e comportamento visual do bloco.</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="grid gap-4">
@@ -1297,31 +1750,80 @@ function WidgetConfigDialog({
               </Select>
             </div>
             <div className="flex flex-col gap-2">
-              <label className="text-sm font-medium">Métrica</label>
-              <Input {...form.register("metricKey")} placeholder="tickets.opened_resolved_by_day" />
+              <label className="text-sm font-medium">Métrica (fonte de dados)</label>
+              <SearchableCombobox
+                value={metricOptionValue}
+                onValueChange={handleMetricOptionChange}
+                options={metricOptions}
+                placeholder="Selecione uma métrica"
+                searchPlaceholder="Pesquisar por nome ou palavra-chave"
+                emptyText="Nenhuma métrica encontrada."
+                allowClear
+                className="rounded-full"
+                contentClassName="w-[420px]"
+                scrollClassName="max-h-72"
+                scrollProps={{
+                  onWheel: (event) => {
+                    event.currentTarget.scrollTop += event.deltaY
+                    event.preventDefault()
+                    event.stopPropagation()
+                  },
+                }}
+                disabled={metricOptions.length === 0}
+                renderValue={(option) =>
+                  option?.label ?? (metricKeyValue ? `Chave: ${metricKeyValue}` : undefined)
+                }
+              />
+              {selectedMetric ? (
+                <div className="rounded-xl border border-border/60 bg-muted/20 p-3 text-xs leading-relaxed text-muted-foreground">
+                  <div className="flex flex-wrap items-center justify-between gap-2 text-foreground">
+                    <span className="font-semibold">{selectedMetric.name}</span>
+                    {recommendedWidgetTitle ? (
+                      <Badge variant="outline" className="rounded-full border-border/60 bg-white px-3 py-0.5 text-[11px] font-semibold">
+                        {recommendedWidgetTitle}
+                      </Badge>
+                    ) : null}
+                  </div>
+                  <p className="mt-2 text-xs text-muted-foreground">{selectedMetric.description}</p>
+                </div>
+              ) : metricOptions.length === 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  Não há métricas disponíveis para o seu perfil de acesso.
+                </p>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  Selecione uma métrica para aplicar presets automáticos de layout e visualização.
+                </p>
+              )}
             </div>
             <div className="grid gap-4 md:grid-cols-2">
-              <SwitchField
-                label="Legend"
-                description="Mostra a legenda na visualização."
-                checked={Boolean(form.watch("legend"))}
-                onCheckedChange={(checked) => form.setValue("legend", checked)}
-              />
-              <SwitchField
-                label="Stacked"
-                description="Acumula as séries no eixo Y."
-                checked={Boolean(form.watch("stacked"))}
-                onCheckedChange={(checked) => form.setValue("stacked", checked)}
-              />
-              <SwitchField
-                label="Tooltip"
-                description="Mantém o tooltip interativo."
-                checked={Boolean(form.watch("showTooltip"))}
-                onCheckedChange={(checked) => form.setValue("showTooltip", checked)}
-              />
+              {supportsLegend ? (
+                <SwitchField
+                  label="Exibir legenda"
+                  description="Mostra os nomes das séries no gráfico."
+                  checked={Boolean(legendValue)}
+                  onCheckedChange={(checked) => form.setValue("legend", checked)}
+                />
+              ) : null}
+              {supportsStacked ? (
+                <SwitchField
+                  label="Empilhar séries"
+                  description="Acumula os valores das séries no eixo Y."
+                  checked={Boolean(stackedValue)}
+                  onCheckedChange={(checked) => form.setValue("stacked", checked)}
+                />
+              ) : null}
+              {supportsTooltip ? (
+                <SwitchField
+                  label="Tooltip interativo"
+                  description="Mantém os detalhes ao passar o cursor sobre os pontos."
+                  checked={Boolean(showTooltipValue)}
+                  onCheckedChange={(checked) => form.setValue("showTooltip", checked)}
+                />
+              ) : null}
             </div>
             <div className="flex flex-col gap-2">
-              <label className="text-sm font-medium">Override de período (opcional)</label>
+              <label className="text-sm font-medium">Período específico (opcional)</label>
               <Input
                 {...form.register("rangeOverride")}
                 placeholder="Ex.: 7d, 30d, 90d"
@@ -1344,19 +1846,31 @@ function SwitchField({
   description,
   checked,
   onCheckedChange,
+  disabled = false,
 }: {
   label: string
   description?: string
   checked: boolean
   onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
 }) {
   return (
-    <div className="flex items-center justify-between rounded-xl border border-border/60 bg-background px-3 py-2">
+    <div
+      className={cn(
+        "flex items-center justify-between gap-3 rounded-xl border border-border/60 bg-gradient-to-r from-white via-white to-primary/5 px-3 py-3 transition",
+        disabled ? "cursor-not-allowed opacity-50" : "hover:border-primary/40 hover:shadow-sm",
+      )}
+    >
       <div className="space-y-1">
         <p className="text-sm font-medium text-foreground">{label}</p>
         {description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
       </div>
-      <Checkbox checked={checked} onCheckedChange={(value) => onCheckedChange(value === true)} />
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(value) => onCheckedChange(value === true)}
+        disabled={disabled}
+        className="size-5 rounded-md border-primary/50 data-[state=checked]:bg-primary"
+      />
     </div>
   )
 }
@@ -1384,42 +1898,46 @@ function WidgetDataSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="bottom" className="max-h-[75vh] overflow-y-auto pt-10">
+      <SheetContent side="bottom" className="max-h-[80vh] overflow-y-auto bg-gradient-to-br from-background via-background to-primary/10 px-6 pb-10 pt-12 sm:px-10">
         <SheetHeader>
           <SheetTitle>Dados do widget {widget?.title ?? widget?.widgetKey}</SheetTitle>
         </SheetHeader>
         {metric.isLoading ? (
-          <div className="grid gap-2">
+          <div className="grid gap-2 pt-6">
             {Array.from({ length: 10 }).map((_, index) => (
               <Skeleton key={index} className="h-8 w-full rounded-sm" />
             ))}
           </div>
         ) : rows.length === 0 ? (
-          <p className="text-sm text-muted-foreground">Sem dados disponíveis para os filtros atuais.</p>
+          <div className="mt-6 rounded-2xl border border-dashed border-primary/40 bg-primary/5 p-8 text-center text-sm font-medium text-primary/80">
+            Sem dados disponíveis para os filtros atuais.
+          </div>
         ) : (
-          <div className="mt-4 overflow-hidden rounded-lg border border-border/60">
-            <table className="w-full text-sm">
-              <thead className="bg-muted/60">
-                <tr>
-                  {columns.map((column) => (
-                    <th key={column} className="px-3 py-2 text-left font-medium text-foreground">
-                      {column}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {rows.slice(0, 200).map((row, index) => (
-                  <tr key={index} className="border-b border-border/40">
+          <div className="mt-6 overflow-hidden rounded-2xl border border-border/60 bg-white/95 shadow-sm">
+            <div className="max-h-[360px] overflow-auto">
+              <table className="w-full text-sm">
+                <thead className="bg-muted/60">
+                  <tr>
                     {columns.map((column) => (
-                      <td key={column} className="px-3 py-2 text-muted-foreground">
-                        {renderTableCellValue(row[column])}
-                      </td>
+                      <th key={column} className="px-4 py-2 text-left font-medium text-foreground">
+                        {column}
+                      </th>
                     ))}
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {rows.slice(0, 400).map((row, index) => (
+                    <tr key={index} className="border-b border-border/40 transition hover:bg-muted/40">
+                      {columns.map((column) => (
+                        <td key={column} className="px-4 py-2 text-muted-foreground">
+                          {renderTableCellValue(row[column])}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
         )}
       </SheetContent>
diff --git a/src/components/dashboards/dashboard-list.tsx b/src/components/dashboards/dashboard-list.tsx
index 6ae934a..520335a 100644
--- a/src/components/dashboards/dashboard-list.tsx
+++ b/src/components/dashboards/dashboard-list.tsx
@@ -255,12 +255,21 @@ export function DashboardListView() {
                     <CardDescription className="line-clamp-2 text-sm">{dashboard.description}</CardDescription>
                   ) : null}
                 </CardHeader>
-                <CardContent className="space-y-1 text-sm text-muted-foreground">
-                  <p>
-                    Última atualização{" "}
-                    <span className="font-medium text-foreground">{updatedAt}</span>
-                  </p>
-                  <p>Formato {dashboard.aspectRatio} · Tema {dashboard.theme}</p>
+                <CardContent className="space-y-3 text-sm text-muted-foreground">
+                  <div className="flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-neutral-700">
+                    <span className="inline-flex size-2 rounded-full bg-emerald-500" />
+                    Atualizado {updatedAt}
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+                    <Badge variant="outline" className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-3 py-1.5 text-sm font-semibold text-neutral-700">
+                      <span className="h-2 w-2 rounded-full bg-neutral-400" />
+                      Formato {dashboard.aspectRatio}
+                    </Badge>
+                    <Badge variant="outline" className="inline-flex items-center gap-2 rounded-full border-slate-200 bg-white px-3 py-1.5 text-sm font-semibold text-neutral-700">
+                      <span className="h-2 w-2 rounded-full bg-neutral-400" />
+                      Tema {dashboard.theme}
+                    </Badge>
+                  </div>
                 </CardContent>
                 <CardFooter>
                   <Button asChild className="w-full">
diff --git a/src/components/dashboards/metric-catalog.ts b/src/components/dashboards/metric-catalog.ts
new file mode 100644
index 0000000..7e98ffb
--- /dev/null
+++ b/src/components/dashboards/metric-catalog.ts
@@ -0,0 +1,312 @@
+import type { SearchableComboboxOption } from "@/components/ui/searchable-combobox"
+
+type MetricEncoding = {
+  x?: string
+  y?: Array<{ field: string; label?: string }>
+  category?: string
+  value?: string
+  angle?: string
+  radius?: string
+}
+
+type MetricOptions = {
+  legend?: boolean
+  tooltip?: boolean
+  indicator?: "line" | "dot" | "dashed"
+  valueFormatter?: "percent"
+}
+
+type MetricAudience = "all" | "agent" | "admin"
+
+export type DashboardMetricDefinition = {
+  key: string
+  name: string
+  description: string
+  defaultTitle: string
+  recommendedWidget:
+    | "kpi"
+    | "bar"
+    | "line"
+    | "area"
+    | "pie"
+    | "radar"
+    | "gauge"
+    | "table"
+    | "text"
+  keywords?: string[]
+  encoding?: MetricEncoding
+  columns?: Array<{ field: string; label: string }>
+  stacked?: boolean
+  options?: MetricOptions
+  audience?: MetricAudience
+}
+
+export const DASHBOARD_METRIC_DEFINITIONS: DashboardMetricDefinition[] = [
+  {
+    key: "tickets.opened_resolved_by_day",
+    name: "Tickets abertos x resolvidos por dia",
+    description:
+      "Comparativo diário entre tickets abertos e resolvidos considerando os filtros globais do dashboard.",
+    defaultTitle: "Abertos x resolvidos (últimos dias)",
+    recommendedWidget: "area",
+    encoding: {
+      x: "date",
+      y: [
+        { field: "opened", label: "Abertos" },
+        { field: "resolved", label: "Resolvidos" },
+      ],
+    },
+    options: { legend: true, tooltip: true, indicator: "line" },
+    keywords: ["linha", "tendência", "evolução", "resolução", "abertos"],
+  },
+  {
+    key: "tickets.waiting_action_now",
+    name: "Tickets aguardando ação (agora)",
+    description: "Total de tickets abertos que estão aguardando ação neste instante e quantos estão fora do SLA.",
+    defaultTitle: "Tickets aguardando ação",
+    recommendedWidget: "kpi",
+    keywords: ["sla", "pendentes", "agora", "urgente"],
+  },
+  {
+    key: "tickets.waiting_action_last_7d",
+    name: "Tickets aguardando ação (últimos 7 dias)",
+    description:
+      "Volume acumulado de tickets abertos nas últimas 7 noites, com destaque para aqueles em risco de SLA.",
+    defaultTitle: "Pendências nos últimos 7 dias",
+    recommendedWidget: "kpi",
+    keywords: ["tendência", "acumulado", "últimos 7 dias", "sla"],
+  },
+  {
+    key: "tickets.open_by_priority",
+    name: "Tickets abertos por prioridade",
+    description:
+      "Distribuição de tickets abertos segmentada por prioridade durante o período selecionado.",
+    defaultTitle: "Abertos por prioridade",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "priority",
+      y: [{ field: "total", label: "Tickets" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot" },
+    keywords: ["prioridade", "backup", "distribuição"],
+  },
+  {
+    key: "tickets.open_by_queue",
+    name: "Tickets abertos por fila",
+    description: "Ranking de filas com maior volume de tickets abertos no período filtrado.",
+    defaultTitle: "Abertos por fila",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "name",
+      y: [{ field: "total", label: "Tickets abertos" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot" },
+    keywords: ["fila", "ranking", "operacional"],
+  },
+  {
+    key: "tickets.sla_compliance_by_queue",
+    name: "Cumprimento de SLA por fila",
+    description: "Percentual de atendimento dentro do SLA por fila com detalhamento de volume total.",
+    defaultTitle: "Cumprimento de SLA por fila",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "name",
+      y: [{ field: "compliance", label: "Cumprimento (%)" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot", valueFormatter: "percent" },
+    keywords: ["sla", "fila", "percentual", "qualidade"],
+  },
+  {
+    key: "tickets.sla_rate",
+    name: "Taxa geral de cumprimento de SLA",
+    description: "Percentual geral de tickets resolvidos dentro do prazo no período filtrado.",
+    defaultTitle: "Cumprimento geral de SLA",
+    recommendedWidget: "gauge",
+    keywords: ["sla", "percentual", "qualidade", "indicador"],
+  },
+  {
+    key: "tickets.awaiting_table",
+    name: "Tickets aguardando com detalhes",
+    description: "Lista dos principais tickets aguardando ação, incluindo prioridade e responsável.",
+    defaultTitle: "Detalhes das pendências",
+    recommendedWidget: "table",
+    columns: [
+      { field: "subject", label: "Assunto" },
+      { field: "priority", label: "Prioridade" },
+      { field: "status", label: "Status" },
+      { field: "updatedAt", label: "Atualizado em" },
+    ],
+    keywords: ["tabela", "lista", "pendências", "detalhes"],
+  },
+  {
+    key: "agents.self_ticket_status",
+    name: "Status dos meus tickets",
+    description: "Distribuição entre tickets abertos, pausados e resolvidos do próprio agente no período.",
+    defaultTitle: "Status dos meus tickets",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "status",
+      y: [{ field: "total", label: "Chamados" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot" },
+    keywords: ["agente", "status", "abertos", "resolvidos"],
+    audience: "agent",
+  },
+  {
+    key: "agents.self_open_total",
+    name: "Meus tickets abertos",
+    description: "Quantidade atual de tickets abertos atribuídos ao agente.",
+    defaultTitle: "Tickets abertos (meus)",
+    recommendedWidget: "kpi",
+    keywords: ["agente", "abertos", "backlog"],
+    audience: "agent",
+  },
+  {
+    key: "agents.self_paused_total",
+    name: "Meus tickets pausados",
+    description: "Quantidade de tickets pausados sob responsabilidade do agente.",
+    defaultTitle: "Tickets pausados (meus)",
+    recommendedWidget: "kpi",
+    keywords: ["agente", "pausados"],
+    audience: "agent",
+  },
+  {
+    key: "agents.self_resolved_total",
+    name: "Tickets resolvidos (meus)",
+    description: "Total de tickets resolvidos pelo agente no período selecionado.",
+    defaultTitle: "Resolvidos (meus)",
+    recommendedWidget: "kpi",
+    keywords: ["agente", "resolvidos", "produtividade"],
+    audience: "agent",
+  },
+  {
+    key: "agents.self_sla_rate",
+    name: "SLA cumprido (meus tickets)",
+    description: "Percentual de tickets do agente resolvidos dentro do SLA no período.",
+    defaultTitle: "SLA cumprido (meus)",
+    recommendedWidget: "gauge",
+    options: { valueFormatter: "percent" },
+    keywords: ["agente", "sla", "qualidade"],
+    audience: "agent",
+  },
+  {
+    key: "agents.self_avg_resolution_minutes",
+    name: "Tempo médio de resolução (meus)",
+    description: "Tempo médio de resolução, em minutos, dos tickets atribuídos ao agente no período.",
+    defaultTitle: "Tempo médio de resolução (meus)",
+    recommendedWidget: "kpi",
+    keywords: ["agente", "tempo médio", "resolução"],
+    audience: "agent",
+  },
+  {
+    key: "agents.team_overview",
+    name: "Visão geral por agente",
+    description: "Tabela com tickets abertos, pausados, resolvidos, SLA e tempo médio de resolução por agente.",
+    defaultTitle: "Visão geral dos agentes",
+    recommendedWidget: "table",
+    columns: [
+      { field: "agentName", label: "Agente" },
+      { field: "open", label: "Abertos" },
+      { field: "paused", label: "Pausados" },
+      { field: "resolved", label: "Resolvidos" },
+      { field: "slaRate", label: "SLA (%)" },
+      { field: "avgResolutionMinutes", label: "Tempo médio (min)" },
+    ],
+    keywords: ["agentes", "tabela", "produtividade"],
+    audience: "admin",
+  },
+  {
+    key: "agents.team_resolved_total",
+    name: "Tickets resolvidos por agente",
+    description: "Comparativo de tickets resolvidos por cada agente no período.",
+    defaultTitle: "Resolvidos por agente",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "agentName",
+      y: [{ field: "resolved", label: "Tickets resolvidos" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot" },
+    keywords: ["agentes", "resolvidos", "ranking"],
+    audience: "admin",
+  },
+  {
+    key: "agents.team_sla_rate",
+    name: "SLA por agente",
+    description: "Percentual de cumprimento de SLA para cada agente no período.",
+    defaultTitle: "SLA por agente",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "agentName",
+      y: [{ field: "compliance", label: "SLA (%)" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot", valueFormatter: "percent" },
+    keywords: ["agentes", "sla", "qualidade"],
+    audience: "admin",
+  },
+  {
+    key: "agents.team_avg_resolution_minutes",
+    name: "Tempo médio por agente",
+    description: "Tempo médio de resolução por agente no período.",
+    defaultTitle: "Tempo médio por agente",
+    recommendedWidget: "bar",
+    encoding: {
+      x: "agentName",
+      y: [{ field: "minutes", label: "Minutos" }],
+    },
+    options: { legend: false, tooltip: true, indicator: "dot" },
+    keywords: ["agentes", "tempo médio", "resolução"],
+    audience: "admin",
+  },
+  {
+    key: "devices.health_summary",
+    name: "Saúde dos dispositivos",
+    description: "Lista os dispositivos monitorados com status, consumo de recursos e alertas recentes.",
+    defaultTitle: "Saúde dos dispositivos",
+    recommendedWidget: "table",
+    columns: [
+      { field: "hostname", label: "Hostname" },
+      { field: "status", label: "Status" },
+      { field: "cpuUsagePercent", label: "CPU (%)" },
+      { field: "memoryUsedPercent", label: "Memória (%)" },
+      { field: "diskUsedPercent", label: "Disco (%)" },
+      { field: "alerts", label: "Alertas" },
+    ],
+    keywords: ["dispositivos", "hardware", "health"],
+    audience: "admin",
+  },
+]
+
+function normalizeRole(role?: string | null) {
+  return role?.toLowerCase() ?? null
+}
+
+function canUseMetric(definition: DashboardMetricDefinition, role?: string | null) {
+  const audience = definition.audience ?? "all"
+  const normalizedRole = normalizeRole(role)
+  if (audience === "all") return true
+  if (audience === "agent") {
+    return normalizedRole === "agent"
+  }
+  if (audience === "admin") {
+    return normalizedRole === "admin" || normalizedRole === "manager"
+  }
+  return true
+}
+
+export function getMetricOptionsForRole(role?: string | null): SearchableComboboxOption[] {
+  return DASHBOARD_METRIC_DEFINITIONS.filter((definition) => canUseMetric(definition, role)).map(
+    (definition) => ({
+      value: definition.key,
+      label: definition.name,
+      description: definition.description,
+      keywords: definition.keywords,
+    }),
+  )
+}
+
+export function getMetricDefinition(metricKey?: string | null): DashboardMetricDefinition | undefined {
+  if (!metricKey) return undefined
+  const normalized = metricKey.trim().toLowerCase()
+  if (!normalized) return undefined
+  return DASHBOARD_METRIC_DEFINITIONS.find((definition) => definition.key === normalized)
+}
diff --git a/src/components/dashboards/report-canvas.tsx b/src/components/dashboards/report-canvas.tsx
index fe1f76f..244e503 100644
--- a/src/components/dashboards/report-canvas.tsx
+++ b/src/components/dashboards/report-canvas.tsx
@@ -28,6 +28,8 @@ type PackedLayoutItem = {
   h: number
   minW?: number
   minH?: number
+  maxW?: number
+  maxH?: number
   static?: boolean
 }
 
@@ -37,6 +39,8 @@ type CanvasItem = {
   layout: PackedLayoutItem
   minW?: number
   minH?: number
+  maxW?: number
+  maxH?: number
   static?: boolean
 }
 
@@ -59,6 +63,8 @@ type InternalResizeState = {
   initialHeight: number
   minW: number
   minH: number
+  maxW: number
+  maxH: number
 }
 
 const DEFAULT_COLUMNS = 12
@@ -96,21 +102,31 @@ export function ReportCanvas({
     }
   }, [])
 
-  const columnWidth = containerWidth > 0 ? containerWidth / columns : 0
+  const columnWidth = useMemo(() => {
+    if (containerWidth <= 0 || columns <= 0) return 0
+    const totalGap = gap * (columns - 1)
+    const effective = containerWidth - totalGap
+    return effective > 0 ? effective / columns : 0
+  }, [containerWidth, columns, gap])
+  const unitColumnWidth = useMemo(() => {
+    if (columnWidth <= 0) return 0
+    return columnWidth + (columns > 1 ? gap : 0)
+  }, [columnWidth, columns, gap])
+  const unitRowHeight = useMemo(() => rowHeight + gap, [rowHeight, gap])
 
   useEffect(() => {
     if (!resizing) return
     function handlePointerMove(event: PointerEvent) {
       if (!resizing) return
-      if (!columnWidth) return
+      if (!unitColumnWidth || !unitRowHeight) return
       const deltaX = event.clientX - resizing.originX
       const deltaY = event.clientY - resizing.originY
-      const deltaCols = Math.round(deltaX / columnWidth)
-      const deltaRows = Math.round(deltaY / rowHeight)
+      const deltaCols = Math.round(deltaX / unitColumnWidth)
+      const deltaRows = Math.round(deltaY / unitRowHeight)
       let nextW = resizing.initialWidth + deltaCols
       let nextH = resizing.initialHeight + deltaRows
-      nextW = Math.min(columns, Math.max(resizing.minW, nextW))
-      nextH = Math.min(MAX_ROWS, Math.max(resizing.minH, nextH))
+      nextW = Math.min(resizing.maxW, Math.max(resizing.minW, nextW))
+      nextH = Math.min(resizing.maxH, Math.max(resizing.minH, nextH))
       const previous = lastResizeSizeRef.current
       if (!previous || previous.w !== nextW || previous.h !== nextH) {
         lastResizeSizeRef.current = { w: nextW, h: nextH }
@@ -119,8 +135,15 @@ export function ReportCanvas({
     }
     function handlePointerUp() {
       if (resizing) {
-        const finalSize = lastResizeSizeRef.current ?? { w: resizing.initialWidth, h: resizing.initialHeight }
-        onResize?.(resizing.key, finalSize, { commit: true })
+        const finalSize = lastResizeSizeRef.current ?? {
+          w: resizing.initialWidth,
+          h: resizing.initialHeight,
+        }
+        const clampedFinal = {
+          w: Math.min(resizing.maxW, Math.max(resizing.minW, finalSize.w)),
+          h: Math.min(resizing.maxH, Math.max(resizing.minH, finalSize.h)),
+        }
+        onResize?.(resizing.key, clampedFinal, { commit: true })
       }
       setResizing(null)
       lastResizeSizeRef.current = null
@@ -133,7 +156,7 @@ export function ReportCanvas({
       window.removeEventListener("pointermove", handlePointerMove)
       window.removeEventListener("pointerup", handlePointerUp)
     }
-  }, [columnWidth, onResize, resizing, rowHeight, columns])
+  }, [columns, onResize, resizing, unitColumnWidth, unitRowHeight])
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
@@ -166,6 +189,8 @@ export function ReportCanvas({
     const layout = item.layout
     const minW = item.minW ?? layout.minW ?? 2
     const minH = item.minH ?? layout.minH ?? 2
+    const maxW = item.maxW ?? layout.maxW ?? columns
+    const maxH = item.maxH ?? layout.maxH ?? MAX_ROWS
     setResizing({
       key: item.key,
       originX: event.clientX,
@@ -174,6 +199,8 @@ export function ReportCanvas({
       initialHeight: layout.h,
       minW,
       minH,
+      maxW,
+      maxH,
     })
   }
 
@@ -210,7 +237,7 @@ export function ReportCanvas({
               {editable && !item.static ? (
                 <div
                   role="presentation"
-                  className="absolute bottom-1 right-1 size-4 cursor-se-resize rounded-sm border border-border/60 bg-background/70 shadow ring-1 ring-border/40"
+                  className="absolute bottom-2 right-2 size-4 cursor-se-resize rounded-sm border border-border/60 bg-background/80 shadow ring-1 ring-border/40"
                   onPointerDown={(event) => handleResizePointerDown(event, item)}
                 />
               ) : null}
diff --git a/src/components/dashboards/widget-renderer.tsx b/src/components/dashboards/widget-renderer.tsx
index 763f059..829a796 100644
--- a/src/components/dashboards/widget-renderer.tsx
+++ b/src/components/dashboards/widget-renderer.tsx
@@ -64,6 +64,7 @@ const numberFormatter = new Intl.NumberFormat("pt-BR", { maximumFractionDigits:
 const percentFormatter = new Intl.NumberFormat("pt-BR", { style: "percent", maximumFractionDigits: 1 })
 
 const CHART_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"]
+const DEFAULT_CHART_HEIGHT = 320
 
 export type DashboardFilters = {
   range?: "7d" | "30d" | "90d" | "custom"
@@ -231,6 +232,34 @@ function parseNumeric(value: unknown): number | null {
   return null
 }
 
+type ValueFormatterKind = "number" | "percent"
+
+function formatMetricValue(value: unknown, format: ValueFormatterKind = "number") {
+  const numeric = parseNumeric(value)
+  if (numeric === null) return "—"
+  return format === "percent" ? percentFormatter.format(numeric) : numberFormatter.format(numeric)
+}
+
+function resolveChartOptions(
+  config: WidgetConfig,
+  defaults: { indicator: "line" | "dot" | "dashed" },
+): {
+  showLegend: boolean
+  showTooltip: boolean
+  indicator: "line" | "dot" | "dashed"
+  valueFormatter: ValueFormatterKind
+} {
+  const options = (config.options ?? {}) as Record<string, unknown>
+  const showLegend = options.legend !== false
+  const showTooltip = options.tooltip !== false
+  const indicator =
+    typeof options.indicator === "string" && (options.indicator === "line" || options.indicator === "dot" || options.indicator === "dashed")
+      ? (options.indicator as "line" | "dot" | "dashed")
+      : defaults.indicator
+  const valueFormatter: ValueFormatterKind = options.valueFormatter === "percent" ? "percent" : "number"
+  return { showLegend, showTooltip, indicator, valueFormatter }
+}
+
 export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }: WidgetRendererProps) {
   const config = normalizeWidgetConfig(widget)
   const widgetType = (config.type ?? widget.type ?? "text").toLowerCase()
@@ -364,13 +393,17 @@ type WidgetCardProps = {
 
 function WidgetCard({ title, description, children, isLoading }: WidgetCardProps) {
   return (
-    <Card className="h-full">
-      <CardHeader className="pb-2">
+    <Card className="group flex h-full flex-col rounded-2xl border border-border/60 bg-gradient-to-br from-white via-white to-slate-100 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-lg">
+      <CardHeader className="flex-none pb-3">
         <CardTitle className="text-base font-semibold">{title}</CardTitle>
         {description ? <CardDescription>{description}</CardDescription> : null}
       </CardHeader>
-      <CardContent className="pt-0">
-        {isLoading ? <Skeleton className="h-[220px] w-full rounded-lg" /> : children}
+      <CardContent className="flex-1 pb-4 pt-0">
+        {isLoading ? (
+          <Skeleton className="h-full min-h-[240px] w-full rounded-xl animate-pulse" />
+        ) : (
+          <div className="h-full">{children}</div>
+        )}
       </CardContent>
     </Card>
   )
@@ -396,17 +429,28 @@ function renderKpi({
   const delta = trendValue !== null ? value - trendValue : null
   const isTv = mode === "tv"
   return (
-    <Card className={cn("h-full bg-gradient-to-br", isTv ? "from-primary/5 to-primary/10" : "from-muted/50 to-muted/30")}>
-      <CardHeader className="pb-1">
+    <Card
+      className={cn(
+        "flex h-full flex-col rounded-2xl border bg-gradient-to-br shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-xl",
+        isTv ? "border-primary/50 from-primary/10 via-primary/5 to-primary/20" : "border-slate-200 from-white via-white to-slate-100"
+      )}
+    >
+      <CardHeader className="flex-none pb-1">
         <CardDescription className="text-xs uppercase tracking-wide text-muted-foreground">
           {description ?? "Indicador chave"}
         </CardDescription>
         <CardTitle className={cn("text-2xl font-semibold", isTv ? "text-4xl" : "")}>{title}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-3">
+      <CardContent className="flex-1 space-y-3">
         <div className={cn("font-semibold text-4xl", isTv ? "text-6xl" : "text-4xl")}>{numberFormatter.format(value)}</div>
         <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-          <Badge variant={atRisk > 0 ? "destructive" : "outline"} className="rounded-full px-3 py-1 text-xs">
+          <Badge
+            variant={atRisk > 0 ? "destructive" : "secondary"}
+            className={cn(
+              "rounded-full px-3 py-1 text-xs",
+              atRisk > 0 ? "" : "border-none bg-white/70 text-foreground"
+            )}
+          >
             {atRisk > 0 ? `${numberFormatter.format(atRisk)} em risco` : "Todos no prazo"}
           </Badge>
           {delta !== null ? (
@@ -442,14 +486,23 @@ function renderBarChart({
     }
     return acc
   }, {})
+  const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "dot" })
+  const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
+  const yAxisTickFormatter =
+    valueFormatter === "percent" ? (value: number) => percentFormatter.format(value) : undefined
+  const allowDecimals = valueFormatter === "percent"
 
   return (
     <WidgetCard title={title} description={description} isLoading={metric.isLoading}>
       {chartData.length === 0 ? (
         <EmptyState />
       ) : (
-        <ChartContainer config={chartConfig as ChartConfig} className="h-[260px] w-full">
-          <BarChart data={chartData}>
+        <ChartContainer
+          config={chartConfig as ChartConfig}
+          className="group/chart h-full w-full px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
+          style={{ minHeight: DEFAULT_CHART_HEIGHT }}
+        >
+          <BarChart data={chartData} accessibilityLayer>
             <CartesianGrid vertical={false} strokeDasharray="3 3" />
             <XAxis
               dataKey={xKey}
@@ -459,8 +512,18 @@ function renderBarChart({
               minTickGap={24}
               tickFormatter={formatDateLabel}
             />
-            <YAxis allowDecimals={false} />
-            <ChartTooltip content={<ChartTooltipContent />} />
+            <YAxis allowDecimals={allowDecimals} tickFormatter={yAxisTickFormatter} />
+            {showTooltip ? (
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator={indicator} valueFormatter={(value) => tooltipValueFormatter(value)} />}
+              />
+            ) : null}
+            {showLegend ? (
+              <ChartLegend
+                content={<ChartLegendContent className="flex flex-wrap justify-center gap-3 px-2 pb-1" />}
+              />
+            ) : null}
             {series.map((serie, index) => (
               <Bar
                 key={serie.field}
@@ -499,19 +562,37 @@ function renderLineChart({
     }
     return acc
   }, {})
+  const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "line" })
+  const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
+  const allowDecimals = valueFormatter === "percent"
+  const yAxisTickFormatter =
+    valueFormatter === "percent" ? (value: number) => percentFormatter.format(value) : undefined
 
   return (
     <WidgetCard title={title} description={description} isLoading={metric.isLoading}>
       {chartData.length === 0 ? (
         <EmptyState />
       ) : (
-        <ChartContainer config={chartConfig as ChartConfig} className="h-[260px] w-full">
-          <LineChart data={chartData}>
+        <ChartContainer
+          config={chartConfig as ChartConfig}
+          className="group/chart h-full w-full px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
+          style={{ minHeight: DEFAULT_CHART_HEIGHT }}
+        >
+          <LineChart data={chartData} accessibilityLayer>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey={xKey} tickFormatter={formatDateLabel} />
-            <YAxis allowDecimals />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <ChartLegend content={<ChartLegendContent />} />
+            <YAxis allowDecimals={allowDecimals} tickFormatter={yAxisTickFormatter} />
+            {showTooltip ? (
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator={indicator} valueFormatter={(value) => tooltipValueFormatter(value)} />}
+              />
+            ) : null}
+            {showLegend ? (
+              <ChartLegend
+                content={<ChartLegendContent className="flex flex-wrap justify-center gap-3 px-2 pb-1" />}
+              />
+            ) : null}
             {series.map((serie, index) => (
               <Line
                 key={serie.field}
@@ -552,14 +633,23 @@ function renderAreaChart({
     }
     return acc
   }, {})
+  const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "line" })
+  const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
+  const allowDecimals = valueFormatter === "percent"
+  const yAxisTickFormatter =
+    valueFormatter === "percent" ? (value: number) => percentFormatter.format(value) : undefined
 
   return (
     <WidgetCard title={title} description={description} isLoading={metric.isLoading}>
       {chartData.length === 0 ? (
         <EmptyState />
       ) : (
-        <ChartContainer config={chartConfig as ChartConfig} className="h-[260px] w-full">
-          <AreaChart data={chartData}>
+        <ChartContainer
+          config={chartConfig as ChartConfig}
+          className="group/chart h-full w-full px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
+          style={{ minHeight: DEFAULT_CHART_HEIGHT }}
+        >
+          <AreaChart data={chartData} accessibilityLayer>
             <defs>
               {series.map((serie, index) => (
                 <linearGradient key={serie.field} id={`fill-${serie.field}`} x1="0" y1="0" x2="0" y2="1">
@@ -570,9 +660,18 @@ function renderAreaChart({
             </defs>
             <CartesianGrid vertical={false} strokeDasharray="3 3" />
             <XAxis dataKey={xKey} tickFormatter={formatDateLabel} />
-            <YAxis />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <ChartLegend content={<ChartLegendContent />} />
+            <YAxis allowDecimals={allowDecimals} tickFormatter={yAxisTickFormatter} />
+            {showTooltip ? (
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator={indicator} valueFormatter={(value) => tooltipValueFormatter(value)} />}
+              />
+            ) : null}
+            {showLegend ? (
+              <ChartLegend
+                content={<ChartLegendContent className="flex flex-wrap justify-center gap-3 px-2 pb-1" />}
+              />
+            ) : null}
             {series.map((serie, index) => (
               <Area
                 key={serie.field}
@@ -606,6 +705,8 @@ function renderPieChart({
   const categoryKey = config.encoding?.category ?? "name"
   const valueKey = config.encoding?.value ?? "value"
   const chartData = Array.isArray(metric.data) ? (metric.data as Array<Record<string, unknown>>) : []
+  const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "dot" })
+  const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
   return (
     <WidgetCard title={title} description={description} isLoading={metric.isLoading}>
       {chartData.length === 0 ? (
@@ -617,10 +718,16 @@ function renderPieChart({
             acc[key] = { label: key, color: CHART_COLORS[index % CHART_COLORS.length] }
             return acc
           }, {}) as ChartConfig}
-          className="mx-auto aspect-square max-h-[240px]"
+          className="group/chart flex h-full w-full items-center justify-center px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
+          style={{ minHeight: DEFAULT_CHART_HEIGHT }}
         >
           <PieChart>
-            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            {showTooltip ? (
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideLabel indicator={indicator} valueFormatter={(value) => tooltipValueFormatter(value)} />}
+              />
+            ) : null}
             <Pie
               data={chartData}
               dataKey={valueKey}
@@ -633,6 +740,11 @@ function renderPieChart({
                 <Cell key={index} fill={CHART_COLORS[index % CHART_COLORS.length]} />
               ))}
             </Pie>
+            {showLegend ? (
+              <ChartLegend
+                content={<ChartLegendContent className="flex flex-wrap justify-center gap-3 px-2 pb-1" />}
+              />
+            ) : null}
           </PieChart>
         </ChartContainer>
       )}
@@ -654,6 +766,8 @@ function renderRadarChart({
   const angleKey = config.encoding?.angle ?? "label"
   const radiusKey = config.encoding?.radius ?? "value"
   const chartData = Array.isArray(metric.data) ? (metric.data as Array<Record<string, unknown>>) : []
+  const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "line" })
+  const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
   return (
     <WidgetCard title={title} description={description} isLoading={metric.isLoading}>
       {chartData.length === 0 ? (
@@ -661,13 +775,24 @@ function renderRadarChart({
       ) : (
         <ChartContainer
           config={{ [radiusKey]: { label: radiusKey, color: "var(--chart-1)" } }}
-          className="mx-auto aspect-square max-h-[260px]"
+          className="group/chart flex h-full w-full items-center justify-center px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
+          style={{ minHeight: DEFAULT_CHART_HEIGHT }}
         >
-          <RadarChart data={chartData}>
+          <RadarChart data={chartData} accessibilityLayer>
             <PolarGrid />
             <PolarAngleAxis dataKey={angleKey} />
             <PolarRadiusAxis />
-            <ChartTooltip content={<ChartTooltipContent />} />
+            {showTooltip ? (
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator={indicator} valueFormatter={(value) => tooltipValueFormatter(value)} />}
+              />
+            ) : null}
+            {showLegend ? (
+              <ChartLegend
+                content={<ChartLegendContent className="flex flex-wrap justify-center gap-3 px-2 pb-1" />}
+              />
+            ) : null}
             <Radar
               dataKey={radiusKey}
               stroke="var(--chart-1)"
@@ -699,7 +824,8 @@ function renderGauge({
     <WidgetCard title={title} description={description} isLoading={metric.isLoading}>
       <ChartContainer
         config={{ value: { label: "SLA", color: "var(--chart-1)" } }}
-        className="mx-auto aspect-square max-h-[240px]"
+        className="group/chart flex h-full w-full items-center justify-center px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
+        style={{ minHeight: DEFAULT_CHART_HEIGHT }}
       >
         <RadialBarChart
           startAngle={180}
@@ -708,7 +834,7 @@ function renderGauge({
           outerRadius={110}
           data={[{ name: "SLA", value: display }]}
         >
-            <RadialBar background dataKey="value" cornerRadius={5} fill="var(--color-value)" />
+          <RadialBar background dataKey="value" cornerRadius={5} fill="var(--color-value)" />
           <RechartsTooltip
             cursor={false}
             content={<ChartTooltipContent hideLabel valueFormatter={(val) => percentFormatter.format(Number(val ?? 0))} />}
@@ -760,27 +886,29 @@ function renderTable({
       {rows.length === 0 ? (
         <EmptyState />
       ) : (
-        <div className="overflow-hidden rounded-lg border border-border/60">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {columns.map((column) => (
-                  <TableHead key={column.field}>{column.label}</TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {rows.map((row, index) => (
-                <TableRow key={index}>
+        <div className="flex h-full min-h-[260px] flex-col overflow-hidden rounded-xl border border-border/60 bg-white/80">
+          <div className="max-h-[360px] overflow-auto">
+            <Table className="min-w-full">
+              <TableHeader>
+                <TableRow>
                   {columns.map((column) => (
-                    <TableCell key={column.field}>
-                      {renderTableCellValue(row[column.field as keyof typeof row])}
-                    </TableCell>
+                    <TableHead key={column.field}>{column.label}</TableHead>
                   ))}
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+              </TableHeader>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <TableRow key={index} className="border-b border-border/60 transition hover:bg-muted/40">
+                    {columns.map((column) => (
+                      <TableCell key={column.field}>
+                        {renderTableCellValue(row[column.field as keyof typeof row])}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
         </div>
       )}
     </WidgetCard>
@@ -833,16 +961,21 @@ function renderText({
     allowedAttributes: { span: ["style"] },
   })
   return (
-    <Card className="h-full">
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
+    <Card className="group flex h-full flex-col rounded-2xl border border-border/60 bg-gradient-to-br from-white via-white to-slate-100 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-lg">
+      <CardHeader className="flex-none">
+        <CardTitle className="text-base font-semibold">{title}</CardTitle>
         {description ? <CardDescription>{description}</CardDescription> : null}
       </CardHeader>
-      <CardContent>
-        <div
-          className="prose max-w-none text-sm leading-relaxed text-muted-foreground [&_ul]:list-disc [&_ol]:list-decimal"
-          dangerouslySetInnerHTML={{ __html: sanitized || "<p>Adicione conteúdo informativo para contextualizar os dados.</p>" }}
-        />
+      <CardContent className="flex-1 pt-0">
+        <div className="prose max-w-none rounded-xl bg-white/70 p-4 text-sm leading-relaxed text-muted-foreground shadow-inner transition group-hover:bg-white [&_ol]:list-decimal [&_ul]:list-disc">
+          <div
+            dangerouslySetInnerHTML={{
+              __html:
+                sanitized ||
+                "<p>Adicione destaques, insights ou instruções para contextualizar os dados apresentados.</p>",
+            }}
+          />
+        </div>
       </CardContent>
     </Card>
   )
@@ -850,8 +983,8 @@ function renderText({
 
 function EmptyState() {
   return (
-    <div className="flex h-[220px] w-full flex-col items-center justify-center rounded-lg border border-dashed border-border/60 text-sm text-muted-foreground">
-      Sem dados para os filtros selecionados.
+    <div className="flex h-full min-h-[160px] w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-300 bg-slate-100 px-6 text-center text-sm font-medium text-slate-700 transition hover:border-slate-400 hover:bg-slate-200/70">
+      Sem dados disponíveis para os filtros atuais.
     </div>
   )
 }
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 0fc0e46..287d515 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import type { ReactNode } from "react"
+import type { ComponentProps, ReactNode } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
@@ -15,7 +15,7 @@ interface SiteHeaderProps {
   primaryAlignment?: "right" | "center"
 }
 
-export function SiteHeader({
+function SiteHeaderBase({
   title,
   lead,
   primaryAction,
@@ -47,7 +47,7 @@ export function SiteHeaderPrimaryButton({
   children,
   className,
   ...props
-}: React.ComponentProps<typeof Button>) {
+}: ComponentProps<typeof Button>) {
   return (
     <Button size="sm" className={cn("w-full sm:w-auto", className)} {...props}>
       {children}
@@ -59,7 +59,7 @@ export function SiteHeaderSecondaryButton({
   children,
   className,
   ...props
-}: React.ComponentProps<typeof Button>) {
+}: ComponentProps<typeof Button>) {
   return (
     <Button size="sm" variant="outline" className={cn("w-full sm:w-auto", className)} {...props}>
       {children}
@@ -67,6 +67,12 @@ export function SiteHeaderSecondaryButton({
   )
 }
 
-// Backward compatibility: attach as static members (client-only usage)
-;(SiteHeader as any).PrimaryButton = SiteHeaderPrimaryButton
-;(SiteHeader as any).SecondaryButton = SiteHeaderSecondaryButton
+type SiteHeaderComponent = ((props: SiteHeaderProps) => JSX.Element) & {
+  PrimaryButton: typeof SiteHeaderPrimaryButton
+  SecondaryButton: typeof SiteHeaderSecondaryButton
+}
+
+export const SiteHeader: SiteHeaderComponent = Object.assign(SiteHeaderBase, {
+  PrimaryButton: SiteHeaderPrimaryButton,
+  SecondaryButton: SiteHeaderSecondaryButton,
+})
diff --git a/src/components/ui/searchable-combobox.tsx b/src/components/ui/searchable-combobox.tsx
index 2eb1a3b..b4d9e54 100644
--- a/src/components/ui/searchable-combobox.tsx
+++ b/src/components/ui/searchable-combobox.tsx
@@ -31,6 +31,9 @@ type SearchableComboboxProps = {
   clearLabel?: string
   renderValue?: (option: SearchableComboboxOption | null) => React.ReactNode
   renderOption?: (option: SearchableComboboxOption, active: boolean) => React.ReactNode
+  contentClassName?: string
+  scrollClassName?: string
+  scrollProps?: React.HTMLAttributes<HTMLDivElement>
 }
 
 export function SearchableCombobox({
@@ -46,6 +49,9 @@ export function SearchableCombobox({
   clearLabel = "Limpar seleção",
   renderValue,
   renderOption,
+  contentClassName,
+  scrollClassName,
+  scrollProps,
 }: SearchableComboboxProps) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState("")
@@ -103,7 +109,7 @@ export function SearchableCombobox({
           <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="z-50 w-[var(--radix-popover-trigger-width)] p-0">
+      <PopoverContent className={cn("z-50 w-[var(--radix-popover-trigger-width)] max-w-[480px] p-0", contentClassName)}>
         <div className="border-b border-border/80 p-2">
           <Input
             autoFocus
@@ -132,7 +138,10 @@ export function SearchableCombobox({
             <Separator />
           </>
         ) : null}
-        <ScrollArea className="max-h-60">
+        <ScrollArea
+          className={cn("max-h-60", scrollClassName)}
+          {...scrollProps}
+        >
           {filtered.length === 0 ? (
             <div className="px-3 py-4 text-sm text-muted-foreground">{emptyText}</div>
           ) : (
diff --git a/src/server/company-service.ts b/src/server/company-service.ts
index 3c0fabf..1e98de6 100644
--- a/src/server/company-service.ts
+++ b/src/server/company-service.ts
@@ -101,10 +101,24 @@ function isMissingProvisioningCodeColumn(error: unknown): boolean {
   return false
 }
 
+function isMissingCompanyTable(error: unknown): boolean {
+  if (error instanceof Prisma.PrismaClientKnownRequestError) {
+    if (error.code === "P2021") return true
+    const message = error.message.toLowerCase()
+    if (message.includes("table") && message.includes("company") && message.includes("does not exist")) {
+      return true
+    }
+  }
+  return false
+}
+
 export async function safeCompanyFindMany(args: Prisma.CompanyFindManyArgs): Promise<Company[]> {
   try {
     return await prisma.company.findMany(args)
   } catch (error) {
+    if (isMissingCompanyTable(error)) {
+      return []
+    }
     if (!isMissingProvisioningCodeColumn(error)) {
       throw error
     }