Frontend
Roteamento
React Router, rotas protegidas e lazy loading
React Router
O app usa createBrowserRouter do React Router com lazy loading via React.lazy.
Estrutura de rotas
/ → redirect → /dashboard
/login
/forgot-password
/reset-password
/auth/callback
/ (ProtectedRoute)
└── AppLayout
├── /dashboard
├── /deals
├── /deals/:id
├── /contacts
├── /contacts/:id
├── /companies
├── /companies/:id
├── /activities
└── /settings (SettingsLayout)
├── /settings/empresa
├── /settings/equipe
├── /settings/pipelines
├── /settings/produtos
├── /settings/tipos-negocio
├── /settings/origens
├── /settings/atividades
├── /settings/motivos-perda
├── /settings/qualificacao
├── /settings/campos
└── /settings/perfilProtectedRoute
Wrapper que verifica autenticacao antes de renderizar rotas protegidas. Redireciona para /login se o usuario nao estiver autenticado.
Lazy loading
Todas as pages sao carregadas com React.lazy e envolvidas em SuspenseWrapper:
const DealsPage = lazy(() => import("@/features/deals/DealsPage"));
// Na rota:
element: (
<SuspenseWrapper>
<DealsPage />
</SuspenseWrapper>
)Constantes de rotas
As URLs sao definidas em src/lib/constants.ts via ROUTES:
import { ROUTES } from "@/lib/constants";
navigate(ROUTES.deals);
navigate(ROUTES.settings.pipelines);