Conn2Flow
Navegação das docs

SDD

req-237 — Master Operacional Multi-Repositório: Higiene de Merge, Assets Isométricos Faltantes, Refinamentos Finos do Dashboard V3.2 e Conclusão da REQ-100

Esta requisição unificada estabelece uma esteira contínua de três etapas sequenciais e determinísticas para fechar a transição Tailwind e consolidar a experiência visual e…

  • Status: ready-for-implementation

  • Modo de Autonomia: autonomo_monitorado

  • Lote Alvo Core: BATCH-246 (conn2flow)

  • Lote Alvo Site: BATCH-094 / BATCH-097 (conn2flow-site)

  • Data de Criação: 2026-10-05

  • Papel: Agente Sênior de Execução & Integração Full-Stack (Opera em ambos os repositórios)

  • Repositório 1 (Core): conn2flow em [REDACTED]

  • Repositório 2 (Site): conn2flow-site em [REDACTED]


1. Visão Geral & Objetivos da Missão

Esta requisição unificada estabelece uma esteira contínua de três etapas sequenciais e determinísticas para fechar a transição Tailwind e consolidar a experiência visual e operacional do ecossistema Conn2Flow:

  1. Etapa 1 — Higiene de Merge, Commit & Push da Base (CONCLUÍDO PELO ARQUITETO MASTER):

    • Os commits pendentes de ambos os repositórios foram consolidados e enviados para origin/main no GitHub.

    • Core main atualizada até a26dfce8 (incorporando as 3 frentes Tailwind, Dashboard V3.1 e intake req-237).

    • Site main atualizada até 2deacc38 (incorporando a REQ-101 e módulos privados de operação, social e catálogo 3D).

    • O Agente Executor inicia diretamente na Etapa 2.

  2. Etapa 2 — Criação dos Assets Isométricos Faltantes & Refinamentos UX/UI do Dashboard V3.2 (Core & Site):

    • Gerar os 25 assets visuais faltantes dos módulos (Core e Site) no formato WebP 1024×1024 px isométrico 3D (< 100 KB), integrando-os aos respectivos manifestos.

    • No Dashboard do Core: aumentar a altura das capas dos módulos em +20% (M: 13.2rem / ~210px; G: 17.5rem / ~280px) com enquadramento que preserve a base da ilustração.

    • No Dashboard do Core: tornar a área da capa e do ícone totalmente clicável como atalho direto/alias do botão "Acessar" (<a href="#modulo-link#" ...>), com efeito de hover scale-105, preservando o isolamento da alça de arrasto (.dashboard-card-drag-handle).

  3. Etapa 3 — Conclusão da REQ-100 (E-commerce e Assinaturas no Painel em Tailwind — Site):

    • Finalizar a migração para layout-administrativo-tailwind de todos os módulos de e-commerce e assinaturas pendentes (affiliates, coupons, orders, product-types, products, products-index, gateways-pagamentos, stripe-products, subscriptions, subscriptions-config, subscriptions-plans, subscriptions-service-stages, subscriptions-service-types, subscriptions-status).

    • Garantir 0 scripts/estilos Fomantic no painel administrativo, compatibilidade responsiva a 390px sem scroll horizontal e aprovação nos testes (npm test).

    • Sincronização final no Lab e evidências consolidadas.


2. Especificação Técnica & Critérios de Aceite

BLOCO 1: Higiene de Merge & Consolidação da Base (conn2flow-site)

  • CA-1.1 (Stash e Limpeza de Artefatos):

    • No repositório conn2flow-site ([REDACTED]), salvar alterações de trabalho rastreadas via git stash push -m "wip-req100-autoria-previa".

    • Remover com segurança os arquivos não rastreados que bloqueiam o merge via git clean -fd gestor/modulos/ gestor/resources/.

  • CA-1.2 (Fast-Forward da Branch feat/req-101):

    • Executar git merge feat/req-101 --ff-only na branch main.

    • Confirmar que a main avança para o commit 2deacc38.

  • CA-1.3 (Pipeline de Validação da Base):

    • A partir do Core (conn2flow), rodar:

      php cli/c2f.php project:update-all [REDACTED] --confirmar-remoto
    • Assegurar saída com código 0 e sem falhas de compilação CSS.


BLOCO 2: Assets Visuais Faltantes & Refinamentos UX/UI do Dashboard V3.2

CA-2.1: Criação dos Assets Isométricos Faltantes (WebP 1024×1024)

  • Padrão Técnico Obrigatório:

    • Dimensões: 1024 × 1024 pixels.

    • Formato: WebP com compressão lossy otimizada (tamanho máximo: 100 KB por arquivo).

    • Linguagem Visual: Renderização isométrica 3D, perspectiva consistente a ~30°, iluminação limpa com sombras suaves, paleta corporativa moderna (azuis, esmeralda, violeta, ardósia).

  • Módulos do Core a Criar (Salvar em gestor/assets/modulos/covers/<modulo-id>.webp do conn2flow e atualizar manifest.json):

    1. admin-atualizacoes.webp — Atualizações de sistema, nuvem e sincronização.

    2. admin-categorias.webp — Taxonomia, árvore de categorias e etiquetas.

    3. admin-environment.webp — Servidor, ambiente, variáveis e engrenagens.

    4. admin-layouts.webp — Wireframes, estrutura de layouts e blocos de página.

    5. admin-modos-ia.webp — Redes neurais, nós de IA e modelos preditivos.

    6. admin-plugins.webp — Conectores modulares, peças de extensão e plugins.

    7. contatos.webp — Caixa de correio, envelope 3D e mensagens recebidas.

    8. cookie-consent.webp — Escudo de privacidade, cookie digital e segurança LGPD.

    9. forms-search.webp — Lupa de busca sobre registros de formulários.

    10. modulos.webp — Bloco de módulos e catálogo de aplicações.

    11. modulos-grupos.webp — Pastas agrupadoras de módulos e permissões.

    12. variables.webp — Chaves de variáveis, dicionário de dados {x}.

  • Módulos do Site a Criar (Salvar em gestor/assets/modulos/covers/<modulo-id>.webp do conn2flow-site e atualizar manifest.json):

    1. 3d-catalog-groups.webp — Agrupamentos e coleções de modelos 3D.

    2. analytics-manager.webp — Gráficos 3D, barras de crescimento e analytics.

    3. arquivos.webp — Disco de armazenamento, pastas e acervo de mídias.

    4. host-user-manager.webp — Perfis de clientes de hospedagem e chaves de acesso.

    5. my-orders.webp — Sacola de compras, recibo e histórico de pedidos.

    6. product-types.webp — Variantes de produto, atributos e matriz de tipos.

    7. sales-reports.webp — Dashboard financeiro, faturamento e relatórios.

    8. store.webp — Vitrine de loja, prateleira digital e comércio eletrônico.

    9. stripe-products.webp — Integração Stripe, cartões de pagamento e planos.

    10. subscriptions-config.webp — Engrenagens de ciclo de faturamento e assinaturas.

    11. subscriptions-service-stages.webp — Funil e etapas de prestação de serviços.

    12. subscriptions-service-types.webp — Tipos de planos e modalidades de serviço.

    13. subscriptions-status.webp — Selos de status ativo/inadimplente/cancelado.

    14. user-subscription.webp — Cartão de membro VIP e gestão da assinatura.

CA-2.2: Refinamento da Altura das Capas (+20% Adicional)

  • No Core (conn2flow/gestor/modulos/dashboard/resources/pt-br/components/dashboard-cards-tailwind/dashboard-cards-tailwind.css e versão en):

    • Densidade M (Padrão): Aumentar de 11rem para 13.2rem (~210px).

    • Densidade G (Operacional): Aumentar de 14.5rem para 17.5rem (~280px).

    • Preservar densidade P (compacto) em 2.25rem em linha.

    • Ajustar o enquadramento: object-fit: cover !important; object-position: center bottom !important; para que a parte inferior da arte isométrica não seja cortada pelo rodapé do cabeçalho.

CA-2.3: Capa e Ícone Clicáveis como Alias do Botão Acessar

  • No HTML do componente (dashboard-cards-tailwind.html em pt-br e en):

    • Envolver os containers da capa (dashboard-card-cover-wrapper) e do ícone SVG (dashboard-card-svg) dentro de um elemento âncora:

      <a href="#modulo-link#" class="dashboard-card-header-link absolute inset-0 z-10 block cursor-pointer transition-transform duration-300 group-hover:scale-105" aria-label="@[[cards-btn-acessar]]@ #modulo-nome#">
      <div class="dashboard-card-cover-wrapper rounded-t-xl" style="position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important;">
          #modulo-imagem-tag#
      </div>
      <!-- svg < -->
      <div class="dashboard-card-svg text-slate-700" style="position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #334155 !important;">
          #modulo-svg#
      </div>
      <!-- svg > -->
      </a>
    • Isolamento da Alça de Arrasto:

    • Garantir que a alça .dashboard-card-drag-handle permaneça fora da tag <a> ou com z-index: 20 e event.stopPropagation() para que o arrasto/reordenação com SortableJS não dispare navegação indevida.


BLOCO 3: Conclusão da REQ-100 (E-commerce e Assinaturas no Painel em Tailwind)

  • Repositório: conn2flow-site (BATCH-094).

  • CA-3.1 (Migração Completa dos Módulos):

    1. Listagens pendentes: affiliates, coupons, orders, product-types, products.

    2. Módulos completos: products-index, gateways-pagamentos, stripe-products, subscriptions (páginas administrativas), subscriptions-config, subscriptions-plans, subscriptions-service-stages, subscriptions-service-types, subscriptions-status.

  • CA-3.2 (Padrões de Governança & Segurança):

    • Adotar layout-administrativo-tailwind e controles c2fc.

    • Eliminar qualquer script/estilo Fomantic no painel administrativo desses módulos.

    • Segurança em Gateways: nunca expor chaves/segredos sensíveis no DOM.

    • Suporte responsivo em 390px sem estouro de layout.

  • CA-3.3 (Testes & Validação):

    • Executar npm test no conn2flow-site garantindo passagem sem regressões.

    • Executar suíte PHPUnit nos módulos modificados.

    • Rodar o pipeline ./c2f project:update-all [REDACTED] --confirmar-remoto.


3. Live Todo List da Missão

Etapa 1 — Higiene de Merge no Site (conn2flow-site) [CONCLUÍDO]:

  • [x] Guardar em stash o trabalho prévio não commitado (wip-req100).

  • [x] Limpar artefatos não rastreados que impediam merge.

  • [x] Mesclar feat/req-101 com --ff-only na branch main (commit 2deacc38).

  • [x] Consolidar Core main (commit a26dfce8) e Site main (2deacc38) e realizar git push origin main em ambos os repositórios (executado pelo Arquiteto Master).

Etapa 2 — Assets Faltantes & UX/UI do Dashboard (Core & Site):

  • [ ] Gerar/incorporar as 12 capas WebP isométricas faltantes do Core (gestor/assets/modulos/covers/).

  • [ ] Atualizar manifest.json de covers do Core.

  • [ ] Gerar/incorporar as 14 capas WebP isométricas faltantes do Site (gestor/assets/modulos/covers/).

  • [ ] Atualizar manifest.json de covers do Site.

  • [ ] Dashboard Core: Aumentar altura das capas em +20% (M: 13.2rem; G: 17.5rem) em pt-br e en.

  • [ ] Dashboard Core: Tornar a capa/ícone um link navegável clicável (<a href="#modulo-link#">) com hover scale-105.

  • [ ] Dashboard Core: Blindar a alça de arrasto para não disparar navegação ao arrastar.

  • [ ] Rodar testes Vitest e PHPUnit no Core (npm.cmd test, vendor/bin/phpunit).

Etapa 3 — Conclusão da REQ-100 no Site (conn2flow-site):

  • [ ] Recuperar autoria do stash ou aplicar na branch de implementação feat/req-100.

  • [ ] Migrar listagens de e-commerce (affiliates, coupons, orders, product-types, products).

  • [ ] Migrar módulos de assinaturas, gateways e produtos Stripe para Tailwind.

  • [ ] Executar testes do site (npm test e PHPUnit).

  • [ ] Executar ./c2f project:update-all [REDACTED] --confirmar-remoto.

  • [ ] Registrar evidências e relatórios em BATCH-246.md (Core) e BATCH-094.md (Site).

O Futuro é Híbrido: Humano + IA.

O Conn2Flow é a ferramenta. Se você precisa do Arquiteto para desenhar a estratégia da sua empresa usando essa tecnologia...

Contrate Consultoria Especializada