Frontend

Arquitectura

SPA en React 19 con TypeScript. La aplicación se monta en frontend/src/main.tsx.

Estado global

• Zustand para auth, permisos y UI.
• TanStack Query para datos del servidor.
• Sin useState para datos remotos.

Data fetching

QueryClient configurado en frontend/src/main.tsx:15:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: true,
      refetchOnMount: true,
      refetchOnReconnect: true,
      staleTime: 5_000,
      gcTime: 60_000,
      persister: undefined,
    },
  },
});

Hooks

Cada dominio tiene su hook en frontend/src/hooks/:

• useBudgets.ts
• useBudgetItems.ts
• useCertifications.ts
• useProjects.ts
• …

Las mutaciones invalidan queries en onSuccess:

onSuccess: () => {
  qc.invalidateQueries({ queryKey: [KEY, budgetId] });
},

Routing

React Router 7 en frontend/src/App.tsx. Las rutas se protegen con PermissionGuard:

<Route path="budgets" element={<PermissionGuard permission="budgets:leer"><BudgetsPage /></PermissionGuard>} />

Cliente HTTP

Axios configurado en frontend/src/api/client.ts:

• Adjunta token JWT en cada request.
• Refresca token en 401.
• Redirige a /login si falla el refresh.

UI

Ant Design 5 + ProComponents. Tema compacto en frontend/src/styles/theme.ts.

Menú

Configuración del menú lateral en frontend/src/layouts/menuConfig.tsx.

Tests

Véase Testing.