Dashboard de vendas

Dashboard de vendas de uma loja: app shell com menu lateral recolhível, números com variação, gráfico de receita feito com tokens, vendas por canal e tabela de pedidos ordenável com filtro de canal.

Feito comCopy Anchor Link

• AppShell
• Sidebar
• Drawer
• SearchInput
• IconButton
• Avatar
• ToggleGroup
• Stat
• Card
• Meter
• DataTable
• Badge
• NativeSelect
• Heading
• Text

ComportamentoCopy Anchor Link

• Três layouts conforme a largura. O shell mede a própria largura: menu lateral completo a partir de 1000px, trilho de ícones a partir de 640px e, abaixo disso, um botão de menu que abre a mesma navegação num Drawer. Experimente as larguras Tablet e Celular acima. No seu app, uma media query na janela faz o mesmo.
• Filtro de período. 7, 30 ou 90 dias muda os números, as variações e o gráfico; em 90 dias o gráfico passa a ter barras por semana.
• Sem biblioteca de gráficos. As barras são elementos simples com altura em porcentagem e cores --cml-accent e --cml-brand-300, então o gráfico acompanha o estilo e a cor da marca. As linhas de grade misturam --cml-fg com pouca opacidade, para continuarem discretas mesmo nos estilos de borda preta sólida. Troque pela sua biblioteca de gráficos quando precisar de eixos e tooltips.
• Pedidos. O filtro de canal restringe a DataTable; a tabela ordena por qualquer coluna, pagina de 5 em 5 e mostra um estado vazio quando o canal não tem pedidos.
• Notícia boa e ruim. Na taxa de reembolso, cair é bom: o StatDelta recebe sentiment="positive" com trend="down", para a cor bater com o significado.

AcessibilidadeCopy Anchor Link

• Cabeçalho, menu lateral e conteúdo são um header, um aside com nav nomeado e o main da página. Nesta página o conteúdo vira div, porque a documentação já tem um main.
• As barras do gráfico ficam escondidas dos leitores de tela; a descrição do card diz em palavras o melhor dia e a receita dele.
• Os botões de período são um ToggleGroup com nomes completos ("Últimos 30 dias") como nome acessível, não só "30d".
• Os itens do menu no trilho mantêm o nome (e um title como dica), e a página atual tem aria-current="page".