Aplicação de Gestão de Agenda e Insumos com React e Material UI
Segue o prompt atualizado com todas as informações para o desenvolvimento da aplicação: Desenvolver uma aplicação de gerenciamento de agenda e controle de insumos usando React com Material UI (MUI) como biblioteca de componentes. O projeto deve atender aos seguintes requisitos: Estrutura Geral Utilizar Vite para configuração inicial do projeto React. Integrar Material UI para estilização e construção de componentes reutilizáveis. Configurar o Bolt para um fluxo de desenvolvimento rápido, organizando rotas e APIs. Armazenar os links de conexão do PostgreSQL e MongoDB exclusivamente no arquivo .env, importando os para as configurações necessárias. Funcionalidades e Telas 1. Tela de Login Deve conter: Formulário de login com campos de email e senha. Um botão de login para autenticar o usuário no banco PostgreSQL. Um link para registro, que abrirá um modal de registro. Modal de Registro: Campos para inserir nome, email e senha. Validação de dados no frontend antes de enviar a requisição. Enviar os dados para o banco PostgreSQL para registrar o novo usuário. 2. Controle de Agendamento de Serviços Página de Agendamento: Exibir um calendário em formato de tabela 7x6 cobrindo toda a tela. Permitir navegação entre meses e anos. Cada célula do dia no calendário mostrará o número de serviços agendados. Ao clicar em um dia: Abrir um modal com os detalhes dos serviços agendados para aquele dia. Dois botões adicionais: "Novo Agendamento": Abrir um modal com formulário para criar um novo agendamento. O formulário deve incluir campos como data, hora, descrição, cliente, serviço e outros necessários. Ao enviar, os dados devem ser salvos no banco MongoDB. "Filtro": Abrir um acordeão com opções de filtro, como data, cliente, e tipo de serviço. Aplicar os filtros e exibir os resultados em um modal. 3. Controle de Insumos Página de Insumos: Permitir a inserção de novos insumos por meio de um formulário. Exibir uma tabela com os insumos cadastrados: Colunas para nome do insumo, quantidade, unidade de medida, e ações (editar/excluir). Ações no Header da Tabela: Cada coluna no header da tabela terá a funcionalidade de ordenação crescente e decrescente (ex.: nome, quantidade, unidade de medida). Filtros: Implementar filtros por nome do insumo, quantidade (faixas de valores), e unidade de medida. Ao aplicar os filtros, exibir apenas os resultados correspondentes na tabela. Ao editar ou excluir um insumo, sincronizar as alterações com o banco MongoDB. Tecnologias e Configurações Banco de Dados: PostgreSQL: Autenticação de usuários na tela de login. MongoDB: Armazenamento e gerenciamento de dados para agendamentos e insumos. Variáveis de Ambiente: Configurar links de conexão para PostgreSQL e MongoDB no arquivo .env e importá los para o projeto. MUI: Utilizar componentes como Grid, Accordion, Modal, Table, Pickers e Icons para construir a interface. Seguir um tema personalizado com paleta de cores coerente. Organização de Código Estrutura Modular: Separar componentes em pastas (components, pages, services, utils). APIs: Criar um módulo para lidar com requisições a PostgreSQL e MongoDB. Usar bibliotecas como axios ou fetch para chamadas HTTP. Gerenciamento de Estado: Implementar React Context API ou uma biblioteca de gerenciamento de estado como Zustand ou Redux, se necessário. Responsividade: Garantir que todas as telas sejam responsivas e funcionem bem em dispositivos móveis.
