# 5 — Telas e critérios de aceite Referência de comportamento: `prototipos/v2/aprova.html`. Reproduzir o fluxo, não inventar telas novas. > Este documento foi escrito antes de `docs/09-melhorias.md`. Onde os dois divergirem, vale o > 09 — os critérios que ele acrescenta estão na seção final desta página. --- ## Fase 1 — fundação ### Cadastro e login do estúdio Cadastro cria `estudios` + primeiro `usuarios` com papel `admin`. Login por e-mail e senha. *Aceite:* usuário de um estúdio recebe 404 ao pedir recurso de outro, por id direto na URL. ### Lista de projetos Estado vazio com uma chamada única: "Criar projeto". Com projetos, cartão por projeto com nome, cliente, contagem de imagens, versão atual e situação. ### Criar projeto Dois campos: nome do projeto e cliente. Nada mais. *Aceite:* projeto criado em menos de 30 segundos por quem nunca viu o sistema. ### Upload Arrastar ou escolher. Aceita vários arquivos e pasta inteira. Cada imagem aparece como cartão com miniatura e barra de progresso, e o título sai do nome do arquivo, limpo e editável ao clicar. Botão de avançar desabilitado enquanto houver imagem em processamento. *Aceite:* PNG de 128 MB sobe e fica pronto sem o navegador travar e sem estourar limite do PHP. ### Visualizador com zoom Arrastar move, roda dá zoom, chega a 100% da resolução original. Carrega só os tiles visíveis do nível adequado. *Aceite:* ver a imagem inteira consome menos de 0,3 MB; inspeção em 1:1 de um trecho, menos de 1 MB. Referência em `prototipos/04-teste-zoom.html`. --- ## Fase 2 — o ciclo ### Enviar para o cliente Lista de revisores com nome, e-mail e marcação de obrigatório. Prazo em dias ou sem prazo. Recado opcional. Gera o token e envia convite, ou só devolve o link. ### Página do cliente URL com token, sem login. Ao entrar pela primeira vez pergunta qual dos revisores ele é. Grade de imagens, visualizador, clique na imagem fixa o pino e abre o campo de texto. Botão "terminei de comentar" grava `revisor_rodada.concluiu_em`. *Aceite:* funciona em celular. Nada na página revela outro projeto ou outro estúdio. ### Controle da rodada As quatro transições, cada uma um botão, só a válida habilitada. Fechar o prazo com revisor obrigatório pendente exige confirmação explícita. *Aceite crítico:* usuário com papel `equipe` não consegue ler nenhum comentário enquanto a fase for `cliente` — nem pela interface nem chamando a API direto. Teste automatizado obrigatório. ### Execução Lista de comentários por imagem com status, responsável e resposta técnica. Editável só na fase `equipe`. --- ## Fase 3 — versões ### Subir nova versão Arrastar os arquivos corrigidos. Casa por nome com o espaço existente e mostra a correspondência para confirmação antes de aplicar. Imagem sem arquivo novo permanece na versão anterior. ### Comparar Alça arrastável varrendo entre a versão anterior e a atual, no mesmo enquadramento. ### Migração de comentários Ao criar a versão, todo comentário com status `pendente` ou `execucao` é copiado para a nova versão com `herdado_de_id` preenchido. `resolvido` e `nao_aplica` não migram. *Aceite:* comentário resolvido na v1 não reaparece na v2. Pendente reaparece marcado como herdado. --- ## Fase 4 — produto Planos e cobrança conforme decisão de `docs/07-pendencias.md` P1. Marca do estúdio na página do cliente. Notificações por e-mail. Relatório da rodada em PDF. --- ## Regras transversais Nenhum jargão técnico na interface (D9). Um único botão primário por tela. Toda ação destrutiva confirma. Toda lista tem estado vazio com instrução do que fazer. Erro de upload mostra o que fazer, não o código do erro. --- ## Acrescentado por `docs/09-melhorias.md` ### Aprovação por item · fase 2 (M1) Botão **Aprovar** no visualizador e atalho `A`. Comentar marca o item como `ajustes` automaticamente — não existe botão para isso. A grade e o painel mostram a contagem. *Aceite:* item aprovado por um revisor e comentado por outro aparece como `ajustes`, não como aprovado. Marcar resolvido na execução não converte o item em aprovado. ### Marcação de área e seta · fase 2 (M3) Três ferramentas: ponto, área, seta. Marcação mantém tamanho constante na tela independentemente do zoom. *Aceite:* área e seta desenhadas na v1 reaparecem no mesmo lugar da v2 quando o comentário migra, mesmo que a resolução do arquivo mude. ### Conversa e anexo no comentário · fase 2 (M4, M5) Resposta encadeada com autor dos dois lados. Anexo de imagem no comentário. *Aceite crítico:* resposta escrita pela equipe não é visível para o cliente enquanto a rodada estiver na fase `cliente` — nem pela interface nem chamando a API direto. Mesmo teste automatizado da regra inversa. ### Relatório da rodada · sobe para a fase 2 (M10) Linha do tempo, situação por item e lista de pedidos com autor e horário. Imprimível. *Aceite:* o relatório é lido de `eventos` e de `comentarios`, nunca de campo editável. Duas gerações do mesmo relatório produzem o mesmo documento. ### Vídeo · fase 3 (M2) Player com linha do tempo, comentários como marcadores, e comentário que guarda o instante além do ponto na tela. *Aceite:* arrastar a linha do tempo não baixa o arquivo inteiro — o endpoint responde `Range`. Comentário com timecode volta ao mesmo quadro ao ser clicado. ### Trava da equipe explicada · fase 2 (M7) A equipe vê as imagens durante a janela do cliente; o retorno dele fica oculto, com a razão escrita no lugar da lista. *Aceite:* a tela da equipe na fase `cliente` mostra as imagens e nenhum comentário, nenhuma contagem de comentário e nenhum estado de aprovação. ### Importar retorno de fora · fase 4 (M6) Colar texto, quebrar em itens, atribuir cada um a um item. Entra marcado como importado. ### Cronograma por etapas · fase 2 (M17) Gantt com uma faixa por etapa do pipeline, mais a janela do cliente, o marco de entrega e a próxima janela projetada. Arrastar a barra move a etapa; puxar a borda estica; dois campos de data para precisão. "Reencadear" recoloca tudo em sequência a partir do fim da janela. *Aceite:* a data de entrega é o maior fim entre as etapas, calculada — não existe segundo campo para digitar a mesma coisa. Alterar uma faixa muda o que o cliente lê. *Aceite crítico:* na resposta ao token do cliente só saem as etapas com `publica = 1`, e com o rótulo público. Etapa interna não aparece em lugar nenhum da resposta, embora conte no percentual. Com `mostrar_andamento = 0` o cliente recebe apenas a data de entrega. *Aceite:* a página do cliente mostra a janela de aprovação atual e a próxima, projetada a partir da entrega com a mesma duração em dias da atual. *Aceite:* etapa com início anterior ao prazo do cliente levanta aviso — contraria a regra 1. Etapa vencida com item em aberto aparece como atrasada. Arraste encaixa no dia inteiro. ### Lista de tarefas da equipe · fase 2 (M15) Uma linha por tarefa, agrupável por responsável, etapa, item ou situação, com filtro "só as minhas". Tarefa vem do cliente ou é criada pelo estúdio. Criar dentro de um grupo herda o valor daquele grupo. *Aceite crítico:* tarefa marcada como interna não sai em nenhuma resposta para o token do cliente — nem na lista, nem na contagem por item, nem no acompanhamento. O filtro fica na camada de acesso a dados, e o teste automatizado pede uma rota do cliente e verifica que nenhuma tarefa interna volta. *Aceite:* o grupo "Sem responsável" aparece primeiro. Avançar a situação custa um clique. ### Editar o que é seu · fase 2 (M16) Revisor edita os comentários que escreveu enquanto a janela está aberta. Pessoa do estúdio edita as tarefas internas que criou, na fase de execução. Texto alterado exibe "editado". *Aceite crítico:* o estúdio não consegue alterar comentário de revisor por nenhuma via — nem pela interface nem chamando a API direto. A permissão é verificada na rota, não apenas escondida na tela. *Aceite:* revisor não edita comentário de outro revisor. ### Etapas de produção · fase 2 (M13) Matriz item × etapa na tela de produção. Clique na célula avança o estado; alt+clique marca não se aplica; clique no cabeçalho da coluna marca a etapa inteira. Só aparecem os itens que o cliente pediu para ajustar. *Aceite:* o percentual do item ignora etapas marcadas como não se aplica e etapas que não valem para o tipo dele. Item aprovado pelo cliente não entra no quadro. Criar a versão seguinte zera o quadro — etapa é por rodada. ### Editar o pipeline · fase 2 (M13) Renomear, reordenar, adicionar e remover etapas, em dois níveis: modelo do estúdio e etapas do projeto. Cada etapa define para que tipo vale (imagem, vídeo ou ambos), se o cliente a vê, e como ela se chama para ele. *Aceite:* salvar o modelo não altera nenhum projeto existente. Salvar as etapas do projeto aplica na hora e apaga as marcações das etapas removidas. *Aceite:* com o projeto em produção, a tela mostra o percentual antes e depois da alteração e nomeia as etapas removidas que já tinham trabalho registrado, antes de permitir salvar. Nenhuma alteração é aplicada sem essa confirmação. ### Acompanhamento pelo cliente · fase 2 (M14) Painel na página do cliente com percentual, data prevista e situação por item, a partir da fase `fechada`. Interruptor por projeto na tela de envio e no cabeçalho da produção. *Aceite crítico:* com o interruptor desligado, nenhuma rota devolve etapa, percentual ou situação de produção para o token do cliente — só a data prevista. Com ele ligado, etapa marcada como interna nunca aparece na resposta, embora conte no percentual. *Aceite:* durante a fase `cliente` o painel não mostra produção — não há o que acompanhar. Mostra apenas a confirmação de que os comentários chegaram.