captacao-web

Frontend (Next.js) do sistema de Captação Inteligente da Valetrade. Fala com o backend real (captacao-api, repositório separado) por HTTP — nunca acessa banco de dado direto, só o Supabase Auth para login/logout.

Documentação completa: docs/ARCHITECTURE.md.

Stack

Next.js 16 (App Router, Turbopack), React 19, Tailwind v4, shadcn (@base-ui/react), @supabase/supabase-js (só autenticação), Vitest + Testing Library.

Pré-requisitos

• Node.js 18+
• Uma instância do captacao-api rodando (local ou remota) e um projeto Supabase (mesmo usado pelo backend, para login)

Configuração

npm install
cp .env.example .env.local

Preencha o .env.local:

Variável	De onde vem	Uso
NEXT_PUBLIC_SUPABASE_URL	Supabase → Settings → API → Project URL	Só o SDK de login
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase → Settings → API → anon public key	Só o SDK de login (não é segredo)
NEXT_PUBLIC_API_URL	URL do captacao-api (local: http://localhost:3000, ou a porta que ele estiver usando)	Toda chamada de dado de negócio

Execução local

npm run dev

Abre em http://localhost:3000 (ou a próxima porta livre, se a 3000 já estiver ocupada pelo backend — nesse caso ajuste NEXT_PUBLIC_API_URL de acordo).

Testes

npm test

Lint

npm run lint

Estrutura principal

src/
  app/
    login/           tela de login
    (authed)/         rotas autenticadas (carteira, clientes, captações, histórico, dashboard)
  components/
    app-shell.tsx     sidebar, navegação, tema
    row-actions.tsx   par de ícones editar/excluir, padrão em toda tabela
  lib/
    api.ts            cliente HTTP pro captacao-api
    supabase.ts        SDK do Supabase (só auth)
    mock-mode.ts / mock-backend.ts   modo demo, ver abaixo

Autenticação

Login via Supabase Auth SDK, direto do navegador — a sessão fica em localStorage. Toda chamada de dado de negócio (lib/api.ts) injeta o JWT dessa sessão no header Authorization; o backend valida. Sem sessão válida, a chamada à API retorna 401 e a tela redireciona pro login.

Modo demo

Existe um modo de demonstração (link "Ver demonstração" na tela de login) que navega o app inteiro sem nenhum backend real — todas as chamadas são respondidas por um backend falso em memória (lib/mock-backend.ts, dados fixos em lib/mock-data.ts). Nada digitado nesse modo é salvo de verdade. Existe pra permitir mostrar/testar a interface sem depender de banco de dados ou backend no ar. Detalhe completo em docs/ARCHITECTURE.md.

Documentação relacionada

Arquitetura cruzando frontend + backend (fluxo completo, decisões da migração em si) fica no repositório do backend: ../captacao-api/migration-plan/ (histórico) e ../captacao-api/docs/ARCHITECTURE.md (visão viva do sistema todo).