Este projeto foi desenvolvido com foco em criar uma aplicação para monitoramento de equipamentos. A aplicação permite a visualização detalhada dos equipamentos, incluindo seus estados atuais, histórico de localização e estado, além de proporcionar uma interface de navegação intuitiva e interativa com mapas dinâmicos.
A aplicação exibe uma lista de equipamentos, mostrando seus estados atuais e permitindo a filtragem por diferentes categorias de estado. Cada equipamento pode ser selecionado para visualizar detalhes adicionais, como o modelo, produtividade e ganhos.
- Listagem de Equipamentos: Exibe todos os equipamentos com seus estados atuais.
- Filtro de Estados: Filtra os equipamentos por categorias de estado (ex: operando, parado, manutenção).
- Pesquisa por Nome ou Modelo: É possível pesquisar um equipamento tanto pelo seu nome quanto pela sua categoria de modelo.
Os usuários podem visualizar o histórico de localização dos equipamentos em um mapa interativo, além de acompanhar os estados históricos de cada equipamento.
- Mapa Interativo: Mostra o histórico de localizações com traçado de rotas (polylines) entre os pontos registrados.
- Histórico de Estados: Exibe a linha do tempo dos estados de cada equipamento, permitindo um acompanhamento detalhado das alterações ao longo do tempo.
A aplicação inclui um mapa dinâmico que exibe em tempo real as posições dos equipamentos. O usuário pode interagir com o mapa para visualizar as posições atuais, além de explorar as rotas percorridas.
- ultimas posições do equipamento: Visualiza a localização mais recente dos equipamentos em um mapa interativo.
- Rotas Percorridas: Mostra o trajeto dos equipamentos ao longo do tempo com polylines.
A aplicação conta com uma página dedicada a mais detalhes sobre o equipamento selecionado. Por meio do ID do equipamento, várias informações sobre ele são coletadas.
- Detalhes do Equipamento: Inclui informações detalhadas como modelo, produtividade e ganhos calculados.
Um menu de navegação facilita o acesso a diferentes partes da aplicação, permitindo uma experiência de usuário fluida e intuitiva.
- Navegação Simplificada: Ícones e labels ajudam a identificar rapidamente as diferentes páginas da aplicação.
- Transições Suaves: Navegação entre páginas com transições suaves e sem recarregamento da página.
O projeto conta com uma interface responsiva para todos os tipos de telas, se adaptando ao tamanho da mesma. Para isso foi utilizado a tecnologia Tailwind CSS.
- React: Biblioteca principal para construção da interface.
- Next.js: Framework para renderização do lado do servidor e geração de páginas estáticas recomendado pela documentação do react.
- TypeScript: Superset do JavaScript para tipagem estática, garantindo maior segurança e previsibilidade no código.
- Tailwind CSS: Framework de CSS para estilização, permitindo uma customização rápida e responsiva.
- Shadcn UI: Conjunto de componentes acessíveis e estilizados, garantindo uma melhor experiência de usuário.
- Lucide Icons: Conjunto de ícones utilizados para enriquecer a interface.
- Leaflet & React-Leaflet: Bibliotecas para criação de mapas interativos e integração com React.
- Dynamic Imports: Para carregamento dinâmico de componentes, melhorando a performance da aplicação ao carregar somente o necessário.
Clone o repositório:
git clone https://github.com/m4rrec0s/TrackEquip.gitNavegue até o diretório do projeto:
cd TrackEquipInstale as dependências:
npm installInicie o servidor de desenvolvimento:
npm run devAbra o navegador e acesse:
http://localhost:3000