# Portal Admin

Visao geral do portal administrativo Monetarie PIX, incluindo navegacao, dashboard, e funcionalidades principais.

## Pre-requisitos

- Portal admin implantado e acessivel (ex: `https://pixadmin-dev.fluxiq.com.br`)
- Credenciais de acesso (usuario `admin` / senha `Admin@2026!`)
- Navegador moderno com JavaScript habilitado
- Conexao WebSocket para monitoramento em tempo real

## Visao Geral

O portal administrativo Monetarie PIX oferece uma interface completa para gerenciar todos os aspectos da operacao PIX:

| Metrica | Valor |
|---------|-------|
| Rotas | 82 |
| Views | 86 |
| Stores (Pinia) | 17 |
| Services | 27 |
| Componentes | 12 |
| Locales (i18n) | 5 (PT-BR, EN-US, ES-ES, ZH-HK, FR) |

### Stack Tecnologica

| Tecnologia | Versao | Proposito |
|-----------|--------|-----------|
| Vue 3 | 3.5.x | Framework frontend |
| Pinia | Latest | Gerenciamento de estado |
| TypeScript | Latest | Tipagem estatica |
| Tailwind CSS | 4.x | Estilizacao |
| Chart.js | Latest | Graficos e visualizacoes |
| Phoenix (JS) | 1.8.3 | Cliente WebSocket |
| vue-i18n | 11.x | Internacionalizacao |

## Fluxo de Login

O portal admin utiliza autenticacao robusta com RSA-OAEP e cookies HttpOnly:

```mermaid
sequenceDiagram
    participant U as Usuario
    participant F as Frontend
    participant A as API (Settlement:4003)
    participant R as Redis

    U->>F: Acessar portal
    F->>A: GET /api/v1/auth/public-key
    A-->>F: RSA 2048-bit public key

    U->>F: Inserir credenciais
    F->>F: Criptografar senha com RSA-OAEP (Web Crypto API)

    F->>A: POST /api/v1/auth/login {username, encrypted_password}
    A->>R: INCR rate_limit:{ip} (verifica < 10/15min)

    alt Conta bloqueada ou inativa
        A-->>F: 401 (mensagem generica)
    else Credenciais validas
        A->>A: Verificar password_expires
        alt MFA habilitado
            A-->>F: 200 {mfa_required: true, mfa_token: "..."}
            U->>F: Inserir codigo TOTP
            F->>A: POST /api/v1/auth/mfa/verify {mfa_token, code}
        end
        A-->>F: Set-Cookie: pix_session (HttpOnly, Secure, SameSite=Strict)
        A-->>F: Set-Cookie: pix_csrf (Double Submit)
    end

    F->>F: useAuthStore().checkSession()
    F-->>U: Dashboard
```

### Credenciais de Teste

| Usuario | Senha | Funcao |
|---------|-------|--------|
| admin | Admin@2026! | Administrador do Sistema |
| operator | Operator@2026! | Operador de Transacoes |
| viewer | Viewer@2026! | Visualizador (somente leitura) |
| integration | Monetarie@2026! | Integracao Monetarie |

## Estrutura de Navegacao

```mermaid
flowchart TB
    DASH["Dashboard<br/>(monitoramento real-time)"]

    subgraph TX["Transacoes"]
        TXL["Lista de Transacoes"]
        TXD["Detalhe da Transacao"]
        TXH["Historico de Status"]
    end

    subgraph DICT["DICT"]
        DKL["Chaves PIX"]
        DCL["Claims (Portabilidade)"]
        DOP["Operacoes DICT"]
    end

    subgraph MED["MED 2.0"]
        MIL["Infracoes"]
        MID["Detalhe da Infracao"]
    end

    subgraph PART["Participantes"]
        PL["Lista de Participantes"]
        PD["Detalhe do Participante"]
    end

    subgraph SET["Liquidacao"]
        SN["Netting"]
        SR["Reconciliacao"]
        SF["Taxas"]
        SQR["QR Codes"]
    end

    subgraph ACC["Contabilidade"]
        ACA["Plano de Contas"]
        ALJ["Lancamentos"]
        AEV["Eventos Contabeis"]
        ACC2["Centros de Custo"]
    end

    subgraph MON["Monitoramento"]
        MH["Saude do Sistema"]
        MQ["Filas NATS"]
        MB["Canais BACEN"]
        MM["Metricas"]
    end

    subgraph CFG["Configuracao"]
        CU["Usuarios e RBAC"]
        CS["Seguranca"]
        CP["Parametros"]
        CSI["Simulador"]
    end

    DASH --> TX & DICT & MED & PART & SET & ACC & MON & CFG
```

## Dashboard

O dashboard principal exibe informacoes em tempo real via WebSocket (Phoenix Channels):

### Paineis

| Painel | Dados | Atualizacao |
|--------|-------|-------------|
| Transacoes ao Vivo | Ultimas transacoes com status | Tempo real (WebSocket) |
| Saude do Sistema | Status dos servicos (DB, Redis, NATS, BACEN) | 10 segundos |
| Status de Liquidacao | Ciclo atual, netting pendente | Tempo real |
| Operacoes DICT | Criacao/exclusao de chaves | Tempo real |
| Canais BACEN | Saude CPM/CSM | 30 segundos |
| Profundidade de Filas | Consumer lag por worker | 15 segundos |

### Graficos Chart.js

O dashboard utiliza 3 tipos de graficos reutilizaveis:

| Componente | Tipo | Uso |
|------------|------|-----|
| `LineChart.vue` | Linha | TPS ao longo do tempo, tendencias |
| `BarChart.vue` | Barra | Volume por periodo, comparativos |
| `DoughnutChart.vue` | Rosca | Distribuicao de status, tipos de transacao |

## Transacoes

### Lista de Transacoes

A view de lista suporta filtros avancados:

| Filtro | Tipo | Descricao |
|--------|------|-----------|
| Status | Select | PDNG, ACSP, ACCC, STLD, RJCT, CANC, RTRN |
| E2E ID | Texto (GIN trigram) | Busca parcial no End-to-End ID |
| Data inicio | DatePicker | Filtro por data de operacao |
| Data fim | DatePicker | Filtro por data de operacao |
| Instrumento | Select | PIX, QR Code, etc |
| Direcao | Select | Envio (OUTBOUND) / Recebimento (INBOUND) |

### Labels BCB (Portugues)

| Codigo | Label | Cor |
|--------|-------|-----|
| PDNG | Pendente | Amarelo |
| ACSP | Em Processamento | Azul |
| ACCC | Aceita | Verde |
| STLD | Liquidada | Esmeralda |
| RJCT | Rejeitada | Vermelho |
| CANC | Cancelada | Cinza |
| RTRN | Devolvida | Roxo |

### Detalhe da Transacao

A view de detalhe exibe:

- **5 cards de cabecalho**: Status, Direcao, Valor, Instrumento, Tipo de Mensagem
- **ANS (Acordo de Nivel de Servico)**: Tempos de processamento
  - Operacao -> Aceite (ACCC) -> Liquidacao (STLD) -> Delta
  - Badge **OK** (esmeralda, <= 1600ms) ou **EXCEDIDO** (vermelho, > 1600ms)
- **Identificadores BCB**: E2E ID, Message ID, Return ID
- **Participantes**: Devedor e Credor com ISPB, agencia, conta
- **Historico de status**: Timeline de mudancas de status

### Tipos de Mensagem ISO 20022

| Codigo | Label |
|--------|-------|
| pacs.008 | Transferencia de Credito |
| pacs.002 | Relatorio de Status |
| pacs.004 | Devolucao |
| pacs.028 | Consulta de Status |
| camt.060 | Consulta de Saldo |
| pibr.001 | Echo Request |
| pibr.002 | Echo Response |

## WebSocket (Monitoramento Real-Time)

O portal se conecta ao endpoint WebSocket do Settlement Service:

```
wss://pixapi-dev.fluxiq.com.br/socket/websocket
```

### Canais Disponiveis

| Canal | Topico | Dados |
|-------|--------|-------|
| `transactions:live` | Transacoes | Novas transacoes, mudancas de status |
| `system:health` | Saude | Status DB, Redis, NATS, servicos |
| `settlement:status` | Liquidacao | Ciclos, netting, reconciliacao |
| `dict:operations` | DICT | Criacao/exclusao de chaves |
| `bacen:channels` | BACEN | Saude CPM/CSM |
| `queues:depth` | Filas | Consumer lag por worker |

### Autenticacao WebSocket

A conexao WebSocket utiliza o mesmo token JWT da sessao:

```typescript
// monitoring.ts (Pinia store)
import { Socket } from 'phoenix'

const socket = new Socket('/socket', {
  params: { token: authStore.token }
})
socket.connect()

const channel = socket.channel('transactions:live', {})
channel.join()
  .receive('ok', () => console.log('Connected'))
  .receive('error', () => console.log('Failed'))
```

## Configuracao Nginx (WebSocket Proxy)

O frontend admin requer configuracao nginx para proxy de WebSocket:

```nginx
# nginx.conf (frontend admin)
location /socket {
    proxy_pass http://pix-backend.pix.svc.cluster.local:4003;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_read_timeout 86400;
}
```

## Internacionalizacao (i18n)

O portal admin suporta 5 idiomas:

| Codigo | Idioma | Chaves |
|--------|--------|--------|
| `pt-BR` | Portugues (Brasil) | 568 |
| `en-US` | Ingles (EUA) | 568 |
| `es-ES` | Espanhol (Espanha) | 568 |
| `zh-HK` | Chines (Hong Kong) | 568 |
| `fr` | Frances | 568 |

O idioma e selecionado no menu do usuario e persistido em `localStorage`.

## Resultado Esperado

Apos acessar o portal administrativo:

- O login com RSA-OAEP funciona e redireciona para o dashboard
- O dashboard exibe dados em tempo real via WebSocket (6 canais conectados)
- A lista de transacoes carrega com filtros funcionais
- O detalhe da transacao mostra ANS timing com badge OK/EXCEDIDO
- Os graficos Chart.js renderizam dados de TPS, volume e distribuicao
- A troca de idioma altera todos os textos da interface
- A sessao e mantida via cookie HttpOnly (`pix_session`)