Voltar para o portfólio
SaaS · Gestão

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ásMinas Gás
01

Contexto

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.

Cliente
Minas Gás
Categoria
SaaS · Gestão
Papéis
Desenvolvedor Full Stack, Designer UX/UI
Stack
React, TypeScript, Vite, Supabase, PostgreSQL, Vitest, Vercel
02

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.

03

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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. 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. 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. 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. 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. 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 / 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.

04

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.

Login, entregas do dia, detalhe da entrega e recebimento registrado
05

Arquitetura

A interface é uma aplicação React; as regras de negócio moram no banco, onde nenhuma tela consegue contorná-las.

Front-end
React 19, TypeScript e Vite, com React Router e CSS próprio
Back-end
Supabase com PostgreSQL 17; regras de negócio em funções no banco, separadas entre os schemas api e private
Qualidade
Testes automatizados com Vitest e Testing Library, além de lint e build a cada revisão
Entrega
Versionamento com Git e GitHub e deploy da aplicação web pela Vercel
06

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:

Row Level Security
Políticas de RLS nas tabelas: cada perfil só lê e grava o que lhe cabe
Perfis
Permissões separadas para administrador, atendente e motorista
Dados sensíveis
Informações financeiras, como preço de custo, restritas a quem tem permissão
Funções expostas
Cada função do banco valida a permissão de quem chama antes de executar
Idempotência
Chaves que impedem pedidos e lançamentos duplicados
Auditoria
Histórico das alterações feitas em pedidos
07

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)

08

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.

Componentes e estados

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

09

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.