BP-Visionn
Sistema web interno desenvolvido para gestão de tarefas, pendências, contratos e acompanhamento operacional de representantes comerciais.
O projeto nasceu de uma necessidade real de melhorar a supervisão do setor financeiro e operacional da empresa, centralizando informações que antes eram controladas manualmente em planilhas e documentos separados.
Além do desenvolvimento do sistema, o projeto também foi utilizado para aplicação prática de conceitos de Git, GitHub, documentação técnica e práticas de Quality Assurance (QA).
🚀 Demonstração
Em constante evolução.
| Versão | Status | Última atualização |
|---|
| 1.0 | Em desenvolvimento | Julho/2026 |
📸 Telas do Sistema
📋 Sobre o Projeto
Antes do sistema, o acompanhamento das tarefas era realizado manualmente, dificultando o rastreamento das atividades, a distribuição das demandas e a visualização das informações em tempo real.
O BP-Visionn foi desenvolvido para oferecer maior organização, produtividade e controle operacional, permitindo que a supervisão acompanhe indicadores importantes do setor em um único ambiente.
✨ Funcionalidades
- Autenticação real por e-mail e senha (Supabase Auth), com sessão persistente e recuperação de senha por e-mail;
- Dashboard com métricas em tempo real e gráfico de tarefas por status;
- Calendário de vencimentos e eventos, com versão resumida na tela inicial de cada funcionária;
- Gestão de tarefas: criação, edição, exclusão, conclusão, reabertura e prorrogação (com histórico);
- Aba de pendências com atribuição e troca de responsável;
- Controle operacional dos contratos, com representante vinculado, edição do documento e histórico da última revisão;
- Módulo de representantes: cadastro, edição, pesquisa e filtros (região, status, supervisor);
- Histórico das alterações realizadas (auditoria);
- Controle de acesso por perfil de usuário (Supervisora e Funcionárias), reforçado no banco de dados via Row Level Security;
- Cadastro e edição dos dados da equipe pela Supervisora, direto em Configurações;
- Impressão e exportação de documentos em PDF via navegador;
- Modo escuro;
- Interface responsiva;
- Dados sincronizados em tempo real com o banco (Supabase).
🚀 Tecnologias Utilizadas
| Tecnologia | Utilização |
|---|
| React 19 | Interface e componentes |
| TypeScript | Tipagem do projeto |
| Vite | Ambiente de desenvolvimento |
| Supabase | Autenticação, banco de dados (Postgres) e Row Level Security |
| Git | Versionamento do código |
| GitHub | Hospedagem do código-fonte |
| Vercel | Deploy e hospedagem da aplicação |
| Impressão do navegador | Geração e exportação de documentos em PDF |
| CSS Variables | Tema claro e escuro |
| Lucide Icons | Ícones da aplicação |
🗄️ Banco de Dados
O schema (tabelas, políticas de segurança e funções) fica versionado como código em supabase/migrations, aplicado via SQL Editor do Supabase ou supabase db push.
| Tabela | Descrição |
|---|
profiles | Perfil de cada usuário (nome, cargo, setor, avatar) — 1:1 com a autenticação |
representantes | Representantes comerciais (nome, CPF, região, supervisor, status, entrada/saída) |
contratos | Contratos vinculados a um representante, com histórico da última revisão do documento |
tarefas / tarefas_historico | Boletos a pagar e o histórico de prorrogações de cada um |
pendencias | Notas fiscais em negociação com fornecedores |
auditoria | Trilha de auditoria (append-only) |
🔐 Controle de Acesso
O sistema utiliza controle de permissões baseado em perfis de usuários, aplicado tanto na interface quanto no banco de dados (Row Level Security).
| Perfil | Permissões |
|---|
| Supervisora (admin) | Acesso completo ao sistema |
| Financeiro | Cria e edita contratos, representantes e pendências; não exclui |
| Funcionárias | Visualização e gerenciamento das suas próprias tarefas |
🛡️ Segurança
- Autenticação real via Supabase Auth — login por e-mail/senha, sessão persistente e recuperação de senha por e-mail (sem revelar se um e-mail está cadastrado).
- Row Level Security habilitado em todas as tabelas: cada consulta ao banco já é filtrada pelo perfil de quem está logado, e não apenas escondida na tela.
- Restrições em nível de coluna: gatilhos no banco impedem que uma conta altere o próprio cargo/setor (autopromoção) ou edite campos fora do que a interface permite para o seu perfil.
- XSS corrigido na exportação de documentos (Contratos → Exportar PDF): o conteúdo é montado via
document.createElement/textContent, que nunca interpreta HTML, em vez de concatenar strings.
- Variáveis de ambiente nunca commitadas — apenas a chave pública (
anon key) do Supabase é exposta no navegador, como esperado nesse modelo; o acesso real aos dados é controlado pelas políticas do banco, não pela chave.
- Cabeçalhos de segurança (
vercel.json): CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy e Strict-Transport-Security aplicados em produção.
⚙️ Como Executar Localmente
# Clone o repositório
git clone https://github.com/barbaratechdev/BP-Visionn.git
# Acesse a pasta do projeto
cd BP-Visionn
# Instale as dependências
npm install
# Configure as variáveis de ambiente
cp .env.example .env.local
# edite .env.local com a URL e a anon key do seu projeto Supabase
# (Project Settings > API no painel do Supabase)
# Execute o projeto
npm run dev
Antes de logar, aplique as migrações em supabase/migrations no seu projeto Supabase (SQL Editor ou supabase db push) e crie os usuários em Authentication > Users.
Acesse:
http://localhost:5173
☁️ Deploy (Vercel)
O projeto é uma SPA estática (Vite + React), compatível com o preset "Vite" da Vercel sem configuração adicional. Um vercel.json já define os cabeçalhos de segurança da aplicação.
- Acesse vercel.com e importe o repositório
BP-Visionn do GitHub;
- A Vercel detecta o framework automaticamente (Build Command:
npm run build, Output Directory: dist);
- Em Settings > Environment Variables, adicione
VITE_SUPABASE_URL e VITE_SUPABASE_ANON_KEY com os valores do seu projeto Supabase;
- Clique em Deploy.
Para gerar o build de produção localmente:
npm run build
npm run preview
📁 Estrutura do Projeto
src/
├── components/ # Componentes de apresentação (Av, Badge, Calendario, ...)
├── lib/
│ ├── supabase.ts # Cliente Supabase
│ └── helpers.ts # Funções utilitárias e conversão de dados do banco
├── App.tsx # Componente principal (telas e regras de negócio)
├── constants.ts # Temas, listas e modelos de contrato
├── types.ts # Tipos TypeScript compartilhados
├── index.css
├── main.tsx
└── vite-env.d.ts
supabase/
└── migrations/ # Schema, RLS e funções do banco (versionado como código)
public/
images/
.env.example
package.json
vite.config.ts
vercel.json
tsconfig.json
README.md
🧪 Quality Assurance (QA)
Durante o desenvolvimento do projeto foram realizadas atividades relacionadas à validação das funcionalidades do sistema, incluindo:
- Testes funcionais;
- Identificação e correção de bugs;
- Validação das regras de negócio;
- Testes das funcionalidades implementadas;
- Testes realizados em ambiente local (localhost);
- Validação das correções aplicadas;
- Documentação das melhorias implementadas.
O projeto continua sendo utilizado como ambiente prático para evolução dos conhecimentos em desenvolvimento Front-end e Quality Assurance (QA).
🧠 Conceitos Aplicados
- Component-Based Development;
- Git e GitHub;
- Versionamento de código;
- Responsividade;
- UX/UI;
- Controle de permissões por perfil;
- Documentação técnica;
- Quality Assurance (QA);
- Organização e evolução contínua do produto.
🔄 Melhorias Futuras
As próximas versões do projeto contemplam:
- Melhorias na experiência do usuário (UX/UI);
- Navegação lateral responsiva para telas pequenas;
- Divisão do componente principal em telas menores, uma por rota/aba;
- Conectar a trilha de auditoria ao Supabase (hoje ainda é local ao navegador);
- Fluxo de convite/criação de conta real para novos usuários da equipe;
- Evolução do Dashboard;
- Implementação de automação de testes;
- Melhorias na acessibilidade;
- Novas funcionalidades operacionais;
- Evolução contínua da documentação técnica.
👩💻 Autora
Bárbara Pinon
- Estudante de Engenharia de Software;
- Desenvolvedora Front-end em formação;
- Interessada em Desenvolvimento Web e Quality Assurance (QA).
"Este projeto representa não apenas um sistema funcional, mas também a minha evolução prática em desenvolvimento de software, documentação técnica e resolução de problemas reais."
