Um CRM de cobrança feito para transformar planilhas soltas em controle de verdade.
Cobrança bem feita não é sobre perseguir gente — é sobre organização. O InteliCob nasceu como Projeto Integrador do bootcamp da Generation Brasil: um sistema de CRM (Customer Relationship Management) focado em gerenciamento de inadimplência, projetado para gerir clientes, histórico de cobranças e negociações de débitos de forma eficiente.
Esse é o repositório do front-end — a cara do sistema. Ele conversa com a API REST do backend e entrega uma experiência diferente pra cada tipo de usuário: quem é administrador enxerga o CRM inteiro; quem é operador vê só o que é seu.
🚧 Este projeto está em desenvolvimento ativo. Novas funcionalidades, telas e ajustes chegam com frequência — se você chegou aqui explorando, fique à vontade pra bisbilhotar o código.
O principal objetivo do InteliCob é centralizar e otimizar o fluxo de trabalho de uma equipe de cobrança: acompanhar dívidas em aberto, organizá-las por categoria e responsável, e dar visibilidade diferente pra quem administra o sistema e pra quem opera no dia a dia — sem depender de planilhas soltas.
- Administrador (
admin): gerencia todo o cadastro de dívidas e categorias, com poder de edição/exclusão sobre os dados de qualquer usuário. - Usuário comum (
user): consulta e cadastra registros, mas não pode alterar ou excluir dados de terceiros — só enxerga e mantém as cobranças atribuídas a si mesmo.
| 🔐 | Login (JWT) e cadastro de conta, com sessão persistente |
| 👑 | Dois perfis de acesso — Admin e User — cada um vendo só o que faz sentido pra ele |
| 💰 | CRUD completo de cobranças (Produtos): nome, valor do débito, data, status, categoria e responsável |
| 🚦 | Status de cobrança: Pago, Em acordo, Em atraso ou Sem negociação |
| 🔎 | Filtros de busca por status, categoria, CPF e ID de usuário |
| 🗂️ | CRUD completo de categorias de dívida (nome e descrição) |
| 🙋 | Visualização e edição do próprio perfil |
| 🧾 | Exclusão da própria conta — bloqueada automaticamente se houver cobranças vinculadas ao usuário, evitando que dívidas sejam apagadas junto |
| 👥 | Painel de usuários (visão exclusiva do admin), com busca por nome/CPF e detalhamento das cobranças de cada um |
| ℹ️ | Página institucional "Sobre nós" com a apresentação da equipe |
| 🔔 | Notificações (toast) de sucesso/erro em todas as ações de CRUD |
| 📱 | Interface totalmente responsiva: tabelas de listagem (usuários, cobranças, categorias) viram cards empilhados no celular, e formulários se ajustam para telas pequenas |
Front-end → React 19 + TypeScript + Vite
Estilo → Tailwind CSS 4
Rotas → React Router DOM 7
HTTP → Axios
UX extra → React Toastify · React Spinners · React Icons
Esse front conversa com um backend próprio (projeto-integrador), construído em:
API → Java 17 + Spring Boot 3.5.14 + Spring Data JPA
Segurança → Spring Security + JWT (jjwt 0.12.6)
Banco → MySQL / MariaDB via Hibernate
Docs de API → Swagger / OpenAPI 3
Deploy → Docker, com perfis dev/prod separados
src/
├── components/
│ ├── categoria/ → listar, cadastrar, editar, deletar categorias
│ ├── produto/ → listar, cadastrar, editar, deletar cobranças
│ ├── perfil/ → visualizar, editar e deletar o próprio perfil
│ ├── usuario/ → listagem de usuários (somente admin)
│ ├── navbar/
│ └── footer/
├── pages/
│ ├── home/
│ ├── login/
│ └── cadastro/
├── contexts/
│ └── AuthContext.tsx → sessão do usuário, persistida em localStorage
├── routes/
│ ├── RotaProtegida.tsx → exige apenas login
│ └── RotaAdmin.tsx → exige login + perfil admin
├── models/ → tipos TypeScript espelhando as entidades da API
├── services/
│ └── Service.ts → funções genéricas de consumo da API
└── utils/
| Rota | Componente | Proteção |
|---|---|---|
/ |
Home | pública |
/login |
Login | pública |
/cadastro |
Cadastro | pública |
/about |
About | pública |
/produtos |
ListarProdutos | autenticado |
/cadastrarproduto |
FormProduto | autenticado |
/editarproduto/:id |
FormProduto | admin |
/deletarproduto/:id |
DeletarProduto | admin |
/categorias |
ListaCategoria | autenticado |
/cadastrarcategoria |
FormCategoria | autenticado |
/editarcategoria/:id |
FormCategoria | admin |
/deletarcategoria/:id |
DeletarCategoria | admin |
/usuarios |
ListarUsuarios | admin |
/perfil |
Perfil | autenticado |
/editarperfil |
FormPerfil | autenticado |
/deletarperfil |
DeletarPerfil | autenticado |
A API de login não devolve o tipo do usuário — então, logo depois de autenticar, o front faz uma segunda chamada pra descobrir se quem entrou é admin ou user. A partir daí:
RotaProtegidaexige apenas que exista um usuário autenticado (token válido).RotaAdminexige, além do login, que otipodo usuário sejaadmin.- Rotas de editar/excluir cobrança, categoria e a lista de usuários exigem admin.
- Cards de listagem só mostram ações de editar/deletar pra quem tem permissão.
- Um
usercomum só vê as cobranças atribuídas a ele mesmo.
Antes de permitir que alguém apague a própria conta, o front busca todas as cobranças (/produtos) e verifica se existe alguma vinculada a esse usuário:
- Se houver cobranças vinculadas, a exclusão fica bloqueada — o botão de confirmação é desabilitado e uma mensagem explica que é preciso remover ou transferir as dívidas pendentes antes.
- Se não houver nenhuma, a exclusão segue normalmente.
Vale lembrar: tudo isso protege a interface. A validação completa de papéis — e a trava de exclusão com dívidas vinculadas — também precisa existir do lado da API (veja em "Próximos passos").
Antes de rodar o projeto localmente, certifique-se de que possui:
- Node.js 18+ instalado.
- O backend rodando (local ou apontando pro ambiente publicado).
- Um editor de código de sua preferência (VS Code é o mais usado pelo time).
-
Clonar este repositório:
git clone https://github.com/crmprojetointegrador/crm_front.git
-
Instalar as dependências:
npm install
-
Conferir a URL da API:
A URL do backend fica definida em
src/services/Service.ts. Ajuste ali se for apontar pra um backend diferente (local vs. produção). -
Rodar o servidor de desenvolvimento:
npm run dev
Acesse http://localhost:5173 🎉
-
Build de produção (quando for publicar):
npm run build
Ideias no radar pra evoluir o projeto, organizadas por frente:
- Paginação na página de Cobranças (Produtos): hoje a listagem carrega todos os registros de uma vez, o que não escala bem com grandes volumes de dívidas — a paginação vai trazer os dados em blocos, melhorando o tempo de carregamento e a experiência de navegação.
- Atendente/Backoffice: cadastra a dívida e registra os contatos, mas não altera status sozinho.
- Admin: aprova mudanças de status, gerencia usuários, vê tudo.
- Supervisor (papel intermediário): acompanha metas do time sem ter todos os poderes de admin — comum em operações de cobrança reais, onde o admin do sistema raramente é quem opera no dia a dia.
- Trilha de auditoria: registro de quem alterou o quê e quando (status, valor, categoria) — essencial em cobrança porque decisões financeiras precisam ser rastreáveis, inclusive por exigência legal.
- Parcelas, taxa de juros, multa por atraso, valor original vs. valor atualizado.
- Histórico de renegociação: cada proposta feita, aceita ou recusada — não só o status final.
- Anexos: comprovante de pagamento, contrato, print de acordo.
- Data de vencimento por parcela, não só uma data única.
- Trazer a entidade Cliente para a estrutura principal do projeto (hoje existe apenas em uma branch de testes, nunca chegou a ser integrada) — é o que falta para separar de fato quem é o devedor de quem opera o CRM.
- Registro de informações de contato vinculado ao Cliente (telefone, e-mail, endereço, histórico de interações), servindo de base para o painel de relacionamento citado acima.
- Bloquear no backend a exclusão de um usuário que possua cobranças (Produtos) vinculadas — hoje o relacionamento Usuario 1:N Produto permite apagar o usuário e perder as dívidas junto; o front já bloqueia essa ação na tela de exclusão de conta, mas essa regra precisa existir também na API (endpoint de exclusão de usuário), para não depender só da validação client-side.
- Timeline de interações: ligação, e-mail, WhatsApp, com resultado de cada uma ("sem resposta", "prometeu pagar dia X", "recusou acordo").
- Agendamento de próximo contato (follow-up automático aparecendo pra quem é responsável).
- Campo de observações livres por contato, visível pro time todo.
- Notificações automáticas por e-mail/WhatsApp quando uma parcela vence ou fica em atraso.
- Geração de boleto/PIX direto na negociação (integração com gateway de pagamento).
- Score de propensão a pagar, baseado em histórico — um possível próximo passo com IA/ML.
- Taxa de recuperação por período/categoria.
- Aging de dívida (quanto está há 30/60/90+ dias em atraso) — métrica clássica de cobrança.
- Ranking de desempenho por atendente/operador.
- Regras de horário permitido pra contato (regulamentação de cobrança no Brasil restringe horários).
- LGPD: consentimento e direito ao esquecimento do devedor.
- Opt-out de comunicação.
- Portal (ou até chatbot) onde o próprio devedor consulta a dívida e negocia sozinho, sem precisar de atendente.
- Foto de perfil (com armazenamento adequado no back-end)
- Alanis Santos — GitHub · LinkedIn
- Bruna Mendes — GitHub · LinkedIn
- Eliane Orlandin — GitHub · LinkedIn
- Flame Souza — GitHub · LinkedIn
Feito com 💜 por essa equipe, durante o bootcamp da Generation Brasil.