Frontend — Visão Geral

O frontend do Galdix CRM é uma aplicação Next.js 16 com App Router, desenvolvida em TypeScript e React 19, servindo como interface principal para operadores, gestores e administradores do sistema.

Localização

/home/crm/app/frontend/
├── app/                    # App Router do Next.js
│   ├── layout.tsx          # Root layout (Clerk, ThemeProvider, Service Worker)
│   ├── page.tsx            # Redirect para /dashboard
│   ├── (auth)/             # Rotas de autenticação (sign-in, sign-up)
│   ├── dashboard/          # Dashboard principal com KPIs
│   ├── clients/            # Lista e perfil de clientes
│   ├── campaigns/          # Campanhas (lista, criação, detalhes, real-time)
│   ├── whatsapp/           # Templates, configuração WhatsApp
│   ├── segments/           # Segmentos de clientes
│   ├── results/            # Analytics (varejo, canais, qualidade, agenda)
│   ├── rfm/                # Análise RFM e por vendedor
│   ├── email-templates/    # Editor de templates MJML
│   ├── settings/           # Configurações do sistema
│   ├── inbox/              # Caixa de entrada (legada, redireciona ao Chatwoot)
│   ├── admin/              # Painel de administração (super admin)
│   ├── audit/              # Trilha de auditoria
│   └── components/         # Componentes compartilhados
├── hooks/                  # Custom hooks React
├── lib/                    # Utilitários: fetchWithAuth, config, date, pdf, etc.
└── contexts/               # (merged into app/contexts)

Stack

Componente	Tecnologia	Versão
Framework	Next.js	16.0.3
UI	React	19.2.0
Linguagem	TypeScript	5.x
Estilo	Tailwind CSS	3.4.17
Auth	Clerk	5.x
Gráficos	Recharts	3.4.1
Ícones	Lucide React	0.554.0
HTTP	Axios + fetchWithAuth	1.13.2
Email Builder	GrapesJS + MJML	0.22.14
PDF Export	jsPDF + html2canvas	—
Notificações	Sonner (toast)	2.0.7
Datas	date-fns (pt-BR)	4.1.0
Tema	next-themes	0.4.6

Porta e endereço

• Porta interna: 3000
• URL produção: https://crm.galdix.com.br
• URL API: https://apicrm.galdix.com.br (via NEXT_PUBLIC_API_BASE_URL)

Arquitetura de layout

RootLayout (app/layout.tsx)
  ├── ClerkProvider (auth, pt-BR)
  ├── ThemeProvider (dark/light)
  └── LayoutWrapper (app/components/LayoutWrapper.tsx)
       ├── Rotas de auth → sem layout
       ├── Rotas legais → sem layout
       └── Demais rotas:
            RBACProvider
              SidebarProvider
                LayoutShell
                  ├── Sidebar (desktop, colapsável)
                  ├── Mobile Drawer (overlay)
                  ├── MobileHeader (sticky, <lg)
                  └── BottomNav (fixo, <lg)

Autenticação e autorização

Todo o fluxo de auth usa Clerk como Identity Provider:

1. Usuário não autenticado → Clerk redireciona para /sign-in
2. Após login, Clerk gera JWT
3. useStableToken() obtém token sem re-renders desnecessários
4. fetchWithAuth() injeta Authorization: Bearer <token> em todo request
5. useRBAC() expõe hasPermission(permissionId) para controle de visibilidade de UI

Padrões de fetch

// Padrão básico em componentes:
const { stableGetToken, isLoaded, isSignedIn } = useStableToken()

useEffect(() => {
  if (!isLoaded || !isSignedIn) return
  
  async function load() {
    const res = await fetchWithAuth(
      `${API_BASE_URL}/campaigns`,
      stableGetToken,
    )
    const data = await res.json()
    setItems(data)
  }
  
  load()
}, [isLoaded, isSignedIn])  // NUNCA adicionar stableGetToken às deps

Temas

Suporte a dark/light mode via next-themes. O usuário alterna pelo ícone na sidebar. Componentes usam useTheme() para ajustes condicionais (ex: cores de gráficos).

Progressive Web App (PWA)

Service Worker registrado no RootLayout. Intercepta atualizações de chunks Webpack para forçar refresh quando o frontend é re-deployado (evita erro de "stale deploy").

Links rápidos

• Rotas e Páginas — todas as rotas com componentes e funcionalidades
• Componentes — layout, sidebar, email editor
• Hooks e Contextos — hooks customizados e React contexts
• API Client — fetchWithAuth, config, utilitários de data