Componentes de gerenciamento de usuários

[Junior-Shyko]

Contexto

• O sistema e-fomento necessita de uma área completa de gerenciamento de usuários, permissões e grupos
• É necessário criar funcionalidades para cadastrar novos usuários, atribuir funções/papéis, gerenciar grupos e controlar permissões de acesso
• A interface deve permitir visualização de todos os usuários, atribuição de funções específicas e cadastro de grupos de permissão
• Os usuários devem poder ter múltiplas funções (ex: Fiscal de projetos, Analista, Gestor, etc.) e pertencer a diferentes setores
• É crítico para o controle de acesso e segurança do sistema que cada usuário tenha permissões adequadas ao seu papel

Objetivo

Como administrador do sistema
Quero gerenciar usuários, suas funções/permissões e grupos de forma centralizada
Para controlar o acesso às funcionalidades do sistema e garantir que cada usuário tenha apenas as permissões necessárias para sua função

Escopo

• Criar página principal "Administração de funções" com layout responsivo

• Implementar sidebar de navegação com:

  • Minhas informações
  • Senha
  • Administração de funções

• Criar componente de listagem de usuários ("Todos os usuários") com:

  • Checkbox para seleção múltipla
  • Foto do usuário
  • Nome completo
  • Status de atribuição (sem atribuição/com atribuição)
  • Botão "atribuir função" por usuário

• Criar modal "Cadastre um novo usuário" com campos:

  • Nome (text input)
  • Email do usuário (email input)
  • Insira sua senha (password input)
  • Confirme sua senha (password input)
  • Papel/função de usuário (dropdown/select)
  • Setor (dropdown/select)
  • Matrícula do fiscal (conditional - aparece quando função = Fiscal)
  • CPF do fiscal (conditional - aparece quando função = Fiscal)
  • Upload de foto do usuário (file upload com preview)
  • Botões Cancelar e Cadastrar

• Criar modal "Cadastre um grupo novo" com campos:

  • Nome do grupo (text input)
  • Botões Cancelar e Cadastrar

• Criar modal "Altere ou remova uma função de um usuário" com:

  • Dropdown de funções disponíveis
  • Botões Cancelar e Confirmar

• Implementar tabs na página principal:

  • "Todos os usuários" (listagem de usuários)
  • "Funções e grupos" (gerenciamento de papéis e grupos)

• Criar componente de upload de foto com:

  • Preview da imagem
  • Validação de tipo (jpg, png)
  • Validação de tamanho máximo
  • Ícone placeholder quando sem foto

• Implementar validações de formulário:

  • Campos obrigatórios
  • Validação de email
  • Confirmação de senha
  • Validação de CPF (quando aplicável)

• Criar componentes Vuetify reutilizáveis:

  • UserForm.vue
  • GroupForm.vue
  • RoleAssignmentModal.vue
  • UserList.vue
  • PhotoUpload.vue

• Implementar integração com API backend:

  • GET /api/users - Listar usuários
  • POST /api/users - Criar usuário
  • PUT /api/users/{id} - Atualizar usuário
  • DELETE /api/users/{id} - Remover usuário
  • POST /api/users/{id}/assign-role - Atribuir função
  • DELETE /api/users/{id}/remove-role - Remover função
  • GET /api/roles - Listar funções/papéis
  • POST /api/groups - Criar grupo
  • GET /api/groups - Listar grupos

• Criar store Vuex/Pinia para gerenciamento de estado

• Implementar tratamento de erros e notificações (snackbar)

• Adicionar loading states durante operações assíncronas

• Criar testes unitários para componentes

• Criar testes E2E com Cypress para fluxos principais

Fora de Escopo

• Backend/API (endpoints já devem existir ou serão criados em outra issue)
• Sistema de permissões granulares (RBAC completo)
• Audit log de alterações
• Exportação de lista de usuários
• Filtros avançados de busca
• Paginação (considerar lista pequena inicialmente)

Critérios de Aceitação

• Página de Administração
  Dado que sou um usuário administrador
  Quando acesso a página "Administração de funções"
  Então devo ver a sidebar, lista de usuários e botões de cadastrar usuário e grupo

• Cadastro de Novo Usuário
  Dado que estou na página de administração
  Quando clico em "cadastrar novo usuário"
  Então um modal deve abrir com o formulário completo de cadastro

• Validação de Senha
  Dado que estou preenchendo o formulário de usuário
  Quando digito senhas diferentes nos campos "senha" e "confirme sua senha"
  Então o sistema deve mostrar erro e impedir o cadastro

• Upload de Foto
  Dado que estou cadastrando um usuário
  Quando faço upload de uma foto
  Então devo ver o preview da imagem antes de cadastrar

• Campos Condicionais - Fiscal
  Dado que estou cadastrando um usuário
  Quando seleciono a função "Fiscal de projetos"
  Então os campos "Matrícula do fiscal" e "CPF do fiscal" devem aparecer

• Atribuição de Função
  Dado que vejo um usuário na lista
  Quando clico em "atribuir função"
  Então um modal deve abrir permitindo selecionar e confirmar a função

• Cadastro de Grupo
  Dado que estou na página de administração
  Quando clico em "cadastrar novo grupo"
  Então um modal deve abrir pedindo apenas o nome do grupo

• Listagem de Usuários
  Dado que a página foi carregada
  Quando visualizo a lista de usuários
  Então devo ver foto, nome e status de atribuição de cada usuário

• Remoção de Função
  Dado que um usuário possui uma função atribuída
  Quando acesso o modal de alteração de função
  Então devo poder remover a função atual

• Responsividade
  Dado que acesso a página em diferentes tamanhos de tela
  Quando visualizo a interface
  Então os componentes devem se adaptar corretamente (mobile, tablet, desktop)

• Tratamento de Erros
  Dado que ocorre um erro na API
  Quando tento cadastrar ou atualizar um usuário
  Então devo ver uma mensagem de erro clara no snackbar

• Feedback de Sucesso
  Dado que uma operação foi concluída com sucesso
  Quando cadastro, atualizo ou atribuo uma função
  Então devo ver uma mensagem de confirmação e o modal deve fechar

Observações

Componentes Vue.js Sugeridos: