{"id":"repo/workflow-system","source":"repo","sourceLabel":"repository root","sourcePath":"WORKFLOW_SYSTEM.md","routePath":"/fastapp/public-docs/page/repo/workflow-system","rawPath":"/fastapp/public-docs/raw/repo/workflow-system","slug":["repo","workflow-system"],"slugPath":"repo/workflow-system","title":"🔄 Sistema de Workflow (Human Led) — Manual Técnico","description":"O Sistema de Workflow do Fastapp permite a modelagem, visualização e monitoramento de processos manuais conduzidos por humanos. Ele é integrado ao Core para permitir que a interface se adapte ao estado atual de cada registro transacional.","headings":["🔄 Sistema de Workflow (Human Led) — Manual Técnico","🧬 1. Anatomia do Metadado (DNA)","Interface: WorkflowDefinition","Interface: WorkflowStep","🎨 2. Visualização e Studio","Tecnologias Utilizadas","Comportamento de Navegação","🔄 3. Governança FADAP","🛠️ 4. Como Adicionar um Workflow","Exemplo de Payload via Meta API (App ID 19)","🚀 5. Roadmap e Integrações Futuras"],"wordCount":456,"markdown":"# 🔄 Sistema de Workflow (Human-Led) — Manual Técnico\r\n\r\nO Sistema de Workflow do Fastapp permite a modelagem, visualização e monitoramento de processos manuais conduzidos por humanos. Ele é integrado ao Core para permitir que a interface se adapte ao estado atual de cada registro transacional.\r\n\r\n---\r\n\r\n## 🧬 1. Anatomia do Metadado (DNA)\r\n\r\nOs fluxos de trabalho são definidos no nível de **App** através do array `workflows`.\r\n\r\n### Interface: `WorkflowDefinition`\r\nLocalizada em `app/fastapp/manifest.ts`.\r\n\r\n- **id**: Identificador único do fluxo (slug).\r\n- **label**: Nome de exibição.\r\n- **description**: Detalhamento do propósito do fluxo.\r\n- **icon**: Ícone do PrimeIcons (pi pi-...).\r\n- **steps**: Coleção de etapas que compõem o fluxo.\r\n\r\n### Interface: `WorkflowStep`\r\nDefine cada \"estação\" de trabalho no fluxo:\r\n\r\n- **id**: ID do passo (ex: `separacao_estoque`).\r\n- **label**: Nome da etapa (ex: \"Separação\").\r\n- **object**: Nome do objeto transacional governado (ex: `pedido`).\r\n- **tone**: Acento visual para o nó no canvas (`emerald`, `cyan`, `amber`, `violet`).\r\n- **pool_workers**: Métrica visual de capacidade (ex: `12` workers operando nesta fase).\r\n- **position**: Coordenadas `{ x, y }` para o posicionamento no Vue Flow.\r\n- **ui_config**: Configuração de interface para esta etapa.\r\n    - **view_mode**: Modo de visualização (`form`, `list`, `kanban`).\r\n    - **visible_fields**: Array de campos do objeto que devem ser exibidos/editáveis nesta etapa.\r\n    - **action_label**: Nome do botão de transição (ex: \"Confirmar Entrega\").\r\n- **next_step**: ID da próxima etapa (ou array de IDs para ramificações).\r\n\r\n---\r\n\r\n## 🎨 2. Visualização e Studio\r\n\r\nA visualização ocorre na página `/fastapp/workflows`.\r\n\r\n### Tecnologias Utilizadas\r\n- **Vue Flow**: Biblioteca base para o canvas de grafos.\r\n- **Componentes Customizados**:\r\n    - `wf-step`: Nó customizado que renderiza os metadados da etapa em um card premium com blur e tons dinâmicos.\r\n- **Tone Accents**: Sistema de cores consistente para estados do fluxo.\r\n\r\n### Comportamento de Navegação\r\n- O Studio detecta o `app_id` na URL e carrega os fluxos correspondentes do `systemStore`.\r\n- A sidebar permite trocar entre fluxos da mesma aplicação.\r\n- O canvas é interativo, permitindo zoom e movimentação (embora a persistência da posição dependa de um novo Snapshot).\r\n\r\n---\r\n\r\n## 🔄 3. Governança FADAP\r\n\r\nO Sistema de Workflow segue rigorosamente o Protocolo FADAP v3:\r\n\r\n1.  **Edição**: As alterações ocorrem via `PATCH /api/app/[id]`.\r\n2.  **Snapshot**: O estado dos fluxos é consolidado no `static-manifest.ts`.\r\n3.  **Persistência**: Os dados residem na coluna `workflows` (JSONB) da tabela `app`.\r\n\r\n---\r\n\r\n## 🛠️ 4. Como Adicionar um Workflow\r\n\r\n### Exemplo de Payload via Meta-API (App ID 19)\r\n\r\n```json\r\n{\r\n  \"workflows\": [\r\n    {\r\n      \"id\": \"venda_filtros\",\r\n      \"label\": \"Venda de Filtros\",\r\n      \"steps\": [\r\n        {\r\n          \"id\": \"lead\",\r\n          \"label\": \"Qualificação\",\r\n          \"object\": \"cliente\",\r\n          \"tone\": \"cyan\",\r\n          \"position\": { \"x\": 10, \"y\": 10 },\r\n          \"ui_config\": {\r\n             \"view_mode\": \"form\",\r\n             \"visible_fields\": [\"nome\", \"segmento\"],\r\n             \"action_label\": \"Validar Lead\"\r\n          },\r\n          \"next_step\": \"proposta\"\r\n        }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🚀 5. Roadmap e Integrações Futuras\r\n\r\n- **Dynamic Field Filtering**: O `CoreDynamicForm` utilizará o array `visible_fields` do passo atual do workflow para esconder campos irrelevantes automaticamente.\r\n- **Workflow State Management**: Uma propriedade no objeto (ex: `status`) marcada com `workflow_state: true` servirá de ponte para mover os registros entre as etapas do Studio.\r\n- **Trigger Actions**: Execução de fluxos externos (n8n, webhook) ao completar uma etapa.\r\n\r\n---\r\n*Fastapp Engine — Automação de Processos Human-Led.*\r\n"}