add docs

README.md

@@ -1 +1,54 @@
-# hackton-MSI
+## Apresentação do Projeto 👷
+
+Esse protótipo de uma aplicação cuja principal função é fazer a **chamada de um grupo de funcionários** foi desenvolvida para o **hackathon da [Fatec Ourinhos](https://www.fatecourinhos.edu.br/) em conjunto com a empresa [MSI Soluções**](https://msisolucoes.com.br/). Temos 48 horas pra desenvolver um projeto com as seguintes instruções:
+
+------
+
+*Como criar a da lista de presença para uma empresa construtora, que precisa fazer uma chamada dos funcionários que estão presentes e cada uma das obras.* 
+
+*Observações:*
+
+1. *A chamada precisa ser online, para que os dados fiquem disponíveis para serem capturados pelo ERP;*  
+2. Os funcionários podem trabalhar em mais de uma obra no mesmo dia, por exemplo, a equipe que monta a parte elétrica percorre várias obras em diferentes períodos do dia e eles precisam estar na chamada.
+
+------
+
+### Descrição do Projeto 🗒
+
+A função de chamada dentro de uma empresa é utilizada para marcar a presença de funcionários durante um período. Esse projeto teve como principal funcionalidade executar essa tarefa além de incrementar algumas outras. Aqui além disso, como uma empresa de construção, podemos adicionar obras e funcionários e marcar sua presença em cada um deles separadamente com base em um período.
+
+### Tecnologias Utilizadas 🧰
+
+* Javascript e Typescript 
+* MYSQL
+* ReactJS
+* ExpressJS
+* Bootstrap
+
+### Capturas de Tela 🖼
+
+<img src="/docs/images/Home.png" alt="Home do programa">
+<img src="/docs/images/Chamada.png" alt="Página das chamadas">
+
+### Fluxo de Uso 💻
+
+Antes de tudo, é preciso termos obras e clientes para então gerenciá-los. Meu sistema guia durante todos esses passos. Após a criação de ambos, podemos realizar a chamada através de um período. Assim que finalizado, podemos voltar a chamada de um período e além de adicionar novas presenças, ver quais funcionários já foram marcados como presente.
+
+### Desafios e Soluções 📈
+
+O maior desafio foi gerenciar o tempo e a minha ambição em criar algo mais complexo e ter que isso ser deixado de lado pra garantir que eu entregasse algo, mesmo que menor, bem feito. Em segundo lugar, minha maior dificuldade foi gerenciar as `queries` pro banco de dados e cruzar as informações de várias tabelas ao mesmo tempo. Com um pouco de paciência, tudo deu certo.
+
+### Próximos Passos 🚀
+
+É aqui que eu deixo as features e melhorias que eu queria ter conseguido integrar até o fim do período do projeto:
+
+* Usar uma equipe formada de funcionários pré-especifados para realizar chamada de forma mais rápida.
+* Sistema de autenticação por login
+* Melhor design de página.
+* Refactoring de componentes do React.
+
+### Conclusão 🎓
+
+Gostei bastante do desafio por ser algo que parece muito simples inicialmente e você vê as horas passando e aí percebe a quantidade de trabalho que mesmo algo mais básico exige de você. Foi uma oportunidade de juntar muitas tecnologias diferentes e quebrar a cabeça pra fazer a maior quantidade de coisas possíveis do jeito certo. 
+
+**Agradeço a oportunidade de poder evoluir através de mais um projeto.**

frontend/src/components/UI/ItemList.tsx

@@ -13,15 +13,13 @@ const ItemList: React.FC<ItemListProps> = ({items}) => {
             {items.map((item, index) => {
                     return <li className="list-group-item  d-flex justify-content-around" key={index}>
                         <div className={'container align-items-center d-flex flex-row gap-2'}>
-                            <Image className={item.photo_uri} width={'50px'} height={'60rem'} src={item.photo_uri} thumbnail></Image>
+                            <Image className={item.photo_uri} width={'50px'} height={'60rem'} src={item.photo_uri}
+                                   thumbnail></Image>
                             <div className="container d-flex p-2 flex-column w-100">
                                 <h3 className={'center'}>{item.name}</h3>
                                 <p className={'center'}>Setor: {item.position}</p>
                             </div>
                         </div>
-                        <div className={'container d-flex justify-content-end align-items-center gap-2'}>
-                            <button className="btn btn-danger h-75">Apagar</button>
-                        </div>
                     </li>
                 }
             )}

frontend/src/pages/EmployeeRegister.tsx

@@ -170,7 +170,7 @@ const EmployeeRegister: React.FC = _ => {
                         )}
                     </ul>
                     <button disabled={markedEmployees.length === 0} onClick={onSubmitForm}
-                            className="btn btn-primary ">Fechar Chamada
+                            className="btn btn-primary mt-4">Fechar Chamada
                     </button>
                 </div>
             </>