C4 — CentralCRM Front

Diagramas em texto (C4). Renderize em qualquer viewer Mermaid.

Nível 1 — Contexto

C4Context
    title CentralCRM — contexto
    Person(op, "Operador CRM", "Governa White Labels, usuários, taxas e tema")
    System(front, "CentralCRM Front", "SPA React / Vite")
    System_Ext(central, "API Central", "Auth, companies v1, presence, portal")
    System_Ext(def, "API Default", "Governança, global-*, tenants, logs")
    System_Ext(abecs, "ABECS MCC", "Tabelas CNAE/MCC QA e PRD")
    Rel(op, front, "Usa", "HTTPS")
    Rel(front, central, "REST + Socket.IO /presence")
    Rel(front, def, "REST + Socket.IO /ws/logs")
    Rel(front, abecs, "REST via proxy de dev")

Nível 2 — Containers (este repo)

C4Container
    title Front — containers lógicos
    Person(op, "Operador")
    Container(spa, "SPA", "React 19", "Views, governança, i18n, tema")
    Container(nginx, "Nginx", "imagem Docker", "Serve dist/, fallback SPA")
    Container_Ext(central, "API Central")
    Container_Ext(def, "API Default")
    Rel(op, nginx, "HTTPS :80/:443")
    Rel(nginx, spa, "index.html + assets")
    Rel(spa, central, "fetch Bearer")
    Rel(spa, def, "fetch Bearer")

Em desenvolvimento não há Nginx: Vite serve a SPA e faz proxy de /api e /socket.io.

Nível 3 — Componentes (SPA)

App.tsx
 ├── rotas públicas (Login, Forgot, Reset, FirstAccess)
 └── ProtectedRoute
      └── DashboardLayout (sidebar + topbar)
           ├── painel/
           ├── directories/ (governança)
           ├── views/SystemsView + integrationApiDocs/
           ├── Users / Roles / Profits / Invoices / Technical / Settings / Help / Profile
           └── PresenceContext (socket)

HTTP sai só de models/services/*. Sessão: auth/ + sessionVault. Tenant: api/tenantContext.ts.