6.4 KiB

Raw Permalink Blame History

🎨 Implementação do Tema Zoho no Financeiro V2

📋 Resumo da Implementação

Data: 02/02/2026
Módulo: financeiro-v2
Objetivo: Implementar tema com fontes estilo Zoho e converter medidas para vw/vh

🎯 Objetivos

1. Sistema de Tipografia Adaptativa (Estilo Zoho)

✅ Usar fonte Inter (similar ao Zoho Puvi)
✅ Implementar sistema de clamp() com vw/vh
✅ Pesos moderados (semibold/medium, não black/bold excessivo)
✅ Tamanhos adaptativos para todas as resoluções

2. Conversão de Medidas

✅ Converter todas as medidas fixas (px, rem) para vw/vh
✅ Usar clamp(min, preferred, max) para controle
✅ Garantir responsividade em resoluções menores

📐 Sistema de Medidas Adaptativas

Tipografia

/* Tiny */ clamp(0.75rem, 0.9vw, 0.875rem)     /* 12px-14px */
/* Label */ clamp(0.875rem, 1vw, 0.9375rem)    /* 14px-15px */
/* Body */ clamp(1rem, 1.4vw, 1.25rem)          /* 16px-20px */
/* Subtitle */ clamp(1.125rem, 2vw, 1.5rem)    /* 18px-24px */
/* Title */ clamp(1.5rem, 2.8vw, 2.25rem)       /* 24px-36px */
/* Number */ clamp(1.75rem, 3.4vw, 2.5rem)     /* 28px-40px */

Espaçamento

/* Small */ clamp(0.5rem, 1vw, 1rem)            /* 8px-16px */
/* Medium */ clamp(1rem, 2vw, 1.5rem)           /* 16px-24px */
/* Large */ clamp(1.5rem, 3vw, 2.5rem)          /* 24px-40px */

Dimensões

/* Icon Small */ clamp(1rem, 1.5vw, 1.25rem)   /* 16px-20px */
/* Icon Medium */ clamp(1.25rem, 2vw, 1.5rem)  /* 20px-24px */
/* Icon Large */ clamp(1.5rem, 2.5vw, 2rem)    /* 24px-32px */

/* Card Height */ clamp(8rem, 12vh, 14rem)      /* 128px-224px */
/* Modal Width */ clamp(20rem, 40vw, 50rem)     /* 320px-800px */

🎨 Pesos de Fonte (Estilo Zoho)

Peso	Classe	Uso
Normal (400)	`font-normal`	Corpo de texto, valores
Medium (500)	`font-medium`	Labels, descrições
Semibold (600)	`font-semibold`	Títulos, números importantes
Bold (700)	`font-bold`	⚠️ Apenas ênfase extrema
Black (900)	`font-black`	❌ EVITAR

📁 Arquivos para Modificar

1. Componentes Principais

src/features/financeiro-v2/components/ExcelTable.jsx
src/features/financeiro-v2/components/FinanceiroV2Sidebar.jsx
src/features/financeiro-v2/components/AdvancedFiltersModal.jsx

2. Views

src/features/financeiro-v2/views/DashboardView.jsx
src/features/financeiro-v2/views/FluxoCaixaView.jsx
src/features/financeiro-v2/views/RelatoriosView.jsx
src/features/financeiro-v2/views/contas-receber/*
src/features/financeiro-v2/views/contas-pagar/*
src/features/financeiro-v2/views/conciliacao-v2/*

3. Layout Principal

src/features/financeiro-v2/index.jsx

🔄 Padrões de Conversão

DE (antes):

// Tamanhos fixos
className="text-xl"          // 1.25rem (20px)
className="text-sm"          // 0.875rem (14px)
className="p-6"              // 1.5rem (24px)
className="w-10"             // 2.5rem (40px)
className="h-24"             // 6rem (96px)

PARA (depois):

// Tamanhos adaptativos
className="text-[clamp(1rem,1.6vw,1.375rem)]"        // Body Large (16px-22px)
className="text-[clamp(0.875rem,1vw,0.9375rem)]"    // Label (14px-15px)
className="p-[clamp(1rem,2vw,1.5rem)]"              // Padding adaptativo
className="w-[clamp(2rem,3vw,2.5rem)]"              // Width adaptativa
className="h-[clamp(4rem,8vh,6rem)]"                // Height adaptativa

✅ Checklist de Implementação

Fase 1: Componentes Base

Atualizar ExcelTable.jsx
- Converter tamanhos de fonte usando clamp()
- Ajustar padding/margin para vw/vh
- Reduzir peso de fontes (black → semibold)
- Ajustar ícones com dimensões adaptativas

Fase 2: Views Principais

Atualizar DashboardView.jsx
- Converter cards para dimensões adaptativas
- Ajustar gráficos com altura em vh
- Atualizar tipografia dos textos
Atualizar FluxoCaixaView.jsx
- Converter filtros e controles
- Ajustar tabelas e gráficos
Atualizar RelatoriosView.jsx
- Converter cards de relatórios
- Ajustar modais de exportação

Fase 3: Subviews

Atualizar views de contas-receber
Atualizar views de contas-pagar
Atualizar views de conciliacao-v2

Fase 4: Layout e Navegação

Atualizar index.jsx
- Converter header extras
- Ajustar layout containers
- Atualizar sidebar

🎨 Exemplos de Conversão

Card de KPI

// ANTES
<div className="p-5">
  <div className="w-10 h-10 rounded-xl">
    <Icon size={18} />
  </div>
  <span className="text-[10px] font-bold uppercase">TÍTULO</span>
  <div className="text-xl font-black">R$ 1.234,56</div>
  <p className="text-[10px]">Subtítulo</p>
</div>

// DEPOIS
<div className="p-[clamp(1rem,1.5vw,1.25rem)]">
  <div className="w-[clamp(2rem,3vw,2.5rem)] h-[clamp(2rem,3vw,2.5rem)] rounded-xl">
    <Icon size="clamp(1rem,1.5vw,1.125rem)" />
  </div>
  <span className="text-[clamp(0.625rem,0.8vw,0.75rem)] font-semibold uppercase">TÍTULO</span>
  <div className="text-[clamp(1.5rem,2.8vw,2.25rem)] font-semibold">R$ 1.234,56</div>
  <p className="text-[clamp(0.625rem,0.8vw,0.75rem)] font-medium">Subtítulo</p>
</div>

Tabela

// ANTES
<th className="h-[40px] px-3">
  <span className="text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold">COLUNA</span>
</th>

// DEPOIS
<th className="h-[clamp(2rem,3vh,2.5rem)] px-[clamp(0.75rem,1vw,1rem)]">
  <span className="text-[clamp(0.75rem,0.9vw,0.875rem)] font-semibold">COLUNA</span>
</th>

🧪 Testes Necessários

Resoluções para Testar

Mobile: 375px (iPhone SE)
Tablet: 768px (iPad)
Desktop Small: 1366px
Desktop Large: 1920px
4K: 2560px

Validações

Textos legíveis em todas as resoluções
Sem overflow ou cortes de conteúdo
Botões e ícones com tamanhos proporcionais
Gráficos se adaptam corretamente
Modais e painéis responsivos

📊 Progresso

Componentes Base (0/4)
Views Principais (0/3)
Subviews (0/20)
Layout (0/1)
Testes (0/5)

Total: 0/28 (0%)

Status: 🟡 Em Progresso
Próximo Passo: Iniciar conversão dos componentes base

6.4 KiB Raw Permalink Blame History