Giter Club home page Giter Club logo

next-app-desafio's Introduction

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

Area de Login

Forget

Area de recuperação de Senha

Primeira Etapa: Inserir o e-mail.

Recuperar Senha

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

E-mail da Recuperação

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

Recuperar Senha - Etapa 1

Ultima Etapa: Inserir nova senha

Recuperar Senha - Etapa Final

Visão do Colaborador

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

Dashboard - Visão Colaborador

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

Ordem de serviço - Visão Colaborador

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

Finalizar Ordem de serviço - Visão Colaborador

Visão do Gestor

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

Dashboard - Visão Gestor

Tabela de visão de Colaboradores

Colaboradores - Visão Gestor

Tabela de visão dos Clientes

Clientes - Visão Gestor

Tabela de visão das Ordens de serviço

Ordens de serviço - Visão Gestor

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

Filtragem - Ordem de serviço - Visão Gestor

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

Adicionar Cliente - Visão Gestor

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

Adicionar Colaborador - Visão Gestor

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

Adicionar Nova Ordem de serviço - Visão Gestor

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

Adicionar Nova Ordem de serviço (Escolher cliente) - Visão Gestor

Adicionar Nova Ordem de serviço (Escolher cliente - Select) - Visão Gestor

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

Adicionar Nova Ordem de serviço (Escolher Colaborador)

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

Histórico - Visão Gestor

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.

Modal de Ordem de Serviço no Historico - Visão Gestor

next-app-desafio's People

Contributors

danielxavierjob avatar

Stargazers

CaioImperial avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.