Pular para o conteúdo principal

UI Specs — Dashboard DAPE e Navegação

UI-SISGHA-DAPE-001 — Início / Dashboard com acesso rápido

Figma: node 9315:25090 | Perfis: P-DAPE

Estrutura da tela

Título: "Início - Acesso Rápido". Layout com Sidebar (esquerda) + Header-Main (topo) + conteúdo central.

Seções do dashboard

SeçãoBotões de acesso rápido
Horário Acadêmico"Visualizar Horário" (ícone grade), "Gerar Horário" (ícone engrenagem)
Relatórios"Aulas Ministradas" (ícone documento)
Diários"Visualizar Horário" (×2)

Header-Main

ElementoDescrição
Perfil do usuárioAvatar + nome + seletor de papel (DAPE dropdown)
Troca de campusBotão com nome do campus ativo (ex: "Ji-Paraná")
TemaToggle sol/lua (claro/escuro)
NotificaçõesÍcone de sino (estado on/off)
LogoLogomarca SISGHA no canto direito

UI-SISGHA-DAPE-002 — Sidebar DAPE

Figma: node 8436:8650 | Perfis: P-DAPE

Estados

EstadoDescrição
Menu On (expandido)Sidebar 231px com ícones + labels de texto
Menu Off (recolhido)Sidebar 57px com apenas ícones

Itens da Sidebar

PosiçãoItemTipoÍcone
1InícioLink diretoCasa
2CalendárioLink diretoCalendário
3GestãoAccordion (expandível)Engrenagem
4EnsinoAccordion (expandível)Livro
Espaço flexível
5PerfilLink diretoPessoa
6SairAçãoPorta

Regras de interface

[RI-01] Sidebar recolhe automaticamente em telas menores. [RI-02] Accordions "Gestão" e "Ensino" expandem para revelar sub-itens. [RI-03] Item ativo é destacado visualmente (background diferenciado).


Fonte: Figma SISGHA V2.0, nodes 9315:25090 e 8436:8650.