SIGPS Front-end

Interface web do SIGPS - SPA Angular com RBAC, JWT e integração com fila inteligente

README principal · DOCS.md · Backend · Machine Learning

TCC - Faculdade Metropolitana de Manaus · Orientadora: Profª Luana Magalhães Leal

Aplicação SPA em Angular 21 com rotas protegidas por perfil (RBAC), comunicação com o backend via REST/JSON e token JWT.

Visão geral

O frontend concentra toda a experiência do usuário: landing institucional, autenticação, painel administrativo/clínico e portal do paciente. Cada perfil enxerga apenas as rotas liberadas por authGuard e roleGuard.

flowchart LR
    U[Usuário] --> FE[SIGPS-Frontend :4200]
    FE -->|HTTPS JSON + JWT| BE[SIGPS-Backend :5000]
    BE --> ML[SIGPS-ML :8000]

Stack tecnológica

Tecnologia	Uso
Angular 21	Framework SPA, componentes standalone
TypeScript	Tipagem e modelos de domínio
SCSS	Estilos por componente
RxJS	Fluxos assíncronos e serviços HTTP
Angular SSR	Renderização no servidor (build de produção)
jwt-decode	Leitura de claims do token
Vitest	Testes unitários

Arquitetura do frontend

flowchart TB
    subgraph Apresentacao["Camada de apresentação"]
        PAGES[Páginas / Componentes]
        PIPES[Pipes e diretivas]
    end

    subgraph Aplicacao["Camada de aplicação"]
        SVC[Serviços HTTP]
        GUARD[Guards: auth + role]
        INT[Auth Interceptor JWT]
    end

    subgraph Dados["Contratos de dados"]
        MODELS[Models TypeScript]
        ENV[environment.ts]
    end

    PAGES --> SVC
    SVC --> INT
    INT -->|API REST| API[(Backend Flask)]
    SVC --> MODELS
    GUARD --> PAGES

Diagrama de componentes (painel)

classDiagram
    class Painel {
        +menuItems()
        +sidebar
        +topNavbar
    }
    class AuthService {
        +login()
        +logout()
        +currentUser
        +hasRole()
    }
    class AuthGuard
    class RoleGuard
    class RouterOutlet

    Painel --> AuthService
    Painel --> RouterOutlet
    AuthGuard ..> AuthService
    RoleGuard ..> AuthService
    RouterOutlet --> Dashboard
    RouterOutlet --> Fila
    RouterOutlet --> PortalPaciente

Apresentação das telas

Capturas reais da interface em docs/screenshots/, geradas com dados de demonstração (mocks) para o TCC — sem telas vazias nem dependência do backend.

Regenerar capturas:

npm run screenshots:serve
# outro terminal:
npm run screenshots

Mapa de navegação

flowchart TD
    L[Landing /] --> LOGIN[Login]
    L --> CAD[Cadastro]
    LOGIN --> PAINEL[Painel /painel]
    CAD --> LOGIN
    LOGIN --> ESQ[Esqueci senha]

    PAINEL --> DASH[Dashboard]
    PAINEL --> PORTAL[Portal do paciente]
    PAINEL --> PAC[Pacientes]
    PAINEL --> FILA[Fila inteligente]
    PAINEL --> AG[Agendas]
    PAINEL --> CHAT[Chat]

Telas públicas (sem login)

Landing Page — `/` (hero / entrada)

Trecho inicial da página institucional: navegação, chamada principal e preview do painel.

Login — `/login`

Cadastro — `/cadastro`

Esqueci minha senha — `/esqueci-senha`

Painel autenticado (`/painel`)

Layout com sidebar (perfis administrativos/clínicos) ou layout full-width (paciente). Barra superior com busca global, notificações e avatar.

Tela	Rota	Perfis	Principais funções
Dashboard	`/painel/dashboard`	Admin, Gestor, Especialista, Visualizador	KPIs, gráficos e resumo operacional da unidade.
Portal do paciente	`/painel/portal-paciente`	Paciente	Hub com atalhos: explorar clínicas, agendar, exames, chat.
Pacientes	`/painel/pacientes`	Admin, Gestor, Especialista, Visualizador	Listagem, busca por nome/CPF e detalhes clínicos.
Agendamentos	`/painel/agendas`	Admin, Gestor, Especialista, Paciente	Criação de slots, marcação e gestão de consultas.
Especialistas	`/painel/especialistas`	Admin, Gestor	Cadastro e gestão de profissionais vinculados.
Fila de espera	`/painel/fila`	Gestor, Especialista, Visualizador	Fila ordenada por prioridade (IA); status e análise da fila.
Gestão IA	`/painel/gestao-ia`	Gestor, Especialista	Painel auxiliar de monitoramento da priorização.
Explorar clínicas	`/painel/explorar-clinicas`	Paciente	Descoberta de organizações de saúde.
Busca profissionais	`/painel/busca-profissionais`	Paciente, Admin, Gestor, Visualizador, Especialista	Busca e agendamento com especialistas.
Perfil profissional	`/painel/perfil-profissional/:id`	Vários	Visualização pública do profissional.
Meu perfil	`/painel/meu-perfil`	Todos autenticados	Conta, dados clínicos, clínica (gestor/especialista), verificação.
Exames	`/painel/exames`	Paciente + equipe	Upload e histórico de exames.
Chat	`/painel/chat`	Todos autenticados	Mensagens entre usuários.
Relatórios	`/painel/relatorios`	Admin, Gestor	Indicadores e exportação de dados.
Configurações	`/painel/config`	Admin	Parâmetros globais do sistema.
Documentação	`/painel/documentacao`	Todos autenticados	Arquitetura e stack (ajuda interna).

Dashboard — `/painel/dashboard`

Portal do paciente — `/painel/portal-paciente`

Pacientes — `/painel/pacientes`

Fila de espera inteligente — `/painel/fila`

Agendamentos — `/painel/agendas`

Chat — `/painel/chat`

Meu perfil — `/painel/meu-perfil`

Explorar clínicas — `/painel/explorar-clinicas`

Relatórios — `/painel/relatorios`

Fluxogramas

Fluxo de autenticação

sequenceDiagram
    participant U as Usuário
    participant F as Frontend
    participant B as Backend

    U->>F: Informa e-mail e senha
    F->>B: POST /api/v1/auth/login
    alt Credenciais válidas
        B-->>F: access_token + refresh_token
        F->>F: Armazena JWT (localStorage)
        F->>F: authGuard libera /painel
        F-->>U: Redireciona por perfil
    else Inválidas
        B-->>F: 401
        F-->>U: Mensagem de erro
    end

Fluxo de navegação por perfil

flowchart TD
    A[Login OK] --> B{Perfil?}
    B -->|Paciente| C[Portal do paciente]
    B -->|Gestor/Especialista| D[Dashboard]
    B -->|Admin| E[Dashboard + Config]
    B -->|Visualizador| F[Dashboard somente leitura]

    C --> G[Explorar / Agendar / Exames]
    D --> H[Pacientes / Fila / Agendas]

Fluxo de agendamento (paciente)

flowchart LR
    A[Portal ou Busca profissionais] --> B[Escolhe especialista]
    B --> C[Visualiza agenda disponível]
    C --> D[Seleciona horário]
    D --> E[POST /schedules/agendar]
    E --> F[Consulta confirmada]
    F --> G[Notificação no painel]

Fluxo de requisição HTTP (interceptor)

flowchart TD
    REQ[Requisição HTTP] --> INT{Token existe?}
    INT -->|Sim| HDR[Header Authorization Bearer]
    INT -->|Não| API
    HDR --> API[Backend API]
    API -->|401| LOGOUT[Logout e /login]
    API -->|2xx| OK[Atualiza UI]

Perfis e menu

Perfil	Itens principais no menu
Paciente	Meu Portal, Meus Agendamentos, Explorar, Meu Perfil, Chat
Gestor	Dashboard, Agendamentos, Pacientes, Fila, Minha Clínica, Chat, Relatórios
Especialista	Dashboard, Meus Agendamentos, Pacientes, Fila, Minha Clínica, Chat
Visualizador	Dashboard, Pacientes, Fila, Chat
Admin	Todos + Especialistas, Relatórios, Configurações

Como executar

Pré-requisitos

Node.js 20+
npm 11+

Ambientes

Arquivo	Quando usa	API
`environment.ts`	Build produção / Vercel	`https://api.sigps.online`
`environment.development.ts`	`ng serve` local	`http://127.0.0.1:5000`
`environment.screenshots.ts`	Captura de telas	mock local

Desenvolvimento local

npm install
npm start

Acesse: http://localhost:4200 (backend local na porta 5000).

Para testar localmente contra a API de produção:

npm run start:prod-api

Build de produção

npm run build

Saída: dist/SIGPS-Frontend/browser — API embutida: https://api.sigps.online, useMock: false.

Deploy na Vercel

Importe o repositório na Vercel.
Root Directory: SIGPS-Frontend
Framework: Other (o vercel.json já define build e output).
Domínio: www.sigps.online (já previsto no CORS do backend).

Comandos (automáticos via vercel.json):

Install: npm ci
Build: npm run build
Output: dist/SIGPS-Frontend/browser

Após o deploy, faça login com uma conta real do backend em produção.

CORS: o backend deve incluir https://www.sigps.online e https://sigps.online em CORS_ORIGINS (já configurado no .env de produção).

Testes

ng test

Docker

Consulte o compose na pasta do projeto ou a stack na raiz do monorepo SIGPS.

Estrutura do projeto

src/app/
├── config/           # app.config.ts (providers, interceptors)
├── core/             # guards, interceptors compartilhados
├── routes/           # app.routes.ts
├── pages/            # telas (landing, login, painel/*)
├── services/         # comunicação com API (auth, fila, pacientes...)
├── models/           # interfaces TypeScript
├── pipes/            # transformações de template
└── env/              # environment por ambiente

Módulos relacionados

Repositório	Função
SIGPS-Backend	API REST, persistência, integração ML
SIGPS-Machine-Learning	Classificação de prioridade na fila

Equipe

Projeto desenvolvido como Trabalho de Conclusão de Curso (TCC) pela Faculdade Metropolitana de Manaus.

Integrante	Papel
Josias Azevedo da Silva	Product Owner & Desenvolvedor Full-Stack
Kaio Oliveira Pantoja	Scrum Master & Tech Lead
Wagner Eduardo	Documentação
Matheus Akabane Brazão	Desenvolvedor Back-end
Ólliver de Aquino Freitas	Front-end UX/UI
Alan Nicolas Santos Maragua	QA — Quality Assurance

Orientação

Professora orientadora:

Profª Luana Magalhães Leal - Tech Manager & Profª de Tecnologia

SIGPS — Trabalho de Conclusão de Curso · Gestão e priorização na saúde

← Voltar ao README principal

Name		Name	Last commit message	Last commit date
.vscode		.vscode
docs/screenshots		docs/screenshots
public		public
src		src
.editorconfig		.editorconfig
.env.example		.env.example
.gitignore		.gitignore
DOCS.md		DOCS.md
LICENSE		LICENSE
README.md		README.md
angular.json		angular.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Latest commit

History

Folders and files

Repository files navigation

SIGPS Front-end

Índice

Visão geral

Stack tecnológica

Arquitetura do frontend

Diagrama de componentes (painel)

Apresentação das telas

Mapa de navegação

Telas públicas (sem login)

Landing Page — / (hero / entrada)

Login — /login

Cadastro — /cadastro

Esqueci minha senha — /esqueci-senha

Painel autenticado (/painel)

Dashboard — /painel/dashboard

Portal do paciente — /painel/portal-paciente

Pacientes — /painel/pacientes

Fila de espera inteligente — /painel/fila

Agendamentos — /painel/agendas

Chat — /painel/chat

Meu perfil — /painel/meu-perfil

Explorar clínicas — /painel/explorar-clinicas

Relatórios — /painel/relatorios