Extratos Energia Painel
O projeto trata-se de uma plataforma Web para exibição, controle e gestão dos extratos de energia elétrica fornecidos a nós via conexão remota.
O produto conta até o momento com 6 sites, cada um com seu propósito e requisitos próprios, os quais são:
- Gráficos
- Extratos → Visualização Detalhada
- Histórico
- Editar UC
- Arquivos
- Processar
A desígnio de uma interface agradável e intuitiva, foram utilizadas bibliotecas atuais e os paradigmas de programação mais recentes que serão listadas no rodapé deste arquivo.
Antes de descrever sobre o desenvolvimento e funcionamento das páginas, também é importante salientar a necessidade de permissões para o acesso à alguns dos sites, como “Arquivos”, “Processar”, “Editar UC”. Caso o usuário não tenha a permissão requisitada, verá somente a página com a aba Gráficos, Histórico e Extratos
Tipos de usuário
Dependendo do tipo do usuário (Admin ou User) será restrito acesso há algumas telas e funcionalidades.
Admin
Usuário do tipo Admin terão acesso a todas as funcionalidades e telas do sistema

User
Usuário com acesso restrito a algumas telas e funcionalidades

Extratos

Tela onde o usuário poderá filtrar e consultar todos os dados dos extratos podendo também gerar relatórios pdf e Excel
Filtros

- o usuário poderá utilizar os campos de preenchimentos para adicionar ou remover os filtros dos registros
- obs: por padrão toda primeira vez que usuário acessar o sistema será setado o ano atual e o mês de referencia do mês anterior
- O Usuário poderá também ordenar os registros da tabela clicando no cabeçalho da coluna da tabela que deseja ordenar
- obs: por padrão os registros serão ordenados por data de emissão
Ações

- O usuário poderá realizar 3 tipos de ações na linha do registro na respectiva ordem
- Visualizar Mais Detalhes - o usuário acessará uma nova tela com informações mais detalhadas deste registro
- Visualizar PDF - acessar o pdf do extrado
- Gerar Excel - irá gerar um excel com os detalhes do consumo do extrado
Paginação

- O Usuário poderá setar quantos registros poderá visualizar por pagina e navegar entre as paginas da tabela
Histórico

Tela onde poderá ter um acompanhamento anual do valor dos extratos e verificar se foram enviados
Acessar o Extrato ( PDF )

- para acessar o extrato da conta equivalente ao mês da coluna basta clicar sobre o valor total
Situação( Cores )

para representar a situação do extrato da estação foram utilizado as seguintes cores
- Verde - O extrato desta estação foi enviado neste mês
- Vermelho - Não foi enviado o extrato deste mês desta estação
- Bege - Ainda não venceu o prazo para envio do extrato
obs: O prazo de vencimento do envio é o mês todo
Filtros
- Filtros e ordenação seguem o mesmo conceito da tela de extratos
Arquivos

Tela onde o Usuário poderá acessar os arquivos do Servidor para consultar e subir extratos novos
Navegação

- Para navegar pasta utilizar a coluna esquerda para selecionar a pasta que deseja visualizar ou utilizar a janela central para visualizar o conteúdo das pastas e também navegar entre elas
- Utilizar o duplo clique para abrir uma pasta
Funcionalidades
dependendo da seleção ( se foi selecionada uma pasta ou um arquivo ) os botões do cabeçalho irão alterar

- Ao Clicar em uma pasta
- Novo Diretório - Criar nova pasta ( irá criar dentro da pasta selecionada ex: 2022 )
- Upload Arquivos - Subir arquivos na pasta selecionada
- Tipo de visualização - Altera o tipo de visulização dos arquivos
- Atualizar - Atualiza a lista para verificar se houve alguma alteração

- Ao Clicar em um arquivo
- Baixar - Realizar o Dowload do arquivo selecionado
- Deletar - Exclui o arquivo selecionado
- Limpar sessão - Remove a seleção dos arquivos que estão selecionados
Ao clicar com o botão direito em cima de alguma pasta ou arquivo é possível acessar as mesmas funcionalidades do cabeçalho
❗ Importarte: au subir os aquivos, utilizar-se do mês de refêrencia ao invés do mês de vencimento para que possa ser mantido um padrao e facilitar no processamento dos arquivos
Editar UC

Tela onde o Usuário poderá realizar alterações dos dados nos registros das UCs
Alteração ( Editar )

- campos que são alteráveis estarão como caixa de texto
- para alterar basta clicar, alterar o texto e clicar em salvar
Gráficos
Interface desenvolvida para visualização dos dados de forma sintetizada e facilitar a visão analítica da relação consumo-gasto e a sua extensão pelos meses tanto da Unidade Operacional inteira quanto para seus devidos Setores.
Conta com a biblioteca recharts para a exibição desses gráficos e um algoritmo para o cálculo do consumo no backend, isto é, algoritmos internos que ocorrem por parte do servidor.

Exemplo de visualização da aba /graficos.
Processar
Painel Desenvolvido para deixar o site realmente vivo e não somente uma visualização dos dados que são - inicialmente obtidos por nós. Através desse site, o usuário consegue interagir de forma que realize tanto o seu próprio processamento selecionando a data do mês desejada, quanto o monitoramento através de uma tabela de logs que informa sobre o que está acontecendo durante a execução do processamento dos extratos.
Dito isso, posteriormente criamos o bloco “REPROCESSAMENTO” neste mesmo site com finalidade ainda mais facilitadora. Permite o usuário (com as devidas permissões), digitar o código da UC de um arquivo que ele deseja alterar (manter ou substituir por enquanto) e o mês que esse código de UC se refere, assim, não é necessário se preocupar em digitar precisamente o nome do arquivo… bastando apenas o código da UC.

Imagem contendo o bloco de Processamento

Imagem contendo o bloco de Reprocessamento

Imagem contendo o bloco de Status de Processamento
Tecnologias e Bibliotecas Utilizadas
Front-End
Principais:
- Nextjs - Framework utilizado para o sisteama
- ReactJS - Bilbioteca utilizada para contruir as interfaces
- JavaScript (Typescript) - Linguagem Escolhida para o desenvolvimento
Complementares:
- Axios - Biblioteca utilizada para realizar as requisições HTTP
- react-data-table-component - biblioteca de tabela
- recharts - Biblioteca de gráficos
- styled-Components - Criação de componentes estilizados
- react-toastify - Notificações push
- react-datepicker - input de data
- react-select - input de select
- react-loader-spinner - spinner de carregamento
- react-icons - biblioteca de icones
- primeicons - biblioteca de icones
- js-cookie - manipular cookies
- dowloadjs - biblioteca para dowload de arquivos
Back-End
Principais:
- PHP 8.0
- Python 3.7.8
- PyPDF2 - Edição e Visualização de Pdf’s
- SqlAlchemy - Conexão direta com banco de dados que permite as 4 funções INSERT, DELETE, UPDATE, SELECT
- connectorx - Biblioteca usada simultaneamente com a SqlAlchemy que permite a transcrição direta de registros do banco de dados em um formato DataFrame e o select é mais leve. Dessa forma, o SqlAlchemy ficou sendo usado para o INSERT e DELETE.
- Pandas - Biblioteca utilizada para gerenciamento dos DataFrames e conversão de DataFrames na memória para arquivos como .csv e .xlsx. Sua função no projeto é primordial para o envio do dados para o banco.
- Urllib - Biblioteca utilizada para codificação
- Pytesseract - Biblioteca que utiliza da tecnologia OCR para leitura e análise procedural de arquivos de extensão .pdf, através de um treinamento e estudos de caso para cada modelo de extratos contemplados nas pastas, adaptei o script para ler e extrair as informações desejadas de forma eficiente, variando os modelos entre: Elektro, Enel ou Cedri.
- Argparse - Biblioteca utilizada para receber parâmetros durante a execução de arquivos Python3 de forma externa tal como uma requisição HTTP(s), por exemplo.




