Painel de patrimônio

Uma dobra inteira que encena o portal do cliente. Um painel de vidro com barra de aplicativo — nome do relatório de um lado, abas de janela do outro — e dentro dele quatro peças que respiram juntas: o patrimônio consolidado num número grande que conta ao entrar na tela, uma rosca de cinco classes de ativo com a leitura em texto ao lado, cinco barras horizontais por instituição e a linha da janela desenhando da esquerda para a direita. Trocar de janela (7d · 30d · 12m) recalcula as quatro: o número reconta, a rosca reanima, as barras recrescem e a linha redesenha.

Resolve a pergunta que decide a conversa numa página de assessoria — o que exatamente eu recebo todo mês? — sem prometer nada e sem pedir nada. Uma lista de entregas afirma; um painel funcionando mostra. É o irmão maior do conteudo/trio-cards-ui-simulada: aquele prova três recursos em três cards pequenos, este dedica a dobra inteira a um só, com a informação respirando. Não é ferramenta de entrada de dados como as irmãs desta leva — ninguém digita nada aqui, e por isso ele funciona igualmente bem no meio da página, entre duas dobras de texto.

Quando usar

• Página de assessoria, de gestão de patrimônio ou de plataforma, quando o relatório consolidado é o produto e existe uma tela real por trás dele.
• Depois da dobra que explica o modelo de trabalho e antes da que pede a conversa: o painel é a prova visual entre a promessa e o convite.
• Quando há mais de uma instituição na história. Metade do argumento desta peça é a lista de custódias diferentes somando um número só.

Quando não usar

• Quando a pessoa deve calcular alguma coisa. Aqui ela só olha. Para simulação com resposta, conversao/simulador-carteira e conversao/calculadora-projecao; para comparar dois caminhos lado a lado, dados/comparador-cenarios.
• Como grade de indicadores da empresa (clientes, anos, patrimônio sob assessoria). Isso é prova/stats-contador-regua — número de instituição, não simulação de tela de cliente.
• Quando o portal ainda não existe. Simular uma tela que não foi desenhada é comprar dívida: a dobra vira a especificação e alguém terá de construir aquilo.
• Em página que já tem outro detalhe pulsando por perto. O anel de sincronia é o único movimento contínuo desta peça de propósito; dois pulsos na mesma tela viram enfeite.

Padrão editorial

Os três textos de janela (janela, fechamento, anuncio) são um trio: mudou um, mudaram os três. É o único lugar onde a tabela do script guarda prosa.

Especificação dos assets

Nenhum. Não há foto, não há ícone de terceiro, não há fonte de terceiro. O único desenho é o glifo de quatro barras da marca do aplicativo, feito em SVG de traço aqui mesmo — trocá-lo pelo logotipo do cliente é a única substituição de asset prevista, e ela cabe no mesmo quadrado de 28px.

Compliance

Tudo neste painel é ilustrativo. O bloco vem marcado com <!-- CONTEÚDO ILUSTRATIVO --> no markup, a pílula ilustrativo fica visível na barra de topo e a ressalva mora no pé do próprio painel, em --fg-muted, ao lado do que ela cobre — não em letra miúda no rodapé da página.

Antes de publicar, o consumidor tem de:

1. Trocar a tabela PERIODOS no topo do script.js e o período padrão escrito no markup.html pelos números que a casa quiser mostrar — e manter as cinco invariantes que o comentário da tabela lista (mix soma 100, mixValor e inst somam total, serie termina em total, variacao é a razão entre o primeiro e o último ponto da série).
2. Decidir a redação da ressalva com a área de compliance do cliente. A que vem no arquivo é um piso, não uma aprovação: "Painel ilustrativo. Os números não representam carteira real nem resultado de cliente. Variação de janela é fato passado e não garante resultado futuro."
3. Conferir as instituições. As marcas do arquivo (Meridian, Vantor, Quadrant, Altamira, Kessler; sobram Northbay e Solvane) são fictícias e desenhadas para a biblioteca. Nome de banco ou de corretora real é marca registrada e não atravessa.
4. Manter a janela ao lado de todo percentual de variação. Variação de período é fato passado de um período nomeado; sozinha, ela lê como rentabilidade prometida.

O que a peça não faz, e não deve passar a fazer: não projeta, não recomenda, não coleta nome, e-mail nem telefone, e não grava nada em localStorage. Se a dobra precisar terminar em captura, ela aponta para conversao/cta-formulario-lead — o painel não vira formulário.

Como usar

<link rel="stylesheet" href="componentes/dados/painel-patrimonio/estilo.css">
<script src="componentes/dados/painel-patrimonio/script.js"></script>

A seção declara sec-deep; o painel é a primitiva .glass do core com o desfoque zerado. O período padrão inteiro está escrito no markup.html — valor, variação, stroke-dasharray das cinco fatias, --wealth-w das cinco barras e o d da linha. Ele é a linha 0 da tabela do script, e as duas cópias precisam bater.

Ganchos

Variações

• uma janela só — uma linha em PERIODOS e um <button>. Troque-o por um <span> e deixe o .wealth-static no lugar, para não sobrar caixa de aba com um item.
• quatro instituições — apague um <li> e o quarto valor de cada inst. O script para no menor dos dois comprimentos.
• sem seletor — não carregue o script.js. É o mesmo estado de quem navega sem JavaScript: painel inteiro, abas escondidas, rótulo estático no lugar delas.
• em dobra clara — .sec-paper na seção. A série acompanha sozinha (ela é color-mix sobre --accent e --bg), mas o --glass-bg branco a 4% some sobre fundo claro.
• sem o anel de sincronia — apague o <span class="wealth-sync-ping"> e a peça perde o movimento contínuo, mantendo a contagem.

Gotchas

• A rosca cresce por stroke-dasharray, e não por stroke-dashoffset. Com o dasharray fixo, o offset só gira a fatia: o padrão de traço tem período igual à circunferência inteira (289,03 unidades para r=46), então existe sempre exatamente um traço visível, e mudar o offset o desloca em vez de encurtá-lo. O que faz a fatia nascer do próprio começo é transicionar o comprimento, de 0 289.03 até 95.87 193.16. Medido no meio da troca de aba: 4.84px, 284.19px na primeira fatia enquanto as outras quatro ainda estavam em 0px por causa do escalonamento de 60ms.
• O ponto do fim da linha é HTML, não <circle>. O <svg> da linha usa preserveAspectRatio="none" para ocupar a célula inteira em qualquer largura — a 1440 a caixa mede 638×96 para um viewBox de 600×96, e a 390 mede 314×78. Sob essa escala não uniforme um círculo do SVG vira elipse. O traço se defende com vector-effect="non-scaling-stroke"; o ponto virou um elemento posicionado por --wealth-spark-y, a altura do último ponto em porcentagem da caixa. O x é constante por construção: o último ponto da série sempre encosta na margem direita do viewBox.
• O período padrão está escrito em dois lugares, e é de propósito. O markup.html traz o período 0 inteiro — é ele que fica de pé sem JavaScript —, e a tabela do script traz os três, inclusive o 0, porque a primeira aba precisa ter para onde voltar. Editar um número do período padrão pede as duas edições. Um gerador resolveria; enquanto não existe, o comentário da tabela avisa.
• As abas somem sem JavaScript, e o rótulo estático toma o lugar. Medido numa cópia sem o <script>: display:none nas abas, block no .wealth-static com o texto "janela de 7 dias", painel de 558px de altura com todos os números certos e as fatias somando 100. Três botões que ignorassem o clique seriam um defeito; esconder sem dizer qual janela está na tela seria outro.
• O laço dorme fora da tela, e isso é medido, não prometido. Contando mutações de style no ponto de sincronia: 59 escritas em 60 quadros com a dobra na tela, 0 em 60 quadros com ela fora, 59 de novo ao voltar. Ao dormir, o anel volta a zero e uma contagem em andamento é fechada na hora — sem isso, quem rolasse para longe no meio da contagem voltaria a um número errado congelado.
• A contagem anda por tempo, com teto de 50ms. Em tela de 120Hz uma contagem por quadro chegaria na metade do tempo; e sem o teto, o primeiro quadro depois de uma aba em segundo plano traria os segundos acumulados de uma vez. A curva é uma saída cúbica escrita no script, e não a --ease do projeto: não há como ler uma cubic-bezier de dentro do JavaScript sem reimplementá-la.
• A escala da linha é a da própria janela. Cada série é normalizada pela sua mínima e máxima, e não por uma escala comum às três. Com escala fixa, a janela de 7 dias — meio ponto percentual de amplitude — sairia reta ao lado da de 12 meses. O preço é que as três linhas parecem ter a mesma dramaticidade; a leitura em texto embaixo (mínima e máxima) é o que devolve a proporção real.
• A paleta é de uma cor só, em cinco degraus. Sage e tan não esticam em cinco passos distintos: qualquer arranjo deixa dois pares quase iguais no meio da rosca. Os degraus são color-mix de --accent com --bg (100%, 74%, 56%, 42%) e o quinto troca para --accent-2, justamente onde os passos ficam mais próximos — é o par de fatias de 12% que precisa da diferença de matiz. Trocar --bg por transparent funcionaria visualmente e quebraria a bolinha da legenda, que vive em outro contexto de empilhamento.
• O .is-still existe porque o estado zero não pode ser visto. O script escreve os zeros com as transições suspensas, força um reflow e devolve o painel ao normal no mesmo quadro. Sem o reflow no meio, o navegador junta as duas escritas e anima o caminho inverso — a rosca encolhendo antes de crescer.
• A grade quebra em 960px, e a rosca desempilha em 640px. Doze colunas pedem cerca de 900px de painel útil. Medido: a 1440 as células são 456/638 na primeira fila e 547/547 na segunda; a 390 são quatro faixas de 348px, com o painel em 350×1132 e nenhum filho estourando a caixa. O painel tem overflow:hidden, e o contorno de foco do core (2px com 3px de recuo) passa longe: 18px de folga acima da aba e 32px à direita.
• A peça não coleta nada e não guarda nada. As três janelas vivem na tabela do script e morrem no recarregamento. São dados financeiros de alguém, ainda que fictícios, e a captura é trabalho do conversao/cta-formulario-lead.
• Com movimento reduzido a dobra nasce pronta e parada. Medido: valores finais no primeiro quadro (48,12, fatias em 95.87px, 193.16px, barras em scaleX(1 … 0.385), linha com offset 0), zero mutações no painel em 90 quadros, --wealth-ping nunca escrito e o anel em scale(1). As abas continuam trocando por clique, sem transição — aba que ignora o clique é defeito, não acessibilidade.

Histórico

Origem. Não há referência única. O padrão — painel de portal do cliente, com seletor de janela e um número consolidado grande — é recorrente em três famílias de site de instituição financeira: os portais de private banking e multi-family office, os agregadores de carteira e os painéis de fintech de investimento. Da forma comum a elas vieram quatro decisões: a barra de aplicativo com identidade à esquerda e seletor à direita; o número grande com variação e data de fechamento embaixo; a rosca de alocação sempre acompanhada da leitura em lista; e a divisória de 1px entre as células, sem vão — vão entre células daria cartões flutuando dentro de um cartão.

Decisões de tradução para o contrato.

• Gráfico em SVG inline, nunca canvas: escala, herda token, é inspecionável e não borra em tela densa. Os dois <svg> levam aria-hidden e o dado vive em texto de verdade no DOM — lista de classes com percentual e valor, lista de instituições com valor, e mínima/máxima/marcações para a linha.
• Toda cor saiu de token. A série é color-mix sobre --accent, --accent-2 e --bg; os brancos com alfa são color-mix sobre --light; as divisórias são --rule. Nenhuma cor crua no arquivo.
• O painel é a primitiva .glass do core com --glass-blur:0px: sobre fundo opaco de seção não há o que desfocar, e a camada custaria composição de graça. Mesmo raciocínio do conteudo/trio-cards-ui-simulada.
• A entrada da dobra é data-rv do core no invólucro do painel — nada aqui reimplementa reveal. O crescimento das formas é transição de CSS disparada por um IntersectionObserver próprio, que é também quem liga e desliga o laço.
• Um requestAnimationFrame por painel, para a contagem e o anel, dormindo fora da tela. As formas crescem por transição, não pelo laço: animar quatro peças no rAF seria trabalho de graça.
• As três janelas são três edições do mesmo relatório, com três fechamentos diferentes (28/08/2026, 31/08/2026, 31/12/2025). É o que permite o total mudar de uma aba para outra sem mentir: não é o mesmo dia visto de três ângulos, são três documentos com três datas.
• Nenhuma instituição real, nenhum número apurado, nenhuma projeção. A ressalva mora no pé do painel e a pílula ilustrativo na barra de topo.

Divergências conhecidas.

• O padrão do setor tem filtro por conta e exportação em PDF. Aqui não: os dois pedem back-end e a peça é decorativa. Se a página precisar prometer exportação, isso é texto de apoio, não botão desta dobra.
• O número principal não é o saldo de hoje. É o fechamento da edição escolhida, e a data está escrita embaixo. Um saldo "de agora" mudando ao trocar a janela seria a leitura errada e não sobreviveria a uma revisão de compliance.
• Só a peça 1 conta. Os onze outros números (cinco da rosca, cinco das barras, o fechamento da linha) trocam direto. Doze contagens simultâneas leem como caça-níqueis, não como relatório.