z-uiDesign system
Templates

AppShell

A aplicação inteira montada com o que o z-ui tem: MenuSidebar com áreas e favoritos, AppHeader com caminho, paleta de comandos e notificações, e o corpo com PageHeader, KPIs, gráfico e DataList. Abaixo de 768px de largura o menu vira gaveta.

Painel de envelopes

Recolha o menu pelo botão do cabeçalho; com ele recolhido, passar o mouse pelos ícones abre o painel por cima. ⌘K fica livre aqui para não disputar com a página.

Abrir em tela cheia
Envelopes

Visão geral

Outubro de 2026

Acompanhe envios, assinaturas pendentes e prazos de toda a conta.

Enviados
702Alta de +5,7%vs setembro
Assinados
655Alta de +6,0%vs setembro
Tempo médio
5,2 hQueda de −0,8 haté a última assinatura
Recusados ou expirados
40Alta de +3
24 recusados · 16 expirados

Volume por mês

Envelopes enviados e assinados, janeiro a outubro de 2026.

Envelopes recentes

  • Contrato de prestação de serviçosDOC-2026-001184
    Em assinatura
  • Termo de adesão · Plano EmpresarialDOC-2026-001185
    Enviado
  • Procuração para representaçãoDOC-2026-001186
    Concluído
  • Aditivo contratual nº 3DOC-2026-001187
    Rascunho
  • Acordo de confidencialidadeDOC-2026-001188
    Expirado
  • Distrato · Fornecedor ACMEDOC-2026-001189
    Recusado
  • Contrato de locação · Sala 402DOC-2026-001190
    Em assinatura
  • Política de uso de dadosDOC-2026-001191
    Concluído

8 itens

Uso

<AppShell
  contexts={contexts}
  breadcrumb={[{ label: "Envelopes", href: "/envelopes" }, { label: "Visão geral" }]}
  commandGroups={commands}
  notifications={{ items, onMarkAllRead, onViewAll }}
  brand={<BrandLogo variant="symbol" />}
  user={{ name: "Marina Couto", email: "marina@empresa.com.br" }}
  onLogout={logout}
>
  <PageHeader title="Visão geral" actions={<Button>Novo envelope</Button>} />
  <KpiGroup columns={4}>…</KpiGroup>
</AppShell>

Props

O corpo rola sozinho; cabeçalho e menu ficam fixos. O shell ocupa a altura do pai.

PropTipoPadrãoDescrição
contextsMenuSidebarContext[]—Áreas do trilho, com itens, subitens e favoritos.
activeContextId · defaultActiveContextId · onContextChangestring · (id) => void—Área ativa.
activeItemId · defaultActiveItemId · onItemClickstring · (item, event) => void—Item ativo; ponto de ligação com o router.
breadcrumbAppHeaderCrumb[]—Caminho no cabeçalho; o último é a página atual.
commandGroups · enableShortcutAppHeaderCommandGroup[] · boolean— · truePaleta de comandos e atalho ⌘K.
notifications{ items, onMarkAllRead?, onViewAll? }—Sino com contagem e painel.
headerRightSlotReactNode—Ações extras no cabeçalho.
brand · user · onSettings · onLogoutReactNode · AppShellUser · () => void—Marca no topo do trilho e menu da conta embaixo. AppShellUser = { name, email?, subtitle?, role?, avatarUrl? }: avatarUrl mostra a foto com as iniciais como reserva; email é opcional para login por OAuth.
menuCollapsed · defaultMenuCollapsed · onMenuCollapseChangebooleanfalseMenu recolhido; com ele recolhido, o painel abre por cima no hover.
density"comfortable" | "compact""comfortable"Espaço interno do corpo.