🏗️ Arquitetura - ecosif-angular

📋 Visão Geral

ecosif-angular é uma Single Page Application (SPA) construída com Angular 14, seguindo princípios de arquitetura modular, lazy loading e separação de responsabilidades.

🎯 Princípios Arquiteturais

1. Modularidade

• ✅ Módulos feature-based - Cada funcionalidade em seu próprio módulo
• ✅ Lazy loading - Carregamento sob demanda de módulos grandes
• ✅ Shared modules - Componentes e serviços reutilizáveis

2. Separação de Responsabilidades

• ✅ Components - Lógica de apresentação e interação
• ✅ Services - Lógica de negócio e comunicação HTTP
• ✅ Guards - Proteção de rotas
• ✅ Interceptors - Manipulação de requisições HTTP
• ✅ Models - Estruturas de dados tipadas

3. Performance

• ✅ Lazy loading de módulos grandes
• ✅ Change detection otimizado
• ✅ OnPush strategy onde possível
• ✅ Tree shaking automático

🏛️ Arquitetura em Camadas

┌─────────────────────────────────────────────────────────┐
│              Camada de Apresentação                      │
│                                                          │
│  Components (Templates + TypeScript)                    │
│  • Pages (~87 componentes de páginas)                   │
│  • Shared Components                                    │
│  • Layout Components                                    │
│                                                          │
│  Responsabilidades:                                     │
│  • Renderização da UI                                   │
│  • Interação com usuário                                │
│  • Bindings (two-way, event, property)                  │
│  • Validação de formulários                             │
└────────────────────┬────────────────────────────────────┘
                     │
                     │ usa
                     ▼
┌─────────────────────────────────────────────────────────┐
│            Camada de Aplicação (Services)               │
│                                                          │
│  Services                                              │
│  • HTTP Services (41 serviços)                         │
│  • Core Services (config, error, idle)                 │
│  • Feature Services (compliance, etc.)                  │
│                                                          │
│  Responsabilidades:                                     │
│  • Comunicação HTTP com backends                        │
│  • Transformação de dados                               │
│  • Lógica de negócio                                    │
│  • Gerenciamento de estado                              │
└────────────────────┬────────────────────────────────────┘
                     │
                     │ usa
                     ▼
┌─────────────────────────────────────────────────────────┐
│          Camada de Infraestrutura                       │
│                                                          │
│  • HTTP Client (Angular HttpClient)                    │
│  • Router (Angular Router)                             │
│  • Guards (AuthGuard)                                  │
│  • Interceptors (AuthInterceptor)                      │
│  • Configuration (AppConfigService)                    │
│                                                          │
│  Responsabilidades:                                     │
│  • Comunicação com serviços externos                    │
│  • Roteamento                                           │
│  • Autenticação                                         │
│  • Configuração                                         │
└────────────────────┬────────────────────────────────────┘
                     │
                     │ HTTP/REST
                     ▼
┌─────────────────────────────────────────────────────────┐
│                 Backend Services (eCosif)               │
│  • ecosif-auth                                         │
│  • ecosif-masterdata                                   │
│  • ecosif-moviments                                    │
│  • ecosif-querys                                       │
│  • ecosif-reports                                      │
│  • ecosif-compliance                                   │
└─────────────────────────────────────────────────────────┘

📦 Estrutura de Módulos

AppModule (Root Module)

// app.module.ts
- Declarações principais
- Imports de bibliotecas
- Providers globais
- APP_INITIALIZER (config)

Arquivos: - app.module.ts - Módulo raiz - app-routing.module.ts - Rotas principais - app.component.ts - Componente raiz

Feature Modules (Lazy-Loaded)

DashboardModule

• Path: /dashboard
• Lazy: ✅ Sim
• Componentes: Dashboard principal

BaseModule

• Path: /base/*
• Lazy: ✅ Sim
• Componentes: Componentes base (tooltips, accordion, etc.)

NotificationsModule

• Path: /notifications/*
• Lazy: ✅ Sim
• Componentes: Notificações (toasts, alerts, modals)

ComplianceModule

• Path: /compliance/*
• Lazy: ✅ Sim
• Componentes: Compliance e regras

PagesModule

• Path: Incluído no AppModule
• Lazy: ⚠️ Parcialmente
• Componentes: Todas as páginas funcionais

🔧 Core Module (Singleton)

Configuração

// core/config/app-config.service.ts
- AppConfigService: Configuração runtime
- AppConfigInitializer: Carrega config antes do app iniciar

Serviços Core

// core/services/
- LoadingService: Indicador de carregamento
- ValidationErrorService: Tratamento de erros de validação
- ErrorHandlerService: Handler global de erros
- IdleTimeoutService: Timeout de inatividade

📡 Services HTTP

Estrutura de Services

src/app/service/
├── auth.service.ts              # Autenticação
├── company.service.ts           # Empresas
├── chartofaccount.service.ts    # Planos de contas
├── entries.service.ts           # Lançamentos
├── balanceinquiry.service.ts    # Consultas
├── relatorios.service.ts        # Relatórios
└── ... (41 services total)

Padrão de Service

@Injectable({ providedIn: 'root' })
export class ExampleService {
  private apiUrl = this.appConfig.apiMasterdata;

  constructor(
    private http: HttpClient,
    private appConfig: AppConfigService
  ) {}

  getItems(): Observable<Item[]> {
    return this.http.get<Item[]>(`${this.apiUrl}/items`);
  }
}

🔐 Sistema de Autenticação

Componentes

1. AuthService - Lógica de autenticação
2. TokenService - Gerenciamento de tokens
3. AuthGuard - Proteção de rotas
4. AuthInterceptor - Adiciona token nas requisições
5. MSAL (Azure AD) - Integração com Azure

Fluxo de Autenticação

Login → AuthService → Token Storage → AuthInterceptor → Backend

🎨 Sistema de UI

Framework: CoreUI 4.2

• Bootstrap 5.2 - Grid e utilitários
• CoreUI Components - Componentes prontos
• Angular Material - Componentes adicionais
• Font Awesome - Ícones
• Chart.js - Gráficos

Estrutura de Estilos

src/scss/
├── _variables.scss      # Variáveis SCSS
├── _layout.scss         # Layout geral
├── _custom.scss         # Customizações
└── styles.scss          # Estilos globais

🔄 Fluxos de Dados

Fluxo Principal

User Action
    ↓
Component
    ↓
Service (HTTP)
    ↓
Interceptor (adiciona token)
    ↓
Backend API
    ↓
Response
    ↓
Service (transforma dados)
    ↓
Component (atualiza UI)

Estado da Aplicação

• Services como state containers
• RxJS Observables para streams reativos
• BehaviorSubjects para estado compartilhado

📊 Performance

Otimizações Implementadas

1. Lazy Loading - Módulos carregados sob demanda
2. OnPush Change Detection - Redução de ciclos
3. TrackBy Functions - Otimização de *ngFor
4. Tree Shaking - Remoção de código não usado
5. AOT Compilation - Compilação antecipada

Última Atualização: 2025-12-01