Arquitetura de TI · IBGC

Documentação interativa da arquitetura de TI da empresa. A interface aplica a lógica de níveis de abstração: a tela inicial mostra apenas os grandes sistemas (visão de contexto, para a diretoria) e ao clicar em qualquer bloco a "câmera" entra no sistema e revela a infraestrutura interna (bancos, APIs, filas, automações).

Stack

• Next.js 14 (App Router) + TypeScript
• @xyflow/react (React Flow v12) — canvas de nós/arestas
• framer-motion — transição entre níveis
• Tailwind CSS — estilo 3D / profundidade
• lucide-react — ícones

Como rodar

npm install
Copy-Item .env.local.example .env.local   # se for usar os web services
npm run dev

Abra http://localhost:3000.

Navegação como sistema de arquivos

A interface usa rotas reais — cada nível do diagrama é uma URL:

/                                       Home (visão geral, leve)
/dynamics                               Ambiente Dynamics 365
/dynamics/power-platform                Componentes Power Platform
/dynamics/power-platform/power-automate Categorias de fluxos
/portal-web                             Stack do canal digital
/ead                                    LMS interno
/erp                                    ERP financeiro
/identidade                             SSO/Azure AD
/dados                                  Plataforma de dados
/webservices                            ASMX legado (14 ops)
/infra                                  Infraestrutura Azure

Clique num bloco com seta → e a URL avança. O breadcrumb no topo mostra a trilha e permite voltar a qualquer nível com um clique.

Estrutura de pastas

app/
  page.tsx                       rota / (home)
  [...slug]/page.tsx             rota catch-all para qualquer profundidade
  layout.tsx
  globals.css
  api/webservice/usuario/
    [operation]/route.ts         proxy JSON ↔ SOAP do Usuariowebservice.asmx
components/
  ArchitectureShell.tsx          wrapper: header + breadcrumb + canvas
  ArchitectureFlow.tsx           canvas React Flow + navegação por router
  nodes/
    SystemNode.tsx               nó grande (alto nível)
    ComponentNode.tsx            nó compacto (componente técnico)
  ui/
    Breadcrumb.tsx               trilha clicável (Home / X / Y)
lib/
  architecture.json              ← ÚNICA FONTE EDITÁVEL (formato `views`)
  architecture.ts                loader + resolveChildPath + pathSegments
  types.ts
  webservices/
    config.ts · soap.ts · usuario.ts · README.md
scripts/
  inspect-wsdl.mjs               descobre operações de um .asmx via WSDL
  analyze-flows.mjs              categoriza flows_cache.json
docs/
  power-platform.md              inventário do ambiente Dynamics

Editando a arquitetura — só mexa no JSON

Toda a estrutura vem de lib/architecture.json. O formato é um mapa de views indexadas por path:

Adicionar um sistema na home

Em views[""].nodes:

{
  "id" 
     
   
   
   
   

• category controla a cor: , , , , , .

Adicionar um sub-nível (drill-down)

Dentro de qualquer view, ponha hasDetail: true no nó e crie a view filha com path pai/id. Exemplo, para criar /intranet/feed:

Drill-down a partir de um componente técnico

Componentes (ComponentNode, com kind em vez de category) também podem abrir uma sub-view — basta dar hasDetail: true no nó e declarar em drillIns o segmento filho:

Clicar em pp-automate leva a /dynamics/power-platform/power-automate.

Tipos válidos

Integração com web services ASMX

O sistema Web Services Legados já aparece no diagrama. A camada de código que consome esses serviços está em lib/webservices/ — veja o README de lá para:

• Descobrir as operações reais via npm run inspect-wsdl (executar na sua máquina, que tem acesso ao endpoint corporativo).
• Configurar namespace e URL em .env.local.
• Chamar do front-end via fetch("/api/webservice/usuario/Login", ...).

Dynamics 365 / Power Platform

O bloco Dynamics 365 / Power Platform representa o ambiente onde ≈80% da operação roda. A vista detalhada mostra:

• Plataforma: Tenant → Environment → Dataverse + Connectors, com Dynamics CE, Power Apps, Power Automate, Power BI.
• Power Automate Monitor: ferramenta interna em Node/Socket.IO que varre runs em tempo real (vive em ~/Área de Trabalho/power-automate-monitor, ver o README dela).
• Categorias de fluxos: agregação por prefixo (CXP, ACA, CER, Mensagerias, Processo de Associação, etc.) — total de 7863 fluxos, 883 ativos.

Documentação consolidada do ambiente: docs/power-platform.md.

Para regenerar as métricas a partir do flows_cache.json:

npm run analyze-flows

Próximos passos sugeridos

• Mapear as operações reais do Usuariowebservice.asmx em lib/webservices/usuario.ts (após rodar npm run inspect-wsdl).