📄 hermes-insights-reform-2026-07-03.md

← Vault

Hermes Insights — Reformulação Visual Completa

Data: 03/07/2026

Status: ✅ CONCLUÍDO — index.html reformulado

1. SISTEMA — O QUE MANTER (NÃO PODE QUEBRAR)

URLs e Páginas

`

https://insights.rochasalesseguros.com.br/

├── index.html → Dashboard principal (cards agentes)

├── dashboard_comercial.html → Painel comercial

├── fechados_por_vendedor.html → Vendas fechadas por vendedor

├── fechados_v2.html → Vendas fechadas v2

├── tempo_resposta.html → Tempo de resposta

├── clientes_espera.html → Clientes em espera

├── sobre.html → Sobre o sistema

├── relatorio_*.html (18 arquivos) → Relatórios individuais por agente/cliente

`

Stack Tecnológico

dentro dos cards — fechavam prematuramente

5.

fechado imediatamente — container ficava fora

6. Sem overflow-x: hidden — causeba scroll horizontal

lição: Arquitetura CSS Quebrada

  • - Regras espalhadas sem consistência
  • - Breakpoints incomplatíveis
  • - Hardcoded widths que não se adaptam
  • - Sobrescrita de classes com !important causando efeitos colaterais

    • 3. ARQUITETURA DA REFORMULAÇÃO

    Princípios de Design

    1. CSS Minimalista e Previsível — cada classe tem UMA responsabilidade

    2. CSS First — layout feito no CSS, não inline styles

    3. Sem !important no layout — apenas para accessibility/overrides

    4. Fallbacks explícitos — funciona mesmo se uma regra falha

    5. Mobile-first — breakpoints de baixo para cima

    6. Harmonia entre páginas — mesma estrutura, mesmo ritmo visual

    Hierarquia Visual

    `

    html

    └── body (overflow-x: hidden)

    └── .fn-upbar (topbar fixa)

    └── .layout-wrapper (flex: sidebar + main)

    ├── .sidebar (navigation)

    └── .main-content (conteúdo)

    └── .page-container (max-width container)

    ├── .page-header (título + descrição)

    ├── .cards-grid (grid de cards)

    │ └── .card (cada card de agente/cliente)

    │ ├── .card-header (avatar + nome)

    │ ├── .card-metrics (métricas)

    │ └── .card-badge (badge score)

    └── .reports-list (lista de relatórios)

    `

    Paleta de Cores (Harmônica)

    `css

    --color-bg-primary: #0f1117; / Fundo principal — quase preto azulado /

    --color-bg-secondary: #1a1d27; / Cards — levemente mais claro /

    --color-bg-tertiary: #242836; / Hover states — mais destacado /

    --color-border: #2e3348; / Bordas sutis /

    --color-text-primary: #e8eaed; / Texto principal — quase branco /

    --color-text-secondary: #9ca3af; / Texto secundário /

    --color-accent: #6366f1; / Indigo — destaque principal /

    --color-accent-hover: #818cf8; / Indigo claro — hover /

    --color-success: #22c55e; / Verde — Excelente /

    --color-warning: #f59e0b; / Amarelo — Bom /

    --color-danger: #ef4444; / Vermelho — Melhorar /

    `

    Sistema de Espaçamento

    `css

    / Base unit: 4px /

    --space-1: 4px;

    --space-2: 8px;

    --space-3: 12px;

    --space-4: 16px;

    --space-5: 20px;

    --space-6: 24px;

    --space-8: 32px;

    --space-10: 40px;

    --space-12: 48px;

    --space-16: 64px;

    `

    Sistema de Grid

    `css

    / Grid de cards — fluído, 280px mínimo por coluna /

    .cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: var(--space-5);

    }

    / Cards de destaque (span 2) /

    .card.span-2 {

    grid-column: span 2;

    }

    `

    Tipografia

    `css

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs: 0.75rem; / 12px /

    --font-size-sm: 0.875rem; / 14px /

    --font-size-base: 1rem; / 16px /

    --font-size-lg: 1.125rem; / 18px /

    --font-size-xl: 1.25rem; / 20px /

    --font-size-2xl: 1.5rem; / 24px /

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    `

    4. ESTRUTURA HTML PADRÃO (TODAS AS PÁGINAS)

    Template Base

    `html

    Hermes Insights — {PAGE_TITLE}

    HERMES

    {PAGE_TITLE}

    {DESCRIPTION}

    `

    5. ESTRUTURA DE CARD PADRÃO

    Card de Agente

    `html

    {AVATAR}

    {NOME}

    {SCORE}

    {CONVERSAS}

    conversas

    {MSG}

    msgs

    {BADGE_TEXT}

    `

    Card de Relatório

    `html

    📊

    {CLIENTE}

    por {AGENTE}

    {DATA}

    {STATUS}

    `

    6. BREAKPOINTS RESPONSIVOS

    `css

    / Desktop large (1280px+) /

    .cards-grid {

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 24px;

    }

    / Tablet (900px) /

    @media (max-width: 900px) {

    .cards-grid {

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

    gap: 16px;

    }

    .sidebar { width: 200px; }

    .main-content { margin-left: 200px; }

    }

    / Mobile large (600px) /

    @media (max-width: 600px) {

    .layout-wrapper { flex-direction: column; }

    .sidebar {

    width: 100%;

    position: static;

    border-right: none;

    border-bottom: 1px solid var(--color-border);

    }

    .main-content { margin-left: 0; }

    .cards-grid {

    grid-template-columns: 1fr;

    gap: 12px;

    }

    .card.span-2 { grid-column: span 1; }

    }

    / Mobile small (400px) /

    @media (max-width: 400px) {

    .page-container { padding: 12px; }

    .card { padding: 12px; }

    }

    `

    7. FUNCIONALIDADES A PRESERVAR

    Score Engine

  • - Scripts em /tmp/ e /var/www/hermes-insights/
  • - Roda via cron ou sob demanda
  • - Output: JSON + atualização HTML

    • Relatórios Groq

  • - generate_commercial_report_v2.py
  • - Usa Groq API com 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
  • - Gera HTML por agente + cliente

    • Chatwoot Sync

  • - Métricas de conversas, tempo de resposta
  • - Dados no Supabase Cloud

    • Sidebar Toggle

  • - Funcionalidade de colapsar
  • - Menu de relatórios expansível

    • Badges

  • - Excelente (score >= 7.0)
  • - Bom (score >= 6.0)
  • - Melhorar (score < 6.0)

    • 8. VERIFICAÇÃO PÓS-REFORMULAÇÃO

    Checklist de Validação

  • - [ ] index.html carrega sem erros no console
  • - [ ] Cards aparecem em grid de 3 colunas (desktop)
  • - [ ] Nenhum card no edge da tela
  • - [ ] Sidebar funciona e colapsa
  • - [ ] Badge de score aparece corretamente
  • - [ ] Links de relatórios funcionam
  • - [ ] Mobile: cards empilham em 1 coluna
  • - [ ] Tablet: cards empilham em 2 colunas
  • - [ ] Page-header com título e descrição
  • - [ ] Nenhum overflow horizontal
  • - [ ] Score engine continua funcionando
  • - [ ] Relatórios Groq continuam gerando

    • Páginas para Validar

    1. index.html — Dashboard principal

    2. dashboard_comercial.html — dor de cabeça adicional com gráficos

    3. fechados_por_vendedor.html — таблицы

    4. fechados_v2.html — таблицы

    5. tempo_resposta.html — métricas

    6. clientes_espera.html — lista

    7. sobre.html — conteúdo estático

    8. Todos os relatorio_*.html — consistency

    9. BACKUP ANTES DA REFORMULAÇÃO

    Antes de qualquer mudança, fazer backup:

    `bash

    No VPS

    cp /var/www/hermes-insights/sidebar_v2.css /var/www/hermes-insights/sidebar_v2.css.backup_reform_20260703

    cp /var/www/hermes-insights/index.html /var/www/hermes-insights/index.html.backup_reform_20260703

    `

    Documento criado em 03/07/2026 — usar como referência para toda a reformulação