Valverde Jurídico
Sistema SaaS de gestão jurídica para escritório de advocacia: clientes, processos, agenda, portal do cliente e site institucional, do UX ao back-end
- Meu papel
- Desenvolvedor Full Stack · Designer UX/UI
Valverde JurídicoContexto
O Valverde Jurídico é um escritório de advocacia. Fui o responsável único pelo projeto: desenhei a experiência e desenvolvi o sistema inteiro, do banco de dados às telas. Parti do site institucional, que migrei para Next.js mantendo o design system, e construí em sprints o painel do escritório e o portal do cliente.
Desafio
Clientes, processos, prazos e audiências estavam espalhados em planilhas e agendas, sem visão do andamento de cada caso. O sistema precisava organizar tudo num lugar só e, ao mesmo tempo, respeitar quem pode ver e fazer o quê: sócios, advogados, assistentes, financeiro e o próprio cliente, com dados sensíveis protegidos e cada alteração registrada.
O sistema, tela a tela
Todas as telas na mesma estrutura: menu lateral por módulo, busca no topo, números do momento em cards, tabelas e status coloridos e um único botão dourado para a ação principal.
- 01 / 20
Site institucional
A porta de entrada do escritório: a promessa de assessoria jurídica estratégica, as áreas de atuação, os diferenciais, depoimentos e o formulário de contato com validação no navegador e no servidor.
- 02 / 20
Portal do cliente
Uma área separada para o cliente do escritório entrar com o próprio e-mail e acompanhar o caso, com login, recuperação de senha e o mesmo sistema visual do site.
- 03 / 20
Dashboard
A visão geral do escritório: clientes ativos, processos ativos, processos urgentes e tarefas pendentes, a distribuição dos processos por status e os processos atualizados por último, com prioridade e status em cada linha.
- 04 / 20
Clientes
O CRM jurídico: busca por nome, CPF/CNPJ ou e-mail, filtros por status, tipo de pessoa, cidade, estado, responsável e etiquetas, ações em lote e exportação.
- 05 / 20
Ficha do cliente
Tudo sobre o cliente numa página: dados da pessoa ou da empresa, contatos, endereço e etiquetas, com abas de observações, timeline, documentos, processos, financeiro e agenda.
- 06 / 20
Novo cliente
O cadastro muda conforme o tipo, pessoa física ou jurídica, e valida CPF e CNPJ pelos dígitos verificadores antes de salvar.
- 07 / 20
Importação por CSV
Para trazer a carteira que já existia em planilha: o escritório arrasta um arquivo CSV e o sistema cadastra os clientes de uma vez.
- 08 / 20
Processos
A lista de processos com número CNJ, cliente, área do direito, classe, tribunal, vara, status, prioridade e advogado responsável, com filtros por período, tribunal, vara e etiquetas.
- 09 / 20
Kanban de processos
Os mesmos processos em colunas por status (novo, em andamento, aguardando documentação, aguardando audiência…). Arrastar o card muda o status e fica registrado na timeline.
- 10 / 20
Ficha do processo
O número CNJ validado, status e prioridade no topo e os dados do processo: classe, assunto, tribunal, comarca, vara, instância e valor da causa, com abas para tudo o que acontece no caso.
- 11 / 20
Partes envolvidas
Autor, réu, terceiros, testemunhas e peritos de cada processo, e na aba ao lado os responsáveis da equipe: advogado principal, auxiliar e assistente.
- 12 / 20
Comentários com menções
A conversa da equipe dentro do processo, com editor de texto, respostas e @menções que avisam o colega.
- 13 / 20
Checklist
O que falta para o processo andar (procuração, documentos, cálculos), com o progresso de itens concluídos.
- 14 / 20
Movimentações
O registro de cada andamento com data e autor. A origem fica guardada: manual ou vinda de integrações com tribunais, como o DataJud do CNJ e o PJe.
- 15 / 20
Timeline
A auditoria do caso: cada cadastro, parte, responsável, comentário e mudança de status aparece em ordem, com quem fez e quando.
- 16 / 20
Agenda jurídica
Os compromissos do escritório em números (hoje, próximos 7 e 30 dias, prazos e tarefas atrasados), os prazos críticos em destaque e as próximas audiências e reuniões.
- 17 / 20
Calendário
Visões de dia, semana, mês e lista, com cada tipo de evento numa cor. Dá para arrastar um evento para reagendar ou clicar num horário vazio para criar.
- 18 / 20
Prazos
Prazos processuais com responsável, prioridade e status (pendente, atrasado), ligados ao processo e com lembretes automáticos antes do vencimento.
- 19 / 20
Tarefas
As tarefas da equipe com checklist e percentual concluído, prioridade, status e prazo.
- 20 / 20
Integrações
A infraestrutura para conectar o escritório a serviços externos: filas de sincronização de processos, e-mail, notificações, OCR, documentos e inteligência artificial, com providers, webhooks e logs.
No celular
O painel se reorganiza para telas pequenas: os indicadores viram cards empilhados, o kanban rola de lado e a agenda mostra os números do dia primeiro.
Arquitetura
Um monorepo com pnpm e Turborepo, separando o front-end, que só conversa com a própria origem, do back-end, onde moram as regras.
Segurança e integridade
Um sistema jurídico guarda dados sensíveis, então a segurança foi tratada no back-end desde a primeira sprint:
Em números
Construído em sprints: site e base, clientes, processos, integrações e agenda. O módulo financeiro (contratos, honorários, parcelas e despesas) já existe no back-end, com as telas em desenvolvimento.
13
módulos no back-end
48
tabelas no banco de dados
6
perfis de acesso com permissões próprias
Sistema Visual
Um visual sóbrio para um escritório de advocacia: bege e branco nos fundos, o dourado como cor de ação, Playfair Display nos títulos para o tom tradicional e Inter no restante para a leitura de tabelas e formulários.
Paleta
Dourado
#C4A36E
Botões, item ativo do menu e destaques
Dourado Claro
#F3EDE2
Ícones, avatares e seleção
Bege Fundo
#FAF8F5
Fundo das telas
Bege Menu
#F6F3EE
Menu lateral
Grafite
#2B2B2B
Títulos e textos
Tipografia
Playfair Display
400 / 700
Títulos e logotipo
Inter
400 / 500 / 600
Interface, tabelas e formulários
Aprendizado
Construir um sistema desse tamanho sozinho pede ordem: começar pelo modelo de dados e pelas regras, entregar um módulo por sprint e só então desenhar as telas em cima do que o back-end garante. A arquitetura em módulos permitiu crescer de clientes para processos, agenda e integrações sem reescrever o que já funcionava.
Outros projetos para conhecer.
SaaS · Service DeskSETTE Tecnologia: Service Desk
Service Desk SaaS: portal do colaborador para abrir chamados e agendar atendimento, central da equipe de TI com fila, SLA e agenda, e app mobile, do UX ao back-end
Ver projeto
SaaS · Produto próprioSeu Barba
SaaS de agendamento para barbearias: marca, app e landing page de vendas, produto próprio em desenvolvimento
Ver projeto
SaaS · GestãoMinas Gás
Sistema de gestão para revenda de gás: pedidos, estoque e vasilhames, entregas, caixa e financeiro numa só aplicação web, com app para os motoristas
Ver projeto