├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── public
├── _redirects
└── index.html
├── src
├── App.tsx
├── assets
│ └── images
│ │ ├── arrow-right.svg
│ │ ├── clientes.svg
│ │ ├── entregas.svg
│ │ ├── home.svg
│ │ └── icon-plus.svg
├── components
│ ├── Content
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── Header
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── Icon
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── MainContainer
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── Modal
│ │ ├── DeleteCustomerModal
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── NewOccurrenceModal
│ │ │ └── index.tsx
│ │ ├── SearchCustomerModal
│ │ │ └── index.tsx
│ │ └── index.tsx
│ ├── NavLink
│ │ └── index.tsx
│ └── SideBar
│ │ ├── index.tsx
│ │ └── styles.ts
├── hooks
│ ├── useCustomers.tsx
│ └── useDeliveries.tsx
├── index.tsx
├── mirage
│ └── index.ts
├── react-app-env.d.ts
├── routes.tsx
├── services
│ └── api.ts
├── shared
│ ├── Button
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── Input
│ │ └── index.tsx
│ └── Textarea
│ │ └── index.tsx
├── styles
│ ├── global.ts
│ └── view
│ │ ├── create-new-delivery.ts
│ │ ├── customers.ts
│ │ ├── dashboard.ts
│ │ ├── deliveries.ts
│ │ ├── delivery-details.ts
│ │ └── registration-customer.ts
├── types.ts
├── utils
│ └── format.ts
└── view
│ ├── CreateNewDeliveryView.tsx
│ ├── CustomersView.tsx
│ ├── DashboardView.tsx
│ ├── DeliveriesView.tsx
│ ├── DeliveryDetailsView.tsx
│ └── RegistrationCustomerView.tsx
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Glauber de Oliveira Matos
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
7 |
9 |
10 |
13 |
14 |
15 |
19 |
20 |
21 |
22 | 🚧 Aplicação finalizada! 🚧
23 |
24 |
25 | ## 🏁 Tópicos
26 |
27 |
28 | 👉 Sobre Funcionalidades Melhorias Como executar Tecnologias Autor Licença
37 |
38 |
39 |
40 | ## 💻 Sobre o projeto
41 |
42 | O Algalog-web é uma aplicação que permite gerenciar os pedidos de entrega de uma empresa de logistica.
43 |
44 | O objetivo deste projeto era se desafiar a criar todo o frontend desde o UI Design até o resultado final em ReactJS. Para então, conectar com o backend java desenvolvido durante um treinamento gratuito sobre api-rest com spring-boot, saiba mais sobre a api **[AQUI](https://github.com/glaubermatos/algalog-api)**.
45 |
46 | Confira o resultado no link abaixo:
47 |
48 |
49 |
51 |
52 | ---
53 |
54 |
158 | 🌟 Glauber de Oliveira Matos 🌟
162 |
163 | [](https://www.linkedin.com/in/glaubermatos/)
164 |
165 | ---
166 | AlgaLog
11 |
12 | You need to enable JavaScript to run this app.
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter} from 'react-router-dom'
2 | import { ToastContainer } from 'react-toastify';
3 |
4 | import { Routes } from './routes';
5 |
6 | import { DeliveriesProvider } from './hooks/useDeliveries';
7 | import { CustomersProvider } from './hooks/useCustomers';
8 |
9 | import { SideBar } from "./components/SideBar";
10 | import { MainContainer } from "./components/MainContainer";
11 | import { Content } from './components/Content';
12 |
13 | import { GlobalStyle } from "./styles/global";
14 | import 'react-toastify/dist/ReactToastify.min.css'
15 |
16 | export function App() {
17 |
18 | return (
19 |
20 |
21 |
32 |
33 |
34 |
35 |
37 |
38 |
39 |
40 |
41 |
42 | );
43 | }
--------------------------------------------------------------------------------
/src/assets/images/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
--------------------------------------------------------------------------------
/src/assets/images/clientes.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/assets/images/entregas.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/src/assets/images/home.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/assets/images/icon-plus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
--------------------------------------------------------------------------------
/src/components/Content/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { Container } from "./styles";
3 |
4 | interface ContentProps {
5 | children: ReactNode
6 | }
7 |
8 | export function Content(props: ContentProps) {
9 | return(
10 |
11 | {props.children}
12 |
13 | );
14 | }
--------------------------------------------------------------------------------
/src/components/Content/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const Container = styled.div`
4 | max-width: 1120px;
5 | margin: 0 auto;
6 | `
--------------------------------------------------------------------------------
/src/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import { Container } from "./styles";
2 | import { Icon } from "../Icon";
3 | import { Title } from "../../styles/global";
4 | import { ReactNode } from "react";
5 |
6 | interface HeaderProps {
7 | iconName?: 'home' | 'entregas' | 'clientes';
8 | title: string;
9 | helpText?: string;
10 | children?: ReactNode;
11 | }
12 |
13 | export function Header({iconName, title, helpText, children}: HeaderProps) {
14 | return(
15 |
16 |
17 | {iconName ? (
18 |
19 | ) : (<>)}
20 |
21 |
{ title }
22 | {helpText ? (
23 | { helpText }
24 | ) : (<>)}
25 |
26 |
28 | {children}
29 |
30 |
31 | );
32 | }
--------------------------------------------------------------------------------
/src/components/Header/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const Container = styled.header`
4 | border-bottom: 1px solid var(--gray-200);
5 | display: flex;
6 | justify-content: space-between;
7 | align-items: flex-start;
8 |
9 | .info-container {
10 | border-bottom: 1px solid var(--gray-600);
11 | padding-bottom: 1rem;
12 |
13 | display: flex;
14 | gap: 1.5rem;
15 | }
16 |
17 | .box-title {
18 |
19 | span {
20 | display: block;
21 | margin-top: 0.5rem;
22 | font-weight: 400;
23 | color: var(--gray-400);
24 | }
25 | }
26 |
27 | .actions {
28 |
29 | }
30 | `
--------------------------------------------------------------------------------
/src/components/Icon/index.tsx:
--------------------------------------------------------------------------------
1 | import { IconSvg } from './styles'
2 |
3 | interface IconProps {
4 | name: string;
5 | size?: number;
6 | color?: 'primary-light' | 'gray';
7 | strokeWidth?: string
8 | }
9 |
10 | export function Icon(props: IconProps) {
11 |
12 | const { name: iconName, size, color, strokeWidth = '2' } = props;
13 |
14 | return(
15 | renderIcon(iconName)
16 | );
17 |
18 | function renderIcon(iconName: string) {
19 | switch (iconName) {
20 | case 'home':
21 | return (
22 | )
25 |
26 | case 'entregas':
27 | return (
28 | )
33 |
34 | case 'clientes':
35 | return (
36 | )
39 |
40 | default:
41 | return <>
42 | }
43 | }
44 | }
--------------------------------------------------------------------------------
/src/components/Icon/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | interface IconSvgProps {
4 | color?: 'primary-light' | 'gray';
5 | }
6 |
7 | export const IconSvg = styled.svg`
8 |
9 | & path {
10 | stroke: ${(props) => {
11 | switch (props.color) {
12 | case 'gray':
13 | return 'var(--gray-600)';
14 |
15 | case 'primary-light':
16 | return 'var(--primary-color-light)';
17 |
18 | default:
19 | return 'var(--background-color)';
20 | }
21 | }};
22 |
23 |
24 | }
25 | `
--------------------------------------------------------------------------------
/src/components/MainContainer/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { Container } from "./styles";
3 |
4 | interface MainContainerProps {
5 | children: ReactNode
6 | }
7 |
8 | export function MainContainer(props: MainContainerProps) {
9 | return(
10 |
11 | {props.children}
12 |
13 | );
14 | }
--------------------------------------------------------------------------------
/src/components/MainContainer/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const Container = styled.main`
4 | margin-left: var(--sidebar-width);
5 | padding-top: 4rem;
6 |
7 | `
--------------------------------------------------------------------------------
/src/components/Modal/DeleteCustomerModal/index.tsx:
--------------------------------------------------------------------------------
1 | import { FiTrash2 } from "react-icons/fi";
2 |
3 | import { Modal } from "../";
4 | import { Button } from "../../../shared/Button";
5 |
6 | import { Customer } from "../../../types";
7 | import { Content } from "./styles";
8 |
9 | interface DeleteCustomerModalProps {
10 | isDeleteCustomerModalOpen: boolean;
11 | customerToDelete: Customer;
12 | onRequestClose: () => void;
13 | onDeleteCustomer: (customer: Customer) => void;
14 | }
15 |
16 | export function DeleteCustomerModal({
17 | customerToDelete,
18 | isDeleteCustomerModalOpen,
19 | onRequestClose,
20 | onDeleteCustomer }: DeleteCustomerModalProps) {
21 |
22 |
23 | function handleCloseDeleteCustomerModal() {
24 | onRequestClose()
25 | }
26 |
27 | function handleDeleteCustomer(customer: Customer) {
28 | onDeleteCustomer(customer)
29 | }
30 |
31 | return(
32 |
37 |
38 | {customerToDelete.nome}
40 | Quer mesmo excluir esse cliente? Ele será removido pra sempre.
41 |
42 |
46 | Cancelar
47 |
48 | handleDeleteCustomer(customerToDelete)}
51 | >
52 | Excluir cliente
53 |
54 |
55 |
56 |
57 | )
58 | }
--------------------------------------------------------------------------------
/src/components/Modal/DeleteCustomerModal/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { PageContent } from "../../../styles/global";
3 |
4 | export const Content = styled(PageContent)`
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 |
9 | svg {
10 | stroke: var(--danger-color);
11 | }
12 |
13 | span {
14 | text-transform: uppercase;
15 | margin-top: 2rem;
16 | margin-bottom: 1.5rem;
17 | font: 500 1rem 'Inter', sans-serif;
18 | color: var(--gray-800);
19 | }
20 |
21 | p {
22 | margin-bottom: 3rem;
23 | font: 500 1.125rem 'Inter', sans-serif;
24 | line-height: 1.40625rem;
25 | max-width: 19rem;
26 | text-align: center;
27 | color: var(--gray-400);
28 | }
29 |
30 | .modal-actions {
31 | display: flex;
32 | justify-content: center;
33 | align-items: center;
34 | gap: 1rem;
35 |
36 | button.default {
37 | color: var(--danger-color);
38 | }
39 | }
40 | `
--------------------------------------------------------------------------------
/src/components/Modal/NewOccurrenceModal/index.tsx:
--------------------------------------------------------------------------------
1 | import { FormEvent, useState } from "react";
2 | import { toast } from "react-toastify";
3 |
4 | import { api } from "../../../services/api";
5 |
6 | import { Modal } from "../";
7 |
8 | import { Button } from "../../../shared/Button";
9 | import { Textarea } from "../../../shared/Textarea";
10 |
11 | interface NewOccurrenceProps {
12 | isOpen: boolean;
13 | onRequestClose: () => void;
14 | onLoadOccurrences: () => void;
15 | entregaId: number;
16 | }
17 |
18 | export function NewOccurrenceModal({isOpen, onRequestClose, onLoadOccurrences, entregaId}: NewOccurrenceProps) {
19 |
20 | const [descricao, setDescricao] = useState('')
21 |
22 | function handleSubmit(event: FormEvent) {
23 | event.preventDefault()
24 |
25 | const data = {
26 | descricao
27 | }
28 |
29 | api.post(`/entregas/${entregaId}/ocorrencias`, data)
30 | .then(response => {
31 | toast.success('Ocorrência adicionada ao pedido')
32 | onLoadOccurrences()
33 | onRequestClose()
34 | })
35 | .catch(response => {
36 | console.log(response.data)
37 | toast.error('Erro ao tentar salvar a ocorrência')
38 | })
39 | }
40 |
41 | return(
42 |
47 | 
3 |
4 | 
5 |
6 |
7 | 
8 |
9 |
10 | 
11 |
12 | 
16 | 
50 |
51 |
52 | ---
53 |
54 |
55 |
56 | ## ⚙️ Funcionalidades
57 |
58 | - [x] Página inicial com informações sobre a quantidade de entregas e clientes;
59 | - [x] Cadastrar novo clientes;
60 | - [x] Atualizar dados do cliente;
61 | - [x] Solicitar nova entrega;
62 | - [x] Pesquisar cliente por nome;
63 | - [x] Listagem das solicitações de entrega;
64 | - [x] Listagem dos clientes;
65 | - [x] Excluir usuário (desde que não tenha entregas cadastradas em seu nome);
66 | - [x] Visualizar dados da solicitação de entrega;
67 | - [x] MUdanças de status da entrega (Em andamento, Cancelada, Finalizada);
68 | - [x] Adicionar ocorrencias (situações que impeçam a entrega);
69 |
70 | ---
71 |
72 |
73 | ## ⚙️ Melhorias
74 | - [ ] Trabalhar o leyout responsivo;
75 | - [ ] Mostrar um load de carregamento nas páginas enquanto o servidor não retorna os dados do backend;
76 |
77 | ---
78 |
79 |
85 |
86 |
95 |
96 | ## 🚀 Como executar o projeto
97 |
98 | ### Pré-requisitos
99 |
100 | Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
101 | [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/), [Yarn](https://classic.yarnpkg.com/en/docs/install).
102 | Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)
103 |
104 |
105 | #### 🧭 Rodando a aplicação web (Frontend)
106 |
107 | ```bash
108 |
109 | # Clone este repositório
110 | $ git clone https://github.com/glaubermatos/algalog-web.git
111 |
112 | # Acesse a pasta do projeto no seu terminal/cmd
113 | $ cd algalog-web
114 |
115 | # Instale as dependências
116 | $ yarn
117 |
118 | # Execute a aplicação em modo de desenvolvimento
119 | $ yarn start
120 |
121 | # A aplicação será aberta na porta:3000 - acesse http://localhost:3000
122 |
123 | ```
124 |
125 | ---
126 |
127 | ## 🛠 Tecnologias
128 |
129 | Este é um projeto criado com o **[Create React App](https://github.com/facebook/create-react-app)**.
130 | As seguintes ferramentas foram usadas na construção do projeto:
131 |
132 | #### **Aplicação web** ([ReactJS](https://pt-br.reactjs.org/) + [TypeScript](https://www.typescriptlang.org/))
133 |
134 | - **[Styled Components](https://styled-components.com/)**
135 | - **[React Router DOM](https://reactrouter.com/)**
136 | - **[Axios](https://github.com/axios/axios)**
137 | - **[React Icons](https://react-icons.github.io/react-icons/)**
138 | - **[React Modal](http://reactcommunity.org/react-modal/)**
139 | - **[React-Toastify](https://fkhadra.github.io/react-toastify/introduction)**
140 | - **[MirageJS](https://miragejs.com/)**
141 |
142 |
143 | > Veja o arquivo [package.json](https://github.com/glaubermatos/algalog-web/blob/main/package.json)
144 |
145 | #### **Utilitários**
146 |
147 | - Editor: **[Visual Studio Code](https://code.visualstudio.com/)**
148 | - Ícones: **[Feather Icons](https://feathericons.com/)**
149 | - Fontes: **[Inter](https://fonts.google.com/specimen/Inter)** | **[Nunito](https://fonts.google.com/specimen/Nunito)**
150 |
151 | ---
152 |
153 |
154 |
155 | ## 🦸♂️ **Autor**
156 |
157 | 