Mapa de Protótipos Navegáveis
Demos executáveis das surfaces ZapNotei. Auth, onboarding, form, painel, chat, ops e mais — todos interativos, conectados, animados. Pré-F1.0 são protótipos HTML+JS; F1.0+ vira React.
🛠 DS tools · review & audit
_validation
DS validation · smoke test visual
Renderiza TODOS patterns canônicos lado-a-lado: auth cards, OTP × 5 estados, wizard stepper × 4 progresses, buttons, fields, state cards, banners, feedback, icon circles. Drift entre surfaces salta visualmente.
_GOTCHAS
Gotchas catalog (17 entries)
Layout/spacing/typography/state/color/animation/a11y/cross-surface/build gotchas. Sintoma + causa + fix canônico + audit hook + caso real.
_AUDIT-LATEST
Audit prototypes (último run)
Resultado bloqueante de
audit-prototypes.sh. 9 checks canônicos: hex literal, max-width, dual-img, imports DS, slug, marca placeholder, lucide, logo src, shell+primitives.01-auth · Autenticação (sem senha)
01.1-auth-login
Login (magic link)
Email + Auth.js sem senha. 6 estados: default, magic-sent, error, loading, rate-limit, OAuth (F2+).
01.2-auth-otp-verify
Verificação OTP (email)
6 dígitos via Upstash TTL 5min. 7 estados: default, typing, loading, error, expired, lockout, success.
01.3-auth-totp-2fa
TOTP 2FA (app authenticator)
RFC 6238 via otplib. Verify (4 estados) + Setup wizard 4-step + recovery codes.
02-onboarding · Cadastro empresa + A1
02.1-onboarding-administrador
Administrador · early lead capture
Step ZERO (ADR-0021) — captura nome + WhatsApp + consent_marketing antes de pedir CNPJ. Lead em `leads` canal='onboarding' pra resgate via cron. 4 estados: default, preenchido, loading, erro.
02.2-onboarding-empresa-cnpj-cep
Empresa · CNPJ + CEP + IE/IM + RPS
Single-page 3 sections com auto-enrichment BrasilAPI/ViaCEP. Defaults inteligentes (regime via CNAE, IM via CEP). 5 estados: default, loading, enriched, inválido, inativo.
02.3-onboarding-a1-upload
Certificado A1 · upload + KMS
Drag-drop PFX + senha + validação progressiva 4 steps + envelope encryption KMS. 6 estados: default, file-selected, validating, validated ✓, erro senha, A1 vencido.
02.4-onboarding-confirmacao
Confirmar · review + criar empresa
3 review cards (empresa/fiscal/A1) com edit jumps + creating overlay rotativo + success celebrate. Conversão lead → account no submit. 4 estados: review, creating, success, erro Focus.
03-form · Form emissão NF
03.1-form-emissao-nfse
Form NFS-e · single-page 4 sections
Header app + switcher CNPJ + 4 section cards accordion (Tomador/Serviço/Valores/Anexo). Cliente lookup typeahead + LC 116 IA suggestions + cálculo ISS auto + auto-save 1.5s + sticky CTA. 5 estados: vazio, preenchido, emitindo Focus, NF emitida ✓, rejeitada Sefaz.
03.2-form-emissao-nfe
Form NF-e multi-step
Cliente + produtos + NCM + valores.
03.3-form-recovery-camada1
Recovery camada 1 (known errors)
Inline error mapping conhecido.
03.4-form-recovery-camada2
Recovery camada 2 (schema regex)
Regex-based field repair.
03.5-form-recovery-camada3-llm
Recovery camada 3 (LLM)
Sugestão LLM validada local.
04-painel · Listagem + Detalhe NF
04.1-listagem-populated
Listagem populated single-CNPJ
Tabela + Ably real-time push.
04.1-listagem-empty
Listagem empty (primeiro acesso)
Empty state + CTA emit primeira NF.
04.1-listagem-loading
Listagem loading skeletons
Drizzle query rolando.
04.1-listagem-aggregate
Listagem aggregate (≥2 CNPJs)
Coluna Empresa visível (ADR-0020).
04.2-detalhe-nf
Detalhe NF (drill-down)
Cancel + baixar + reenviar.
04.3-aggregate-emit-modal
Modal escolher CNPJ pré-emit
ADR-0020 obrigatório em aggregate.
05-chat · Chat conversacional
05.1-chat-onboarding
Onboarding empresa via chat
Bot conduz S0..S10 conversacionalmente (alternativa wizard 02.x). Cross-channel sync ADR-0022 — bot lê
onboarding_progress. ~7 estados: welcome/CNPJ/enrichment/A1/sucesso.05.2-chat-emissao-nfse
Emissão NFS-e via chat
MockFiscalEmitter F1.1 chaos → Focus real F1.2a. Bubbles intercaladas + preview-card antes confirmar. LC 116 IA suggestions inline. ADRs 0011/0013/0019.
05.3-chat-emissao-nfe
Emissão NF-e via chat
Variant 05.2 pra NF-e (produtos + NCM em vez serviço + LC 116). Loop "mais um item?". Defesa profundidade NCM (validar local antes Focus). ADR-0010.
05.4-chat-recovery
Error recovery conversacional 3 camadas
Pipeline known errors → schema regex → LLM + validação local. Bubble error-card + suggestion-pills 1-click apply. Persiste em
error_recovery_attempts CHECK ≤3. ADR-0011.05.5-chat-multimodal-input
Input multimodal (texto/áudio/foto/PDF)
Bottom action sheet 4 tabs + record overlay waveform + preview thumbs. Gemini Flash extrai dados estruturados. R2 storage + LLMProvider port.
06-clientes · CRM clientes (PJ + PF)
06.1-clientes-listagem
Listagem + busca + apelido
Search bar + filter pills (Todos/PJ/PF) + table (Nome/Apelido/Doc/Última NF/Total emitido) + row actions. Aggregate column "Empresa" se ≥2 CNPJs (ADR-0020). 6 estados: populated/empty/no-results/loading/error/paginated.
06.2-clientes-detalhe
Detalhe + histórico NFs emitidas
Drawer right-slide desktop / full-page mobile + tabs (Dados/Histórico/Endereço) + edit inline + LGPD anonymize (preserva snapshot fiscal em
invoices.payload). ADR-0013.06.3-clientes-cadastro-manual
Cadastro manual first-class
Form standalone (não inline emissão). PJ/PF + doc + razão + apelido + endereço. Auto-fill BrasilAPI quando PJ. 5 estados: vazio/enrichment/enriched/erro/saving. ADR-0013.
07-admin · Multi-user + multi-CNPJ + roles + billing
07.1-admin-empresas
Listagem CNPJs do account
Add CNPJ CTA + per-row status A1 (OK/expirando/expirado), NFs do mês, funcionários acesso. Tier limit reached state. Card-grid OR table. ADR-0020 + ADR-0006 (CNPJ transferência).
07.2-admin-switcher-cnpj-aberto
Dropdown switcher CNPJ ≥2 + aggregate
Popover anchor=app-switcher + scroll list + opção "Todas as empresas" gated ≥2 CNPJs (ADR-0020) + footer add. Search filter ≥10 CNPJs.
07.3-admin-notificacoes
Centro de notificações
Popover bell anchor (top 5) OU page
/notificacoes full list + filter (todas/não-lidas) + mark-all-read + click → deep link. Alerts: A1 expirando, NF rejeitada, billing past_due, novo funcionário.07.4-admin-funcionarios
Convidar funcionário + per-CNPJ access
Magic link convite + role admin/funcionario + per-CNPJ checkbox grid (binário
company_user_access). Listagem com revoke. ADR-0006 memberships.07.5-admin-a1-rotate
Rotação A1 admin (variant 02.3)
Reuso dropzone + validation-card + KMS box. Sem stepper (já onboarded). History de A1s anteriores arquivados. KMS day-0 + runbook a1-expiration.md.
07.6-admin-billing-plan
Plano + checkout Efí
Current plan card + tier comparison grid (Free/Starter/Pro/Business) + add-ons (extra CNPJs/users/NFs) + cancellation flow. 8 estados (active/trial/past_due/changing/processing/failed/cancellation/cancelled).
07.7-admin-billing-payment-methods
Cards / PIX / boleto
Listagem payment methods + add new modal + set default + remove. Efí F3 + Asaas fallback F3.5+. Invoice history download list.
07.8-admin-billing-failed-banner
Banner past_due cross-app
Banner danger global topo todas surfaces app. CTA "Atualizar pagamento" → 07.7. Bloqueia emit após N dias inadimplência. Estados: warn/danger/blocked.
08-configuracoes · Settings + perfil + plano
08.1-configuracoes-perfil
Perfil user + email + 2FA
Section cards (Perfil pessoal / Email + verificação / Segurança 2FA TOTP / Timezone) + autosave por section + danger zone (excluir conta LGPD). Auth.js v5 sem senha + otplib. ADR-0022 autosave reuse.
08.2-configuracoes-user-dropdown
Popover avatar header
Anchor=avatar top-right + header (avatar grande + nome + email) + nav items (Perfil/Plano/Notificações/Tema/Sair) + theme toggle 3-state (light/dark/system) + footer version.
08.3-configuracoes-mais-drawer
Drawer mobile "Mais"
Bottom sheet mobile-only (desktop usa sidebar). Grid 2 cols ícones agrupando settings que não cabem na bottom-nav (5 itens max). Handle drag-down close.
08.4-configuracoes-plano
Plano + checkout Efí (mirror 07.6)
Current plan card + upgrade tiers grid + add-ons + payment methods inline + invoice history. Mesmo schema 07.6 visto pelo lado do user (não admin). Trial expiring banner.
08.5-configuracoes-certificado-A1
Gerenciar A1 + alerta expiração
Current cert card (CN + validade + emissor + thumbprint + dias restantes badge) + rotate CTA → modal full reuso 02.3 dropzone + history. Estados: válido/expirando ≤30d/≤7d/expirado/rotating/rotated.
09-ops · Painel operacional ⚪ (acesso direto)
09.1-ops-dashboard
Dashboard ops (MRR + alertas)
Cross-account metrics.
09.2-ops-empresas
Gestão CNPJs cross-account
Suporte cross-tenant.
09.8-ops-empresa-avancado
Toggle ambiente ops-only (ADR-0019)
Default produção, switch ops.
09.9-ops-impersonate
Impersonate user (audit trail)
Suporte assistido com banner permanente.
10-marketing · 11-blog
10.x · marketing
LP + Demo público + Pricing
ADR-0017/0018.
11.x · blog
Blog público + admin Payload
ADR-0014.
Legenda
Não-iniciado
Em iteração
Aprovado
⚪ Acesso direto (sem nav user)
App app-prototype.zapnotei.site
Ops ops-prototype.zapnotei.site