# Atualizacoes em Tempo Real

O STA Connector fornece capacidades de monitoramento em tempo real atraves do Portal Admin e da API Admin.

## Portal Admin

O Portal Admin baseado em React fornece um dashboard em tempo real para monitoramento de processamento de arquivos, saude do sistema e metricas.

### Funcionalidades

- **Dashboard de Saude** - Visao geral do status do sistema em tempo real
- **Monitoramento de Arquivos** - Visualizacao ao vivo do processamento de arquivos com filtros
- **Visualizacao de Metricas** - Graficos para throughput, latencia e profundidade da fila
- **Editor de Configuracao** - Modifique configuracoes sem reinicio
- **Gerenciamento de Rotas** - Habilite/desabilite rotas com toggles
- **Modo Escuro/Claro** - Suporte a preferencia do usuario

### Acessando o Portal

```bash
# Com Docker
open http://localhost:3000

# Modo desenvolvimento
cd admin-portal
npm run dev
open http://localhost:5173
```

## Visao Geral do Dashboard

O dashboard principal exibe:

```
+-------------------------------------------------------------+
|  STA Connector Admin                              [Escuro]   |
+-------------------------------------------------------------+
|                                                             |
|  Saude do Sistema: * Saudavel                               |
|                                                             |
|  +----------+  +----------+  +----------+  +----------+     |
|  | Entrada  |  |  Saida   |  | Banco    |  |   STA    |     |
|  |    *     |  |    *     |  |    *     |  |    *     |     |
|  |  Ativo   |  |  Ativo   |  |Conectado |  |   OK     |     |
|  +----------+  +----------+  +----------+  +----------+     |
|                                                             |
|  Arquivos Processados Hoje                                  |
|  +-----------------------------------------------------+    |
|  | ........................................             |    |
|  | 00:00        06:00        12:00        18:00   24:00|    |
|  +-----------------------------------------------------+    |
|                                                             |
|  +---------------------+  +-----------------------------+   |
|  | Atividade Recente   |  | Metricas do Sistema         |   |
|  | * Arquivo SPI env.  |  | Uptime: 3d 4h 25m           |   |
|  | * Arquivo CCS rec.  |  | Memoria: 256 MB             |   |
|  | * Arquivo DICT env. |  | Profund. Fila: 5            |   |
|  +---------------------+  +-----------------------------+   |
|                                                             |
+-------------------------------------------------------------+
```

## Polling para Atualizacoes

O Portal Admin faz polling nos endpoints da API Admin em intervalos regulares para buscar dados atualizados.

### Status de Saude

```javascript
// Faz polling em /admin/health a cada 30 segundos
async function fetchHealth() {
  const response = await fetch('/api/admin/health', {
    headers: {
      'Authorization': `Basic ${btoa('admin:password')}`
    }
  });
  return response.json();
}
```

### Atualizacoes de Metricas

```javascript
// Faz polling em /admin/metrics a cada 5 segundos
async function fetchMetrics() {
  const response = await fetch('/api/admin/metrics', {
    headers: {
      'Authorization': `Basic ${btoa('admin:password')}`
    }
  });
  return response.json();
}
```

### Lista de Arquivos

```javascript
// Faz polling em /admin/files com filtros
async function fetchFiles(filters) {
  const params = new URLSearchParams(filters);
  const response = await fetch(`/api/admin/files?${params}`, {
    headers: {
      'Authorization': `Basic ${btoa('admin:password')}`
    }
  });
  return response.json();
}
```

## Integracao com API

O Portal Admin integra com a API Admin (porta 8081) para todos os dados.

### Configuracao de URL Base

```typescript
// src/config.ts
export const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8081';
```

### Autenticacao

O portal usa autenticacao HTTP Basic:

```typescript
// src/api/client.ts
const credentials = btoa(`${username}:${password}`);

const headers = {
  'Authorization': `Basic ${credentials}`,
  'Content-Type': 'application/json'
};
```

### Endpoints Disponiveis

| Endpoint | Metodo | Descricao |
|----------|--------|-----------|
| `/admin/health` | GET | Status de saude do sistema |
| `/admin/metrics` | GET | Metricas operacionais |
| `/admin/config` | GET | Configuracao atual |
| `/admin/config` | PATCH | Atualizar configuracao |
| `/admin/files` | GET | Listar arquivos com filtros |
| `/admin/retry/{id}` | POST | Retentar arquivo com falha |
| `/admin/poller/trigger` | POST | Disparar ciclo de poll |

## Exibicao de Metricas

### Metricas de Processamento de Arquivo

```json
{
  "timestamp": "2026-01-31T10:30:00Z",
  "inbound": {
    "files_discovered": 1234,
    "files_processed": 1200,
    "files_failed": 12,
    "files_pending": 22
  },
  "outbound": {
    "files_submitted": 5000,
    "files_uploaded": 4995,
    "files_failed": 3,
    "files_pending": 2
  }
}
```

### Metricas do Sistema

```json
{
  "uptime_seconds": 86400,
  "poller": {
    "enabled": true,
    "last_poll": "2026-01-31T10:29:00Z",
    "poll_count": 500
  },
  "sta_client": {
    "requests_total": 50000,
    "requests_failed": 45,
    "avg_latency_ms": 450
  }
}
```

## Monitoramento de Arquivos

### Filtrando Arquivos

A lista de arquivos suporta multiplos filtros:

```
/admin/files?status=failed&system=SPI&limit=50&offset=0
```

| Filtro | Descricao |
|--------|-----------|
| `status` | Filtrar por status: `pending`, `completed`, `failed` |
| `system` | Filtrar por sistema BCB: `CCS`, `SPI`, `DICT`, etc. |
| `limit` | Maximo de arquivos a retornar (padrao: 100, max: 1000) |
| `offset` | Offset de paginacao |
| `start_date` | Data inicial (ISO 8601 ou DD/MM/AAAA) |
| `end_date` | Data final (ISO 8601 ou DD/MM/AAAA) |

### Cores de Status de Arquivo

| Status | Cor | Descricao |
|--------|-----|-----------|
| `pending` | Amarelo | Aguardando processamento |
| `uploading` | Azul | Upload em progresso |
| `completed` | Verde | Processado com sucesso |
| `failed` | Vermelho | Processamento falhou |
| `retrying` | Laranja | Agendado para retry |

## Gerenciamento de Configuracao

### Visualizando Configuracao

A pagina de configuracao exibe todas as configuracoes com valores sensiveis ocultados:

```json
{
  "service": {
    "name": "sta-connector",
    "log_level": "info"
  },
  "sta": {
    "environment": "homologation",
    "username": "user123",
    "password": "[OCULTADO]",
    "timeout_seconds": 30
  },
  "poller": {
    "enabled": true,
    "interval_seconds": 30
  }
}
```

### Atualizando Configuracao

Configuracoes hot-reloadable podem ser alteradas via portal:

```javascript
// Atualizar intervalo do poller
await fetch('/api/admin/config', {
  method: 'PATCH',
  headers: {
    'Authorization': `Basic ${credentials}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    poller: {
      interval_seconds: 60
    }
  })
});
```

## Gerenciamento de Rotas

### Listando Rotas

Rotas sao exibidas com seu status atual:

```
+----------+------------+---------------------------------+---------+
| Sistema  | Status     | URL                             | Acoes   |
+----------+------------+---------------------------------+---------+
| CCS      | * Ativado  | https://fluxiq.com.br/api/ccs   | [Toggle]|
| SPI      | * Ativado  | https://fluxiq.com.br/api/spi   | [Toggle]|
| DICT     | o Desativ. | https://fluxiq.com.br/api/dict  | [Toggle]|
+----------+------------+---------------------------------+---------+
```

### Alternando Rotas

Habilite ou desabilite rotas sem reinicio:

```javascript
// Desabilitar uma rota
await fetch('/api/admin/config', {
  method: 'PATCH',
  headers: { /* ... */ },
  body: JSON.stringify({
    routes: {
      DICT: {
        enabled: false
      }
    }
  })
});
```

## Operacoes Manuais

### Retentar Arquivo com Falha

```javascript
async function retryFile(fileId) {
  const response = await fetch(`/api/admin/retry/${fileId}`, {
    method: 'POST',
    headers: {
      'Authorization': `Basic ${credentials}`
    }
  });
  return response.json();
}
```

### Disparar Ciclo de Poll

```javascript
async function triggerPoll() {
  const response = await fetch('/api/admin/poller/trigger', {
    method: 'POST',
    headers: {
      'Authorization': `Basic ${credentials}`
    }
  });
  return response.json();
}
```

## Modo Escuro

O Portal Admin suporta modo escuro:

```typescript
// Alternar tema
const toggleTheme = () => {
  const current = localStorage.getItem('theme') || 'light';
  const next = current === 'light' ? 'dark' : 'light';
  localStorage.setItem('theme', next);
  document.documentElement.classList.toggle('dark');
};
```

## Compilando o Portal

### Desenvolvimento

```bash
cd admin-portal
npm install
npm run dev
```

### Build de Producao

```bash
cd admin-portal
npm run build
```

A saida do build esta em `admin-portal/dist/` e pode ser servida por qualquer servidor de arquivos estaticos.

### Docker

O portal esta incluido na configuracao do Docker Compose:

```yaml
services:
  admin-portal:
    build:
      context: ../admin-portal
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - sta-connector
```

## Customizacao

### Variaveis de Ambiente

```bash
# URL da API para o portal admin
VITE_API_URL=http://localhost:8081

# Intervalos de polling (milissegundos)
VITE_HEALTH_POLL_INTERVAL=30000
VITE_METRICS_POLL_INTERVAL=5000
VITE_FILES_POLL_INTERVAL=10000
```

### Configuracao de Proxy

Para desenvolvimento, configure o proxy do Vite:

```typescript
// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
```

## Proximos Passos

- [API Admin](/pt/api/admin) - Referencia completa da API
- [Configuracao](/pt/guide/configuration) - Opcoes de configuracao
- [Solucao de Problemas](/pt/troubleshooting) - Problemas comuns