MockDashboard

Visão Geral

O MockDashboard simula um painel gerencial completo, com métricas em grid, gráfico de barras e painel de chat com agente AI. Ideal para demonstrar agentes de consultas gerenciais.

Importação

import { MockDashboard, demoDashboardData } from '@/components/linear/mock-dashboard'

Props

Prop	Tipo	Default	Descrição
`title`	`string`	`'Dashboard'`	Título do painel
`subtitle`	`string`	—	Subtítulo opcional
`metrics`	`MetricCard[]`	—	Cards de métricas
`chatMessages`	`ChatMessage[]`	`[]`	Mensagens do chat AI
`className`	`string`	—	Classes adicionais

MetricCard

interface MetricCard {
  label: string;
  value: string;
  change?: string;
  changeType?: 'positive' | 'negative' | 'neutral';
  icon?: 'chart' | 'users' | 'clock' | 'check';
}

ChatMessage

interface ChatMessage {
  id: string;
  isAI: boolean;
  content: string;
  time?: string;
}

Uso Básico

<MockDashboard
  {...demoDashboardData}
  className="h-96"
/>

Dados de Demo

export const demoDashboardData = {
  title: 'Consultas Gerenciais',
  subtitle: 'Visão executiva em tempo real',
  metrics: [
    {
      label: 'Visualizações',
      value: '192',
      change: '+12%',
      changeType: 'positive',
      icon: 'chart',
    },
    {
      label: 'Conclusão',
      value: '70%',
      change: '+5%',
      changeType: 'positive',
      icon: 'check',
    },
    {
      label: 'Tempo Médio',
      value: '4.2min',
      change: '-15%',
      changeType: 'positive',
      icon: 'clock',
    },
    {
      label: 'Ativos',
      value: '847',
      change: '—',
      changeType: 'neutral',
      icon: 'users',
    },
  ],
  chatMessages: [
    { id: '1', isAI: false, content: 'Faturamento do mês passado?' },
    { id: '2', isAI: true, content: 'R$ 2.4M total. Sudeste: 45%, Sul: 28%.', time: '2s' },
    { id: '3', isAI: false, content: 'E vs ano anterior?' },
    { id: '4', isAI: true, content: '+18% YoY. Norte +34%, Sudeste +22%.', time: 'agora' },
  ],
}

Features Visuais

Grid de Métricas

4 cards em grid 2x2 com:

Label uppercase pequeno
Valor grande em destaque
Variação colorida (verde/vermelho/neutro)
Ícone opcional

Gráfico de Evolução

Gráfico de barras simplificado mostrando evolução mensal com duas séries (Tarefas e Conclusões).

Chat AI Lateral

Painel lateral (visível apenas em desktop) com histórico de perguntas e respostas do agente.

Ícones Disponíveis

chart — Gráfico de linha
users — Pessoas
clock — Relógio
check — Check em círculo

Exemplo Customizado

import { MockDashboard } from '@/components/linear/mock-dashboard'

const myData = {
  title: 'Vendas',
  subtitle: 'Última atualização: agora',
  metrics: [
    {
      label: 'Receita',
      value: 'R$ 1.2M',
      change: '+8%',
      changeType: 'positive' as const,
      icon: 'chart' as const,
    },
    {
      label: 'Pedidos',
      value: '847',
      change: '+23%',
      changeType: 'positive' as const,
      icon: 'check' as const,
    },
  ],
  chatMessages: [
    { id: '1', isAI: false, content: 'Qual o ticket médio?' },
    { id: '2', isAI: true, content: 'R$ 1.416. +12% vs mês passado.', time: '1s' },
  ],
}

export function Demo() {
  return <MockDashboard {...myData} className="h-80" />
}

Responsividade

Mobile: Chat lateral oculto, apenas métricas e gráfico
Desktop (md+): Layout completo com chat lateral de 288px

Com BentoCard

<BentoCard
  title="Consultas Gerenciais"
  description="Pergunte ao agente sobre métricas em linguagem natural"
  colSpan={2}
>
  <MockDashboard {...demoDashboardData} />
</BentoCard>

On this page