MockPreTrade

Validação de enquadramento pré-trade para FIDCs. Regras de limite, concentração e compliance.

Visão Geral

O MockPreTrade simula uma tela de validação pré-trade para operações de FIDC, com regras de enquadramento, barras de progresso e resultado final. Específico para o setor financeiro.

Importação

import { MockPreTrade, demoPreTradeData } from '@/components/linear/mock-pre-trade'

Props

Prop	Tipo	Default	Descrição
`fundName`	`string`	—	Nome do fundo
`operationType`	`string`	—	Tipo da operação
`amount`	`string`	—	Valor da operação
`rules`	`ValidationRule[]`	—	Regras de validação
`result`	`Result`	—	Resultado final
`message`	`string`	—	Mensagem adicional
`className`	`string`	—	Classes adicionais

ValidationRule

interface ValidationRule {
  id: string;
  name: string;
  status: 'ok' | 'warning' | 'error' | 'pending';
  value?: string;       // Valor atual
  limit?: string;       // Limite máximo
  percentage?: number;  // Porcentagem de uso (0-100)
}

Result

type Result = 'approved' | 'pending' | 'rejected'

Uso Básico

<MockPreTrade
  {...demoPreTradeData}
  className="h-[500px]"
/>

Dados de Demo

export const demoPreTradeData = {
  fundName: 'FIDC Gestora Z',
  operationType: 'Cessão de crédito — R$ 450.000',
  amount: 'R$ 450.000',
  rules: [
    { id: '1', name: 'Limite por cedente', status: 'ok', value: '66%', limit: '100%', percentage: 66 },
    { id: '2', name: 'Concentração por sacado', status: 'warning', value: '38%', limit: '40%', percentage: 95 },
    { id: '3', name: 'Rating dos sacados', status: 'ok' },
    { id: '4', name: 'Prazo máximo', status: 'ok', value: '45d', limit: '90d', percentage: 50 },
    { id: '5', name: 'Subordinação', status: 'ok', value: '21.4%', limit: '20% mín', percentage: 70 },
    { id: '6', name: 'Documentação', status: 'error' },
  ],
  result: 'pending',
  message: 'CND vence em 3 dias. Cedente notificado automaticamente.',
}

Status das Regras

Status	Ícone	Cor	Significado
`ok`	Check	Verde	Regra aprovada
`warning`	Alerta	Âmbar	Próximo do limite
`error`	X	Vermelho	Regra violada
`pending`	Spinner	Cinza	Validando

Barra de Progresso

Regras com percentage exibem barra visual:

{
  name: 'Concentração por sacado',
  status: 'warning',
  value: '38%',
  limit: '40%',
  percentage: 95,  // 95% do limite
}

Cores da barra:

< 70%: Verde
70-90%: Âmbar
> 90%: Vermelho

Resultados

Result	Badge	Cor
`approved`	APROVADO	Verde
`pending`	PENDENTE	Âmbar
`rejected`	REJEITADO	Vermelho

Features Visuais

Ícone de validação
Título "Pré-Trade — Validação de Enquadramento"

Info da Operação

Nome do fundo
Tipo de operação
Valor em destaque (primary)

Lista de Regras

Cards com status
Valor atual vs limite
Barra de progresso quando aplicável

Rodapé

Badge de resultado
Botões de ação (Aprovar quando regularizado, Cancelar)
Mensagem informativa

Exemplo Customizado

import { MockPreTrade } from '@/components/linear/mock-pre-trade'

const data = {
  fundName: 'FIDC Multicred',
  operationType: 'Aquisição de direitos creditórios',
  amount: 'R$ 1.200.000',
  rules: [
    { id: '1', name: 'PDD mínima', status: 'ok' as const, value: '5.2%', limit: '5% mín', percentage: 52 },
    { id: '2', name: 'Rating cedente', status: 'ok' as const },
    { id: '3', name: 'Lastro documentado', status: 'ok' as const },
  ],
  result: 'approved' as const,
}

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

Com BentoCard

<BentoCard
  title="Validação Pré-Trade"
  description="Enquadramento automático em tempo real"
  colSpan={2}
>
  <MockPreTrade {...demoPreTradeData} />
</BentoCard>