Next.Js APP Colaborador & Gestor

Um painel de gestão básica de Ordens de serviço, com visão de Colaborador e Gestor.

Instalação

Depois de instalado a ENDPOINT do aplicativo (Caso não tenha instalado acesse: nest-api-desafio) siga estes passos:

Antes de começar a instalação, editar os arquivos src/service/auth.ts e src/service/axios.ts, alterar 192.168.0.16 para sua ENDPOINT, após isso prossiga com a instalação.

Com docker

  docker build -t next-app-desafio .
  docker run -p 3000:3000 next-app-desafio

Com npm

  npm install
  npm run build
  npm start

A URL de acesso será http://localhost:3000

Aprendizados

Recebi a instrução de fazer o Projeto de Seleção da MonteNegro no dia 03/09/2022 e a data de entrega até o dia 08/09/2022, as linguagens eram Next.Js (Front), Nest.Js(Back), MySQL (database), Docker. Com muito esforço e dedicação consegui terminar este aplicativo com todos Bonus do Desafio e mais ainda. Acredito fortemente em que podemos dar nosso melhor independente das circustancias.

Stack utilizada

Front-end: React, Next.JS, Axios, TailwindCSS, Mui, Docker

Back-end: Node, Nest.Js, NodeMailer, TypeORM, Docker

Documentação + Screenshots

Imagens de demonstração do Painel com explicações

Auth

Area de login

Forget

Area de recuperação de Senha

Primeira Etapa: Inserir o e-mail.

E-mail de recuperação: obter o código enviado para o e-mail.

Segunda Etapa: Inserir o código que foi enviado para o e-mail.

Ultima Etapa: Inserir nova senha

Visão do Colaborador

Dashboard do Colaborador, onde ele poderá ver as Ordens de serviços ativas em seu nome

Demonstração do Card da ordem de serviço

Ao clicar no botão Finalizar será pedido para dar uma solução a resolução do problema

Visão do Gestor

Grafico contendo todas as Ordens de serviços abertas por dia durante o mês

Tabela de visão de Colaboradores

Tabela de visão dos Clientes

Tabela de visão das Ordens de serviço

Demonstração de Filtragem nas Ordens de Serviço (Este metodo se aplica para todas as tabelas do Painel)

Demonstração de Adição de um novo Cliente

Demonstração de Adição de um novo Colaborador

Demonstração de adição de uma nova Ordem de serviço

Ao clicar em "Nome do Cliente" irá abrir um modal contendo um SELECT com os nomes dos Clientes, a primeira opção será "Adicionar um novo Cliente" onde será exibido outro Modal para adicionar um novo cliente, após criar um novo cliente, ele será automaticamente selecionado para criar a Ordem de serviço

Ao clicar em "Nome do Colaborador" irá abrir um modal contendo um SELECT com os nomes dos Colaboradores, a primeira opção será "Adicionar um novo Colaborador" onde será exibido outro Modal para adicionar um novo Colaborador, após criar um novo colaborador (ou selecionar), ele será automaticamente selecionado para a criação de Ordem de serviço

Histórico de Ordens de serviço dos colaboradores, nesta tabela será exibido todas as ordens de serviço completas.

Ao dar um duplo clique em qualquer linha da tabela, irá ser exibido um modal contendo as informações dessa Ordem de serviço, incluindo data de fechamento e solução.