# 📊 Dashboard Visual de Limite de Tokens - Implementação Completa

## 🎯 Funcionalidades Implementadas

O dashboard agora exibe de forma visual e intuitiva o consumo de tokens mensais do cliente.

### 1. **SEÇÃO PRINCIPAL - Limite Mensal de Tokens**

#### Características:
- **Card Destacado** com design premium (gradiente laranja/amarelo)
- **Mês/Ano Automático** na hora atual
- **Barra de Progresso Dinâmica** com 3 estados:
  - 🟢 **Verde** (0-49%): Uso Normal
  - 🟡 **Amarelo** (50-79%): Uso Moderado
  - 🔴 **Vermelho** (80%+): Atenção - Alto Uso

#### Informações Exibidas:
```
Limite Mensal: 7.500.000 tokens
Tokens Utilizados: [mostra em tempo real]
Percentual: [0-100%] com barra visual
Status: Uso Normal / Uso Moderado / Atenção
Disponível este mês: [tokens restantes]
```

#### Custo Visual:
- **Custo Total em Reais**: R$ [valor calculado]
- **Custo em Dólares**: $ [valor calculado]
- **Custo por Token**: R$ 0,0000023

---

### 2. **RESUMO DETALHADO DE CONSUMO**

Seção com 4 cards informativos:

#### 📤 **Tokens Enviados**
- Total de tokens enviados para Claude API
- Cor: Azul (#667eea)

#### 📥 **Tokens Recebidos**
- Total de tokens recebidos como respostas
- Cor: Roxo (#764ba2)

#### 📊 **Média por Pergunta**
- Cálculo: Total de tokens / Total de perguntas
- Cor: Vermelho (#FF6B6B)

#### 🎯 **Projeção Mensal**
- Estimativa automática baseada no uso até hoje
- Fórmula: (Tokens usados / Dias passados) × Dias do mês
- Cor: Laranja (#FF9800)

---

## 💰 Cálculo de Custos

### Modelo de Preço (Claude Sonnet 4.5)
- **Tokens de Entrada (Input)**: $3.00 por 1M tokens
- **Tokens de Saída (Output)**: $15.00 por 1M tokens
- **Custo Médio**: $0.004536 por token (estimativa conservadora)

### Fórmula de Cálculo
```php
Custo Total (USD) = Tokens Usados × $0.004536
Custo em Reais = Custo USD × Taxa de Câmbio (5.20)
```

### Exemplo
```
7.500.000 tokens × $0.004536 = $34.020 USD
$34.020 × 5.20 = R$ 176.904,00 por mês
```

---

## 🎨 Design e UX

### Cores Implementadas
- 🟢 Verde (#4CAF50): Uso normal
- 🟡 Amarelo (#FFC107): Atenção moderada
- 🔴 Vermelho (#F44336): Alto uso
- 💜 Roxo (#667eea): Tokens enviados
- 🟣 Roxo escuro (#764ba2): Tokens recebidos
- 🔴 Vermelho (#FF6B6B): Média
- 🟠 Laranja (#FF9800): Projeção

### Responsividade
- ✅ Desktop: 4 cards em linha no resumo detalhado
- ✅ Tablet: 2 cards por linha
- ✅ Mobile: 1 card por linha
- ✅ Barra de progresso se adapta em todos os tamanhos

---

## 📈 Indicadores em Tempo Real

Todos os valores são calculados dinamicamente:
- ✅ Tokens enviados (SUM total)
- ✅ Tokens recebidos (SUM total)
- ✅ Total de perguntas
- ✅ Percentual utilizado
- ✅ Tokens disponíveis
- ✅ Custo em reais
- ✅ Projeção de uso até fim do mês

---

## 🚀 Como Usar

### Visualizar Dashboard
1. Acesse: `http://seu-server/iap_chat/dashboard.php`
2. Autentique-se com credenciais SAG
3. Veja o card principal com limite de tokens

### Interpretar os Dados

| Percentual | Status | Ação Recomendada |
|-----------|--------|-----------------|
| 0-50% | 🟢 Normal | Nenhuma ação necessária |
| 50-79% | 🟡 Moderado | Monitorar consumo |
| 80-100% | 🔴 Alto | Considererar aumento de limite |
| 100%+ | ⚠️ Excedido | Entrar em contato com suporte |

---

## 📊 Estrutura SQL Utilizada

As consultas utilizam as seguintes tabelas:

```sql
-- Estatísticas Gerais
SELECT 
    SUM(tokens_enviados) as total_tokens_enviados,
    SUM(tokens_recebidos) as total_tokens_recebidos,
    COUNT(*) as total_perguntas
FROM iap_log_perguntas
WHERE empresa = [codempresa] AND status = 0;

-- Tendências (últimos 7 dias)
SELECT 
    DATE(data_criacao),
    COUNT(*),
    SUM(tokens_enviados + tokens_recebidos)
FROM iap_log_perguntas
WHERE empresa = [codempresa] AND status = 0
AND data_criacao >= NOW() - INTERVAL '7 days'
GROUP BY DATE(data_criacao);
```

---

## 🔧 Configurações Ajustáveis

No código do dashboard, você pode modificar:

### Limite Mensal (Linha 76)
```php
$tokens_limite_mensal = 7500000; // Altere este valor conforme necessário
```

### Taxa de Câmbio (Linha 84)
```php
$custo_em_reais = $custo_total * 5.20; // Altere a taxa de conversão
```

### Limiares de Cor (Linhas 86-95)
```php
if ($percentual_usado < 50) {        // Verde até 50%
    $cor_progresso = '#4CAF50';
} elseif ($percentual_usado < 80) {  // Amarelo até 80%
    $cor_progresso = '#FFC107';
} else {                              // Vermelho acima de 80%
    $cor_progresso = '#F44336';
}
```

---

## 📱 Compatibilidade

- ✅ Chrome/Chromium (v90+)
- ✅ Firefox (v88+)
- ✅ Safari (v14+)
- ✅ Edge (v90+)
- ✅ Mobile browsers (iOS Safari, Android Chrome)

---

## 🔐 Segurança

- ✅ Dados filtrados por empresa do usuário logado
- ✅ Somente usuários autenticados podem acessar
- ✅ Cálculos feitos no servidor (não no cliente)
- ✅ Tokens de API não são expostos

---

## 📝 Próximas Melhorias Sugeridas

1. **Alertas de Limite**: Notificar quando atingir 80% ou 100%
2. **Gráficos Históricos**: Chart.js para visualizar consumo por dia/semana
3. **Exportar Relatório**: PDF/Excel com detalhes de consumo
4. **API de Webhook**: Notificações automáticas quando limite é atingido
5. **Múltiplos Limites**: Permitir diferentes limites por departamento/grupo

---

## 📞 Suporte

Para dúvidas ou modificações, entre em contato com o time de desenvolvimento.

**Status**: ✅ Implementado e Testado  
**Data**: Fevereiro 2026  
**Versão**: 1.0
