<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestão de Escalas por Performance</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 20px; }
h1, h2 { color: #004a99; border-bottom: 2px solid #ccc; padding-bottom: 10px; }
h1 { text-align: center; border-bottom: none; margin-bottom: 30px; }
.tab-container { margin-bottom: 30px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
th { background-color: #e9eff5; font-weight: bold; }
.header-row { background-color: #d1e0ec; }
.kpi-card { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; text-align: center; margin-bottom: 10px; }
.kpi-title { font-size: 0.9em; color: #6c757d; }
.kpi-value { font-size: 1.8em; font-weight: bold; color: #004a99; }
.kpi-percentage { color: #28a745; }
.kpi-alert { color: #dc3545; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }
.dropdown-mock { color: #007bff; cursor: pointer; }
.demand-alta { background-color: #ffdddd; }
.demand-media { background-color: #fffbdd; }
.demand-baixa { background-color: #ddffdd; }
</style>
</head>
<body>
<h1>Gestão de Escalas por Performance</h1>
<div class="tab-container">
<h2>Aba: Dashboard</h2>
<h3>Indicadores de Cobertura (KPIs)</h3>
<div class="dashboard-grid">
<div class="kpi-card">
<div class="kpi-title">Cobertura Geral</div>
<div class="kpi-value kpi-percentage">95%</div>
</div>
<div class="kpi-card">
<div class="kpi-title">Cobertura Stands (Alta Demanda)</div>
<div class="kpi-value kpi-percentage">100%</div>
</div>
<div class="kpi-card">
<div class="kpi-title">Plantões não preenchidos</div>
<div class="kpi-value kpi-alert">8</div>
</div>
<div class="kpi-card">
<div class="kpi-title">Conflitos de Escala</div>
<div class="kpi-value kpi-alert">1</div>
</div>
</div>
<h3>Análise de Performance por Corretor</h3>
<table>
<tr class="header-row">
<th>Corretor</th>
<th>Nível</th>
<th>Performance (Nota)</th>
<th>Total de Plantões</th>
</tr>
<tr>
<td>Ana Silva</td>
<td>Sênior</td>
<td>9.5</td>
<td>6</td>
</tr>
<tr>
<td>Bruno Costa</td>
<td>Sênior</td>
<td>8.7</td>
<td>5</td>
</tr>
<tr>
<td>Carlos Dias</td>
<td>Pleno</td>
<td>9.1</td>
<td>7</td>
</tr>
<tr>
<td>Diana Matos</td>
<td>Pleno</td>
<td>7.5</td>
<td>6</td>
</tr>
<tr>
<td>Everton Lima</td>
<td>Júnior</td>
<td>8.8</td>
<td>5</td>
</tr>
<tr>
<td>Flávia Borges</td>
<td>Júnior</td>
<td>6.9</td>
<td>4</td>
</tr>
</table>
</div>
<div class="tab-container">
<h2>Aba: Escala Mensal (Exemplo)</h2>
<table>
<tr class="header-row">
<th>Dia</th>
<th class="demand-alta">Stand Setor Marista (Alta)</th>
<th class="demand-alta">Stand Setor Bueno (Alta)</th>
<th class="demand-media">Ponto de Venda - Jd. Goiás (Média)</th>
<th class="demand-media">Quiosque Shopping Flamboyant (Média)</th>
<th class="demand-baixa">Stand Feirão - Pq. Amazônia (Baixa)</th>
</tr>
<tr>
<td>01/12</td>
<td>Ana Silva</td>
<td>Bruno Costa</td>
<td>Carlos Dias</td>
<td>Diana Matos</td>
<td>Everton Lima</td>
</tr>
<tr>
<td>02/12</td>
<td>Bruno Costa</td>
<td>Ana Silva</td>
<td>Diana Matos</td>
<td>Carlos Dias</td>
<td>Flávia Borges</td>
</tr>
<tr>
<td>03/12</td>
<td style="background-color: #ffc7ce; color: #9c0006;">(VAZIO)</td>
<td>Ana Silva</td>
<td>Carlos Dias</td>
<td>Diana Matos</td>
<td>Everton Lima</td>
</tr>
<tr>
<td>04/12</td>
<td>Ana Silva</td>
<td>Bruno Costa</td>
<td style="background-color: #ffc7ce; color: #9c0006;">Carlos Dias (CONFLITO)</td>
<td style="background-color: #ffc7ce; color: #9c0006;">Carlos Dias (CONFLITO)</td>
<td>Flávia Borges</td>
</tr>
<tr>
<td>...</td>
<td><span class="dropdown-mock">[Selecione...]</span></td>
<td><span class="dropdown-mock">[Selecione...]</span></td>
<td><span class="dropdown-mock">[Selecione...]</span></td>
<td><span class="dropdown-mock">[Selecione...]</span></td>
<td><span class="dropdown-mock">[Selecione...]</span></td>
</tr>
</table>
</div>
<div class="dashboard-grid">
<div class="tab-container">
<h2>Aba: Cadastro Corretores</h2>
<table>
<tr class="header-row"><th>ID</th><th>Nome</th><th>Nível</th><th>Performance</th></tr>
<tr><td>1</td><td>Ana Silva</td><td>Sênior</td><td>9.5</td></tr>
<tr><td>2</td><td>Bruno Costa</td><td>Sênior</td><td>8.7</td></tr>
<tr><td>3</td><td>Carlos Dias</td><td>Pleno</td><td>9.1</td></tr>
<tr><td>4</td><td>Diana Matos</td><td>Pleno</td><td>7.5</td></tr>
<tr><td>5</td><td>Everton Lima</td><td>Júnior</td><td>8.8</td></tr>
<tr><td>6</td><td>Flávia Borges</td><td>Júnior</td><td>6.9</td></tr>
</table>
</div>
<div class="tab-container">
<h2>Aba: Cadastro Stands</h2>
<table>
<tr class="header-row"><th>ID</th><th>Nome do Stand</th><th>Demanda</th><th>Nível Mínimo</th></tr>
<tr><td>1</td><td>Stand Setor Marista</td><td class="demand-alta">Alta</td><td>Sênior</td></tr>
<tr><td>2</td><td>Stand Setor Bueno</td><td class="demand-alta">Alta</td><td>Sênior</td></tr>
<tr><td>3</td><td>Ponto de Venda - Jd. Goiás</td><td class="demand-media">Média</td><td>Pleno</td></tr>
<tr><td>4</td><td>Quiosque Shopping Flamboyant</td><td class="demand-media">Média</td><td>Pleno</td></tr>
<tr><td>5</td><td>Stand Feirão - Pq. Amazônia</td><td class="demand-baixa">Baixa</td><td>Júnior</td></tr>
</table>
</div>
</div>
</body>
</html>