design_mockups.md

 | [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [Código](codigo) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Analytics](analytics)
 | :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | ------------: |
+## Sumário
+
+ 1. [Descrição](#descricao)
+ 2. [Identidade Visual](#idvisual)
+ 3. [Mockups](#mockups)
+ 4. [Fluxo de Tela Alunos](#faluno)
+ 5. [Fluxo de Tela Professores](#fprof)
+ 6. [Fluxo de Tela Admin](#fadmin)
+ 7. [Versão Final das Telas](#vfinal)
+
+*******
+
+<div id='descricao'/>  
 ## Descrição
 
 Durante o perido da Sprint 0, foram desenvolvidas pelos AGES III de Frontend as telas da aplicação, feitas na ferramenta Figma, em um trabalho colaborativo com os demais colegas.
 
+<div id='idvisual'/> 
 ### Identidade Visual
 
 O primeiro passso antes de dar inicio no desenvolvimento dos protótipos de tela, foi definir uma identidade visual atrelada ao projeto, algo que serviria como guia para as cores, fontes e logotipo que seriam utilizados futuramente. Abaixo, a definição de identidade visual do projeto feita: 
@@ -14,6 +28,7 @@ O primeiro passso antes de dar inicio no desenvolvimento dos protótipos de tela
 
 ![DEF_IACC](uploads/7c62c00de9baa821de8bc7b071e95ee0/DEF_IACC.png)
 
+<div id='mockups'/> 
 ## Mockups
 
 Os Mockups da aplicação pode ser vistos em sua integridade na página do Figma feita pelo time. Neste espaço será apresentado somente a tela e uma descrição rápida de sua função. Vale lembrar que as telas foram feitas seguindo as derfinições passadas ao time pelo cliente e com base nas US's do projeto.
@@ -28,6 +43,7 @@ Os Mockups da aplicação pode ser vistos em sua integridade na página do Figma
 
 Na tela de cadastro, alem dos campos esperados de cadastro, é possivel ver um botão de Dropdown associaddo as turmas já pré cadastradas na aplicação pelo admin da aplicação, que o aluno pode selecionar. 
 
+<div id='faluno'/> 
 ### Fluxo Aluno
 
 #### Lista Autoavalições
@@ -46,6 +62,7 @@ Na tela de Autoavaliações, é possivel ver as autoavaliações feitas pelo alu
 
 Unica diferença existente entre a tela de Visualização e Edição de Autoavaliações é a prensença de campos editáveis e de um botão de Salvar/Finalizar.
 
+<div id='fprof'/> 
 ### Fluxo Professor
 
 #### Listagem de Turmas
@@ -80,4 +97,70 @@ O Professor pode ver as suas Avaliações do Aluno selecionado na tela anterior,
 
 A Avaliação do professor é baseada em um questionário de 10 perguntas. Cada uma dessas perguntas recebe um ponto. Cada campo oferece a oportunidade do professor de deixar um comentário. Ao final, é oferecido ao professor um campo de observações, onde ele pode adicionar as anotações que achar necessárias. A unica diferença entre a tela de visualização e edição, é novamente a presença do campo editável e o botão de Salvar/Finalizar.
 
-### Fluxo Admin
\ No newline at end of file
+<div id='fadmin'/> 
+### Fluxo Admin
+
+O Usuário Admin da aplicação é definido como um professor com nivel de acesso superior, logo, muitas de suas telas são similares as telas de professor, somente com opções extras que englobam seu nivel.
+
+#### Visualiza Todas as Turmas
+
+![Ver_TurmaTurma](uploads/d67376bb5cc6f15d314016de5e4d1a13/Ver_TurmaTurma.png)
+
+Como Admin, é possivel ver todas as turmas cadastradas no Banco de Dados do projeto, separadas por semestre. Na aba superior tambem é possivel ver o botão de +, que indica que uma nova turma pode ser adicionada. No card de turma, é possivel ver tambem as opções de Deletar ou Editar uma turma em especifico. 
+
+#### Cadastro de Turma
+
+![Admin_Cadastro_Turmas](uploads/e0961dd7b6a520df5a94a58fc19c88e6/Admin_Cadastro_Turmas.png)
+
+#### Edição de Turma
+
+![Admin_Editar_Turmas](uploads/15f35f8818c94f2f0c52b51be5ff68f2/Admin_Editar_Turmas.png)
+
+#### Deletar Turma
+
+![Admin_Excluir_Turmas](uploads/1f7f710491186277a3daa2adeca05bb7/Admin_Excluir_Turmas.png)
+
+#### Menu Lateral de Admin
+
+![MenuLateral](uploads/369ec60d029cc422f54c2d1ff4a95e63/MenuLateral.png)
+
+O Usuário Admin, diferente dos demais, possui uma tela de navegação lateral, que facilita movimentação entre as funções do App, e tambem permite acesso as unicas telas exclusivas dele, que são relacionadas aos demais professores.
+
+#### Listar Professores
+
+![Admin_Listar_Professores](uploads/2614c7312bd5add8c94ff43112049bc0/Admin_Listar_Professores.png)
+
+A Tela de listagem de Professores trás elementos presentes nas telas anteriores, como o botão + na aba superior, indicando a possibilidade de adição de um novo professor, como tambem os icones de edição e deletar no card do professor em si.
+
+#### Cadastro/Edição Professores
+
+![Admin_Cadastra_Professores](uploads/dc544343f23f6a59987777f4e713e590/Admin_Cadastra_Professores.png)
+
+Alem dos componenetes necessários para o cadastro de um professor, podemos ver tambem um botão de dropdown que apresenta as turmas existentes na aplicação, para a associão daquele professor a uma turma especifica.
+
+![Admin_editar_Professores](uploads/7a5c1bd9a3abcd66c2aa59be1a03e0e2/Admin_editar_Professores.png)
+
+#### Deletar Professor
+
+![Admin_Remover_Professor](uploads/56a8b3cb9857ad7b1e2ab29983b666e0/Admin_Remover_Professor.png)
+
+Modal de confirmação para a remoção de um professor.
+
+#### Visualização Alunos
+
+![Admin_-_Filtrar_alunos_filtro_inativo](uploads/4991b7a1415671ba2e7713f3573f90f0/Admin_-_Filtrar_alunos_filtro_inativo.png)
+
+O Usuário Admin pode tambem visualizar todos os alunos da aplicação.
+
+#### Visualização Auto-Avaliação dos Alunos
+
+![Admin_-_Ver_Aluno_Autoavaliação](uploads/df05a94f8224b0c2db267ec775b6591d/Admin_-_Ver_Aluno_Autoavaliação.png)
+
+O Usuário Admin pode clicar no card de um aluno e ser levado para a tela das avaliações de um aluno, tanto Autoavaliação como Avaliação feita pelo professor. Ele pode somente visualizar a Autoavalição de um aluno.
+
+### Observações gerais
+
+Os Mockups apresentados acima são meramente uma base para o que as telas da aplicação irão se assemelhar em sua versão final. É bom ressaltar que são sujeitas a mudanças durante o desenvolvimento da aplicação para entrar em conformidade com futuras adições/edições/exclusões que vierem a ser feitas.
+
+<div id='vfinal'/> 
+## Versão Final
\ No newline at end of file