Z-Field

┌─────────────── Z-FIELD ──────────────┐
│                                       │
│  📋 Construtor de Formulários         │
│      ├─ Campos (20+ tipos)            │
│      ├─ Regras condicionais           │
│      ├─ Grupos e seções               │
│      └─ Variáveis dinâmicas           │
│                                       │
│  📱 App de Preenchimento (PWA)        │
│      ├─ Online + Offline (fila)       │
│      ├─ Câmera + GPS + Voz            │
│      ├─ IA → preenche por mim         │
│      └─ White-label do cliente        │
│                                       │
│  📊 Resultados                        │
│      ├─ Tabela + filtros              │
│      ├─ Dashboard por formulário      │
│      ├─ Estatísticas                  │
│      └─ Export Excel / PDF            │
│                                       │
│  🌐 Form Público                      │
│      └─ Link sem login (pesquisa,    │
│         cadastro externo, NPS)        │
└───────────────────────────────────────┘

4.1. Construtor visual de formulários

• Onde: /forms/create ou editor de formulário existente em /forms/:id.
• O que faz: monta o formulário arrastando campos para a área de trabalho. Cada campo tem:
• rótulo, descrição, ajuda;
• obrigatório / opcional;
• máscara, validação, valor padrão;
• regra condicional baseada em outro campo;
• grupo (organização visual) e seção (passos).
• Dica: comece sempre pelos campos obrigatórios principais. Adicione regras condicionais por último para não embaralhar.

4.2. Tipos de campo (catálogo)

4.3. Preenchimento por voz (IA)

• Onde: botão de microfone no preenchimento (/forms/:id/fill).
• Como funciona: componente AIFormFillButtons chama aiResponseService.fillFormWithAudio enviando o áudio para o backend. A IA transcreve E interpreta — devolve um JSON com { campo: valor } para cada campo identificado.
• Quando usar: quando o operador está com as mãos ocupadas, dirigindo, em altura, dentro de EPI completo.
• Dica: treine o operador a falar usando o nome dos campos ("temperatura ambiente: 24 graus; status do equipamento: operacional; observações: ruído anormal no compressor").

4.4. Preenchimento por foto (IA)

• Onde: botão de câmera no preenchimento.
• Como funciona: o operador tira foto de um documento, placa, etiqueta, cena. A IA aplica visão computacional e preenche os campos correspondentes.
• Casos clássicos: ler placa de veículo, ler nota fiscal, ler etiqueta de patrimônio, ler hodômetro, identificar componentes em uma cena.

4.5. Modo offline real

• Como funciona: PWA com cache local. Respostas em construção ficam em localStorage; ao enviar sem rede, a resposta entra em fila e é despachada automaticamente quando volta a conexão.
• Onde ver pendências: /cache-responses.
• Dica: ensine o operador a observar o ícone de status de conexão antes de fechar o navegador. Nada se perde, mas a confiança é maior quando ele vê o envio confirmado.

4.6. EXIF + GPS forense

• O que faz: quando a foto é enviada, o sistema lê os metadados EXIF (coordenadas, data/hora, câmera, lente). Esses metadados ficam na resposta — não dá pra trocar por foto antiga.
• Por que é diferencial: em auditoria, perícia ou disputa, a foto vira evidência. O concorrente que só guarda a imagem perde esse ativo.

4.7. Detecção facial

• Componente: FaceDetectionCamera.
• Caso de uso: selfie de início de turno, ponto, check-in de visita. Garante que é a pessoa certa, sem app externo.

4.8. Formulário público (link aberto)

• URL gerada: /p/:formId.
• Quando usar: NPS, cadastro de visitante, pesquisa de fornecedor, denúncia anônima.
• Cuidado: ative captcha/limite de IP nos formulários sensíveis.

4.9. Cache de respostas (rascunho)

• Onde: /cache-responses.
• Para que: retomar um preenchimento longo onde parou. Evitar perda quando o app fecha sozinho.

4.10. CSV Import

• Componente: CSVImportDialog.
• Caso de uso: popular respostas em lote a partir de um sistema legado.

4.11. Resultados, estatísticas e dashboards

• Tabela: /forms/:id/results — todas as respostas, filtros, busca, ordenação, export Excel/PDF.
• Detalhe da resposta: /forms/:id/results/:responseId — campos preenchidos, fotos com mapa, histórico de edição.
• Estatísticas: /forms/:id/dashboard e /forms/stats — gráficos pré-montados (volume por dia, por usuário, por unidade, distribuição de valores).
• Agente do formulário: /forms/:id/agent — perguntas em linguagem natural sobre todas as respostas daquele formulário.

[ Gestor cria formulário ]
        │
        ▼
[ Publica para grupo / cargo / usuário ]
        │
        ▼
[ Operador abre PWA no celular ]
        │
        ├─ Online → preenche e envia → dado em segundos
        │
        └─ Offline → preenche → cache → envia ao voltar
                       │
                       ▼
              [ EXIF + GPS gravados na foto ]
                       │
                       ▼
              [ Resposta estruturada ]
                       │
        ┌──────────────┼──────────────┬───────────────┐
        ▼              ▼              ▼               ▼
   [Z-Flow inicia] [Score pontua] [Dashboard atualiza] [Z-IA roda agente]

Cenário A — Inspeção de equipamento industrial

Persona: Carlos, técnico de manutenção. Problema: precisa registrar leituras de 12 pontos por máquina, anexar 3 fotos, marcar localização e anotar observação. Fazia no papel + foto no WhatsApp. Com Z-Field:

1. Abre o PWA "Manutenção Acme" no celular.
2. Toca em "Nova inspeção de equipamento".
3. Lê QR Code da máquina → formulário pré-preenche código e localização.
4. Preenche as 12 leituras falando (botão microfone).
5. Tira 3 fotos — sistema captura GPS automaticamente.
6. Envia. Dado vai pro dashboard do gestor em segundos.

Resultado: tempo de 25 min → 6 min por máquina. Foto sem dúvida geográfica. Dashboard pronto pra reunião do dia seguinte.

Cenário B — Auditoria de loja em rede de franquias

Persona: Marina, auditora regional. Problema: visita 8 lojas por semana, mesmo checklist de 40 itens, foto por seção. Com Z-Field: abre o app, escolhe a loja (autocomplete via fonte SQL do ERP), atravessa as 40 perguntas com fotos. Cada não-conformidade dispara automaticamente uma ação no Z-Flow para o gerente da loja resolver.

Cenário C — Cadastro público de fornecedor

Persona: José, fornecedor candidato. Problema: quer se cadastrar na empresa cliente, mas não tem login. Com Z-Field: recebe o link /p/cadastro-fornecedor, preenche pelo celular, anexa CNPJ e contrato. Resposta cai no Z-Flow para o time de compras analisar.

7.1. Pitch 5 minutos

7.2. Apresentação 15 minutos

Objetivos de aprendizagem

Ao final, o aluno deve ser capaz de:

• Criar um formulário com 8+ tipos de campo e 2 regras condicionais.
• Preencher pelo celular usando voz e foto.
• Interpretar o detalhe da resposta com GPS e EXIF.
• Exportar resultados em Excel.
• Publicar um formulário público.

Agenda

Exercício 1 — Crie um formulário "Inspeção diária de veículo"

• Campos obrigatórios: Placa (texto), Quilometragem (número), Foto frontal (câmera), Foto hodômetro (câmera), Avarias (multi-select com 6 opções), Observações (textarea), Assinatura do motorista.
• Regra condicional: se "Avarias" tiver qualquer opção marcada, exigir foto extra.
• Critério de sucesso: formulário publicado e acessível via link.

Exercício 2 — Preencha 2 respostas e analise

• Preencha 1 resposta normalmente.
• Preencha 1 resposta usando o microfone (voz → IA).
• Abra a tabela de resultados, filtre por placa, exporte em Excel.
• Abra o detalhe da resposta com foto e identifique as coordenadas no mapa.

Exercício 3 — Form público + dashboard

• Publique o formulário como público.
• Compartilhe o link com o colega ao lado.
• Após 3 respostas chegarem, abra o dashboard do formulário e identifique o pico de respostas.

Quiz (10 perguntas)

1. Qual o tipo de campo certo para ler um patrimônio etiquetado?
2. Como garantir que a foto tem GPS?
3. O que acontece se o operador preenche offline?
4. Onde está o rascunho de uma resposta interrompida?
5. Qual a URL de um formulário público?
6. Qual a diferença entre regra condicional e validação?
7. Como o agente do formulário responde perguntas?
8. Que tipo de campo tem detecção facial?
9. Como exportar respostas em Excel?
10. Em qual módulo a resposta vira tarefa rastreável? (resposta: Z-Flow)

Setup inicial (primeira semana)

• [ ] Cadastrar logo, cor e nome da empresa em /settings (white-label).
• [ ] Criar os 3 formulários principais do negócio.
• [ ] Definir grupos e cargos que vão preencher cada formulário.
• [ ] Testar preenchimento em iOS + Android.
• [ ] Validar instalação do PWA no celular dos operadores.
• [ ] Habilitar IA por áudio/imagem no formulário (respondWithAudio, respondWithImage).

Revisão trimestral

• [ ] Quais campos têm taxa de "vazio" alta? Revisar obrigatoriedade.
• [ ] Quais formulários têm tempo médio de preenchimento alto? Considerar quebra em seções.
• [ ] Existem formulários inativos? Arquivar.
• [ ] As regras condicionais estão fazendo sentido para o operador?

Pode preencher offline? Sim. Cache local, fila de envio, retomada automática.

O dado fica seguro quando offline? Fica em localStorage do dispositivo. Recomenda-se sincronizar pelo menos 1× por turno.

Posso colocar regra "se A = X, mostrar B"? Sim — regras condicionais visuais. O construtor mostra preview.

Quantos campos por formulário? Sem limite técnico. Acima de 30, recomenda-se quebrar em seções/passos para experiência mobile.

A foto fica grande no servidor? O upload comprime automaticamente. Para forense, é possível desabilitar compressão por campo.

Posso integrar com meu ERP para popular campos? Sim — DataSourceSelect consome qualquer fonte de dados, inclusive SQL externo. Ver `08-integracoes-e-dados.md`.

Como o agente IA responde sobre meu formulário? Acesse /forms/:id/agent. Ele tem acesso ao dicionário de campos e às respostas. Pergunte em português.

Posso ter formulário em outro idioma? Sim. Os rótulos são configuráveis.

Funciona em tablet? Sim. PWA responsivo. Recomendado para checklists longos.

Esta galeria acompanha o ciclo completo do Z-Field: a criação do formulário, o preenchimento no dispositivo do operador, o uso de câmera e voz, a leitura dos resultados e a continuidade offline. O conjunto mostra como uma coleta deixa de ser apenas um formulário e se torna evidência operacional analisável.

Os quadros de produto foram registrados no sandbox em 24/05/2026. A apresentação do PWA no aparelho é uma ilustração de apoio, indicada na própria legenda, para completar o contexto de uso móvel.

Print 01 - Lista de formulários

Ampliar

Leitura do print: A listagem comprova a administração central de formulários e o acesso direto a preenchimentos e resultados.

Evidência capturada; desktop / 1440 x 980; origem: `/forms`.

Print 02 - Estatísticas de formulários

Ampliar

Leitura do print: O painel resume uso e volume, servindo como abertura para falar de adesão operacional.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/stats`.

Print 03 - Construtor de formulário

Ampliar

Leitura do print: A tela de criação mostra a experiência administrativa para estruturar a coleta sem código.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/create`.

Print 04 - Formulário configurado

Ampliar

Leitura do print: Um formulário existente demonstra a passagem do modelo configurado para pré-visualização e resultados.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/:id`.

Print 05 - Preenchimento mobile online

AmpliarMobile

Leitura do print: A composição usa a captura mobile real dentro de um aparelho para evidenciar legibilidade e preenchimento em campo.

Evidência capturada; mobile / iPhone 14 + composição editorial; origem: `/forms/:id/fill`.

Print 06 - Microfone ativo

AmpliarMobile

Leitura do print: O preenchimento mobile exibe a gravação em andamento, duração e ação de parada, mantendo o formulário acessível enquanto a evidência de voz é coletada.

Evidência capturada via Playwright em viewport iPhone 14 (390 x 664) e apresentada em moldura criada com GPT Image; captura real de origem: `../images/manuals/mobile/raw/microphone-active-mobile.png`.

Print 07 - Câmera ativa

AmpliarMobile

Leitura do print: Após a captura, o fluxo mobile apresenta o preview da evidência e permite refazer, cancelar ou enviar a imagem para processamento, antes de qualquer submissão.

Evidência capturada via Playwright em viewport iPhone 14 (390 x 664) e apresentada em moldura criada com GPT Image; captura real de origem: `../images/manuals/mobile/raw/camera-active-mobile.png`.

Print 08 - Resultados com filtros

Ampliar

Leitura do print: A tela documenta respostas consolidadas do formulário e o ponto de partida para análise.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/:id/results`.

Print 09 - Detalhe de resposta

Ampliar

Leitura do print: O detalhe de resposta comprova rastreabilidade por registro e consulta da evidência enviada.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/:id/results/:responseId`.

Print 10 - Dashboard do formulário

Ampliar

Leitura do print: O sandbox possui a página de dashboard habilitada; no registro capturado ela orienta configurar filtros e gráficos.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/:id/dashboard`.

Print 11 - Agente do formulário

Ampliar

Leitura do print: A área do agente conecta perguntas em linguagem natural ao contexto do formulário selecionado.

Evidência capturada; desktop / 1440 x 980; origem: `/forms/:id/agent`.

Print 12 - Formulário público

Ampliar

Leitura do print: A página pública real expõe coleta de inspeção com GPS e fotos sem exigir navegação administrativa.

Evidência capturada; desktop / 1440 x 980; origem: `/p/:formId`.

Print 13 - Respostas para sincronizar

Ampliar

Leitura do print: A fila de sincronização torna visível a sustentação do trabalho offline.

Evidência capturada; desktop / 1440 x 980; origem: `/cache-responses`.

Print 14 - PWA instalado no celular

Ampliar

Leitura do print: O mockup apresenta o aplicativo ZIINP já disponível na tela inicial do celular, reforçando o uso em campo com acesso direto e identificação visual consistente.

Imagem ilustrativa gerada com GPT Image a partir da marca oficial ZIINP; não representa captura real do sandbox.

🏭 Indústria — RDO de chão de fábrica

Persona: Líder de produção, 3 turnos. Problema: RDO em papel, fotos isoladas, dado nunca chega na qualidade. Z-Field: formulário "RDO Turno" com leitura por turno (texto), foto da OEE (câmera), QR Code do equipamento, observações por voz, assinatura do líder. Resultado: dado consolidado no dashboard em tempo real, qualidade acompanha quase ao vivo.

⚡ Telecom — Instalação na casa do cliente

Persona: Técnico de instalação. Problema: OS no Google Forms, foto solta no WhatsApp, cliente assina papel. Z-Field: formulário "Instalação" com placa do equipamento (QR), foto do roteador instalado (com EXIF), teste de velocidade (campo número), assinatura do cliente inline + foto do termo. Resultado: OS fechada em 8 min em vez de 25 min, foto irrefutável em caso de chamada técnica posterior.

🚛 Logística — Inspeção pré-viagem de veículo

Persona: Motorista. Problema: checklist em papel, fica na garagem, ninguém vê. Z-Field: formulário "Pré-viagem" com hodômetro (foto + OCR via IA), 12 itens de check (radio), foto frontal/traseira/lateral. Resultado: gestor de frota vê todos os veículos do dia em uma tabela, identifica padrões de desgaste.

🏥 Saúde — Visita domiciliar de enfermagem

Persona: Enfermeira de home care. Problema: prontuário em pasta, demora 2 dias pra digitar. Z-Field: formulário "Visita HC" com sinais vitais (números), foto do paciente (consentida), assinatura do responsável, voz para a evolução clínica. Resultado: prontuário pronto antes de sair da casa do paciente.

🏗️ Construção civil — Checklist de NR-35 (trabalho em altura)

Persona: Técnico de segurança. Problema: auditoria do MPT exige rastreabilidade. Z-Field: formulário com selfie do colaborador usando EPI (FaceDetectionCamera), assinatura do operador, fotos do ponto de ancoragem com GPS, agente IA "Auditor de EPI" valida na hora. Resultado: evidência irrefutável em fiscalização, redução de incidentes.

🛒 Varejo / Franquia — Auditoria de loja

Persona: Supervisor regional. Problema: mesma planilha de 40 itens em 12 lojas, sem comparação. Z-Field: formulário "Auditoria Loja" com pré-seleção de loja (Data Source SQL), fotos por seção, score automático. Resultado: ranking de lojas em tempo real, ações corretivas no Z-Flow.

🌾 Agro — Inspeção de talhão

Persona: Agrônomo de campo. Problema: caderno + foto + GPS manual. Z-Field: formulário "Inspeção Talhão" com marcação no mapa Leaflet, foto da praga, identificação automática via IA, número da planta. Resultado: mapa térmico de pragas por fazenda no dashboard.

🏨 Hospitalidade — Check-in de hóspede

Persona: Recepção. Problema: ficha de hóspede em papel, RG fotocopiado. Z-Field: formulário público /p/checkin com leitura de documento por foto (IA extrai dados), assinatura inline, foto do hóspede. Resultado: hóspede faz pré-check-in no celular, balcão libera em 30 segundos.

Receita 1 — Formulário "Checklist de início de turno"

Seção: Identificação
  - Selfie (FaceDetectionCamera)  [obrigatório]
  - QR Code do ponto de trabalho   [obrigatório]
  - Hora de início (datetime, valor padrão = agora)

Seção: EPIs
  - Foto de corpo inteiro com EPI (câmera)  [obrigatório]
  - Items vestidos (multi-select: capacete, óculos, luvas, botina, colete)

Seção: Saúde e prontidão
  - "Está apto?" (radio: sim/não)
  - Observações (textarea OU áudio)
    └─ Condicional: aparece se "apto?" = não

Assinatura: operador

Agente IA acoplado: "Auditor de EPI" no evento response_created
  → Output Action: abrir ação corretiva se findings.hasHigh

Receita 2 — Formulário público "NPS"

Campos:
  - Nota (radio 0–10)
  - Comentário (textarea)
  - E-mail (texto, opcional)

Configurações:
  - URL pública /p/nps-2026
  - Captcha ativo
  - Limite 1 resposta/IP/dia

Agente IA acoplado: "Classificador de NPS"
  → tagueia sentimento e tema
  → cria card no dashboard de NPS

Receita 3 — Ordem de Serviço de telecom

Pré-popular via Data Source SQL (ERP):
  - Cliente
  - Endereço
  - Modelo do equipamento
  - Contratado

Coletar:
  - Hodômetro do veículo (foto)
  - Foto do roteador instalado (câmera, EXIF + GPS)
  - Teste de velocidade (3 campos número)
  - Assinatura do cliente inline
  - Foto do termo assinado (câmera)

Após submissão:
  - Z-Flow encerra OS
  - Z-Sign gera 2ª via do termo
  - Z-Score pontua técnico
  - Webhook para ERP atualizar pedido

Receita 4 — Auditoria de loja (rede de franquias)

Seções padronizadas:
  - Fachada (3 fotos)
  - Atendimento (5 perguntas + 1 foto da equipe)
  - Vitrine (4 fotos + 5 perguntas)
  - Estoque (3 perguntas + foto do depósito)
  - Limpeza (4 perguntas + 2 fotos)

Cada seção tem score interno.
Score total calculado por fórmula.

Z-Score pontua a loja.
Z-Flow abre ação corretiva para cada item < 7.
Dashboard "Ranking de lojas" atualiza em tempo real.

Receita 5 — Inspeção patrimonial com OCR

Coletar:
  - Foto da etiqueta de patrimônio (câmera + IA OCR)
    └─ campo "código" preenche automaticamente
  - Localização atual (GPS)
  - Foto do bem (câmera)
  - Estado de conservação (radio + textarea)

Cruzar via Data Source SQL com tabela de patrimônio:
  - identifica divergências (bem em local errado)
  - dispara fluxo de regularização

• Conectar formulário a uma fonte SQL do ERP para pré-popular cliente, ativo, técnico.
• Disparar agente IA no `response_created` para auditar evidências automaticamente.
• Amarrar formulário ao Z-Schedule para que a visita marcada já abra o formulário certo.
• Criar form público + gamificação leve para pesquisas de satisfação com ranking de unidades.
• Evoluir para campos com vídeo (multimodalidade do framework de agentes está pronta).