[DASHBOARD Q.A - DASHBOARD ] - Telas de Média Fidelidade da visualização e triagem de relatos pendentes

[GabrielAderaldo]

Este card contempla a montagem de telas de média fidelidade do painel de triagem de relatos pendentes. Aqui o foco é preparar o terreno para o desenvolvimento real, ou seja: todos os componentes e seus estados precisam estar posicionados corretamente na tela.

É o momento em que o front já pode iniciar a implementação da lógica de estados, interações e integrações, mesmo que os elementos ainda não tenham o estilo visual final.

---

🎯 Objetivo:

• Criar uma tela funcional, sem estilização, mas com componentes reais posicionados
• Usar placeholders e dados mockados
• Representar todos os fluxos possíveis de maneira funcional
• Permitir que o desenvolvedor implemente a lógica e interações com base nesta tela

---

🧱 Itens obrigatórios:

Item	Detalhe
Todos os elementos da versão de baixa fidelidade	Mas agora como componentes estruturados
Placeholder para cada campo (ex: título do relato, descrição, ações)	Pode usar texto mockado
Estrutura clara para: carregando, erro, vazio e sucesso	Com condicionais simples
Botões clicáveis com handlers simulados	Mesmo que ainda não funcionem
Placeholder para filtros e contadores	Com labels e ícones representados
Simulação da atualização por WebSocket (ex: botão "Simular novo relato")	Para testar reatividade

---

📈 Fluxo Representado (sem alteração):

• O QA abre a tela e vê todos os relatos pendentes
• Pode clicar para abrir o detalhe
• Pode aprovar, marcar como duplicado ou descartar
• Vê o dashboard se atualizar
• A tela está preparada para receber novos relatos em tempo real

---

🧪 Critérios de Aceite:

Critério	Avaliação
Todos os componentes estão posicionados corretamente	✅
A estrutura permite aplicação de lógica real (lifecycle, estados)	✅
Há placeholders simulando o conteúdo	✅
Nenhum estilo visual final foi aplicado	✅
Toda funcionalidade está representada de forma simulada	✅

---

Tip

A ideia aqui é permitir ao dev escrever requests, estados e lógica de UI com base nessa tela. Mesmo sem cores, tudo deve estar usável, clicável e com data-mock.

Caution

Não é um wireframe! Essa tela já é uma página real, funcional, mesmo que feia. Não confundir com a fase anterior.

Important

Em caso de dúvida, sempre consultar o epico pai e/ou chamar o P.O (Gabriel). Nada deve ser assumido.