MockCRM

Pipeline de CRM com leads, stats, progresso de onboarding e painel de alertas de documentação.

Visão Geral

O MockCRM simula um sistema de CRM/pipeline com estatísticas, lista de leads com progresso, e painel lateral de alertas. Ideal para demos de gestoras, fintechs e áreas comerciais.

Importação

import { MockCRM, demoCRMData } from '@/components/linear/mock-crm'

Props

Prop	Tipo	Default	Descrição
`title`	`string`	`'CRM — Gestão de Leads'`	Título do painel
`leads`	`Lead[]`	—	Lista de leads
`stats`	`PipelineStats`	—	Estatísticas do pipeline
`alerts`	`Alert[]`	`[]`	Alertas de documentação
`className`	`string`	—	Classes adicionais

Lead

interface Lead {
  id: string;
  name: string;
  cnpj: string;
  status: 'prospect' | 'docs_pending' | 'analysis' | 'approved' | 'active';
  progress: number;        // 0-100
  assignee: string;
  assigneeColor: string;
  pendingDocs?: number;
  lastActivity: string;
}

PipelineStats

interface PipelineStats {
  total: number;
  prospects: number;
  pending: number;
  approved: number;
  active: number;
}

Alert

interface Alert {
  id: string;
  type: 'doc_missing' | 'doc_expiring' | 'awaiting_signature';
  message: string;
  leadName: string;
}

Uso Básico

<MockCRM
  {...demoCRMData}
  className="h-[450px]"
/>

Dados de Demo

export const demoCRMData = {
  stats: {
    total: 156,
    prospects: 42,
    pending: 28,
    approved: 45,
    active: 41,
  },
  leads: [
    {
      id: '1',
      name: 'Distribuidora Norte',
      cnpj: '33.536.160/0001-09',
      status: 'docs_pending',
      progress: 45,
      assignee: 'Maria',
      assigneeColor: '#E5484D',
      pendingDocs: 3,
      lastActivity: '2h',
    },
    // ...
  ],
  alerts: [
    {
      id: '1',
      type: 'doc_missing',
      message: 'Contrato social',
      leadName: 'Dist. Norte',
    },
    // ...
  ],
}

Status dos Leads

Status	Label	Cor
`prospect`	Prospecção	Azul
`docs_pending`	Docs Pendentes	Âmbar
`analysis`	Em Análise	Roxo
`approved`	Aprovado	Verde
`active`	Ativo	Primary

Tipos de Alerta

Type	Ícone	Cor	Significado
`doc_missing`	📄	Vermelho	Documento faltando
`doc_expiring`	⏰	Âmbar	Documento vencendo
`awaiting_signature`	✍️	Azul	Aguardando assinatura

Features Visuais

Ícone de grupo
Título do CRM
Botão "+ Novo Lead"

Stats Bar

5 cards com totais por status
Cores correspondentes ao status

Busca

Campo de busca por nome ou CNPJ

Cards de Lead

Nome e CNPJ
Badge de status
Barra de progresso
Avatar do responsável
Badge de docs pendentes
Tempo desde última atividade

Lista de alertas pendentes
Contador total
Ícones por tipo
Link "Ver todos"

Exemplo Customizado

import { MockCRM } from '@/components/linear/mock-crm'

const data = {
  stats: {
    total: 50,
    prospects: 15,
    pending: 10,
    approved: 12,
    active: 13,
  },
  leads: [
    {
      id: '1',
      name: 'Empresa ABC',
      cnpj: '12.345.678/0001-90',
      status: 'prospect' as const,
      progress: 20,
      assignee: 'João',
      assigneeColor: '#3E63DD',
      lastActivity: '1h',
    },
  ],
  alerts: [
    {
      id: '1',
      type: 'doc_expiring' as const,
      message: 'CNPJ vence em 7d',
      leadName: 'Empresa ABC',
    },
  ],
}

export function Demo() {
  return <MockCRM {...data} />
}

Com BentoCard

<BentoCard
  title="Pipeline de Cedentes"
  description="Acompanhe o onboarding de novos cedentes"
  colSpan={2}
>
  <MockCRM {...demoCRMData} />
</BentoCard>