# 🎨 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**
```css
/* 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**
```css
/* 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**
```css
/* 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):**
```jsx
// 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):**
```jsx
// 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**
```jsx
// 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**
```jsx
// 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**
1. **Mobile**: 375px (iPhone SE)
2. **Tablet**: 768px (iPad)
3. **Desktop Small**: 1366px
4. **Desktop Large**: 1920px
5. **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