Minas 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
- Meu papel
- Desenvolvedor Full Stack · Designer UX/UI
Minas GásContexto
O Minas Gás é um sistema criado para a rotina de uma revenda de gás. Acompanhando a empresa de perto, ficou claro que o problema ia muito além de registrar vendas: era preciso organizar os pedidos, controlar o estoque e os vasilhames, acompanhar as entregas, fechar o caixa e saber quem está devendo. Projetei e desenvolvi a aplicação de ponta a ponta, da interface ao banco de dados.
Desafio
A operação dependia de caderno, planilha e memória: o pedido chegava por telefone, o botijão saía sem registro, o fiado ficava anotado à parte e o caixa só fechava no fim do dia, quando fechava. Além de reunir tudo num lugar só, o sistema precisava respeitar quem pode fazer o quê. O motorista não deve ver o financeiro, o atendente não deve ver o preço de custo, e essas regras não podem depender só de esconder um botão na tela.
O sistema, módulo a módulo
Doze módulos na mesma estrutura: menu lateral fixo em verde-petróleo, números do dia no topo de cada tela, tabelas com status coloridos e um único botão laranja para a ação principal.
- 01 / 15
Acesso por perfil
A tela de entrada já diz a que o sistema veio (“Sua operação, sob controle.”) e cada pessoa entra com o próprio usuário. O que ela vê depois depende do perfil: administrador, atendente ou motorista.
- 02 / 15
Visão geral
A central de operação abre com os números do dia em cards: vendas, faturamento, ticket médio, pedidos em aberto, contas a receber, caixa atual e estoque crítico. Logo abaixo, os produtos mais vendidos e a atividade recente, com o status de cada pedido.
- 03 / 15
Nova venda
O atendente busca o cliente (ou cadastra um novo), confirma o endereço de entrega, adiciona os produtos e escolhe a forma de pagamento: Pix, dinheiro, cartão ou fiado. O resumo com o total fica fixo ao lado até a confirmação.
- 04 / 15
Pedido confirmado
A confirmação mostra o número do pedido, o cliente, o endereço, os itens e o total, e leva direto para a separação. Uma chave de idempotência impede que um clique duplo crie o mesmo pedido duas vezes.
- 05 / 15
Separação
Antes de liberar para o motorista, a equipe confere os itens e o lacre e o vasilhame de cada botijão. Só com o checklist completo o pedido segue para a entrega.
- 06 / 15
Gestão de pedidos
Todos os pedidos numa lista com busca e filtros por período e status (confirmado, em separação, entregue), com cliente, itens, total e forma de pagamento em cada linha.
- 07 / 15
Agendamentos
Entregas programadas para o dia, com horário, cliente, bairro, motorista e confirmação, e os números de hoje, confirmados e a confirmar.
- 08 / 15
Painel de entregas
O acompanhamento da rua: o que está na fila, em rota e concluído, com o fluxo de cada entrega (pedido confirmado, em separação, em rota, entregue) e as ocorrências.
- 09 / 15
Clientes
A base de clientes com telefone, bairro, última compra, saldo em aberto e status, para o atendente saber na hora quem está devendo antes de vender fiado.
- 10 / 15
Produtos
O catálogo com código, categoria, preço de venda e estoque mínimo de cada item. O preço de custo existe no banco, mas só o administrador consegue vê-lo.
- 11 / 15
Estoque e vasilhames
A posição de cada produto com cheios, vazios e vasilhames, e o alerta de estoque crítico em vermelho quando um item passa do mínimo. Numa revenda de gás, o vasilhame é patrimônio e precisa fechar a conta.
- 12 / 15
Caixa
Abertura, movimentações e fechamento do caixa por operador: saldo atual, entradas, saídas e diferença, com cada venda e despesa lançada na hora.
- 13 / 15
Contas a receber
O fiado organizado: títulos em aberto com vencimento e situação (pendente, atrasado, pago) e o registro do recebimento, que entra no caixa.
- 14 / 15
Compras e despesas
Compras de gás e de água, combustível, energia e manutenção, com fornecedor, vencimento e status, para fechar o mês sabendo o que entrou e o que saiu.
- 15 / 15
Usuários e permissões
A equipe com perfil e último acesso, e a matriz de permissões que mostra o que cada perfil pode fazer em vendas, dados financeiros, preço de custo e entregas.
O app do motorista
O motorista usa o sistema no celular, com uma interface própria: as entregas do dia com a próxima em destaque, o detalhe com endereço, itens e valor, um checklist para confirmar a entrega e o recebimento, e o registro de ocorrências quando algo sai do planejado.
Arquitetura
A interface é uma aplicação React; as regras de negócio moram no banco, onde nenhuma tela consegue contorná-las.
Segurança e integridade dos dados
A principal preocupação foi garantir que as permissões valessem no banco, e não só na interface. Estes mecanismos foram implementados e conferidos em auditoria técnica:
Testes e qualidade
Na última revisão técnica, em 29/09/2026, toda a bateria de testes passou, junto com as validações de lint e build. O sistema segue em evolução, com melhorias de interface, novas funcionalidades e verificações de segurança e infraestrutura.
358
testes automatizados executados com sucesso
12
módulos integrados numa só aplicação
3
perfis de acesso com regras no banco (RLS)
Design system
Uma biblioteca de componentes para manter os módulos consistentes: botões de ação principal, secundária e indisponível, status (confirmado, em andamento, atenção) e os padrões de espaçamento, bordas e hierarquia de texto.
Sistema Visual
Uma aparência profissional com cores ligadas ao setor: o verde-petróleo dá estrutura e confiança ao menu e às áreas principais, o verde operacional marca o que está certo, e o laranja aparece só onde há ação ou alerta, para a equipe bater o olho e saber o que precisa de atenção.
Paleta
Verde Petróleo
#123D35
Menu lateral, topo do app do motorista e áreas de marca
Verde Operacional
#16856B
Status confirmados, valores recebidos e destaques positivos
Laranja
#F0782B
Ação principal, item ativo do menu e alertas
Cinza Claro
#F5F7F8
Fundo das telas e áreas de trabalho
Grafite
#17212B
Títulos, textos e tabelas
Tipografia
Inter
400 / 500 / 700
Fonte única: títulos de 28 a 32 px, seções de 16 a 18 px e corpo de 12 a 14 px
Aprendizado
Desenvolver software vai muito além de escrever código. Foi preciso entender os processos da revenda, modelar os dados, definir regras de negócio e permissões, tratar as exceções do dia a dia e construir telas que façam sentido para quem atende o telefone e para quem está na rua com o botijão. É o projeto que reúne tudo em que venho me aprofundando como desenvolvedor: front-end, back-end, banco de dados, arquitetura, segurança e testes.
Outros projetos para conhecer.
SaaS · JurídicoValverde 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
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
Cidadania & ImigraçãoVogel Cidadania Italiana
Landing page de captação para assessoria de cidadania italiana, do UX/UI ao código em React, com formulário de avaliação gratuita, API de leads e versão mobile
Ver projeto