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.
Envelopes
Visão geral
Outubro de 2026Acompanhe 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
- Assinaturas
- 2 de 3
- Prazo
- 24/10/2026
Em assinatura - Termo de adesão · Plano EmpresarialDOC-2026-001185
- Assinaturas
- 0 de 2
- Prazo
- 30/10/2026
Enviado - Procuração para representaçãoDOC-2026-001186
- Assinaturas
- 2 de 2
- Prazo
- 12/10/2026
Concluído - Aditivo contratual nº 3DOC-2026-001187
- Assinaturas
- 0 de 1
- Prazo
- —
Rascunho - Acordo de confidencialidadeDOC-2026-001188
- Assinaturas
- 1 de 2
- Prazo
- 05/10/2026
Expirado - Distrato · Fornecedor ACMEDOC-2026-001189
- Assinaturas
- 1 de 2
- Prazo
- 18/10/2026
Recusado - Contrato de locação · Sala 402DOC-2026-001190
- Assinaturas
- 1 de 3
- Prazo
- 28/10/2026
Em assinatura - Política de uso de dadosDOC-2026-001191
- Assinaturas
- 4 de 4
- Prazo
- 02/10/2026
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: "[email protected]" }}
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.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| contexts | MenuSidebarContext[] | — | Áreas do trilho, com itens, subitens e favoritos. |
| activeContextId · defaultActiveContextId · onContextChange | string · (id) => void | — | Área ativa. |
| activeItemId · defaultActiveItemId · onItemClick | string · (item, event) => void | — | Item ativo; ponto de ligação com o router. |
| breadcrumb | AppHeaderCrumb[] | — | Caminho no cabeçalho; o último é a página atual. |
| commandGroups · enableShortcut | AppHeaderCommandGroup[] · boolean | — · true | Paleta de comandos e atalho ⌘K. |
| notifications | { items, onMarkAllRead?, onViewAll? } | — | Sino com contagem e painel. |
| headerRightSlot | ReactNode | — | Ações extras no cabeçalho. |
| brand · user · onSettings · onLogout | ReactNode · 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 · onMenuCollapseChange | boolean | false | Menu recolhido; com ele recolhido, o painel abre por cima no hover. |
| density | "comfortable" | "compact" | "comfortable" | Espaço interno do corpo. |