Frontend Web — Vue
O portal web do RadarBov é construído com Vue 3.5.13 e TypeScript, usando Vite como bundler. É a interface principal para gestão, consulta e relatórios — complementando o app mobile que é focado em operações de campo.
Stack técnica
| Componente | Versão |
|---|---|
| Vue | 3.5.13 |
| TypeScript | 5.7.2 |
| Vite | 6.0 |
| Vue Router | Roteamento SPA |
| Pinia | Gerenciamento de estado |
| Axios | HTTP client |
| Leaflet | Mapas interativos |
| Chart.js | Gráficos e dashboards |
| i18n | Internacionalização |
Estrutura de páginas
O frontend está organizado em módulos por domínio:
| Módulo | Funcionalidade |
|---|---|
auth/ | Login, cadastro, recuperação de senha |
establishments/ | Gestão de estabelecimentos |
animals/ | Entradas, saídas, identificações |
gta/ | GTAs |
travels/ | Viagens e veículos |
tags/ | Brincos RFID |
shares/ | Compartilhamento de Dados |
invites/ | Convites e Permissões |
reports/ | Relatórios e Exportações |
socioenvironmental/ | Conformidade Socioambiental |
Gerenciamento de estado — Pinia
Cada módulo tem sua própria store Pinia. Stores principais:
| Store | Estado gerenciado |
|---|---|
authStore | Usuário logado, token, perfil ativo |
establishmentStore | Estabelecimento ativo, lista de estabelecimentos |
uiStore | Estado da UI (loading, modais, alertas) |
Comunicação com a API
O frontend usa Axios para chamar a API REST do backend. Interceptors do Axios gerenciam:
- Injeção automática do token JWT no header
Authorization - Refresh automático de token quando o access token expira
- Redirecionamento para login quando o refresh falha
Mapas
O portal usa Leaflet para exibir mapas em:
- Histórico de viagens com rotas e paradas
- Localização de estabelecimentos
- Alertas de Conformidade Socioambiental
Diferenças em relação ao app mobile
O portal web é focado em gestão e consulta, não em operações de campo:
- Sem leitura de brincos RFID (sem Bluetooth)
- Sem funcionamento offline
- Usuários criados por administrador (não auto-cadastro)
- Maior foco em relatórios e visualizações de dados
Ver comparação completa em App Mobile - Flutter.