# 🛠️ Resoluções: Front-end & Conectividade

Este documento apresenta as soluções técnicas para os problemas de latência, fontes e responsividade identificados.

## 1. Conectividade & Performance (API/Backend)

**Problema:** Sincronização lenta e alto custo de desenvolvimento manual.
**Resolução Profissional:**

### A. Implementação do TanStack Query (React Query)
O uso de `axios` direto em serviços causa "Waterfall de Requisições". O React Query deve ser adotado para:
- **Caching Automático:** Evita buscar os mesmos dados ao alternar entre abas do sistema.
- **Optimistic Updates:** Melhora a percepção de velocidade (o UI atualiza antes da resposta do server).

### B. Service Factory via Contratos
Em vez de escrever `boletosService.js` manualmente, use os arquivos JSON (`prafrot-routes.json`) como fonte de verdade:
```javascript
// Exemplo de como usar o apiRouteManager para reduzir boilerplace
export const useFeatureData = (routeKey) => {
  const route = apiRouteManager.getRoute(routeKey);
  return useQuery({
    queryKey: [routeKey],
    queryFn: () => api.get(route.path)
  });
};
```

---

## 2. Guerra das Fontes (Typography System)

**Problema:** Fontes configuradas mas não carregadas.
**Resolução Profissional:**

### A. Carregamento Crítico (index.html)
Adicione o `preconnect` para eliminar a latência de DNS das fontes:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
```

### B. Fallback de Segurança (index.css)
Garantir que o `:root` tenha uma falha segura (system fonts) enquanto a webfont carrega:
```css
:root {
  --font-main: 'Inter', -apple-system, system-ui, sans-serif;
}
```

---

## 3. Responsividade Fluida (War Room Standard)

**Problema:** Uso excessivo de `px` fixos e instabilidade no `radius`.
**Resolução Profissional:**

### A. Substituição de Pixels por Fluid Typography
Em vez de `h-[600px]`, utilize unidades relativas ou containers flexíveis com `min-height`.
- **Regra de Ouro:** Se o valor é > 20px, ele provavelmente deveria ser `clamp()` ou `%`.

### B. Ajuste de Bordas (Radius-Gate)
Substituir `--radius: 1vw` por uma escala que respeite limites físicos:
```css
:root {
  /* Não fica quadrado no mobile, nem redondo demais no desktop */
  --radius: clamp(8px, 1.2vw, 20px); 
}
```

---

## 🚀 Pontos de Melhoria na Organização

1.  **Módulo de Mocks Independente:** Mover todos os mocks para uma pasta `.mocks` na raiz da feature, para que o bundle de produção não carregue dados desnecessários.
2.  **Shared Hooks Layer:** Centralizar lógicas de "Busca de Placa" ou "Validação de CNPJ" em `src/hooks/shared` para evitar duplicação entre Financeiro e Frota.
3.  **Typed Contracts:** Se possível, migrar os arquivos `.json` de rotas para arquivos `.ts` (Typescript) para ganhar auto-complete no VS Code e evitar erros de digitação em caminhos de API.