Estudo de caso 04 · Painel de operações
Noonday
Software de operações para instaladoras de energia solar: obras, equipes e a geração de cada sistema instalado numa tela só.
- Papel
- Produto, marca, design e front-end
- Data
- Novembro de 2026
- Stack
- React, TypeScript, TanStack Query e Table, Tailwind CSS, Radix, MSW, Cloudflare Pages
- Links
- Demo ao vivo Código
O problema
São 13h05 de uma terça de novembro, época de chuva em Minas Gerais. Ana cuida das operações da Serra Solar, uma instaladora com 120 obras abertas, 8 equipes e 612 sistemas já nos telhados. Ela precisa decidir o que resolver primeiro, e a resposta pode vir de três lugares: uma obra parada esperando a concessionária, uma equipe atrasada ou um sistema que caiu de manhã e não tem ninguém escalado.
O Noonday junta os três numa fila só, o mais urgente primeiro, com a ação ao lado de cada linha. Ele responde às vagas que pedem um produto B2B com muitos dados: tabelas com filtros e paginação, um gráfico que funciona com mouse, toque e teclado, e ações que mostram o resultado na hora, podem ser desfeitas e voltam atrás quando o servidor recusa.
Veja funcionando
Três coisas para testar:
- 01
Na Overview, a primeira linha de "Needs you" é um sistema fora do ar sem equipe. Clique em Assign Camila e depois em Undo.
- 02
Em Generation, troque para 30 days e ande pelas barras com as setas do teclado. Os dias abaixo de 75% do esperado têm uma marca vermelha.
- 03
Abra o menu do usuário, Demo data, e escolha Errors, depois New workspace, para ver os estados de falha e vazio.
Como foi feito
Especificação
O produto, as três ações, o tamanho dos dados e um nome conferido livre na web e no endereço.
Marca
Três direções lado a lado, uma mantida.
Protótipo
Quatro layouts da Overview testados em código, com gráfico funcionando, ícones e ilustrações. Um virou a Overview, e outros dois viraram o quadro de Jobs e a visão do dia na Schedule.
Dados
Um gerador com semente fixa para o workspace inteiro, então toda visita mostra o mesmo dia.
Construção
A stack de produção com uma API simulada, em doze etapas, primeiro a base e depois as quatro telas.
Verificação
Cada estado em 1440 e 390 px com checagem de acessibilidade, e depois uma revisão de código cujos achados foram corrigidos antes de publicar.
Escala
6
telas, mais uma página de não encontrado e uma página de erro.
94
estados verificados em duas larguras, 188 renderizações, cada uma com checagem de acessibilidade.
3
direções de marca e 4 layouts da Overview em 4 rodadas de decisão, e depois 9 correções vindas da revisão de código.
120
obras abertas, 8 equipes e 612 sistemas saídos de um gerador com semente fixa, servidos por 12 endpoints de API simulados com 5 cenários de demonstração.
28
ícones e 4 ilustrações desenhados para o produto, e um gráfico feito sem biblioteca de gráficos.
278
testes unitários e 217 testes no navegador.
37 min
do ticket à especificação aprovada, e depois 7 h 57 min de construção, numa noite e numa manhã.
O que deu errado e o que eu mudei
All clear é o dia tranquilo da demo: nada na fila, o sol a pino, "Nothing needs you right now". Quando conferi todos os estados, essa tela ainda mostrava "8 late" em vermelho em Open jobs, ao lado da frase dizendo que nada precisava de você.
A fila e a contagem estavam certas, cada uma pela sua regra. A fila só lista uma obra atrasada depois de cinco dias de tolerância, e a contagem mostra toda obra que passou do prazo da etapa. Então o dia tranquilo tinha oito obras atrasadas, mas ainda não urgentes.
As duas regras estão certas num dia normal, então mantive as duas e mudei os dados do dia tranquilo. No All clear, toda obra atrasada agora passou para a etapa seguinte quatro dias atrás, com a mudança registrada no histórico como qualquer outra, e Open jobs mostra "120 · 27 in install" sem vermelho. Um teste falha se o dia tranquilo voltar a ter uma obra atrasada.
Limites e próximos passos
- Os dados são simulados no navegador. Não há contas, nada é salvo, e as três ações voltam ao início quando a página recarrega.
- A demo roda num relógio fixo, terça, 3 de novembro de 2026, às 13h05, então os números se leem iguais em toda visita.
- Só três ações funcionam. Não dá para criar nem editar obras, equipes ou sistemas, e a equipe é escolhida numa lista, sem arrastar e soltar.
- O app está só em inglês.