# Esteiras (CorePipeline)

> Quadro kanban e lista para models com etapas — filtros, inclusão, modal de ticket com abas, ações padrão de aprovação e status de trabalho, e ações próprias.

`CorePipeline` renderiza uma esteira operacional sobre uma model com campo de etapa. A regra de transição vive no backend ([central.process.json](/docs/backend/esteiras-e-processos)); a UI é a projeção.

```tsx title="frontend/src/pages/TicketsPage.tsx"
import { CorePipeline } from "@oondemand/oon-core-front";

export function TicketsPage() {
  return (
    <CorePipeline
      model="Ticket"
      label="Tickets"
      endpoint="/tickets"
      titleField="titulo"
      stageField="etapa"
      create={{ enabled: true, defaultStage: "Aberto" }}
      defaultActions={{ workStatus: false }}
      stages={[{ id: "Aberto", label: "Aberto" }, { id: "Concluido", label: "Concluído" }]}
    />
  );
}
```

## Props

| Prop | Descrição |
|---|---|
| `model`, `label`, `endpoint` | Model dos cards, título e CRUD |
| `stageField` | Campo que define a coluna/etapa |
| `stages` | Etapas fixas; se omitido, derivadas do enum de `stageField` |
| `titleField` | Campo exibido no card |
| `filters` | Mesmo contrato de filtros das coleções |
| `create` | `{ enabled, label?, initialTab?, defaultStage?, defaultValues? }` |
| `viewModes`, `defaultView` | `board` e/ou `list` |
| `list` | Colunas do modo lista |
| `form` | Overrides de campos (inclui `referenceFilters`) |
| `relations`, `ticketModal` | Modal do ticket com o mesmo contrato de abas do [detailModal](/docs/frontend/modal-de-detalhe) |
| `defaultActions` | Ações padrão (ou `false`) |
| `ticketActions` | Ações específicas do App |

## Exemplo completo

```tsx
<CorePipeline
  model="ProjetoItem"
  endpoint="/projetos-itens"
  stageField="etapa"
  titleField="nome"
  filters={[
    { field: "projetoId", label: "Projeto", type: "ref" },
    { field: "responsavelId", label: "Responsável", type: "ref" },
  ]}
  create={{ enabled: true, label: "Novo item", initialTab: "dados", defaultStage: "Pendente", defaultValues: { statusTrabalho: "Aguardando início" } }}
  viewModes={["board", "list"]}
  defaultView="board"
  list={{ columns: ["projetoId", "nome", "etapa", "responsavelId"] }}
  relations={{ pagamentos: { model: "Pagamento", foreignKey: "projetoItemId", parentKey: "_id" } }}
  ticketActions={[{
    id: "gerar-pagamento", label: "Gerar pagamento", type: "formAction",
    loadEndpoint: "/projetos-itens/:id/pagamento-pendente",
    endpoint: "/projetos-itens/:id/gerar-pagamento", method: "POST",
    fields: [
      { field: "dataPrevisaoPagamento", kind: "date", required: true },
      { field: "valor", kind: "currency", required: true },
    ],
    refresh: ["all", "pagamentos"],
  }]}
  ticketModal={{
    enabled: true, size: "full", defaultTab: "dados",
    tabs: [
      { id: "dados", label: "Dados", type: "form", groups: [{ label: "Localização", fields: ["estadoId", "cidadeId"], columns: 2 }] },
      { id: "resumo", label: "Resumo", type: "summary", cards: [{ label: "Total", source: "field", field: "total", format: "currency" }] },
      { id: "pagamentos", label: "Pagamentos", type: "relatedGrid", relation: "pagamentos", editable: true, editMode: "inline" },
    ],
  }}
/>
```

## Ações padrão

O Core habilita dois grupos quando a metadata possui os campos necessários:

- **Aprovação** — `Aprovar` move para a próxima etapa; `Recusar` retorna à anterior. Etapas negativas (`Cancelado`, `Rejeitado`) ficam fora do fluxo automático.
- **Status de trabalho** — usa `statusTrabalho` e reconhece `Aguardando início`, `Trabalhando` e `Revisar/Revisão`.

```ts
defaultActions={{ approval: true, workStatus: true, workStatusField: "statusTrabalho", excludedStages: ["Arquivado"] }}
```

Use `defaultActions={false}` para desabilitar ambos. Não repita essas ações em `ticketActions`.

## Ações próprias

| `type` | Efeito |
|---|---|
| `transition` | Atualiza o campo informado (normalmente a etapa) |
| `setField` | Atualização rápida de um campo operacional |
| `formAction` | Carrega valores (`loadEndpoint`), abre formulário e envia ao `endpoint` |
| REST / navegação | Continuam disponíveis |

`hiddenWhen`, `disabledWhen`, confirmações, permissões e `refresh` seguem o contrato de ações do Core.

## Evento para métricas

A cada ação operacional concluída o Core dispara o evento de navegador `oon:pipeline-action` com tipo, registro, campo, valor anterior, valor seguinte e horário — base para SLA, tempo por atividade e produtividade.

```ts
window.addEventListener("oon:pipeline-action", (event) => {
  console.info((event as CustomEvent).detail);
});
```

## Como view declarativa

```tsx
import { definePipelineView } from "@oondemand/oon-core-front";

ui: { views: [definePipelineView({ model: "Ticket", label: "Tickets", path: "/tickets", stageField: "etapa" })] }
```

Fonte: https://sdk.oonapps.com/docs/frontend/esteiras