Vitra App

O Vitra é um app para lojistas que usam maquininhas de cartão. Neste projeto, desenhei o módulo Gestor de vendas: o lugar onde a pessoa vê, em tempo real, o que vendeu no crédito, no débito e no pix, em uma ou em várias lojas.

Os requisitos vieram prontos no briefing e o prazo era curto, sem etapa de descoberta. Por isso, concentrei o trabalho em organizar bem a informação, cobrir os estados de cada tela e construir uma base consistente de componentes.

O app atende dois tipos de pessoa com necessidades diferentes, e cada uma vê só o que faz sentido para ela:

• Lojista: vê as vendas de todos os terminais, o valor líquido e as taxas descontadas, exporta relatórios e troca entre as lojas que administra.
• Funcionário: vê apenas as vendas do seu terminal, consulta detalhes e comprovantes, mas não vê taxas nem exporta dados.

Na tela de conta, as permissões de cada perfil ficam listadas com o que está liberado e o que não está, e um aviso explica a quem pedir mudanças. Assim, ninguém fica procurando uma função que não tem.

O número que importa primeiro

A visão geral abre com o total transacionado e, logo abaixo, o valor líquido e as taxas descontadas. Em seguida vêm as quebras por tipo de venda, bandeira e status, cada uma com barras que mostram a proporção sem precisar ler os números.

Período sempre à vista

Os atalhos Hoje, 7 dias, 30 dias e Personalizado ficam no topo das telas de visão geral e de vendas, para que a pessoa saiba sempre de que período são os valores.

Vendas que se leem rápido

A lista agrupa as vendas por dia, com o total de cada dia. Cada venda mostra tipo, bandeira, parcelas, horário, terminal e o status com cor e ícone. Vendas negadas aparecem com o valor riscado, para não serem confundidas com dinheiro recebido.

Detalhes prontos para o suporte

O detalhe da venda separa valores de dados da transação, e o NSU e o ID da transação têm botão de copiar, porque são as informações que o lojista mais repassa ao atendimento. O comprovante pode ser compartilhado direto da tela.

Ações em painéis inferiores

Filtros, ordenação, exportação e troca de loja abrem em painéis que sobem da parte de baixo da tela, ao alcance do polegar e sem tirar a pessoa da lista. O botão de aplicar filtros já diz quantas vendas vão aparecer.

Todas as telas existem nos dois temas. Em vez de inverter as cores, cada token tem um valor próprio para o escuro: o azul de ação fica mais claro, o verde de sucesso mais vivo e as superfícies ganham tons de azul profundo, para manter o contraste e a identidade da marca.

O projeto foi construído sobre tokens de cor, tipografia, espaçamento e raio, organizados no Figma com variáveis para os dois temas. Os componentes, como botões, campos, chips de filtro, itens de venda, selos de status, painéis inferiores e barra de navegação, usam esses tokens, o que permitiu montar todas as telas e estados com consistência dentro do prazo.

A tipografia é a Lato, legível em tamanhos pequenos e com números claros, essencial para um app de valores.