MockIssueView

Detalhe de issue/tarefa estilo Linear com histórico de atividades e sidebar de metadados.

Visão Geral

O MockIssueView simula a visualização detalhada de uma issue estilo Linear, com título, descrição, histórico de atividades (comentários, ações do agente) e sidebar com metadados.

Importação

import { MockIssueView, demoIssueActivity } from '@/components/linear/mock-issue-view'

Props

Prop	Tipo	Default	Descrição
`issueId`	`string`	—	ID da issue (ex: "REC-847")
`title`	`string`	—	Título da issue
`description`	`string`	—	Descrição detalhada
`status`	`Status`	—	Status atual
`priority`	`Priority`	—	Prioridade
`assignee`	`string`	—	Responsável
`labels`	`IssueLabel[]`	`[]`	Labels da issue
`activity`	`ActivityItem[]`	—	Histórico de atividades
`className`	`string`	—	Classes adicionais

Status

type Status = 'backlog' | 'todo' | 'in_progress' | 'done'

Priority

type Priority = 'urgent' | 'high' | 'medium' | 'low' | 'none'

IssueLabel

interface IssueLabel {
  text: string;
  color: string;
}

ActivityItem

interface ActivityItem {
  id: string;
  type: 'created' | 'comment' | 'status' | 'agent';
  author: string;
  authorColor?: string;
  content: string;
  time: string;
  meta?: string;  // Para 'created': origem da criação
}

Uso Básico

<MockIssueView
  issueId="REC-847"
  title="Resolver divergência Ambev (23 caixas)"
  description="NF 8847 apresentou divergência de 23 caixas Brahma 300ml. Canhoto bloqueado até resolução."
  status="in_progress"
  priority="high"
  assignee="Patricia"
  labels={[
    { text: 'Recebimento', color: '#E5484D' },
    { text: 'Urgente', color: '#F5A623' },
  ]}
  activity={demoIssueActivity}
/>

Tipos de Atividade

Criação (`type: 'created'`)

Ícone de relógio
Texto: "{author} criou a tarefa via {meta}"
Meta indica origem (app, slack, email)

Comentário (`type: 'comment'`)

Avatar com inicial colorida
Nome e timestamp
Conteúdo do comentário

Agente AI (`type: 'agent'`)

Avatar gradiente primary → roxo
Ícone de estrela
Conteúdo em card com fonte mono
Ideal para logs estruturados

Dados de Demo

export const demoIssueActivity: ActivityItem[] = [
  {
    id: '1',
    type: 'created',
    author: 'kodda',
    content: '',
    time: '3min atrás',
    meta: 'app de conferência',
  },
  {
    id: '2',
    type: 'comment',
    author: 'joao',
    authorColor: '#E5484D',
    content: 'Conferi a carga da Ambev agora. NF diz 150 caixas...',
    time: '2 min atrás',
  },
  {
    id: '3',
    type: 'agent',
    author: 'kodda AI',
    content: `Ocorrência registrada automaticamente:

📋 NF 8847 — Ambev Distribuição
📦 Esperado: 150 cx Brahma 300ml
📦 Recebido: 127 cx
⚠️ Divergência: 23 caixas (R$ 1.840)

✓ Canhoto bloqueado até resolução
✓ Comercial notificado (Lucas)`,
    time: 'agora',
  },
]

Features Visuais

ID da issue em fonte mono
Ícone de estrela
Separador visual

Conteúdo Principal

Título grande
Descrição em muted
Lista de atividades

Status com indicador colorido
Prioridade com barras visuais
Avatar do responsável
Labels coloridas

Status Disponíveis

Status	Label	Cor
`backlog`	Backlog	Cinza
`todo`	A Fazer	Cinza claro
`in_progress`	Em Progresso	Amarelo
`done`	Concluído	Verde

Prioridades

Priority	Label	Cor
`urgent`	Urgente	Vermelho
`high`	Alta	Laranja
`medium`	Média	Amarelo
`low`	Baixa	Azul
`none`	Sem prioridade	Cinza

Exemplo Customizado

import { MockIssueView } from '@/components/linear/mock-issue-view'

const activity = [
  {
    id: '1',
    type: 'created' as const,
    author: 'sistema',
    content: '',
    time: '1h atrás',
    meta: 'alerta automático',
  },
  {
    id: '2',
    type: 'agent' as const,
    author: 'kodda AI',
    content: `Análise concluída:

• Causa raiz identificada: erro de digitação na NF
• Ação recomendada: contato com fornecedor
• Prazo estimado: 2h`,
    time: '30min atrás',
  },
]

export function Demo() {
  return (
    <MockIssueView
      issueId="BUG-123"
      title="Erro no processamento de NF"
      description="Sistema retornou erro ao processar NF 12345"
      status="in_progress"
      priority="high"
      assignee="Carlos"
      labels={[{ text: 'Bug', color: '#E5484D' }]}
      activity={activity}
    />
  )
}

Com BentoCard

<BentoCard
  title="Gestão de Ocorrências"
  description="Issues criadas automaticamente pelo agente"
  colSpan={2}
>
  <MockIssueView
    issueId="REC-847"
    title="Divergência Ambev"
    description="..."
    status="in_progress"
    priority="high"
    activity={demoIssueActivity}
  />
</BentoCard>