fullstack-itaguacu / react-solarenergy Goto Github PK

Criar tela de Lançamento de geração mensal contendo um formulário com campos conforme o figma

• Lista como opção as unidades já cadastradas com Select
• Data
• Campo de total kw gerado (aceita somente números)
• Botão salvar (chama evento de onSubmit e cadastrar valores na API na rota /geracoes).

O modelo de referência é a imagem abaixo:

Criar uma tela de Dashboard contendo 4 cards, conforme o prototipo do figma
Total de unidades
Unidades ativas (exibir total de unidades com status ativo(true)
Unidades inativas (exibir total de unidades com status inativo(false)
Média de energia (soma de todos os total / total de unidades)

Dashboard

• total = tamanho da lista
• unidades ativas = filtro por ativa === true
• unidades inativas = filtro por ativa === false
• média = com base na tabela de lançamentos

O que fazer?

Criar um código de autenticação para a página de Login, contendo:

• Verificação no arquivo json (usuarios), da existência do usuário cadastrado
• Após a permissão de entrar, guardar o login no LocalStorage e redirecionar para a página de dashboard
• Caso não tenha permissão, apresentar uma mensagem informando o erro ("Acesso negado, verificar dados de e-mail e senha e tentar novamente) e recarregar a página inicial do sistema.

Criar uma tela de Listagem de unidades (exibida na rota /unidades) contendo uma tabela com as colunas baseado no protótipo do figma.

• ID
• Apelido
• Local
• Marca
• Modelo
• Botão remover: deve remover unidade clicada via DELETE na rota /unidades/:id
• Botão de editar: enviar usuário para tela de edição de unidade.

Ao renderizar a tela, trazer os campos preenchidos com as informações da unidade clicada, ao clicar em salvar, salvar os valores via PUT na rota /unidades/:id

Além disso, a tela deve conter um botão Nova unidade: enviar usuário para tela de cadastro de unidade.

Na tela de unidades é precisar usar um estado
apareceLista = estado inicial true

clico em nova unidade = false
clico em salvar = true

Deverá ser corrigido o problema referente ao dado que deveria ser numérico no INPUT da energia gerada.
{
"id_unidade": "abc",
"data": "2023-12",
"total": "150",
"id": "LBOiBdF"
}
Este valor deve ser salvo como numérico para evitar problemas de calculo de média.
{
"id_unidade": "abc",
"data": "2023-12",
"total": 150,
"id": "LBOiBdF"
}

Fix: Atualizar regra de negócio para mostrar tanto entradas de unidades ativas ou inativas. Mostrar mensagem caso não haja dados para serem mostrados no gráfico.

DESAFIO: A tela também deve conter um gráfico de linha exibindo os meses do ano. O gráfico deverá exibir o total de energia gerado por mês, sendo assim deve-se realizar a soma por mês do total gerado de todas as unidades e exibir no gráfico o total de cada mês, o eixo x deve-se exibir os últimos 12 meses e no eixo y o total por mês
Usar a lib react chart js

Instalar e configurar o ambiente de desenvolvimento com a lib react-bootstrap

Instalar e configurar a lib axios

Será necessário criar 3 endpoints na url http://localhost:3000/

Os dados deverão estar no arquivo data.json dentro da pasta /database que estará na raiz do projeto

• /usuarios

[
  {
  	id: "oioi",
  	email: [email protected],
  	senha: minhasenha,
  },
  {
  	id: "eiei",
  	email: [email protected],
  	senha: 123456,
  }
]

• /unidades

[
  {
	id: abc,
	apelido: Painel 1,
	local: Rua 5,
	marca: Canadian,
	modelo: 155w,
	ativa: true
  },
    {
	id: def,
	apelido: Painel 2,
	local: Rua 10,
	marca: Borboletinha,
	modelo: 220w,
	ativa: false
  },
]

• /lancamento

 [
  {
  	id: 123,
  	id_unidade: def,
  	data: 02/2022,
  	total: 80
  },
  {
  	id: 456,
  	id_unidade: def,
  	data: 03/2022,
  	total: 160
  }
]

Criar uma Tela de Login contendo um formulário com campos de email e senha, baseado no protótipo do figma.

• Os campos de email e senha são obrigatórios ( Validar ao disparar o evento de onSubmit).
• Ao clicar no botão de Entrar e passar pela validação, redirecionar para tela de Dashboard.

Uma tela de cadastro de unidade, conforme Figma e deve conter um formulário com os seguintes campos:

• Apelido,
• Local,
• Marca,
• Modelo
• Status (Checkbox) .

Ao clicar no botão salvar, chamar o evento de onSubmit e cadastrar unidade na API. Todos os campos do formulário são obrigatórios.

Criar estado:

• usar um estado
  apareceLista = estado inicial true
• clico em nova unidade = false
• clico em salvar = true

Atualizar arquivo Lancamento-mensal.module.css para correção de alguns conflitos

Criar uma tela de Lançamento de geração mensal contendo um formulário com um (listando como opção as unidades já cadastradas), um campo de data e um campo de total kw gerado (aceita somente números). O protótipo de referência está no figma. Botão Salvar Ao clicar em salvar, chamar evento de onSubmit e cadastrar valores na API (na rota /geracoes). O modelo abaixo da tela.