3.0 KiB

Raw Permalink Blame History

🛠️ 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:

// 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:

<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:

: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:

:root {
  /* Não fica quadrado no mobile, nem redondo demais no desktop */
  --radius: clamp(8px, 1.2vw, 20px); 
}

🚀 Pontos de Melhoria na Organização

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.
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.
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.

3.0 KiB Raw Permalink Blame History