Components

Tela de Exemplo

Um layout completo de aplicação Hogrid: sidebar, topbar, KPIs e tabela reunindo todos os padrões do design system em uma só superfície.

Dashboard de gestão

Painel de projetos com navegação lateral, breadcrumb e busca no topo, cartões de indicadores e a tabela de entregas com totalizador. Flat-by-default, um único CTA em Volts por região.

Visão geral

Projetos ativos

+16,7%vs. trimestre

Releases no mês

+9,5%vs. mês anterior

Uptime médio

99,98%

NPS

+4,2%vs. trimestre

Entregas em andamento

Cinco projetos com entrega prevista para o trimestre.

Projeto	Cliente	Squad	Valor	Status	Prazo
Beanie	Loja Beanie	Engenharia	R$ 68.000,00	Em produção	12/03/2026
PlantLab	PlantLab Ltda.	Design	R$ 52.500,00	Em desenvolvimento	28/03/2026
Axon	Grupo Meridiano	Engenharia	R$ 74.000,00	Em revisão	05/04/2026
Vórtice	Vórtice Mídia	Growth	R$ 28.000,00	Em produção	18/03/2026
Cardume	Cardume Co.	Design	R$ 42.000,00	Em desenvolvimento	10/04/2026
Total em contratos			R$ 264.500,00

Anatomia

Como os componentes do design system se combinam nesta tela.

Região	Componentes	Padrão aplicado
Sidebar	nav + bloco de usuário (dropdown para cima)	Três zonas fixas, item ativo em Volts
Topbar	BreadcrumbNav, SearchInput, ações	Hierarquia e busca sempre visíveis
KPIs	StatCard × 4	Superfície plana, variação em text-success
Tabela	Table + HogridBadge + TableFooter	Status como dado, total no rodapé
Ações	HogridButton outline + primary	Um único CTA primário (Nova entrega)

Referência

Componente	Papel na tela	Import
StatCard	Indicadores de topo	@/components/ui/stat-card
BreadcrumbNav	Hierarquia na topbar	@/components/ui/breadcrumb
SearchInput	Busca de projetos	@/components/ui/input
Table / TableFooter	Entregas + total	@/components/ui/table
HogridButton	Exportar e Nova entrega	@/components/ui/button