[DASHBOARD Q.A - CARD DETALHADO] - Tela de média fidelidade

[GabrielAderaldo]

Este card contempla a criação da tela de média fidelidade, onde todos os componentes já estão posicionados corretamente, respeitando a estrutura aprovada nas telas de baixa, sem ainda aplicar identidade visual, cores ou estilizações finais.

Todos os elementos devem estar nomeados, com placeholders ou dados mockados realistas. A navegação, os agrupamentos e as interações principais devem estar operacionais (mesmo que com dados fictícios).

O objetivo é permitir que o dev já consiga implementar toda a estrutura e lógicas iniciais (estados, exibição condicional, estrutura de dados etc.) com referência visual funcional.

---

🎯 Objetivos:

• Ter a estrutura visual 100% pronta e funcional, mesmo sem estilização
• Permitir que desenvolvedores comecem a montar os componentes com base no posicionamento final
• Incluir todos os dados do relato e botões de ação corretamente
• Testar o espaço e usabilidade com conteúdo realístico (placeholders de texto/imagens longas, campos vazios, dados extensos etc.)
• Permitir scrolling, manipulação básica de estados e diferenciação visual entre blocos

---

📚 Estrutura Esperada:

Seção	Conteúdo esperado
Header da visualização	Título do relato + botão de fechar
Bloco de Informações Técnicas	SO, navegador, resolução, tipo de dispositivo, data/hora
Bloco de Conteúdo Principal	Título, descrição, categoria, prioridade, prints (ou aviso de ausência)
Botões de ação	Aprovar / Descartar / Marcar como duplicado (com ícones ou placeholder)
Comportamento visual	Scroll em conteúdos grandes, botões sempre visíveis

---

🔄 Fluxo Visual

flowchart TD
    A[Relato carregado] --> B[Exibição de componentes em posição final]
    B --> C[Blocos separados por tipo de informação]
    C --> D[Botões de ação acessíveis no fim ou topo fixo]

Loading

---

🧪 Critérios de Aceite:

Critério	Avaliação
Todos os elementos definidos na tela de baixa estão presentes	✅
Layout respeita o espaço e agrupamento proposto	✅
Uso de dados mockados realistas em todos os campos	✅
Ações e componentes estão prontos para receber lógica	✅
Fluxo de leitura está fluido e acessível para o QA	✅

---

Tip

Não se preocupe com ícones corretos ou estilização. O foco aqui é funcionalidade e posição dos elementos.

Important

Toda decisão visual tomada aqui será levada para a tela de alta fidelidade, então valide os agrupamentos e hierarquias com o P.O e QA.

---