Componentes
Inventário do sistema
Os 530 componentes exportados do sistema, em 387 arquivos e 62 módulos. Esta é a página que prova que nenhum ficou de fora — e ela não prova isso por diligência, prova por construção: a lista é lida do código, não digitada aqui.
O sistema em números
- 530Componentes exportadoscomponents/**/*.tsx
- 62Módulos387 arquivos
- 265Com JSDoc50% do sistema · 265 sem nenhuma linha
- 49Órfãos (ninguém importa)9% — candidatos a aposentar
- 425Com "use client"105 rodam no servidor
- 308Usados em um lugar só58% — feitos pra uma tela, não pro sistema
Por que esta lista é gerada
Um catálogo de centenas de itens digitado à mão desatualiza no dia seguinte — e a partir daí ele não é só inútil, é pior que não existir: o time consulta, erra, e para de confiar no hub inteiro.
A fonte é o código. O script varre components/**, extrai todo export com inicial maiúscula, conta quantos arquivos importam cada um e escreve lib/ds/inventario.generated.ts. Esta página só lê esse arquivo. Criou ou apagou componente? Regenere — os números daqui, inclusive os da seção de dívida, mudam sozinhos.
Depois de criar, renomear ou remover componente:
| Campo | Como é apurado |
|---|---|
| nome | Export com inicial maiúscula: function ou const, default ou nomeado. |
| arquivo · modulo | Caminho real. O módulo é a pasta dentro de components/. |
| client | Presença da diretiva "use client" no topo do arquivo — não é adivinhação, é leitura. |
| doc | Primeira frase do JSDoc imediatamente acima do export, truncada em ~200 caracteres. |
| usos | Quantos arquivos de components/ e app/ importam aquele nome daquele caminho. O próprio arquivo não conta. |
| Duplicatas do iCloud | Arquivos "algo 2.tsx" são descartados pelo gerador — não entram na contagem. |
Uso é resolvido por caminho, não por nome. Casar só por nome mentia: existem dois Card no sistema e os dois apareciam com o total somado. A chave é arquivo::Nome, resolvida a partir do path do import — é por isso que a tabela de homônimos mais abaixo tem número confiável.
O núcleo de fato
Os 12 componentes mais importados. São 2% do catálogo e respondem por 37% de todos os imports do sistema — não é o que o DS diz ser importante, é o que o código usa todo dia.
| Componente | Onde vive | Usos |
|---|---|---|
| Button | components/ui/button.tsx | 128 |
| Card | components/ui/card.tsx | 122 |
| PageHeaderAdmin | components/admin/page-header-admin.tsx | 65 |
| Input | components/ui/input.tsx | 60 |
| Badge | components/ui/badge.tsx | 59 |
| Reveal | components/landing-dark/motion-primitives.tsx | 34 |
| Avatar | components/shared/avatar.tsx | 31 |
| Label | components/ui/label.tsx | 29 |
| StatCard | components/ponto/stat-card.tsx | 20 |
| FooterDark | components/landing-dark/footer-dark.tsx | 18 |
| LogoEmpresa | components/shared/logo-empresa.tsx | 18 |
| ApolLogo | components/landing-dark/apol-logo.tsx | 17 |
Mexer nestes é mexer no sistema todo. Alterar o Button encosta em 128 arquivos de uma vez. Vale a inversão: nada aqui muda sem antes olhar o que quebra, e nada aqui recebe variante nova sem entrar na documentação de primitivas.
Todos os 530, por módulo
Famílias e módulos ordenados por tamanho — o peso real aparece primeiro. Cada módulo abre e fecha; dentro, a tabela vem ordenada por uso, do mais importado ao órfão.
Como ler: Usos é quantos arquivos importam aquele export. Órfão significa zero importadores — não significa lixo, significa decisão pendente. client é arquivo com "use client"; server atravessa a fronteira RSC. Traço em "O que é" quer dizer que o componente não tem JSDoc — é dívida, não mistério.
Admin · 284 de 530 · 8 órfãos
O painel do dono. É onde o sistema tem mais massa e onde a consistência mais rende — cada tela nova aqui deveria ser montagem, não desenho.
components/admin41 exports · 19 sem JSDoc · 3 órfãos
Componente O que é Usos Camada PageHeaderAdminpage-header-admin.tsx Cabeçalho padrão de tela admin: eyebrow + título display + descrição + ações alinhadas à direita (responsivo: empilha em mobile). 65 server ApolVivoapol-vivo.tsx — 2 client BarrasCategoriafinanceiro-charts.tsx "1,2k", "18k", "950" — pra rótulos de eixo. 2 client ConvidarFuncionarioDialogconvidar-funcionario-dialog.tsx Adiciona um funcionário direto pelo RH (cria a linha real em `funcionarios`, já aprovado). 2 client EmployeeRowemployee-row.tsx EmployeeRow — linha de funcionário na tabela do admin. 2 client GraficoFluxofinanceiro-charts.tsx "1,2k", "18k", "950" — pra rótulos de eixo. 2 client NovoClienteDialognovo-cliente-dialog.tsx Dialog "Novo cliente" — formulário com validação Zod via Server Action. 2 client NovoProdutoDialognovo-produto-dialog.tsx — 2 client SeletorPeriodoseletor-periodo.tsx Seletor de período estilo Google Analytics: canto superior direito, presets + intervalo personalizado. 2 client SidebarAdminsidebar-admin.tsx SidebarAdmin — navegação do admin. 2 client AdicionarItemOsDialogadicionar-item-os-dialog.tsx — 1 client AdicionarVeiculoDialogadicionar-veiculo-dialog.tsx — 1 client AdminBottomNavadmin-bottom-nav.tsx — 1 client AdminLayoutClientadmin-layout-client.tsx Client component: monta o menu (ícones lucide não atravessam a fronteira RSC → CSR, então ficam definidos aqui) e recebe do `layout.tsx` (Server Component) só dado serializável — quem está logado e… 1 client AppLinkCardapp-link-card.tsx Card "Testar como funcionário" — mostra: - URL pública pro app do funcionário (`/[slug]`) - Botão copiar - QR code (gerado via api.qrserver.com — sem deps, sem key) - Botão "Abrir em nova aba" Usad… 1 client AtualizarFlutuanteatualizar-flutuante.tsx — 1 client BrandingFieldsbranding-fields.tsx Par de campos de cor primária + secundária com validação de contraste em tempo real. 1 client ColorFieldcolor-field.tsx Campo de cor com swatch + hex + chip de contraste WCAG ao vivo. 1 client EditarOsDialogeditar-os-dialog.tsx — 1 client EnderecoFieldsendereco-fields.tsx Form completo de localização do tenant. 1 client ExtratoBancarioextrato-bancario.tsx — 1 client FiltroPeriodofiltro-periodo.tsx Seletor de período do quadro de OS (canto superior direito). 1 client GraficoMensalfinanceiro-charts.tsx "1,2k", "18k", "950" — pra rótulos de eixo. 1 client KanbanOskanban-os.tsx — 1 client LancarCaixaDialoglancar-caixa-dialog.tsx — 1 client MapaOsmmapa-osm.tsx — 1 client MenuModulosMobilemenu-modulos-mobile.tsx Launcher de módulos do celular — "todos os módulos em quadradinhos" (pedido do Victor em 22/07/2026). 1 client NotificacoesBellnotificacoes-bell.tsx Sino de notificações — topo do admin, sistema inteiro. 1 client NovaOsWizardnova-os-wizard.tsx — 1 client OsStatusActionsos-status-actions.tsx — 1 client PainelPatiopainel-patio.tsx — 1 client PainelReguapainel-regua.tsx — 1 client ReciboActionsrecibo-actions.tsx Barra de ações do recibo (não sai na impressão). 1 client RemoverItemOsButtonremover-item-os-button.tsx Remove um item da OS. Remove pelo id da LINHA, não pelo `produto_id`: item que entra pelo PDV é texto livre e tem `produto_id` null/vazio — apagar por produto varreria TODOS os itens de texto livre… 1 client RemoverVeiculoButtonremover-veiculo-button.tsx — 1 client RenovarQrButtonrenovar-qr-button.tsx Botão "Renovar QR" (RH). Confirma, chama a action e recarrega a página pra mostrar o QR novo. Renovar invalida os papéis antigos. 1 client RouteTopLoaderroute-top-loader.tsx Barra de progresso no topo da tela (estilo YouTube/GitHub) que reage a cliques em qualquer link interno do admin — feedback visual imediato enquanto o Server Component de destino busca dado, antes … 1 client SiteLinkCardsite-link-card.tsx Card "Site institucional" — link público pro site que o cliente final (pessoa que quebrou o parabrisa) vê. 1 client BaixarContaDialogórfãobaixar-conta-dialog.tsx — 0 client MapaOsmInnerórfãomapa-osm-inner.tsx — 0 client NovaOsDialogórfãonova-os-dialog.tsx — 0 client components/admin/pessoas37 exports · 22 sem JSDoc · 1 órfão
Componente O que é Usos Camada Camporh-dialog-shell.tsx — 9 client DialogRhrh-dialog-shell.tsx — 9 client Textarearh-dialog-shell.tsx — 9 client NavMesnav-mes.tsx — 4 server BotaoJustificarbotao-justificar.tsx O botão que abre o "Justificar falta" — NA PRÓPRIA LINHA da falta (Victor, 18/08/2026: "coloque essa opção na linha"). 3 client EspelhoPontoespelho-ponto.tsx — 3 server SelectPessoarh-dialog-shell.tsx Seletor de pessoa — sempre o roster real, nunca uma lista escrita à mão. 3 client SelectSimplesrh-dialog-shell.tsx `<select>` genérico (tipo/grau) com a mesma pele do de pessoa. 3 client TrilhaCestatrilha-cesta.tsx A TRILHA da cesta — uma bolinha por dia útil do ciclo. 3 server LegendaCestatrilha-cesta.tsx Legenda da trilha. Só os estados que APARECEM na trilha entram — uma legenda com sete linhas fixas pra uma trilha de duas cores treina o olho a pular a legenda inteira. 2 server AcoesFeriasrh-acoes.tsx Aprovar/Rejeitar (só enquanto está "solicitada") + Excluir. 1 client AnaliseAppViewanalise-app-view.tsx Visão (presentational) da Análise do app. 1 server BotaoExcluirrh-acoes.tsx Excluir sozinho — atestados e advertências. 1 client BotaoExcluirAbonobanco-horas-acoes.tsx — 1 client BotaoExcluirComunicadocomunicado-acoes.tsx Excluir comunicado — a única ilha client do mural (a página é server). 1 client CalendarioFeriascalendario-ferias.tsx — 1 client CardModulocard-modulo.tsx — 1 server DialogPontoManualdialog-ponto-manual.tsx — 1 client DireitoFeriasdireito-ferias.tsx — 1 server EditarFeriasDialogeditar-ferias-dialog.tsx EDITA as datas de um período já lançado (07/08/2026). 1 client EspelhoEquipeespelho-equipe.tsx — 1 client FichaFormficha-form.tsx — 1 client HorasEditaveishoras-editaveis.tsx — 1 client JustificarFaltaDialogjustificar-falta-dialog.tsx — 1 client LancarAbonoDialogbanco-horas-acoes.tsx — 1 client NovaAdvertenciaDialognova-advertencia-dialog.tsx — 1 client NovaFeriasDialognova-ferias-dialog.tsx Nova solicitação de férias. A contagem de dias aparece VIVA enquanto o gestor escolhe as datas, pela mesma `diasDeFerias` que o servidor usa pra gravar (contagem inclusive: "01 a 10" são 10 dias, n… 1 client NovoComunicadoDialognovo-comunicado-dialog.tsx — 1 client PessoasTabspessoas-tabs.tsx — 1 client ReciboPagamentorecibo-pagamento.tsx — 1 client RegistrarAtestadoDialogregistrar-atestado-dialog.tsx Registrar atestado — grava uma `ocorrencia` com `tipo: "atestado"`. 1 client RelatorioAcoesrelatorio-acoes.tsx — 1 client ResumoPeriodoeditar-ferias-dialog.tsx A contagem viva + o dia da VOLTA. 1 client SalarioFormsalario-form.tsx SALÁRIO do funcionário (migration 0058). 1 client TabelaEquipetabela-equipe.tsx — 1 client TabelaPontoDiatabela-ponto-dia.tsx — 1 client TIPO_LABELórfãodialog-ponto-manual.tsx Corrigir/adicionar UMA marcação à mão. 0 client components/admin/marketing32 exports · 22 sem JSDoc · 1 órfão
Componente O que é Usos Camada Camposhared.tsx — 6 client ModalBaseshared.tsx Variação percentual entre dois valores (null se indefinida). 5 client Areashared.tsx — 4 client MiniaturaListalista-compacta.tsx Miniatura quadrada da linha (arte) — ou um bloco neutro com ícone. 3 client SeletorCanalshared.tsx Seletor de canal — botões com a cor de cada rede no estado ativo e TEXTO BRANCO REAL (`text-[#fff]`, não `text-[#fff]`, que o tema claro escurece fora dos surfaces). 3 client CANAISshared.tsx — 2 client Checklistchecklist.tsx — 2 client ChecklistBarrachecklist.tsx Barra fininha de progresso — usada no card e no topo do checklist. 2 client CopiarLinkcopiar-link.tsx Copia o link interno do card (a URL da tela cheia) pra área de transferência — pra mandar pro cliente/time. 2 client ListaCompactalista-compacta.tsx — 2 client MarcaAprovarevisor-arte.tsx Wordmark "a·prova" — ponto dourado pulsando (CSS local, sem globals). 2 client NovoPostDialogcronograma-marketing.tsx — 2 client Artesartes-marketing.tsx — 1 client ArteTelaarte-tela.tsx — 1 client Automacoesautomacoes-marketing.tsx — 1 client BotaoBaixarArtebaixar-arte.tsx — 1 client Calendariocalendario-marketing.tsx Calendário do mês. No CELULAR o texto do post não cabe: 7 colunas em 390px dão ~50px por célula, e título truncado em 4 caracteres não informa nada. Então abaixo de `sm` a célula mostra só o dia + … 1 client CompararVersoescomparar-versoes.tsx — 1 client Cronogramacronograma-marketing.tsx — 1 client DashboardMarketingdashboard-marketing.tsx — 1 client DeltaBadgeredes-marketing.tsx — 1 client Estrategiasestrategias-marketing.tsx — 1 client GerarPromptArtegerar-prompt.tsx Gerador de prompt de arte. Ele NÃO gera a imagem nem a legenda — gera o PROMPT que o designer cola no ChatGPT/Gemini/Nano Banana. O ganho é o guia de marca entrar inteiro, toda vez, sem ninguém lem… 1 client NovaArteDialogartes-marketing.tsx — 1 client NovaEstrategiaDialogestrategias-marketing.tsx — 1 client PainelMarketingpainel-marketing.tsx — 1 client PostTelapost-tela.tsx — 1 client Redesredes-marketing.tsx — 1 client RegistrarNumerosDialogredes-marketing.tsx — 1 client RevisorArterevisor-arte.tsx Mede o contraste amostrando os pixels num canvas pequeno (não altera o arquivo — é só leitura). 1 client SeloAprovarevisor-arte.tsx Selo pequeno pra usar fora do revisor (ex.: seção Artes enviadas). 1 client POST_COLSórfãocronograma-marketing.tsx — 0 client components/admin/caixa22 exports · 6 sem JSDoc · 1 órfão
Componente O que é Usos Camada AtendentesInputatendentes-input.tsx Campo "quem atendeu" — seleção por CHIPS (pedido do Victor 14/07/2026: "já comece perguntando quem é o atendente... 3 client NfeCheckboxnfe-campo.tsx Checkbox do lançamento — compacto de propósito. 3 client ClienteCaixaInputcliente-caixa-input.tsx Campo de CLIENTE no lançamento do Caixa — opcional de propósito. 2 client PlacaCaixaInputplaca-caixa-input.tsx Placa no lançamento do Caixa (Victor, 01/09/2026). 2 client PulsoCaixapulso-caixa.tsx Atualização automática do Caixa. 2 client CaixaShellcaixa-shell.tsx — 1 client CalculadoraFlutuantecalculadora-flutuante.tsx Calculadora do lançamento (Victor, 25/07/2026: "precisa de uma calculadora, um acesso rápido... 1 client EditarCaixaDialogeditar-caixa-dialog.tsx Edição de um lançamento já existente do Caixa. 1 client ExportarSelecaoexportar-selecao.tsx — 1 client FechamentoDiaBotaofechamento-dia-botao.tsx "Fechamento do dia" — resumo diário do Caixa pronto pra mandar no WhatsApp da Barbara (dona). 1 client FiltrosCaixaPainelfiltros-caixa.tsx — 1 client KpiCaixaCardkpi-caixa-card.tsx KPI mais informativo do Caixa. Um número principal, uma leitura de ritmo e uma linha de contexto, sem transformar o topo num painel de mini-cards. 1 server LancarCaixaBotaolancar-caixa-botao.tsx Botão "Lançamento rápido" — botão dividido (pedido do Victor 14/07/2026): clicar na parte principal abre DIRETO o lançamento individual (o caso mais comum); a setinha ao lado revela só a opção "Em … 1 client LancarCaixaDialoglancar-caixa-dialog.tsx Lançamento rápido de Caixa — layout PDV em duas colunas, SEM scroll: formulário à esquerda, "cupom" da sessão à direita (padrão Square/Toast de tela de venda: entrada + ticket com total corrente). 1 client MenuKpimenu-kpi.tsx Três pontinhos no canto de um KPI — guarda ações que pertencem àquele número mas não merecem um botão no topo da tela. 1 client ProjecaoCaixaprojecao-caixa.tsx Projeção do mês — bem mais afinada que a média ingênua: respeita dias úteis da loja (exclui domingo e feriados de Osasco), mostra vários métodos (piso/tendência/teto) e explica quais feriados ainda… 1 client QuemEditaSeletorquem-edita.tsx — 1 client SeletorMesseletor-mes.tsx Seletor de mês em grade (pedido do Victor 14/07/2026) — substitui o `<select>` nativo (lista comprida, difícil de escanear) por um popover com um calendário de meses por ano: 4 colunas × 3 linhas, … 1 client TagNfenfe-campo.tsx Tag da tabela. Sutil de propósito (pedido do Victor): a maioria dos lançamentos NÃO tem nota — 29 em ~9,7 mil —, então ela precisa ser discreta o bastante pra não virar ruído nas outras linhas, e v… 1 client TagsPosicaotag-posicao.tsx — 1 server TaxasCartaoCardtaxas-cartao-card.tsx — 1 client TagPosicaoórfãotag-posicao.tsx Uma tag. Use `TagsPosicao` pra renderizar a lista de um lançamento. */ 0 server components/admin/tarefas17 exports · 2 sem JSDoc · 1 órfão
Componente O que é Usos Camada BotaoFotobotao-foto.tsx Botão de foto — sobe uma imagem existente ou, no celular, abre a câmera direto (`capture="environment"`; no desktop o atributo é ignorado e cai no seletor de arquivo normal). 4 client LinhaTarefalinha-tarefa.tsx LINHA compacta de tarefa — o átomo das visões Agenda e Idade. 4 client SeloPrazolinha-tarefa.tsx Selo de prazo/atraso — usado à direita na Agenda. 3 client CardTarefacard-tarefa.tsx Card de Tarefa/Demanda, no formato do Jira: barra de prioridade, TÍTULO primeiro, uma linha de meta e um rodapé com responsável e prazo. 2 client PreviewFotoPendentebotao-foto.tsx Miniatura de uma foto ainda não enviada (dialogs de criação), com botão de remover. 2 client CalendarioTarefascalendario-tarefas.tsx Calendário de Tarefas & Demandas — plota os itens pelo `prazo`. 1 client DrawerItemTarefadrawer-item-tarefa.tsx Visualização completa de um item (Fase 3) — abre a partir do clique num card do Kanban/Lista/Calendário. 1 client PainelReservapainel-reserva.tsx — 1 client TarefasShelltarefas-shell.tsx Shell da página /admin/tarefas. Desde a expansão de 03/07/2026: 3 abas (Tudo/Internas/Apol, troca instantânea client-side), dashboard-filtro, busca + filtros rápidos, e 3 visões (Kanban/ Lista/Cale… 1 client ToolbarTarefastoolbar-tarefas.tsx Busca + filtros + seletor de visão (Kanban/Lista/Calendário) — TUDO numa linha só quando couber (pedido do Victor, 22/07/2026: a barra quebrava em duas e o seletor de visão caía sozinho numa segund… 1 client VisaoAgendavisao-agenda.tsx AGENDA — "o que é pra agora?". Uma coluna só, cortada por TEMPO em vez de categoria ou status: Atrasadas · Hoje · Amanhã · Resto da semana · Depois · Sem prazo. Sem navegação, sem mês pra escolher … 1 client VisaoComprasvisao-compras.tsx COMPRAS — "o que está acabando, por quanto e onde a gente compra?". 1 client VisaoIdadevisao-idade.tsx IDADE — "o que está parado há tempo demais?". 1 client VisaoMapavisao-mapa.tsx MAPA — "onde os problemas se concentram?". 1 client VisaoPessoasvisao-pessoas.tsx PESSOAS — "quem está com o quê, e quem está afogado?". 1 client VisaoTabelavisao-tabela.tsx — 1 client DashboardTarefasórfãodashboard-tarefas.tsx Dashboard-filtro no topo do módulo: cada card é uma contagem E um filtro — clicar aplica (clicar de novo remove). 0 client components/admin/pessoas/ficha15 exports · 11 sem JSDoc
Componente O que é Usos Camada AnelScorescore-card.tsx Anel SVG — o número grande da ficha. 2 server CompletudeCadastrocompletude-cadastro.tsx O PAINEL DE COMPLETUDE — o que já está preenchido e o que falta, com o motivo ao lado de cada campo vazio. 2 server AbasFichaabas-ficha.tsx — 1 client AcoesAdvertenciaacoes-advertencia.tsx — 1 client AvaliacaoFormavaliacao-form.tsx AVALIAÇÃO DO MÊS — seis réguas de 1 a 5, o destaque, a atenção e a meta. 1 client AvatarEditavelavatar-editavel.tsx A FOTO DA FICHA — clicável, abre o editor de avatar (o mesmo do "Meu perfil" e das Configurações: arrastar, colar, recortar em 512 WebP). 1 client DialogAdvertirdialog-advertir.tsx — 1 client DialogAnotarnotas-ficha.tsx — 1 client DialogOcorrenciadialog-ocorrencia.tsx — 1 client DialogReconhecerdialog-reconhecer.tsx — 1 client GraficoMesesgrafico-meses.tsx — 1 server InsightsFichainsights-ficha.tsx — 1 server LinhaDoTempolinha-do-tempo.tsx — 1 server ListaNotasnotas-ficha.tsx — 1 client ScoreCardscore-card.tsx — 1 server components/admin/os11 exports · 7 sem JSDoc
Componente O que é Usos Camada FichaOsSheetficha-os-sheet.tsx — 2 client VinculoProdutovinculo-produto.tsx Liga um serviço da OS a uma PEÇA do catálogo. 2 client EntradaRapidaVidroentrada-rapida-vidro.tsx Entrada rápida de item de vidro no PDV da OS — teclado em primeiro lugar. 1 client PainelFaixaOspainel-faixa-os.tsx — 1 client ReceberOsDialogreceber-os-dialog.tsx — 1 client SeletorVisaoseletor-visao.tsx — 1 client VisaoDiavisao-dia.tsx — 1 client VisaoFilavisao-fila.tsx — 1 client VisaoPatiovisao-patio.tsx O PÁTIO — a oficina vista de cima, nas 20 vagas que existem de verdade. 1 client VisaoTabelavisao-tabela.tsx — 1 client VisoesOsvisoes-os.tsx Escolhe a visão e é dono da FICHA pras visões que não são o quadro. 1 client components/admin/lab9 exports · 9 sem JSDoc
Componente O que é Usos Camada Miniaturaminiatura.tsx — 2 server HubLabhub-lab.tsx — 1 server LabCatalogolab-catalogo.tsx — 1 client LabDashboardslab-dashboards.tsx — 1 client LabListaslab-listas.tsx — 1 client LabMobilelab-mobile.tsx — 1 client LabRelatorioslab-relatorios.tsx — 1 client LabShelllab-shell.tsx — 1 client VariacoesNavegacaovariacoes-navegacao.tsx — 1 client components/admin/produtos8 exports · 7 sem JSDoc
Componente O que é Usos Camada LogoMontadoralogo-montadora.tsx — 7 server CelulaEditavelcelula-editavel.tsx Célula que vira input no clique — o gesto da planilha, que é o que a loja já sabe fazer (Victor, 22/07/2026: "tem que ser rápido e prático, porque a gente também vê e pode editar"). 1 client DetalheProdutodetalhe-produto.tsx — 1 client FILTROS_VAZIOSpainel-filtros.tsx — 1 client ListaConsultaProdutoslista-consulta.tsx — 1 client PainelFiltrospainel-filtros.tsx — 1 client ReguaFiltrosregua-filtros.tsx — 1 client TabelaProdutostabela-produtos.tsx — 1 client components/admin/relatorios6 exports · 2 sem JSDoc · 1 órfão
Componente O que é Usos Camada RenderBlocoblocos-view.tsx — 2 client TimbreImpressaotimbre-impressao.tsx TIMBRE — só existe no papel (`hidden print:block`). 2 server PainelInteligenciaViewpainel-inteligencia.tsx Tela do módulo Inteligência — 5 seções numa página só (scroll), na ordem em que o dono decide: o que aconteceu → pra onde vai → quem/o quê produz → estudos → o que fazer a respeito. 1 client RelatorioViewrelatorio-view.tsx View genérica da Central de Relatórios: recebe um `Relatorio` (lista de blocos já calculados no servidor) e desenha cada bloco com o widget do Design System certo. 1 client SeletorPeriodoseletor-periodo.tsx Seletor de período da Central de Relatórios. 1 client KpiCardórfãoblocos-view.tsx — 0 client components/admin/acessos5 exports · 2 sem JSDoc
Componente O que é Usos Camada LinkConviteModallink-convite-modal.tsx Mostra o link de acesso recém-gerado (convite ou reenvio). 2 client ConvidarMembroDialogconvidar-membro-dialog.tsx — 1 client EditarMembroDialogeditar-membro-dialog.tsx Edita nome e perfil de um membro. 1 client GerenciarPerfisDialoggerenciar-perfis-dialog.tsx "Gerenciar perfis" — CRUD de perfis de acesso (Fase 2 do RBAC). 1 client ListaMembroslista-membros.tsx — 1 client components/admin/apolo5 exports · 3 sem JSDoc
Componente O que é Usos Camada SeloApolomarca-apolo.tsx Selo do chat — o "a·" em bloco escuro, o ponto em âmbar da marca. 4 client ApoloShellapolo-shell.tsx — 1 client ArquivosApoloarquivos-apolo.tsx — 1 client ChatApolochat-apolo.tsx — 1 client IconeApolomarca-apolo.tsx Ícone do menu — assinatura compatível com os ícones lucide (className, strokeWidth, ref) pra entrar no `SidebarAdminItem.icon` sem adaptador. 1 client components/admin/fila5 exports · 1 sem JSDoc
Componente O que é Usos Camada PulsoFilapulso-fila.tsx Atualização automática da FILA DA APOL. 2 client BlocoFilabloco-fila.tsx O BLOCO DA FILA DENTRO DA FICHA DO CARD. 1 client ChipFilamarca-fila.tsx — 1 client FaixaFilamarca-fila.tsx A faixa de "é a sua vez". Fica no rodapé do card, colada nas bordas — por isso o `-mx` e o `-mb` compensando o padding do card. 1 client MelhoriasShellmelhorias-shell.tsx MELHORIAS — o catálogo do que foi pedido, com o veredito de cada um, e a FILA de atendimento da Apol. 1 client components/admin/notas5 exports · 2 sem JSDoc
Componente O que é Usos Camada AcoesNotaacoes-nota.tsx Ações de uma nota. Cada botão só aparece quando faz sentido pro estado: rascunho/rejeitada podem ser transmitidas; emitida só pode ser cancelada (com justificativa — a SEFAZ exige 15+ caracteres); … 1 client FormNotaManualform-nota-manual.tsx — 1 client ImpressaoCupomimpressao-cupom.tsx Impressão do cupom (DANFE NFC-e) na impressora térmica do balcão. 1 client TabelaClassificacaotabela-classificacao.tsx — 1 client VendasPendentesNfvendas-pendentes-nf.tsx Fila "vendas marcadas para NF" — o elo que faltava entre o Caixa e o fisco. 1 server components/admin/novidades5 exports · 2 sem JSDoc
Componente O que é Usos Camada BarraReacoesreacoes.tsx Barra de reação — a única forma de a loja responder "isso aqui me serviu". 2 client DetalheNovidadedetalhe-novidade.tsx — 1 client DialogNovaNovidadedialog-nova-novidade.tsx Registrar novidade na mão (só perfil `apol`). 1 client NovidadesShellnovidades-shell.tsx — 1 client PulsoNovidadespulso-novidades.tsx O "atualiza em tempo real" da tela de Novidades — e o carimbo de leitura que sustenta o selo "novo pra você". 1 client components/admin/orcamentos5 exports · 2 sem JSDoc
Componente O que é Usos Camada CardOrcamentocard-orcamento.tsx — 1 client DialogNovoOrcamentodialog-novo-orcamento.tsx Abertura de orçamento pelo balcão. 1 client DrawerOrcamentodrawer-orcamento.tsx Ficha do orçamento — abre ao clicar num card do Kanban. 1 client ExportarOrcamentoexportar-orcamento.tsx — 1 client OrcamentosShellorcamentos-shell.tsx Shell de /admin/orcamentos. Kanban do fluxo de cotação (Cotação → Enviado → Aprovado → Encomendado → Peça instalada), usando o QuadroKanban compartilhado — o mesmo tabuleiro da OS e de Tarefas. Dua… 1 client components/admin/relatorios/vivo4 exports · 1 sem JSDoc
Componente O que é Usos Camada CartaoVivoBlococartao-vivo.tsx — 2 client CartoesRestohub-vivo.tsx Os cartões que chegam depois (pessoas, operação, estoque, fechamento). 1 client FaixaAlertashub-vivo.tsx O que apareceu ao clicar num dia. 1 client HubVivohub-vivo.tsx O que apareceu ao clicar num dia. 1 client components/admin/whats4 exports · 1 sem JSDoc
Componente O que é Usos Camada DialogDestinatariodialogs-whats.tsx Os dois formulários da Central de WhatsApp, no bottom sheet padrão da casa (RBAC F5: todo modal do admin é sheet no celular e caixa centrada no desktop). 1 client DialogEnviodialogs-whats.tsx null = criando. */ destinatario: Destinatario | null; onFechar: () => void; onSalvo: () => void; }) { const [nome, setNome] = React.useState(destinatario?.nome ?? ""); const [fone, setFone] = React… 1 client DialogModelodialog-modelo.tsx Editor do TEXTO das mensagens automáticas (Victor, 29/07/2026: "traga as mensagens como template para que eu possa editar tudo"). 1 client PainelWhatspainel-whats.tsx — 1 client components/admin/compras3 exports · 3 sem JSDoc
Componente O que é Usos Camada ComprasShellcompras-shell.tsx — 1 client ListaPedidoslista-pedidos.tsx — 1 client PainelReposicaoClientepainel-reposicao.tsx — 1 client components/admin/inventario3 exports · 1 sem JSDoc
Componente O que é Usos Camada IniciarInventarioButtoniniciar-button.tsx — 2 client ContagemInventariocontagem.tsx Tela de contagem — mobile-first pra usar andando pela loja. 1 client InventarioDashboardHubdashboard-hub.tsx Hub de inventário embutido na dashboard do estoque — é aqui que a contagem física começa. 1 server components/admin/relatorios/fechamento3 exports · 1 sem JSDoc
Componente O que é Usos Camada AssinaturaFechamentoassinatura-fechamento.tsx A ASSINATURA — o que separa "olhei os números" de "encerrei o mês". 1 client ChecklistFechamentochecklist-fechamento.tsx — 1 client FechamentoViewfechamento-view.tsx A CASCA do Fechamento do Mês. O dossiê é longo por natureza — sete áreas, dezenas de blocos. Duas coisas o tornam navegável em vez de intimidante: 1. **O herói responde antes de rolar.** Receita, v… 1 client components/admin/configuracoes2 exports · 2 sem JSDoc
Componente O que é Usos Camada ListaErroslista-erros.tsx — 1 client NavConfiguracoesnav-configuracoes.tsx — 1 client components/admin/painel2 exports · 1 sem JSDoc
Componente O que é Usos Camada BannerInsightsbanner-insights.tsx — 1 client LembretesDoDialembretes-do-dia.tsx LEMBRETES DO DIA — o bloco de "você já conferiu?". 1 server components/admin/tarefas/dialogs2 exports · 0 sem JSDoc
Componente O que é Usos Camada NovaDemandaApolDialognova-demanda-apol-dialog.tsx Extraído de components/admin/tarefas/painel-demandas-apol.tsx em 03/07/2026, e convertido pra bottom sheet SEMPRE (mobile e desktop) — mesmo esqueleto do nova-os-wizard.tsx. 1 client NovaTarefaInternaDialognova-tarefa-interna-dialog.tsx Extraído de components/admin/tarefas/painel-tarefas-internas.tsx em 03/07/2026, e em 03/07/2026 (mesmo dia, sprint seguinte) convertido pra bottom sheet SEMPRE (mobile e desktop) — mesmo esqueleto … 1 client components/admin/assinatura1 export · 1 sem JSDoc
Componente O que é Usos Camada PainelAssinaturapainel-assinatura.tsx — 1 client components/admin/atendentes1 export · 1 sem JSDoc
Componente O que é Usos Camada ListaAtendenteslista-atendentes.tsx — 1 client components/admin/notificacoes1 export · 1 sem JSDoc
Componente O que é Usos Camada CentralNotificacoescentral-notificacoes.tsx — 1 client components/admin/ponto1 export · 0 sem JSDoc
Componente O que é Usos Camada AutoRefreshPontoauto-refresh-ponto.tsx Mantém a tela de ponto "quase ao vivo" sem precisar de canal realtime: a cada intervalo, re-busca os dados do servidor (Server Component re-renderiza com as marcações mais recentes). 2 client components/admin/troca-perfil1 export · 1 sem JSDoc
Componente O que é Usos Camada TrocaPerfiltroca-perfil.tsx — 1 client components/admin/veiculos1 export · 1 sem JSDoc
Componente O que é Usos Camada BuscaVeiculobusca-veiculo.tsx — 3 client
Produto e peças avulsas · 102 de 530 · 13 órfãos
App do funcionário, canal Apol×Alemão, caixa, login, intros, demos. Módulos pequenos, cada um com uma missão só.
components/central30 exports · 19 sem JSDoc · 4 órfãos
Componente O que é Usos Camada Cui.tsx Renderiza no <body> (escapa de qualquer ancestral com transform/stacking), garantindo fixed em tela cheia. 9 client Btnui.tsx Botão primário (gold + texto escuro = contraste alto). 6 client Cardui.tsx Avatar por papel: Apol (gold) / Alemão (azul). 6 client Badgeui.tsx — 5 client RoleAvatarui.tsx Avatar por papel: Apol (gold) / Alemão (azul). 5 client SectionTitleui.tsx — 5 client Pillui.tsx Pill de seleção (toggle). */ 4 client CAT_ORDERui.tsx — 3 client CATSui.tsx Renderiza no <body> (escapa de qualquer ancestral com transform/stacking), garantindo fixed em tela cheia. 3 client EmptyStateui.tsx — 3 client Drawerui.tsx Painel lateral que desliza da DIREITA (estilo "side sheet"). 2 client KBui.tsx — 2 client KB_ORDERui.tsx — 2 client PRIO_ORDERui.tsx — 2 client PRIOSui.tsx — 2 client ApolMarkui.tsx Logo "a·" da Apol. O foco é o PONTO laranja, que pulsa indicando "ao vivo". `vigor` (0..1) controla a força do pulso: quanto MENOS pendências, mais forte e rápido pulsa (canal "trabalhando bem"). C… 1 client Arquivosarquivos.tsx — 1 client Billingbilling.tsx — 1 client Conversachat.tsx — 1 client Dashboarddashboard.tsx — 1 client Guiaguia.tsx — 1 client NovoPedidoboard.tsx Pílula "na mão de quem" — quem precisa agir (devolutiva). 1 client Pendenciaspendencias.tsx — 1 client Portalportal.tsx — 1 client Quadroboard.tsx — 1 client Tarefastarefas.tsx — 1 client CatChipórfãoui.tsx — 0 client MaoPillórfãoboard.tsx Pílula "na mão de quem" — quem precisa agir (devolutiva). 0 client Modalórfãoui.tsx Modal responsivo: centralizado no desktop, bottom-sheet no mobile. 0 client PrioBadgeórfãoui.tsx — 0 client components/ponto19 exports · 3 sem JSDoc
Componente O que é Usos Camada StatCardstat-card.tsx StatCard — card branco com ícone colorido + label + valor grande. 20 server BottomNavbottom-nav.tsx BottomNav — pill preta arredondada com 4 itens. 2 client CardProximaMarcacaocard-proxima-marcacao.tsx CardProximaMarcacao — CTA principal da Home funcionário. 2 client DataPickerPillsdata-picker-pills.tsx DataPickerPills — filtro de período tipo segmented control. 2 client Fabfab.tsx FAB — Float Action Button (relógio amarelo). 2 client HeaderAppheader-app.tsx HeaderApp — barra superior das telas do funcionário. 2 server CalendarioMescalendario-mes.tsx Calendário com abas Semana/Mês — vem sempre na aba Semana com HOJE pré-selecionado (o mais usado no dia a dia); "Mês" mostra o grid inteiro com bolinhas de status. 1 client CestaCardcesta-card.tsx Card da cesta básica na home do funcionário. 1 server CLASSE_DOTcesta-card.tsx — 1 server DarCienciaButtondar-ciencia-button.tsx — 1 client FuncionarioNavfuncionario-nav.tsx Nav inferior do funcionário. Client (BottomNav recebe ícones lucide, que não atravessam RSC→CSR como prop, e usa usePathname). Recebe só o slug — o guard de sessão fica no layout server. Sem aba "C… 1 client HomeInstallBannerhome-install-banner.tsx Banner de instalação do PWA na Home. 1 client MetaBatidaCelebracaometa-batida-celebracao.tsx Celebração de META BATIDA na tela de sucesso do ponto (pedido do Victor em 29/07/2026: "tem que ser especial... 1 client PontoCadastroFormponto-cadastro-form.tsx Tela inteira de autocadastro do funcionário (não só o `<form>`) — precisa ser client component porque o CTA "Enviar cadastro" fica numa barra `shrink-0` fixa embaixo (nunca `position:fixed`: isso c… 1 client PontoLoginFormponto-login-form.tsx Tela inteira de login do funcionário (não só o `<form>`) — precisa ser client component porque o CTA "Entrar" fica numa barra `shrink-0` fixa embaixo (nunca `position:fixed`: isso cobria conteúdo s… 1 client PrimeiroAcessoFormprimeiro-acesso-form.tsx Tela inteira do 1º acesso (não só o `<form>`) — precisa ser client component porque o CTA "Criar senha e entrar" fica numa barra `shrink-0` fixa embaixo (nunca `position:fixed`: isso cobria conteúd… 1 client PushNotificationsCardpush-notifications-card.tsx Card de ativação de push notifications no Perfil. 1 client ROTULO_DOTcesta-card.tsx O que cada cor quer dizer — a legenda da trilha, escrita uma vez só. 1 server TrocarRecompensaButtontrocar-recompensa-button.tsx — 1 client components/demos11 exports · 9 sem JSDoc
Componente O que é Usos Camada DemoShelldemo-shell.tsx Shell do bloco de demo — FRAME TRAVADO (estático, altura fixa), com a IDENTIDADE do cliente: superfície clara pros apps enterprise, dark premium pro Amatch. 5 client AlemaoDemoalemao-demo.tsx — 2 client AlemaoMarkdemo-brands.tsx Marcas dos clientes pra o header de cada demo — wordmarks/símbolos com a identidade de cada um. 1 server AmatchDemoamatch-demo.tsx — 1 client AmatchMarkdemo-brands.tsx — 1 server KairosDemokairos-demo.tsx — 1 client KairosMarkdemo-brands.tsx — 1 server MosaicDemomosaic-demo.tsx — 1 client MosaicMarkdemo-brands.tsx — 1 server PecafacilDemopecafacil-demo.tsx — 1 client PecafacilMarkdemo-brands.tsx — 1 server components/apol-temple7 exports · 5 sem JSDoc · 1 órfão
Componente O que é Usos Camada ApolTempleapol-temple.tsx Faixa de meandro (grega) no rodapé. 1 client COLUNA_SVGgreek-art.tsx — 1 server GreekArtgreek-art.tsx Wrapper genérico: injeta a arte e deixa o `.greek-svg` dimensionar. 1 server LOURO_SVGgreek-art.tsx — 1 server SOL_SVGgreek-art.tsx — 1 server TEMPLO_SVGgreek-art.tsx — 1 server MEANDRO_SVGórfãogreek-art.tsx — 0 server components/intro6 exports · 2 sem JSDoc · 4 órfãos
Componente O que é Usos Camada INTRO_BY_IDintro-variants.tsx — 2 client INTRO_VARIANTSintro-variants.tsx — 1 client ArcoIntroórfãointro-variants.tsx Variações de animação de intro/loader da Apol. 0 client DrawOnIntroórfãointro-variants.tsx Variações de animação de intro/loader da Apol. 0 client IrisIntroórfãointro-variants.tsx Variações de animação de intro/loader da Apol. 0 client SunriseFillIntroórfãointro-variants.tsx Variações de animação de intro/loader da Apol. 0 client components/auto-atendimento5 exports · 2 sem JSDoc · 1 órfão
Componente O que é Usos Camada FormShellform-shell.tsx Wrapper visual padrão pras telas internas de Auto-atendimento. 7 server FieldStackform-shell.tsx — 5 server SubmitFeedbacksubmit-feedback.tsx — 4 client ServicoCardservico-card.tsx Card grande de serviço (na home do auto-atendimento). 1 server AutoAtendimentoWidgetórfãowidget-home.tsx Widget compacto pra home — mostra "X solicitações em andamento" ou convite pra resolver coisas no auto-atendimento. 0 server components/seo4 exports · 0 sem JSDoc
Componente O que é Usos Camada LdFaqdados-estruturados.tsx FAQ da página — só chame onde as perguntas estão realmente renderizadas. 3 server LdServicodados-estruturados.tsx Um serviço ofertado (usado nas LPs de nicho e na /marca). 2 server LdTrilhadados-estruturados.tsx Trilha de navegação — dá o caminho na SERP em vez da URL crua. 2 server LdOrganizacaodados-estruturados.tsx Identidade da empresa + busca do site. 1 server components/sistema4 exports · 4 sem JSDoc
Componente O que é Usos Camada SistemaCtasistema-sections.tsx — 1 client SistemaHerosistema-sections.tsx — 1 client SistemaModulossistema-sections.tsx — 1 client SistemaPersonalizadosistema-sections.tsx — 1 client components/apol-explainer3 exports · 3 sem JSDoc · 2 órfãos
Componente O que é Usos Camada SunCanvassun-canvas.tsx — 1 client ApolExplainerórfãoapol-explainer.tsx — 0 client SunSceneórfãosun-scene.tsx — 0 client components/gamificacao3 exports · 0 sem JSDoc · 1 órfão
Componente O que é Usos Camada BadgeCardbadge-card.tsx Card de badge — colorido quando conquistada, cinza+ícone de cadeado quando bloqueada. 1 client NivelCardnivel-card.tsx Card destaque com nível atual, progresso pro próximo, streak e posição no ranking. 1 server GamificacaoWidgetórfãowidget-home.tsx Widget compacto pra home do funcionário. 0 server components/caixa2 exports · 2 sem JSDoc
Componente O que é Usos Camada MetaProgressometa-progresso.tsx — 2 client ConfettiFestaconfetti-festa.tsx — 1 client components/cases2 exports · 0 sem JSDoc
Componente O que é Usos Camada CaseCardcase-card.tsx Card padrão (sóbrio) pra um case. 3 server CaseHighlightCardcase-card.tsx Variante grande pro case âncora (Alemão), com métricas e CTA. 1 server components/login2 exports · 2 sem JSDoc
Componente O que é Usos Camada AdminLoginFormadmin-login-form.tsx — 1 client FuncionalidadesSliderfuncionalidades-slider.tsx — 1 client components/brand1 export · 0 sem JSDoc
Componente O que é Usos Camada AppIconArtapp-icon-art.tsx Arte do ícone do app (PWA / favicon). 4 server components/diagnostico1 export · 1 sem JSDoc
Componente O que é Usos Camada DiagnosticoWizarddiagnostico-wizard.tsx — 1 client components/ficha1 export · 1 sem JSDoc
Componente O que é Usos Camada FichaClienteindex.tsx — 1 client components/precos1 export · 1 sem JSDoc
Componente O que é Usos Camada FormContatoPrecosform-contato.tsx — 1 client
Landings e LPs · 75 de 530 · 14 órfãos
Páginas de venda e variantes de teste. É a família com mais órfão por natureza: variante que perdeu o teste continua no disco.
components/landing-dark27 exports · 14 sem JSDoc
Componente O que é Usos Camada Revealmotion-primitives.tsx Reveal: fade + slide up quando entra no viewport. 34 client FooterDarkfooter-dark.tsx — 18 server ApolLogoapol-logo.tsx Logo "a·" da Apol — SVG inline. A letra `a` no `fill` que receber, e o círculo laranja sempre fixo na cor da marca. Use `fill="white"` em fundos escuros, `fill="#1B1B1B"` em fundos claros. 17 server NoiseOverlaybackground-fx.tsx Noise overlay — textura grão sutil. 15 client HeaderDarkheader-dark.tsx Header minimalista e sem borda. - No topo: só o logo, em destaque, sobre fundo transparente. - Ao rolar: um backdrop com blur surge *feathered* (sem linha dura) e a navegação + ações fazem fade-in.… 12 client FloatingCtafloating-cta.tsx Floating CTA — botão fixo bottom-right que aparece após sair do hero. 11 client Magneticmotion-primitives.tsx Magnetic button: o conteúdo é atraído pelo cursor dentro de um raio. 11 client CtaDarkcta-dark.tsx — 7 client Tiltmotion-primitives.tsx Tilt 3D que segue o cursor. Suave (spring), com perspective. `intensity` controla quantos graus rotaciona no máximo. 4 client ApolDotsFieldbackground-fx.tsx — 3 client CountUpmotion-primitives.tsx Count-up: número que conta do 0 até `to` quando entra no viewport. 3 client GradientMeshbackground-fx.tsx Efeitos de fundo da landing dark. 3 client StarFieldbackground-fx.tsx — 3 client SystemStacksystem-stack.tsx SystemStack — várias telas do sistema empilhadas em 3D pra mostrar a amplitude da Apol (dashboard, OS kanban, app funcionário). 3 client CasesPreviewDarkcases-preview-dark.tsx Prévia de cases na home. Por padrão (variante /v1) mostra os outros produtos além do Alemão; aceita props pra reusar na home de consultoria com um recorte e título próprios. 2 server ClientsTestimonialsDarkclients-testimonials-dark.tsx — 2 client ComparisonDarkcomparison-dark.tsx — 2 client FaqDarkfaq-dark.tsx — 2 client IntegrationsDarkintegrations-dark.tsx — 2 client ModulesDarkmodules-dark.tsx — 2 client PerspectiveGridbackground-fx.tsx Grid em perspectiva (estilo Vercel). 2 client StatsDarkstats-dark.tsx — 2 client ApolLogoRevealapol-logo-reveal.tsx — 1 client CaseDarkcase-dark.tsx — 1 client HeroDarkhero-dark.tsx Hero da landing dark. Full-bleed com: - Background: mesh amarelo Apol animado + grid em perspectiva - Type: display gigante com gradient + 2 acentos coloridos - Card 3D tilt em cima de gradient fra… 1 client HowItWorksDarkhow-it-works-dark.tsx — 1 client ManifestoDarkmanifesto-dark.tsx — 1 client components/landing-c14 exports · 8 sem JSDoc
Componente O que é Usos Camada ApoloCsections-c.tsx Seções da versão C — estrutura da B, mas 100% na paleta Apol, com a estátua de Apolo como personalidade e motion de zoom/acender. 1 client ClientesCsections-c.tsx — 1 client CtaCsections-c.tsx Seções da versão C — estrutura da B, mas 100% na paleta Apol, com a estátua de Apolo como personalidade e motion de zoom/acender. 1 client DepoimentosCsections-c.tsx — 1 client GridCsections-c.tsx — 1 client HeaderCheader-c.tsx — 1 client HeroCsections-c.tsx Seções da versão C — estrutura da B, mas 100% na paleta Apol, com a estátua de Apolo como personalidade e motion de zoom/acender. 1 client LightUpOnScrollmotion-c.tsx "Acender": o item entra apagado (cinza/escuro) e ganha cor + luz + escala conforme sobe na tela. 1 client ProblemaCsections-c.tsx — 1 client SistemaCsections-c.tsx — 1 client StatsCsections-c.tsx — 1 client SunDiscOnScrollmotion-c.tsx Disco-sol atrás da estátua: cresce e esquenta junto. 1 client WhiteLabelCwhite-label-c.tsx — 1 client ZoomOnScrollmotion-c.tsx Zoom conforme o elemento atravessa a viewport. 1 client components/landing-consultoria13 exports · 8 sem JSDoc · 7 órfãos
Componente O que é Usos Camada Bancadabancada.tsx — 1 client FrentesConsultoriafrentes-consultoria.tsx — 1 client HeroConsultoriahero-consultoria.tsx Hero da home — o texto à esquerda, o produto RODANDO à direita. 1 client Sparklessparkles.tsx — 1 client StatementConsultoriastatement-consultoria.tsx Seção de posicionamento com personalidade — frase grande, ambiciosa, com o "a·" gigante de marca-d'água. 1 server SystemHighlightConsultoriasystem-highlight-consultoria.tsx Destaque do sistema na home de consultoria. 1 client ApproachConsultoriaórfãoapproach-consultoria.tsx — 0 server AudienceConsultoriaórfãoaudience-consultoria.tsx — 0 server BannerConsultoriaórfãobanner-consultoria.tsx Banner visual editorial estilo SAP: foto grande + frase de posicionamento + widget de UI flutuante. 0 server LiveDemoConsultoriaórfãolive-demo-consultoria.tsx — 0 client MarqueeConsultoriaórfãomarquee-consultoria.tsx Faixa cinética com as frentes da Apol rolando — duas linhas em sentidos opostos, com o ponto da marca como separador. 0 client ProductTourConsultoriaórfãoproduct-tour-consultoria.tsx — 0 client ServicesConsultoriaórfãoservices-consultoria.tsx — 0 server components/landing-b9 exports · 7 sem JSDoc
Componente O que é Usos Camada ClientesBsections-b.tsx — 1 client CtaBsections-b.tsx Painel claro em moldura de browser — CSS puro, acentos dourados. 1 client DepoimentosBsections-b.tsx — 1 client GridBsections-b.tsx — 1 client HeaderBheader-b.tsx — 1 client HeroBsections-b.tsx Eyebrow com o disco-sol gradiente — o "·" da logo viajando pela página. 1 client ProblemaBsections-b.tsx — 1 client SistemaBsections-b.tsx — 1 client StatsBsections-b.tsx — 1 client components/landing7 exports · 2 sem JSDoc · 7 órfãos
Componente O que é Usos Camada CaseSectionórfãocase-section.tsx Seção de cases. Hoje destaca Alemão Auto Vidros (primeira cliente). Quando vierem outras, vira grid. 0 server CtaSectionórfãocta-section.tsx Bloco de CTA final — fim de página, antes do footer. 0 server FeatureGridórfãofeature-grid.tsx Grid de features — usado nas seções "O que você ganha" e "Para cada papel". 0 server Heroórfãohero.tsx Hero — Apol como produto único. A Apol é o sistema completo white-label. Operação, equipe, financeiro e fiscal vivem dentro do mesmo sistema, com o nome do cliente na cara. 0 server LandingFooterórfãolanding-shell.tsx — 0 server LandingHeaderórfãolanding-shell.tsx — 0 server ModulesGridórfãomodules-grid.tsx "O que tem dentro" — apresenta a Apol como sistema único, com frentes operacionais conectadas: operação, financeiro, fiscal e pessoas (com ponto eletrônico legal embutido). 0 server components/landing-enterprise3 exports · 2 sem JSDoc
Componente O que é Usos Camada HeroEnterprisehero-enterprise.tsx Variante B (enterprise) do hero. 1 client PlatformEnterpriseplatform-enterprise.tsx — 1 server SecurityEnterprisesecurity-enterprise.tsx — 1 server components/lp2 exports · 2 sem JSDoc
Componente O que é Usos Camada BrandLPViewbrand-lp.tsx — 1 server NicheLPViewniche-lp.tsx — 1 server
Sites públicos · 37 de 530 · 14 órfãos
O site do Alemão no ar e as versões de cliente que ficaram pelo caminho. Aqui vive a linguagem da marca — tokens, vidro, padrão gráfico.
components/site-alemao23 exports · 13 sem JSDoc · 1 órfão
Componente O que é Usos Camada JsonLdseo.tsx — 13 server SiteShellshell.tsx — 13 server BotaoWhatsAppui.tsx Recorte "adesivo": contorno branco grosso + sombra de destaque (a linguagem do emblema). 12 client Revealui.tsx Revela o bloco ao entrar na viewport. 12 client SeloOrigemui.tsx Recorte "adesivo": contorno branco grosso + sombra de destaque (a linguagem do emblema). 12 client LinkTelefoneui.tsx — 10 client IconeServicoui.tsx — 8 client LinkComoChegarui.tsx — 6 client Pilaresui.tsx — 5 client Emblemaemblema.tsx Emblema circular da marca — a arte oficial aprovada pelo cliente (public/brand/alemao-emblema-circular.png), renderizada como imagem. 3 server Marqueeui.tsx Revela o bloco ao entrar na viewport. 3 client SELO_STICKERui.tsx Recorte "adesivo": contorno branco grosso + sombra de destaque (a linguagem do emblema). 3 client Contadorui.tsx Revela o bloco ao entrar na viewport. 2 client TituloRotativoui.tsx Revela o bloco ao entrar na viewport. 2 client AlemaoHomehome.tsx — 1 server FormOrcamentoform-orcamento.tsx — 1 client Ga4ga.tsx — 1 client ParallaxYui.tsx Revela o bloco ao entrar na viewport. 1 client SegueMouseui.tsx Revela o bloco ao entrar na viewport. 1 client SiteFooterfooter.tsx — 1 server SiteHeaderheader.tsx — 1 client WhatsAppFlutuantewhatsapp-flutuante.tsx — 1 client GA4_IDórfãoga.tsx — 0 client components/site-cliente12 exports · 2 sem JSDoc · 11 órfãos
Componente O que é Usos Camada WhatsAppIconwhatsapp-icon.tsx Ícone oficial do WhatsApp (glifo de marca, não um ícone genérico de "balão de mensagem" como o `MessageCircle` do lucide-react que os CTAs usavam antes). 11 server AbToggleórfãoab-toggle.tsx Pílula flutuante pra alternar entre as versões do site público: A (glass claro) = pathname; B (azul seguro) = ?v=b; C (cartaz de oficina, Fable 5) = ?v=c. 0 client CtaFinalórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client Depoimentoórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client FooterClienteórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client HeroClienteórfãosections.tsx — 0 client Localizacaoórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client Marcasórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client NavClienteórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client Servicosórfãosections.tsx — 0 client SitePremiumórfãosite-premium.tsx Pilares — Qualidade · Agilidade · Confiança. 0 client Sobreórfãosections.tsx Hero principal — foto real de carro mostrando parabrisa. 0 client components/site-cliente-azul1 export · 0 sem JSDoc · 1 órfão
Componente O que é Usos Camada SiteSeguroAzulórfãoindex.tsx Escudo com check + brilho neon (motivo da identidade). 0 client components/site-cliente-vitrine1 export · 0 sem JSDoc · 1 órfão
Componente O que é Usos Camada SiteVitrineórfãoindex.tsx Reveal com fallback: nunca deixa conteúdo invisível se o observer falhar. 0 client
Base do DS · 32 de 530
components/ui, components/shared e components/theme. É a família que sustenta todas as outras — e, como a lista abaixo mostra, a menor de todas.
components/ui18 exports · 9 sem JSDoc
Componente O que é Usos Camada Buttonbutton.tsx — 128 server Cardcard.tsx Card — superfície de vidro padrão do design system. 122 server Inputinput.tsx Input — h-12, radius md (16px), border line, focus border-blue. 60 server Badgebadge.tsx — 59 server Labellabel.tsx — 29 client MaskedCurrencyInputmasked-currency-input.tsx Campo de valor estilo maquininha de cartão: cada dígito digitado empurra os centavos pra esquerda ("21015" → "210,15"). 10 client PasswordInputpassword-input.tsx Input de senha com olho pra mostrar/esconder — todo campo que lida com senha no sistema usa este componente (regra do usuário em 06/07/2026). 5 client Progressprogress.tsx Barra de progresso simples. Tom muda automaticamente quando o caller decide (ex.: ficha de documentos: vermelho < 60, azul 60-99, verde 100). 4 server Switchswitch.tsx Toggle on/off acessível (role="switch"). 4 client Skeletonskeleton.tsx Bloco pulsante genérico pra estados de carregamento — primeira peça do Design System consolidado (Alert/Empty/Skeleton/Table/Dialog). 3 server UppercaseInputuppercase-input.tsx Input que já sobe em maiúsculas enquanto digita (igual o autocapitalize do iPhone) — usado só no título de tarefas/demandas, por pedido do usuário (06/07/2026). 3 client Abasabas.tsx — 2 client AbasBotaoabas.tsx A mesma régua, para abas que NÃO navegam (trocam estado na própria tela). 2 client CardContentcard.tsx — 1 server CardDescriptioncard.tsx — 1 server CardFootercard.tsx — 1 server CardHeadercard.tsx — 1 server CardTitlecard.tsx — 1 server components/theme4 exports · 1 sem JSDoc
Componente O que é Usos Camada MotionProvidermotion-provider.tsx Honra prefers-reduced-motion em TODO framer-motion do app, do jeito SSR-safe: `reducedMotion="user"` desliga animações de transform/layout pra quem pediu menos movimento, mantendo fades de opacidad… 1 client SunriseIntrosunrise-intro.tsx — 1 client ThemeProvidertheme-provider.tsx Aplica data-theme no <html> e persiste em localStorage. 1 client ThemeToggletheme-toggle.tsx Botão de alternância dark ↔ light. 1 client
Dívida do sistema
O inventário não serve só pra listar: ele expõe o que está torto. Estes quatro números não foram escolhidos — eles caíram da varredura.
| O que o inventário revela | Tamanho | O que fazer |
|---|---|---|
| Componente sem JSDoc | 265 de 530 (50%) | Uma frase acima do export já vira documentação: a coluna "O que é" desta página se preenche sozinha. Regra prática: componente que você encostar, você documenta. |
| Órfão (zero importadores) | 49 (9%) | Cada um é uma decisão do PO: aposenta ou volta a usar. Órfão que fica sem decisão vira armadilha — alguém copia dele achando que é o padrão vigente. |
| Usado em um lugar só | 308 (58%) | Não é defeito: peça de tela é assim. Vira defeito quando duas telas resolvem a mesma coisa cada uma com a sua — é onde nasce primitiva duplicada. |
| Nome exportado por mais de um arquivo | 9 nomes · 19 exports | O sintoma mais barato de detectar e o mais caro de conviver: dá pra importar o errado sem erro de tipo. Ver a tabela abaixo. |
Homônimos
O mesmo nome saindo de arquivos diferentes. O import decide qual você levou, e o autocomplete não avisa. Onde há um lado com uso dominante, o outro lado é candidato a aposentar.
| Nome | Onde vive (por uso) |
|---|---|
| Campo |
|
| ApolMark |
|
| Badge |
|
| Card |
|
| EmptyState |
|
| LancarCaixaDialog |
|
| Reveal |
|
| SeletorPeriodo |
|
| VisaoTabela |
|
Primitivas paralelas em components/central
components/central/ui.tsx concentra 19 exports e carrega um jogo próprio de primitivas — Card, Badge, Btn, Pill, EmptyState, Modal, Drawer — com API divergente da base e paleta em hex fechada no objeto C (#08080C, #111119, #FF9900). O escuro noir com gold é deliberado e está declarado no cabeçalho do arquivo: ali é a voz da Apol dentro do admin do cliente, não a do Alemão. O que não é deliberado são os nomes.
| Nome | Em components/central/ui.tsx | Equivalente na base |
|---|---|---|
| ApolMark | 1 uso | components/shared/apol-mark.tsx · 4 usos |
| Badge | 5 usos | components/ui/badge.tsx · 59 usos |
| Card | 6 usos | components/ui/card.tsx · 122 usos |
| EmptyState | 3 usos | components/shared/empty-state.tsx · 12 usos |
O veredito está nos números, não na opinião. O Card de central tem 6 usos contra 122 do de components/ui — é candidato claro a aposentar. O caminho é renomear o jogo da central pra um prefixo próprio (a paleta noir continua; o nome colidindo, não) e migrar o que der pra base. Nenhum drop antes de o substituto estar validado.
Limites conhecidos da varredura
Um inventário gerado por heurística tem borda. Estas são as bordas medidas — ficam escritas aqui pra ninguém tratar o número como oráculo.
| Limite | Efeito medido |
|---|---|
| Constante conta como componente | O regex aceita todo export com inicial maiúscula, então 22 constantes em CAIXA ALTA (CANAIS, POST_COLS, TIPO_LABEL, FILTROS_VAZIOS…) entram nos 530. Inflação conhecida e medida: 4% do catálogo. |
| JSDoc pode ser atribuído ao vizinho | O gerador pega o bloco imediatamente acima do export. Em arquivo que empilha dezenas de exports — components/central/ui.tsx tem 19 — o bloco às vezes é do item anterior. É visível ali: Card e RoleAvatar exibem a mesma frase. |
| Uso é import estático | Só conta import ... from em components/ e app/. Import dinâmico, re-export e uso dentro do próprio arquivo não contam — logo, órfão quer dizer “ninguém importa por caminho estático”, não “código morto provado”. |
| Fronteira em components/ | Componente declarado dentro de uma rota em app/ não aparece aqui. Quantos são: a confirmar — o gerador ainda não varre app/ como alvo, só como consumidor. |
Fica de olho
O que mantém a marca inteira — e o que a quebra.
Sempre
- Regenerar com "node scripts/gerar-inventario-ds.mjs" no mesmo commit que cria ou apaga componente
- Consultar o inventário antes de criar peça nova — provavelmente ela já existe
- Escrever uma frase de JSDoc acima do export: é ela que aparece na coluna "O que é"
- Reaproveitar as primitivas da base (components/ui, components/shared)
- Levar órfão pro PO decidir: aposenta ou volta a usar
Nunca
- Editar lib/ds/inventario.generated.ts à mão — o próximo gerador apaga
- Digitar contagem de componente em qualquer texto do hub: número sai da constante
- Criar primitiva nova com nome que já existe em outro arquivo
- Copiar de componente órfão achando que é o padrão vigente
- Apagar órfão em massa sem export e sem OK — rollback vale mais que pasta limpa
Recursos
Use sempre os arquivos oficiais — nunca redesenhe.