Estoque em rede: a IA propõe, a pessoa decide

Sistema de estoque e logística para varejo com armazéns em regiões diferentes. Dois papéis sobre o mesmo dado, um log de movimentos como única fonte de saldo, e uma IA que sugere com o motivo aberto.

A regional compara armazéns e acha onde perde dinheiro.

A regional compara armazéns e acha onde perde dinheiro.

O mesmo dado, visto pela regional, pelo armazém e pela IA.

Escopo do projeto

Case de teste para uma vaga numa empresa internacional: um sistema inteiro de estoque e logística para uma rede de armazéns, com uma restrição que define o produto. A IA tinha que ser nativa, integrada à operação, e não um chat ao lado da tela.

A entrega desenha a jornada ideal de ponta a ponta, de pedido de compra a despacho, em 33 rotas e dez fluxos testados. As exceções ficam para um ciclo de iteração com o uso real.

O dashboard regional no tema escuro, com os mesmos números do claro: o tema muda a pele, nunca o dado.

A promessa

Cada número na tela tem origem, cada sugestão da IA tem motivo, e cada decisão tem dono.

Papel

Product Designer, do briefing ao protótipo

Fiz o produto inteiro: li o briefing e o arquivo recebido, escrevi o PRD e o modelo de dados, desenhei o sitemap, as telas e o design system, e construí o protótipo navegável. A primeira versão saiu em 14 dias, no prazo do teste; depois voltei ao projeto para refinar, e o trabalho fechou em dois meses.

Desafios

O que quem usa precisa, e o que o briefing exigia:

  • 01

    Saber onde a região perde dinheiro

    Ruptura, cobertura baixa e estoque parado espalhados por armazéns diferentes, sem uma resposta única para o regional

  • 02

    Sair da planilha sem perder o controle

    Quem usa é técnico e vive em célula e fórmula; um sistema novo não pode tirar a sensação de domínio sobre o dado

  • 03

    Confiar no número da tela

    Saldo digitado não se audita, e estoque não perdoa número chutado: lote vence e contagem diverge da prateleira

  • 04

    IA que ajude a decidir, não um chat

    O briefing exigia IA nativa, e uma sugestão de compra sem o motivo não é algo que alguém aprove

  • 05

    Cada pessoa no seu escopo

    Regional e armazém leem o mesmo dado com recortes diferentes, e ninguém pode ficar sem saber de qual armazém a tela fala

  • 06

    Operar de pé, na doca

    Receber, contar e separar acontecem no chão do armazém, com a mão no leitor e sem tempo para digitar linha por linha

Soluções

  • 01

    Uma tela que aponta o problema

    O dashboard regional mostra cobertura, ruptura e valor por armazém, e cada indicador leva à tela onde o problema se resolve

  • 02

    Tabela onde ela ajuda

    Ordenação, filtro, seleção em lote e CSV em quase toda tela, com cartões e gráficos em cima respondendo antes

  • 03

    Todo número com origem

    O saldo é projeção de movimentos com documento, motivo e autor; onde falta dado, a célula diz que não sabe

  • 04

    IA nativa, com o porquê aberto

    Previsão, reposição e anomalia dentro das telas, com o motivo em campos, e nenhuma sugestão vira pedido sem aprovação

  • 05

    Papel e escopo antes de tudo

    A pessoa escolhe papel e armazém ao entrar, e cada tela é o mesmo dado recortado por quem pergunta

  • 06

    Feito para a doca

    A nota fiscal substitui a digitação, o leitor bipa a mercadoria e a contagem é cega

Quem decide, quem opera e onde a IA entra

Os três pontos de vista da operação numa imagem: o dashboard regional no computador, o recebimento no tablet da doca e a sugestão da IA esperando decisão.

Personas

Duas personas, montadas a partir do briefing e do PRD, não de entrevista. Os nomes são os das contas de demonstração do protótipo.

  • Ana Souza Gerente regional Região São Paulo: dois armazéns e seis lojas

    “Onde a minha região está perdendo dinheiro hoje?”

    Compara armazéns, aprova o que eles pedem, acompanha fornecedores e responde pela região. Vem da planilha, e é nela que ainda confere tudo.

    Dores

    • A resposta está espalhada entre armazéns, e montar o quadro da região toma tempo
    • Uma sugestão de compra sem o motivo não é algo que ela aprove
    • Um número que alguém digitou não se audita
    • O lote vencendo aparece tarde, quando já é perda

    Necessidades

    • Ver numa tela só onde está a ruptura, a cobertura baixa e o estoque parado
    • Aprovar com o porquê à vista, e recusar dizendo por quê
    • Levar o número para a planilha quando precisar
  • Carla Dias Gerente de armazém SP1 CD Zona Leste

    “O que eu faço primeiro neste turno?”

    Opera o galpão de pé: recebe, etiqueta, guarda, conta, separa e despacha, com o tablet na doca e o leitor na mão.

    Dores

    • Digitar a nota fiscal linha por linha no recebimento
    • Uma contagem que confirma a tela em vez de medir a prateleira
    • Não saber por onde começar o turno
    • O lote que vence antes de sair, porque ninguém olhou a validade na separação

    Necessidades

    • A nota virando recebimento, casada com o pedido
    • Bipar e decidir cada linha no mesmo lugar
    • A fila do dia, e o plano de separação pronto

Dez fluxos, de ponta a ponta

Cada fluxo foi percorrido no navegador como uma pessoa faria, clicando nas telas, e conferido no dado gravado depois de cada passo. É a prova de que a operação fecha, não só de que as telas existem.

  • passo de uma pessoa
  • passo da IA
  • decisão
  • documento
  • movimento gravado
  • 06número do fluxo testado
EntrarReporReceberConferirExpedirTransferirEtapaGerente regionalIALedger de movimentosGerente de armazémFornecedor e lojaslêsugestãoNãoSimSimNãoSimNãoEntra comoregional01Entra comoarmazém01Venda e saldoPrevê a demanda epropõe a reposição06Ajusta a quantidadee submete06Aprova acompra?06Recusa com o motivo,na notificaçãoPedido de compra06Entrega coma NF-eImporta a nota ebipa cada linha0203Aceita, quarentenaou rejeita a linha02Entrada gravadaEtiqueta GS104Guarda na posição05Guarda gravadaConta sem vero número do sistema08Ajuste com motivoDiferençaacima de 10%?08Abre a anomaliacom a evidência08Trata o alertaPedido da lojaSepara em FEFOe despacha09Saída gravadaDespacho com SSCCFalta estoqueaquiPede a outroarmazém07Aprova atransferência?07Origem despacha,destino recebe07Recusada
  1. 01
    Escolher o contextoOs dois papéis

    As sete atribuições abrem cada uma o próprio contexto, com o menu daquele papel.

  2. 02
    Receber um pedido de compraArmazém

    Pedido fechado, um movimento por linha aceita ou em quarentena, put-away aberto e etiquetas na fila.

  3. 03
    Receber pela nota fiscalArmazém

    Item fora do pedido vira item errado, e pedido já em recebimento não ganha um segundo: a nota entra no que está aberto.

  4. 04
    Etiquetar a mercadoriaArmazém

    A etiqueta codifica GTIN e lote, e a aplicada sai da fila.

  5. 05
    Guardar o que chegouArmazém

    Um movimento de put-away na posição escolhida, apontando para a tarefa.

  6. 06
    Aprovar uma reposição da IAArmazém e regional

    O histórico guarda as duas decisões e quem tomou cada uma, e o pedido nasce em rascunho com a quantidade sugerida.

  7. 07
    Transferir entre armazénsArmazém e regional

    O saldo do destino sobe exatamente a quantidade transferida.

  8. 08
    Contar e ajustarArmazém

    O saldo do sistema não aparece durante a contagem; diferença acima de 10% gera ajuste com motivo e uma anomalia.

  9. 09
    Separar e despacharArmazém

    Um despacho com SSCC de 18 dígitos, e o estoque sai da área de expedição.

  10. 10
    Abrir todas as rotasOs dois papéis

    Nenhum erro de console e nenhuma tela em estado de erro.

Projetado para ambiente controlado

Computador 16:9 O dashboard regional em 1920 por 1080: o lugar de comparar armazéns e decidir.
O dashboard regional em 1920 por 1080: o lugar de comparar armazéns e decidir.
Tablet 16:9 com leitor O recebimento em 1280 por 720, na horizontal: a linha do pedido, o campo de recebido com Scan ao lado, e a decisão por linha.
O recebimento em 1280 por 720, na horizontal: a linha do pedido, o campo de recebido com Scan ao lado, e a decisão por linha.
  • Uso interno, em equipamento conhecidoÉ um sistema de uso pontual dentro da empresa, em aparelho que a própria operação define: o computador do escritório e o tablet da doca.
  • Projetado para o horizontalAs duas telas são 16:9 na horizontal, e o layout foi desenhado para essa proporção e só para ela. Celular não é cenário de uso do produto.
  • Mesmo layout nas duas telasA lista à esquerda e o detalhe abrindo ao lado, com 520 px no computador e 440 no tablet.
  • O leitor bipa, a pessoa decideBipar preenche o que foi contado e identifica a leva pela etiqueta da caixa ou do pallet; aceitar ou rejeitar continua sendo um toque. No protótipo, o leitor é o botão Scan.

As três partes desta operação

Na ordem em que aparecem abaixo. Os dois papéis leem o mesmo dado, cada um com o próprio escopo; a terceira parte é o que eles dividem. Cada tela abaixo diz a pergunta que responde, a ação principal, o que existe nela e a decisão por trás. A etiqueta diz de quem é a vez naquela tela:

  • humano decide
  • a IA propõe
  • o sistema registra
  1. 01 Regional Gerente regional · escopo: uma região, vários armazéns

    Compara armazéns, aprova o que eles propõem e acha onde a região perde dinheiro.

    Uma tela do papel Regional

    Onde a IA entraPropõe a reposição com o motivo em campos, prevê a demanda em p10, p50 e p90, e levanta anomalias com a evidência escrita.

    O que a pessoa decideAprovar ou recusar a compra e a transferência, e mudar a régua que a IA usa para propor.

    VisãoRegional

    De cima para baixo: a região numa tela, os armazéns lado a lado, e um armazém visto de fora.

    Para quem usaO regional vai da pergunta "onde está o problema" até a tela do problema em um clique, sem pedir relatório a ninguém. Quando quer ver um galpão por dentro, abre o mesmo painel que o gerente dele usa, em somente leitura.

    Dashboard regional
    a IA propõe /r/:regiao/dashboard

    Como a região está indo agora.

    Ação principalDescobrir de relance onde a região está perdendo dinheiro hoje, e qual armazém precisa de atenção primeiro.

    Dashboard regional
    A regional de São Paulo: valor de estoque, rupturas e cobertura no topo, o que está pendente por tipo, e cobertura por armazém e por categoria embaixo.

    Na tela

    • Quatro cartões: valor de estoque, unidades vendidas em 7 dias, rupturas e cobertura
    • Quatro contadores: aprovações pendentes, anomalias abertas, lotes vencendo em 30 dias e pedidos de compra atrasados
    • Cobertura por armazém e categoria, valor por categoria, ruptura por categoria, venda do período e top movers
    • Precisa de decisão: as sugestões submetidas, e a lista de vigilância com as anomalias de severidade alta

    A decisão

    O objetivo do papel no PRD é uma tela só respondendo onde a região está perdendo dinheiro. Os quatro cartões respondem isso, os contadores dizem o que está esperando, os gráficos dizem onde, e as duas tabelas do fim são as duas coisas em que o papel pode agir.

    Armazéns
    o sistema registra /r/:regiao/warehouses

    Quais armazéns precisam de atenção.

    Ação principalComparar os armazéns lado a lado e decidir qual precisa de intervenção, sem abrir um por um.

    Armazéns
    O region board: os armazéns da região lado a lado em cartão esquemático, com ocupação e zonas, e a tabela comparativa logo abaixo.

    Na tela

    • Region board: um bloco por distrito, uma pílula por armazém, barra de ocupação e as lojas atendidas
    • Tabela selecionável com valor, cobertura, ruptura, ocupação e anomalias abertas
    • Painel Comparar armazéns, com doze medidas lado a lado, aberto só com duas linhas marcadas

    A decisão

    O board é esquemático e diz isso num selo: a seed não tem coordenada, então um mapa geográfico seria geometria inventada. Ele mantém a estrutura de distrito sem fingir que é mapa.

    Visão de um armazém
    o sistema registra /r/:regiao/warehouses/:armazem

    Como está um armazém da região, visto de fora.

    Ação principalEntender um armazém por dentro, com os mesmos números que o gerente dele vê, sem mexer na operação dele.

    Na tela

    • Os mesmos blocos do dashboard de armazém, em somente leitura
    • Link de contexto de volta para Armazéns

    A decisão

    É o mesmo componente do dashboard de armazém, com os contadores e a lista do dia em somente leitura e os links apontando para as telas regionais. Id fora da região responde que não há armazém ali, em vez de redirecionar.

    DecisãoRegional

    Onde a IA propõe e o regional decide: reposição, transferência e anomalia.

    Para quem usaNenhuma sugestão vira pedido de compra sem a aprovação dele, e nenhuma chega sem o motivo. Ele aprova lendo os campos que justificam a quantidade, em vez de confiar num número solto.

    Fila de reposição
    a IA propõe /r/:regiao/replenishments

    O que os armazéns submeteram e espera aprovação.

    Ação principalLimpar a fila do que os armazéns pediram: ver primeiro o que é mais urgente e decidir em lote o que dá para decidir junto.

    A decisão

    É um componente só com dois comportamentos: o regional aprova o que o armazém submeteu, o armazém edita e submete o que a IA propôs. O erro de grafia nas abas e o Archived solto que a auditoria apontou se fecham num conjunto único de abas.

    Fila de reposição
    O topo da fila: contador por aba, pendentes por risco num donut (82 de risco alto, 13 médio e 3 de potencial) e o prazo de pedido dos próximos 14 dias.

    Na tela

    • Visão da fila: contador por aba, pendentes por risco, e prazo de pedido dos próximos 14 dias
    • Abas Ongoing, Upcoming, Submitted e Archived, com vocabulário de status fechado
    • Filtros de armazém, risco e categoria, mais busca por SKU, nome ou GTIN
    • Barra de lote com o diálogo dizendo quantas das escolhidas podem se mover, e pedindo motivo na rejeição
    • Cartões de sugestão com risco, prazo, tendência, cobertura e confiança
    Painel da sugestão
    a IA propõe /r/:regiao/replenishments/:sugestao

    Por que a IA está sugerindo isto, e o que eu faço com ela.

    Ação principalDecidir uma compra com o motivo à vista: entender por que a IA pediu aquela quantidade e transformar em pedido, ou recusar dizendo por quê.

    Na tela

    • Confiança, quantidade, prazo, cobertura, lead time, MOQ e múltiplo
    • Fornecedor com custo unitário e avaliação
    • Por que esta sugestão: nove campos lidos da frase, com o texto original a um clique
    • Previsão p10, p50 e p90, venda dos últimos 14 dias e o nome do modelo
    • Estoque por posição, zona e lote, e o histórico de status com autor e hora

    A decisão

    A frase do motivo é lida em campos por tudo ou nada: frase fora do molde aparece como texto simples, sem estrutura inventada. Todo botão passa pela máquina de estado antes de existir, então a tela nunca oferece o que o reducer recusaria, e aprovar são dois despachos: o pedido de compra rascunho, depois a mudança de status.

    Painel da sugestão
    O painel abre ao lado da fila: confiança, quantidade, prazo, cobertura, lead time, MOQ e múltiplo, o fornecedor, os nove campos de Why this suggestion e a previsão p10, p50 e p90 sobre a venda diária. Rejeitar e aprovar ficam no pé.
    Transferências
    humano decide /r/:regiao/transfers

    Quais transferências esperam por mim.

    Ação principalEquilibrar o estoque da região autorizando ou barrando a transferência que um armazém pediu a outro.

    Na tela

    • Abas Esperando aprovação e Todas
    • Tabela de origem, destino, linhas, unidades e status
    • Painel da transferência com as linhas e as ações no pé, cada uma atrás de confirmação

    A decisão

    A lista traz transferência em que o escopo é origem ou destino. Aprovar e rejeitar são do regional; despachar é do armazém de origem e receber é do de destino, e cada ação só aparece para quem é dela.

    Transferências
    A TR-2026-00001, de SP1 para CP1: o status, as linhas com lote e quantidade, e aprovar ou rejeitar.
    Alertas
    a IA propõe /r/:regiao/alerts

    Quais anomalias precisam de atenção no escopo.

    Ação principalTratar o que saiu do normal antes de virar prejuízo: lote vencendo, venda que despencou, contagem que não bate, cada um com a prova escrita.

    Alertas
    A central de anomalias: contador por tipo (validade, estoque parado, pico e queda de venda, lead time e divergência de contagem), mapa de calor por armazém e as mais recentes.

    Na tela

    • Abertas por tipo, seis contadores com a severidade presente em cada um
    • Mapa de calor por armazém e tipo, e timeline das seis abertas mais recentes
    • Abas aberta, reconhecida, resolvida e descartada, com filtros de severidade e tipo
    • Painel da anomalia com a evidência e a sugestão relacionada, ou a linha dizendo por que não existe uma

    A decisão

    Toda anomalia chega com a evidência escrita, e os botões são só os movimentos que a máquina de estado permite. Duas coisas as fontes não definem e a tela não inventa: motivo de descarte e filtro de histórico próprio, então a aba Descartadas é onde elas vivem.

    LeituraRegional

    O que sai do sistema, e a régua que ele usa para propor.

    Para quem usaExportar não leva fórmula escondida para a planilha de ninguém. E mudar a régua da reposição mostra antes quantas sugestões aquilo gera e arquiva, porque a mudança cai na fila de outra pessoa.

    Relatórios
    o sistema registra /r/:regiao/reports

    Para onde a região está indo.

    Ação principalLevar os números para fora do sistema com segurança, num CSV que abre na planilha de sempre sem fórmula escondida.

    Relatórios
    Cobertura por produto: o histograma de dias de cobertura, os SKUs mais perto de acabar e a tabela que vai para o CSV.

    Na tela

    • Quatro relatórios: cobertura por produto, valor de estoque, rupturas em 30 dias e o ledger de movimentos
    • Metade visual em cima e tabela de até 500 linhas embaixo, com nota quando a exportação tem mais
    • Filtro de armazém, tipo de movimento e busca, só no ledger

    A decisão

    O CSV escapa aspa e quebra de linha, e prefixa com apóstrofo a célula que começa com igual, mais, menos ou arroba, para que nada rode como fórmula na planilha de quem abrir. Giro de estoque, faixa de data na URL e relatório de discrepância ficam escritos como não implementados.

    Configurações
    humano decide /r/:regiao/settings

    Com que régua a reposição é gerada.

    Ação principalAjustar a régua que a IA usa para propor reposição, vendo o impacto na fila antes de aplicar.

    A decisão

    A prévia vem antes do botão porque regerar mexe na fila de outra pessoa. O regerar roda sobre toda previsão do escopo, pula produto já submetido, aprovado ou pedido, e nunca sobrescreve id que já existe.

    Configurações
    As regras de reposição com a prévia do que os valores gerariam (49 sugestões nos dois armazéns, 49 arquivadas) antes do botão, e a tabela de usuários e atribuições.

    Na tela

    • Regras de reposição com os dois campos, e a prévia de quantas sugestões aqueles valores gerariam e arquivariam
    • Regerar sugestões, atrás de confirmação
    • Usuários e atribuições, em tabela
  2. 02 Armazém Gerente de armazém · escopo: um galpão, a fila do dia

    Opera um galpão: recebe, etiqueta, guarda, conta, separa e despacha.

    Uma tela do papel Armazém

    Onde a IA entraPropõe a quantidade a repor para o galpão e marca as anomalias dele, de lote vencendo a contagem que não bate.

    O que a pessoa decideAjustar e submeter a quantidade proposta, decidir cada linha do recebimento, e confirmar guarda, contagem e despacho.

    DiaArmazém

    A primeira tela do turno.

    Para quem usaO gerente abre o dia sabendo por onde começar, e a lista só mostra o que tem trabalho: tarefa zerada sai em vez de ocupar linha.

    Dashboard do armazém
    o sistema registra /w/:armazem/dashboard

    Como é o dia aqui.

    Ação principalComeçar o turno sabendo o que fazer primeiro: o que chega, o que guardar, o que separar e o que contar hoje.

    Dashboard do armazém
    O dia do SP1 CD Zona Leste: recebimentos, put-away, picks, etiquetas e contagens em cima, entrada e saída de 14 dias, ocupação por zona e a lista do dia.

    Na tela

    • Seis contadores: recebimentos do dia, put-away pendente, picks abertos, etiquetas, contagens e vencendo em 30 dias
    • Quatro medidas: cobertura, ocupação de armazenagem, pedidos de compra atrasados e anomalias abertas
    • Entrada e saída dos últimos 14 dias na mesma escala, e ocupação por zona
    • Hoje: a lista do que fazer, mais os últimos movimentos e as anomalias abertas

    A decisão

    Item com contagem zero sai da lista de hoje, e quando tudo é zero a tela diz que nada está agendado. A fila do dia não mostra linha vazia para parecer cheia.

    EntradaArmazém

    Da nota fiscal à posição na prateleira: o pedido chega, é conferido, etiquetado e guardado.

    Para quem usaNa doca, a nota fiscal substitui a digitação linha a linha, e o sistema não deixa guardar o que ainda não foi decidido. Os erros caros, aceitar lote fora da validade mínima ou guardar sem conferir, ficam bloqueados na linha e de novo no fecho.

    Entrada
    o sistema registra /w/:armazem/inbound

    Quais pedidos de compra estão previstos ou chegando.

    Ação principalSaber o que está para chegar na doca e começar o recebimento do pedido certo.

    Na tela

    • Abas Esperado, Recebendo e Concluído, com o balde definido pelo estado do recebimento
    • Busca por número de pedido ou fornecedor
    • Tabela com linhas, data prevista, ASN, status e o verbo de ação no fim
    • Importar XML da NF-e, que abre o painel de importação

    A decisão

    Data prevista no passado com o pedido ainda esperado aparece na cor de ameaça, e a origem do ASN aparece como selo ou como ausente. A contagem de linhas pendentes do dia fica escrita como não implementada.

    Importar NF-e
    humano decide /w/:armazem/inbound/import

    Esta nota pode virar um recebimento.

    Ação principalReceber uma entrega sem digitar linha por linha: a nota fiscal vira o recebimento, já casado com o pedido.

    Na tela

    • Seleção do pedido de compra, entre os ainda não concluídos
    • Arquivo XML ou texto colado, alimentando a mesma string
    • Prévia item por item, com o esperado, a quantidade da nota e o selo da conferência

    A decisão

    O parser recusa em bloco e sem recebimento parcial: arquivo acima do limite, DOCTYPE ou ENTITY, XML malformado, nota sem número ou sem CNPJ do emitente, e item com quantidade não positiva, cada um com mensagem legível. CNPJ que não casa com o fornecedor avisa e não bloqueia. E quando o pedido já tem recebimento em andamento, a nota se funde nele em vez de criar um segundo, para nunca derrubar trabalho já lançado.

    Recebimento
    humano decide /w/:armazem/inbound/receive/:pedido

    O que chegou bate com o que foi pedido.

    Ação principalConferir o que chegou contra o que foi pedido e decidir cada linha: aceitar, pôr em quarentena ou rejeitar.

    A decisão

    Não existe put-away antes de a linha ser decidida, e concluir falha enquanto alguma linha estiver esperada ou apenas contada. A validade mínima bloqueia o aceitar na linha e é checada de novo no fecho, porque a tela pode ser contornada e o ledger não.

    Recebimento
    O PO-2026-00009 na etapa de contagem: o passo a passo no topo e, por linha, o esperado, o recebido com o botão Scan, o lote, a validade e aceitar, quarentena ou rejeitar.

    Na tela

    • Passo a passo Check-in, Contagem, Decisão e Conclusão, lido do estado das linhas
    • Por linha: contado com scan, lote, validade, motivo, e as ações aceitar, quarentena e rejeitar
    • Barra fixa com o que falta decidir, e o botão de concluir
    • Confirmação listando movimentos, lotes novos, etiquetas, put-away e o próximo status do pedido
    Etiquetas
    humano decide /w/:armazem/labeling

    O que ainda precisa de etiqueta impressa.

    Ação principalDeixar cada caixa e cada pallet pronto para ser bipado no resto da operação, com a etiqueta certa.

    Na tela

    • Abas Pendente, Impressa e Aplicada, com filtro por tipo de etiqueta
    • Painel com a prévia nos três formatos, zona de gente e zona de máquina
    • O que ela codifica, campo por campo, no padrão de elemento GS1
    • Gerar etiqueta de pallet a partir de caixas por pallet

    A decisão

    Toda mudança de estado passa pela máquina de etiqueta antes de acontecer, e o código de barras é representação visual: a prova está nos campos codificados ao lado, não no desenho.

    Etiquetas
    O job de etiqueta de caixa: a prévia GS1-128 com o código decodificado embaixo, o que ela codifica campo a campo, a quantidade, e a etiqueta de pallet calculada a partir de caixas por pallet.
    Posições e put-away
    humano decide /w/:armazem/locations

    Onde o estoque recebido pertence, e onde há espaço livre.

    Ação principalGuardar o que foi recebido no lugar certo, e ver de relance onde ainda há espaço.

    A decisão

    A quarentena é aba própria, então o bin em quarentena se identifica sem abrir painel. O put-away grava o bin que a pessoa escolheu de verdade, não o sugerido, e o movimento passa pelo validador antes de entrar.

    Posições e put-away
    O mapa de zonas do SP1 em abas, uma por zona, com cada posição colorida pela ocupação: 29 de 40 posições em uso na armazenagem.

    Na tela

    • Mapa de zonas em abas, uma por zona, com a célula colorida pela ocupação
    • Fila de put-away com o destino sugerido, mais todo bin cujo espaço livre cabe na quantidade
    • Painel do bin com capacidade, ocupação e o estoque que está nele

    EstoqueArmazém

    O que está em casa, e a prova de que o número bate com a prateleira.

    Para quem usaQuem conta não vê o número do sistema até a revisão, então a contagem mede a prateleira em vez de confirmar a tela. Ajuste e descarte dizem o que vão gravar antes de gravar.

    Estoque
    o sistema registra /w/:armazem/stock

    O que está em casa, por produto, lote e posição.

    Ação principalSaber o que existe em casa, por lote e posição, e corrigir uma divergência deixando o motivo registrado.

    Na tela

    • Busca por SKU, produto, lote ou bin, e filtros de zona, categoria e validade
    • Tabela com disponível, reservado e validade
    • Painel de ajuste e descarte, com direção, quantidade, motivo, e a recusa do validador em texto

    A decisão

    Ordenar por validade usa a contagem de dias com o nulo no fim, e lote sem validade escreve que não sabe. O descarte diz na própria tela que escreve as unidades para fora do ledger e que não dá para desfazer dali.

    Estoque
    O painel de ajuste de uma linha de estoque: lote, disponível e validade em cima; direção, quantidade limitada ao disponível e motivo embaixo, com a nota de que o motivo vai para o movimento no ledger.
    Contagem cíclica
    humano decide /w/:armazem/counts

    A quantidade contada bate com a do sistema.

    Ação principalProvar que o número do sistema bate com a prateleira, contando sem ver o número esperado.

    A decisão

    A contagem é cega: a quantidade do sistema não aparece na tela até a revisão, e linha em branco é linha pulada, nunca zero. No fecho, cada linha divergente gera um ajuste com motivo contagem, e divergência acima de 10 por cento levanta anomalia.

    Contagem cíclica
    A CC-2026-00001 planejada: seis linhas de posição, produto e lote, e a coluna de contado dizendo not counted. O saldo do sistema não aparece em lugar nenhum.

    Na tela

    • Lista de contagens com zona, linhas e status
    • Painel de plano: zona e quantas posições contar, limitado pelas posições com estoque
    • Folha de contagem com passo a passo, e o campo de contado por linha
    • Nota de fecho dizendo quantos ajustes serão lançados e quantas anomalias levantadas

    SaídaArmazém

    Pedido de loja e transferência entre armazéns.

    Para quem usaO plano de separação já vem em validade mais próxima primeiro, com posição e lote de cada pick. Se um movimento não fecha, nada é gravado pela metade e a tela explica o motivo.

    Saída
    humano decide /w/:armazem/outbound

    Quais pedidos de loja precisam ser separados e despachados.

    Ação principalSeparar e despachar os pedidos das lojas tirando primeiro o lote que vence antes.

    Na tela

    • Abas Aberto, Separando, Separado e Despachado, e busca por pedido ou loja
    • Painel do pedido com as linhas e a falta por linha
    • Plano de separação em FEFO, com a posição e o lote de cada pick
    • Despacho com transportadora, e depois SSCC, hora e a etiqueta de pallet

    A decisão

    O plano é FEFO: validade mais próxima primeiro, lote sem validade no fim, depois ordem de entrada. Separar e despachar ensaiam cada movimento antes de gravar; falhando, nada muda e um toast explica. Agrupar por data de entrega e estado de atraso ficam escritos como não implementados, porque a entidade não tem data de entrega.

    Saída
    O pedido ST-2026-00101 com o plano de separação em FEFO: para cada linha, a posição e o lote de onde sai cada unidade, e o botão de começar a separar.
    Transferências do armazém
    humano decide /w/:armazem/transfers

    O que entra e o que sai daqui por transferência.

    Ação principalPedir estoque a outro armazém, e despachar ou receber o que está em trânsito.

    Na tela

    • Abas Entrando, Saindo e Todas
    • Formulário de pedido: origem, destino, produto, lote por validade mais próxima, e quantidade limitada ao livre do lote
    • Painel com as linhas, a nota do que a próxima ação faz, e Despachar ou Receber

    A decisão

    Despachar monta a saída a partir dos bins de armazenagem e de separação que têm o lote, e falha quando falta quantidade. Receber entra no primeiro bin de recebimento do destino e abre um put-away por linha, sugerindo um bin que já tem aquele lote.

    ApoioArmazém

    A parte do armazém na reposição, nos alertas e na configuração.

    Para quem usaO armazém ajusta a quantidade que a IA propôs dentro das regras do fornecedor e manda para aprovação. Ele mexe no número, mas não aprova a si mesmo.

    Reposição sugerida
    a IA propõe /w/:armazem/replenishments

    O que a IA propôs para este armazém.

    Ação principalAjustar a quantidade que a IA propôs à regra do fornecedor e mandar para o regional aprovar.

    Na tela

    • A mesma fila, com aba padrão Ongoing e ações de lote Submeter e Arquivar
    • O painel da sugestão, com Arquivar, Editar quantidade e Submeter no pé

    A decisão

    Editar a quantidade trata o múltiplo do fornecedor como erro duro e o MOQ como aviso, e estaciona a sugestão como rascunho: o armazém mexe no número, o regional é quem aprova. Sem termos de fornecedor, editar fica desligado.

    Reposição sugerida
    A sugestão vista pelo armazém, em edição: a quantidade presa à regra do fornecedor (múltiplo de 12, MOQ 48), salvar ou cancelar.
    Alertas do armazém
    a IA propõe /w/:armazem/alerts

    Quais anomalias deste galpão estão abertas.

    Ação principalCuidar das anomalias do próprio galpão, cada uma com a prova escrita, reconhecendo ou resolvendo ali mesmo.

    Na tela

    • Os mesmos contadores, mapa de calor e abas da tela regional, recortados no armazém
    • Painel da anomalia com a evidência e a sugestão relacionada

    A decisão

    É a mesma tela da regional lendo o escopo do armazém. Anomalia não ganha versão própria por papel, só recorte.

    Alertas do armazém
    O painel de uma anomalia: tipo, severidade, armazém, hora, produto, a evidência escrita e a sugestão relacionada, com reconhecer e descartar no pé.
    Configurações do armazém
    o sistema registra /w/:armazem/settings

    Como este galpão está configurado.

    Ação principalConferir como o galpão está configurado e escolher a impressora de etiqueta.

    Na tela

    • Zonas com tipo, nome, posições e capacidade
    • Impressoras, em três perfis, com a impressão simulada
    • Regras locais: por categoria, a maior validade mínima no recebimento entre os produtos dela

    A decisão

    A tela diz que é somente leitura onde o mundo não tem editor, em vez de mostrar campo que não salva. Histórico de configuração com autor e hora, e impressora padrão por nível de etiqueta, ficam escritos como não definidos.

  3. 03 Comum Os dois papéis · onde o papel é escolhido

    O que vem antes e em volta dos papéis: escolher o contexto, e o que é de cada usuário.

    Uma tela do papel Comum

    Onde a IA entraNão entra: aqui não há decisão de estoque, só de onde olhar.

    O que a pessoa decideEscolher o papel e o escopo antes de qualquer tela.

    ContextoComum

    A porta do sistema.

    Para quem usaA primeira coisa que a pessoa escolhe é o papel e o escopo, e o endereço da tela carrega os dois. Ninguém cai numa tela sem saber de qual armazém ela fala, e a tela de outro papel diz que não está disponível ali em vez de redirecionar em silêncio.

    Escolher o contexto
    humano decide /switch

    Qual papel e qual escopo eu abro.

    Ação principalEntrar no papel e no armazém certos, para nunca ver uma tela sem saber de qual lugar ela fala.

    A decisão

    O bloqueador F-01 da auditoria, arquivo sem papel e sem contexto, se fecha fazendo do papel e do escopo a primeira coisa que a pessoa escolhe, antes de qualquer tela.

    Escolher o contexto
    As contas de demonstração, cada cartão abrindo um papel e uma região ou um armazém.

    Na tela

    • Um bloco por usuário, com os cartões de atribuição
    • Em cada cartão, o escopo e o papel que ele abre
    • Uma linha para a matriz, levando a /hq
    Matriz
    o sistema registra /hq

    O que existe acima das regiões.

    Ação principalSaber o que o nível da matriz vai trazer, sem fingir dado que ainda não existe.

    Na tela

    • Um parágrafo nomeando o que a fase 2 acrescenta: indicadores entre regiões, política de reposição da rede e contrato de fornecedor

    A decisão

    A tela existe para dizer que o nível de matriz está fora do escopo desta fase, com nome ao que ele vai trazer. Ela não tem dado.

    PessoalComum

    O que é de cada usuário.

    Para quem usaA rejeição do regional chega ao armazém pela notificação, com o motivo. E a única ação destrutiva do perfil, apagar os dados de demonstração, pede confirmação.

    Notificações
    o sistema registra /notifications

    O que aconteceu que fala comigo.

    Ação principalFicar sabendo do que mudou e fala com você, como a recusa de uma sugestão com o motivo.

    Na tela

    • Lista das notificações do usuário que está agindo, mais recentes primeiro
    • Por item, o ponto de não lida, o texto como link e a hora

    A decisão

    Ler uma notificação nunca muda nada além dela. É por aqui que a rejeição do regional chega ao armazém com o motivo, porque o modelo de sugestão não tem campo de motivo.

    Perfil
    o sistema registra /profile

    Quem está agindo, e com quais contextos.

    Ação principalTrocar de contexto ou de tema, e recomeçar a demonstração do zero quando precisar.

    Na tela

    • Conta, com os contextos e um link para abrir cada um
    • Tema, em claro e escuro
    • Dados de demonstração, com o reset atrás de confirmação

    A decisão

    O reset dos dados é a única ação destrutiva da tela, e por isso é a única atrás de confirmação. Quando o usuário que está agindo não é encontrado, o estado de erro recarrega a página.

Micro vitórias de UX

  • Contar sem ver a resposta

    A quantidade do sistema só aparece na revisão, então quem conta mede a prateleira em vez de confirmar a tela

  • Trocar de armazém sem voltar ao início

    O seletor de contexto mora na barra do topo, então mudar de região ou de armazém é um clique, de qualquer tela

  • Tela vazia com próximo passo

    Quando não há nada, a tela diz o que preenche aquele espaço, em vez de pedir desculpa

  • Zero só quando é zero

    Sem dado, o campo diz no data e a barra vira sulco hachurado: ninguém decide em cima de um zero falso

  • O detalhe não tira a lista

    O painel abre ao lado, tem endereço próprio e fecha no voltar, então a pessoa não perde onde estava

  • Confirmação só onde não tem volta

    Diálogo apenas para o irreversível; o resto responde com um aviso discreto, sem interromper o trabalho

  • Legível no claro e no escuro

    Cada texto medido contra o fundo em que aparece de verdade, inclusive dentro do badge

  • O porquê da IA, em campos

    A frase da sugestão vira campos que se conferem um a um, com o texto original a um clique

  • Uma etiqueta, dois leitores

    Uma zona para quem lê e outra para o leitor de código, no padrão GS1, sem repetir campo

O design system

Uma tipografia só, Outfit; azul para ação, preto para estrutura e cinza frio de baixo croma; seis pares de status com significado fechado. Tudo vive em token, nos temas claro e escuro, medidos par a par.

  • Ausência tem nomeValor nulo escreve no data ou not measured, nunca zero. Barra sem valor é um sulco hachurado.
  • AA nos dois temasCada par medido contra o fundo em que o texto aparece: o badge contra o próprio preenchimento, não contra a página.
  • O detalhe abre ao ladoPainel lateral de 440 a 520 px, nunca modal. Diálogo de confirmação só para o que não se desfaz.

Cor

Marca

  • Blue 500#0168F3 · ação e série 1
  • Blue 600#0155C7 · hover
  • Blue 700#01449E · pressionado

Estrutura

  • Ink 900#151515 · texto e menu
  • Gray 600#6B6F76 · texto secundário
  • Gray 300#DCDFE4 · borda
  • Gray 50#F7F8FA · página

Status

  • AaInfo#01449E · fato neutro
  • AaEm trânsito#4B3BC4 · transferência
  • AaPotencial#0F7A38 · oportunidade
  • AaAtenção#8A5A00 · antes de falhar
  • AaAmeaça#B91C1C · risco agora
  • AaNeutro#4A4F57 · sem sinal

Tipografia

Outfit, uma família só, de 300 a 600. Número em algarismo tabular.

  • Stock AIDisplay · 44 / 400
  • R$234,307Métrica · 34 / 500
  • ReplenishmentsTítulo de página · 24 / 600
  • Coverage by warehouseTítulo de cartão · 20 / 500
  • What warehouses submitted and is waiting for your decision.Corpo · 14 / 400
  • Order byRótulo · 13 / 500
  • 16 Sept, 06:00Legenda · 12 / 400
  • Why this suggestionOverline · 11 / 500

Espaço em base de 4 px · raio 10 em controle, 20 em cartão, pílula em badge · fio de 1 px · movimento de 120 a 360 ms, sem mola

Componentes, vivos

Amostra montada aqui com os tokens do projeto, em Outfit. Os dois números vêm da seed de verificação, no SP1 CD Zona Leste; os outros dois cartões mostram como a ausência de dado aparece.

43 componentes, em 10 famílias

  • Núcleo4

    ícone desenhado inline, cartão e cabeçalho de página

    Icon · Spinner · Card · PageHeader
  • Ações2

    seis variantes, do primário ao de perigo, em três tamanhos

    Button · IconButton
  • Formulários5

    campo, busca, select e pílula de filtro com contador

    TextField · SearchField · Select · FilterPill · FilterBar
  • Exibição6

    status, etiqueta de produto, avaliação e a prévia da etiqueta GS1

    Badge · Tag · Avatar · Rating · FieldPair · LabelPreview
  • Métricas5

    cartão de número, variação, progresso e mapa de calor

    StatCard · KpiTile · DeltaChip · ProgressBar · HeatGrid
  • Gráficos3

    barras em azul e preto alternados, donut e treemap

    BarChart · DonutChart · Treemap
  • Dados3

    tabela ordenável e selecionável, e ranking

    DataTable · TableCellStack · RankList
  • Navegação6

    menu lateral que vira gaveta abaixo de 900 px, abas e passo a passo

    SideNav · TopBar · Wordmark · Tabs · SegmentedControl · Stepper
  • Sobreposições5

    painel lateral, confirmação, tooltip e pílulas de mapa

    Tooltip · MapPill · MapLabel · SidePanel · ConfirmDialog
  • Feedback4

    toast, linha do tempo e o portão de estado: carregando, vazio, erro e sem resultado

    Timeline · Toast · StateGate · EmptyState

Integrações

O Stock AI não opera sozinho: ele fica entre o ERP do varejista, os fornecedores, as transportadoras, o chão do armazém e os canais de venda que geram a demanda. Cada integração foi escrita no mesmo molde, dizendo o que entra, o que sai, em qual entidade do modelo ela cai, o que acontece quando falha e em que fase entra.

A que já roda: NF-e na doca

O operador sobe o XML da nota (nfeProc 4.00) em vez de digitar cada linha. O sistema lê o número, o CNPJ do emitente e, por item, GTIN, quantidade, unidade e custo, e monta um recebimento em rascunho casado com o pedido de compra pelo GTIN. Item que não está no pedido vira item errado para uma pessoa decidir, nunca é descartado nem forçado. Arquivo acima de 2 MB, com DOCTYPE ou ENTITY, malformado ou sem os campos obrigatórios é recusado antes de qualquer gravação.

  1. XML da nota
  2. leitura e validação
  3. casamento por GTIN
  4. recebimento em rascunho
  5. decisão por linha

Simulada no protótipo2

  • NF-e XML Entraa nota da entrega: número, CNPJ, GTIN, quantidade e custo Sainada Cai emRecebimento, casado com o pedido de compra
  • Impressora Zebra Entraconfirmação e status da impressora Saietiqueta em ZPL: unidade, caixa GS1-128 e pallet SSCC-18 Cai emJob de etiqueta No protótipo o job vai direto para impresso, sem ZPL e sem impressora física.

Primeira leva4

  • TOTVS Protheus Entracatálogo, fornecedores e custo Saiconfirmação de pedido de compra e resumo de movimentos Cai emProduto, Fornecedor, Pedido de compra
  • Bling Entracatálogo, estoque e pedidos do varejo menor Sairesumo de movimentos e status de pedido Cai emProduto, Pedido de compra, Movimento
  • GS1 Brasil EntraGTIN e faixas de SSCC Sainada Cai emProduto e Despacho
  • PDV, e-commerce e marketplace Entravenda diária por produto e por loja ou canal Sainada Cai emSinal de venda É o dado em que a previsão roda. Sem ao menos um canal ligado, a IA não tem venda real para ler.

Depois6

  • SAP S/4HANA Entracatálogo, fornecedores, custo e dado fiscal Saitotais de movimento para conciliação e status de pedido Cai emProduto, Fornecedor, Pedido de compra
  • EDI de fornecedor Entraaviso de embarque antes da entrega (DESADV ou 856) Sainada Cai emASN
  • RFID Entraleitura em massa na doca e na contagem Sainada Cai emLinha de recebimento e Contagem
  • WMS legado Entraespelho dos movimentos, nos dois sentidos, durante a migração Saio mesmo espelho Cai emMovimento
  • Transportadora Entrarastreio e confirmação de entrega Saimanifesto do despacho: SSCC, volumes e destino Cai emDespacho
  • Webhooks e API própria Entranada Saieventos de movimento criado, sugestão aprovada e recebimento concluído Cai emMovimento, Sugestão, Recebimento

Toda entrada cai numa ação que já existe, porque o reducer é o único que escreve no mundo. E falha nunca vira número: catálogo que não sincroniza congela no último estado conhecido, com a hora da última sincronização na tela; dia de venda que falta aparece como no data na previsão; e divergência entre dois ledgers vira anomalia, em vez de reconciliação automática.

Para onde este sistema cresce

O protótipo cobre a operação de ponta a ponta na jornada ideal. O que vem depois começa por um ciclo de iteração que não termina, e segue em três fases, cada uma destravando a seguinte.

  1. Hoje

    Operação de ponta a ponta

    • Dois papéis sobre o mesmo ledger, em 33 rotas
    • IA de previsão, reposição e anomalia, sempre esperando uma decisão humana
    • NF-e importada na doca e impressão de etiqueta simulada

    O que já sustentaA base: todo saldo é projeção de movimento, e toda tela declara o que não sabe.

  2. Sempre

    Iterar sobre as exceções

    • Monitorar o uso real e registrar cada cenário de exceção
    • Levar cada exceção de volta ao desenho do fluxo
    • Ajustar regra, tela e texto, e só então seguir

    GaranteO sistema continua fazendo sentido fora da jornada ideal.

  3. Fase 1

    Fechar o ciclo físico

    • Devolução ao fornecedor e da loja
    • Reserva de estoque: o prometido separado do livre
    • Lista própria de pedidos de compra

    DestravaA sugestão de reposição passa a descontar o que já está prometido.

  4. Fase 2

    Ler melhor

    • Busca em lote, posição, documento, fornecedor, pedido e armazém, além de produto
    • Filtro no endereço da tela
    • Giro de estoque nos relatórios

    DestravaUma visão filtrada se compartilha por link, e o giro aparece ao lado de cobertura e valor.

  5. Fase 3

    Escalar

    • Autenticação de verdade
    • O nível de matriz acima das regiões: indicadores entre regiões, política de reposição da rede e contrato de fornecedor
    • As integrações da primeira leva, começando pelo ERP

    DestravaCatálogo e pedido de compra passam a vir do ERP do cliente, e a previsão passa a rodar sobre venda real.

Resultados

10

fluxos de operação percorridos ponta a ponta no navegador, de recebimento a despacho

Operar sem digitar saldo. Isso é verificável.

33rotas com carregando, vazio, erro e sem resultado declarados uma por uma
45componentes na vitrine, nos temas claro e escuro

Não houve operação com usuário real, então aqui não há ganho de eficiência, tempo de tarefa nem satisfação medida. A prova é o sistema construído e os fluxos exercitados nele.

Vamos construir juntos

Da primeira pergunta de pesquisa ao handoff para produção.