Performance Evaluation - Copy this React, Tailwind Component to your project
Prompt para PureCodeAI: Crie um sistema de avaliações de desempenho com as seguintes características: 1. Layout Geral: • O sistema deve ser moderno e responsivo, com um menu lateral fixo que contenha links para as seguintes abas: • “Avaliações” (para preencher as perguntas e respostas), • “Tabela de Avaliações” (para visualizar os dados em formato de tabela), • “Gráficos” (para visualizar análises gráficas das avaliações). • Um header fixo na parte superior com o título da página atual e um botão para alternar entre modo claro e escuro. 2. Página: “Avaliações” • Um formulário para responder perguntas de avaliação de desempenho. • Cada pergunta deve ser exibida como texto. • Cada pergunta deve ter um campo select associado para a resposta com as opções: Sim, Não, Não Aplicável. • Permitir que o formulário carregue as perguntas de um banco de dados ou API e exiba dinamicamente. • Um botão para salvar as respostas no banco de dados. • Estilo amigável com bordas arredondadas, espaçamento adequado, e feedback visual (ex.: quando o campo é selecionado). 3. Página: “Tabela de Avaliações” • Exibir todas as avaliações realizadas em formato de tabela. • Colunas: • Nome do Avaliado, • Data da Avaliação, • Avaliador, • Nota Final (calculada com base nas respostas das perguntas). • Permitir filtros para visualizar: • Avaliações por Avaliado, • Avaliações por Avaliador, • Intervalo de datas. • Tabela deve ser paginada, com opção para exportar os dados em Excel ou PDF. 4. Página: “Gráficos” • Exibir análises gráficas das avaliações, utilizando bibliotecas como Chart.js ou ApexCharts: • Gráfico de Barras: Distribuição de respostas por pergunta. • Gráfico de Radar: Comparação entre avaliações realizadas. • Gráfico de Pizza: Percentual de respostas Sim, Não, e Não Aplicável. • Incluir filtros interativos para selecionar: • Avaliado ou Avaliador específico, • Intervalo de datas. • Adapte o layout para telas menores, ajustando o tamanho dos gráficos automaticamente. 5. Estilo Moderno e Interatividade • Use cores modernas e um design limpo (tons de azul e cinza) com alternância para modo escuro. • Adicione animações suaves na navegação e na interação com componentes. • Certifique se de que o sistema seja responsivo, ajustando os componentes em dispositivos móveis: • Menu lateral deve se transformar em um menu expansível no topo. • Tabelas devem ser roláveis horizontalmente. 6. Organização e Componentes Reutilizáveis • Estruture o código em componentes reutilizáveis, como: • Formulários, • Tabelas, • Gráficos. • Organize o código em pastas como components, pages, e styles para facilitar a manutenção. Essa estrutura deve fornecer uma base sólida para o sistema de avaliações de desempenho. Você pode personalizar conforme necessário!
