221 lines
6.4 KiB
Markdown
221 lines
6.4 KiB
Markdown
# 🎨 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
|