> For the complete documentation index, see [llms.txt](https://doc.sysdevmobile.com/mss-extensibility/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.sysdevmobile.com/mss-extensibility/mss-5.1/myteam/monitors-tab.md).

# Monitors Tab

MSS 5.1 - Extensibility - myTeam - Monitors Tab

Exemplos práticos de payloads para a extensibilidade de tabs nos **Monitores de Vendas** (MVND) e **Encomendas** (MENC).

### Contexto

Quando o utilizador está num ecrã de monitor e clica num tab personalizado, o myTeam envia um POST ao URL configurado com os filtros de período atualmente selecionados no monitor.

Ambos os monitores (vendas e encomendas) utilizam a **mesma estrutura de filtros**.

***

### Payload - Monitor de Vendas (MVND)

```json
{
  "authentication": {
    "user": "admin",
    "hash": "a1b2c3d4e5f6..."
  },
  "filter": {
    "currentStartDate": "20260101",
    "currentEndDate": "20260331",
    "previousStartDate": "20250101",
    "previousEndDate": "20250331",
    "relativeData": "order"
  }
}
```

### Payload - Monitor de Encomendas (MENC)

```json
{
  "authentication": {
    "user": "admin",
    "hash": "a1b2c3d4e5f6..."
  },
  "filter": {
    "currentStartDate": "20260401",
    "currentEndDate": "20260630",
    "previousStartDate": "20250401",
    "previousEndDate": "20250630",
    "relativeData": "deliver"
  }
}
```

### Campos do Filtro

<table><thead><tr><th width="195">Campo</th><th width="103.7999267578125">Tipo</th><th width="104.5999755859375">Formato</th><th>Descrição</th></tr></thead><tbody><tr><td><code>currentStartDate</code></td><td>string</td><td><code>yyyyMMdd</code></td><td>Data início do período atual selecionado no monitor</td></tr><tr><td><code>currentEndDate</code></td><td>string</td><td><code>yyyyMMdd</code></td><td>Data fim do período atual selecionado no monitor</td></tr><tr><td><code>previousStartDate</code></td><td>string</td><td><code>yyyyMMdd</code></td><td>Data início do período anterior (para comparação)</td></tr><tr><td><code>previousEndDate</code></td><td>string</td><td><code>yyyyMMdd</code></td><td>Data fim do período anterior (para comparação)</td></tr><tr><td><code>relativeData</code></td><td>string</td><td>—</td><td>Tipo de data relativa: <code>"order"</code> (encomenda) ou <code>"deliver"</code> (entrega)</td></tr></tbody></table>

### Exemplo de resposta

O serviço externo deve devolver uma página HTML completa. Exemplo de um resumo de vendas:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body { font-family: sans-serif; margin: 16px; color: #333; }
        h3 { color: #2E7D32; margin-bottom: 16px; }
        .cards { display: flex; gap: 16px; margin-bottom: 24px; }
        .card { flex: 1; background: #f5f5f5; border-radius: 6px; padding: 16px; text-align: center; }
        .card .value { font-size: 24px; font-weight: 700; color: #1B5E20; }
        .card .label { font-size: 12px; color: #787878; margin-top: 4px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 8px 12px; border: 1px solid #e0e0e0; text-align: left; }
        th { background: #f5f5f5; font-weight: 600; }
    </style>
</head>
<body>
    <h3>Resumo de Vendas — Q1 2026</h3>
    <div class="cards">
        <div class="card">
            <div class="value">€ 125.430</div>
            <div class="label">Período Atual</div>
        </div>
        <div class="card">
            <div class="value">€ 98.200</div>
            <div class="label">Período Anterior</div>
        </div>
        <div class="card">
            <div class="value">+27,7%</div>
            <div class="label">Variação</div>
        </div>
    </div>
    <table>
        <tr><th>Cliente</th><th>Atual</th><th>Anterior</th><th>Var.</th></tr>
        <tr><td>Empresa A</td><td>€ 45.000</td><td>€ 38.000</td><td>+18,4%</td></tr>
        <tr><td>Empresa B</td><td>€ 32.500</td><td>€ 29.100</td><td>+11,7%</td></tr>
        <tr><td>Empresa C</td><td>€ 28.200</td><td>€ 21.600</td><td>+30,6%</td></tr>
    </table>
</body>
</html>
```

***

### Fluxo

```
Utilizador está no Monitor de Vendas (período Q1 2026 vs Q1 2025)
    │
    ▼
Clica no tab personalizado
    │
    ▼
myTeam envia POST ao URL configurado
    │  payload: { authentication: {...}, filter: { currentStartDate: "20260101", ... } }
    ▼
Serviço externo valida autenticação
    │
    ▼
Consulta dados de vendas para os períodos recebidos
    │
    ▼
Devolve HTML com resumo/gráficos (status 200)
    │
    ▼
Conteúdo apresentado no iframe do tab
```

{% hint style="info" %}
O campo `relativeData` indica se os dados devem ser filtrados pela data de encomenda (`"order"`) ou pela data de entrega (`"deliver"`). Este valor reflete a seleção do utilizador no monitor.Quando o utilizador altera os filtros de período no monitor, o tab **não é recarregado automaticamente**. O tab é carregado quando o utilizador clica nele.
{% endhint %}
