Crie um sistema de login e dashboard em React que se autentica com a API
magnusclub.app. O sistema deve ser funcional, simples e sem muitos estilos
visuais complexos.

REQUISITOS TÉCNICOS:

1. STACK:

   • React 19 + TypeScript
   • Vite como bundler
   • Tailwind CSS para styling (simples, sem temas complexos)
   • shadcn/ui para componentes básicos (Button, Input, Card, Label)
   • React Router para navegação
   • Fetch API nativo (sem axios)
   • localStorage para persistência

2. ESTRUTURA DE PASTAS:
   src/
   ├── pages/
   │ ├── LoginPage.tsx
   │ └── DashboardPage.tsx
   ├── lib/
   │ └── magnus-api.ts
   ├── App.tsx
   └── main.tsx

3. FUNCIONALIDADE - PÁGINA DE LOGIN (LoginPage.tsx):

   a) Campos do formulário:

   • Input para email (type="email")
   • Input para senha (type="password")
   • Botão "Entrar" (desabilitado enquanto carregando)
   • Mostrar loading spinner enquanto processa
   • Mostrar mensagens de erro com toast/alert

   b) Fluxo de login:

   • Usuário digita email + senha
   • Clica "Entrar"
   • Frontend faz POST para https://magnusclub.app/api/login
   • Body: { email, password, brand_slug: "magnus" }
   • Se sucesso: salva em localStorage + redireciona para /dashboard
   • Se erro: mostra mensagem de erro

c) Validação:
- Email não vazio
- Senha não vazia
- Mostrar erro se campos vazios
- Mostrar erro se credenciais inválidas
- Mostrar erro se API retorna resposta inválida

d) Design simples:
- Layout centrado
- Sem imagens ou branding complexo
- Apenas formulário com campos e botão
- Mensagens de erro em vermelho
- Loading state com spinner

4. FUNCIONALIDADE - DASHBOARD (DashboardPage.tsx):

   a) Verificação de autenticação:

   • Se usuário não está em localStorage: redirecionar para /
   • Se usuário está em localStorage: carregar dados
     b) Dados exibidos:
   • Nome do usuário: "Bem-vindo, {user.name}"
   • Saldo: formatado como moeda (BRL)
   • Email do usuário
   • Status da conta
   • ID do usuário
   • Se verificado ou não

   c) Componentes:

   • Card com dados do usuário
   • Botão de logout
   • Botão de voltar (opcional)

   d) Logout:

   • Clica botão "Sair"
   • Remove dados de localStorage
   • Redireciona para /
     e) Design simples:
   • Layout simples com cards
   • Sem animações complexas
   • Sem gráficos
   • Apenas exibição de dados em texto

5. CLIENTE DA API (lib/magnus-api.ts):

   a) Função loginWithMagnus(email, password):

   • Faz fetch POST para https://magnusclub.app/api/login
   • Headers: Content-Type: application/json
   • Body: { email, password, brand_slug: "magnus" }
   • Verifica response.ok
   • Se não ok: lança erro "E-mail ou senha inválidos"
   • Faz response.json()
   • Extrai dados de response.user (IMPORTANTE: dados estão em .user)
   • Valida se response.user.id existe
   • Se não existe: lança erro "Resposta inválida da API"
   • Sanitiza dados (remove sensíveis)
   • Retorna objeto com: id, name, email, balance, currency, status, verified

   b) Função sanitizeApiResponse(data):

   • Retorna APENAS: id, name, email, balance, currency, status, verified
   • Remove TUDO mais: docNumber, lastLoginIp, fingerprint, accountNumbers, wallet

• Balance deve ser string (para precisão)
  • Currency padrão: "BRL"
  • Status padrão: "active"
  • Verified: true se clientVerificationState === "VERIFIED"

c) Função getStoredUser():
- Lê localStorage.getItem("magnus_user")
- Faz JSON.parse()
- Retorna objeto ou null

d) Função logoutUser():
- Remove localStorage.getItem("magnus_user")
- Remove localStorage.getItem("magnus_login_time")
e) Função formatBalance(value, currency):
- Formata valor como moeda
- Usa Intl.NumberFormat
- Locale: "pt-BR"
- Style: "currency"
- Currency: BRL (ou outro)
- Exemplo: "R$ 0,00"

6. ROUTER (App.tsx):

   a) Rotas:

   • "/" → LoginPage
   • "/dashboard" → DashboardPage
   • Qualquer outra → LoginPage

   b) Navegação:

• Usar React Router (createBrowserRouter, RouterProvider)
  - useNavigate() para redirecionar
  - useLocation() para pegar rota atual

7. TIPOS TypeScript:

   interface MagnusUser {
   id: number;
   name: string;
   email: string;
   balance: string;
   currency: string;
   status: string;
   verified: boolean;
   }

8. CREDENCIAIS DE TESTE:

   • Email: Empresahenriqueguth@gmail.com
   • Senha: @Guthera100.
   • Resposta esperada: ID 931917042, nome "Mario guth", saldo 0 BRL

9. IMPORTANTE - ERROS COMUNS A EVITAR:

   ❌ NÃO fazer: const userData = apiData.result.data.json (formato tRPC)
   ✅ FAZER: let userData = apiData; if (apiData.user) userData = apiData.user;

   ❌ NÃO fazer: Acessar apiData.id diretamente
   ✅ FAZER: Acessar apiData.user.id (dados estão em .user)

   ❌ NÃO fazer: Retornar dados sensíveis (CPF, IP, fingerprint)
   ✅ FAZER: Sanitizar e retornar apenas id, name, email, balance, currency, status, verified
   ❌ NÃO fazer: Redirecionar antes de salvar em localStorage
   ✅ FAZER: Salvar em localStorage ANTES de redirecionar

   ❌ NÃO fazer: Usar cookies HTTP-only (frontend estático)
   ✅ FAZER: Usar localStorage

   ❌ NÃO fazer: Não validar response.ok
   ✅ FAZER: Sempre verificar if (!response.ok) throw error

   ❌ NÃO fazer: Não extrair de .user
   ✅ FAZER: Sempre verificar if (apiData.user) userData = apiData.user

   ❌ NÃO fazer: Renderizar dashboard sem verificar localStorage
   ✅ FAZER: useEffect(() => { if (!getStoredUser()) navigate("/"); })

10. FLUXO COMPLETO:

    Usuário digita email
    ↓
    Usuário digita senha
    ↓
    Clica "Entrar"
    ↓
    Frontend faz fetch POST para https://magnusclub.app/api/login
    ↓
    Magnus responde com JSON
    ↓
    Frontend extrai response.user
    ↓
    Frontend sanitiza dados
    ↓
    Frontend salva em localStorage
    ↓
    Frontend redireciona para /dashboard
    ↓
    Dashboard carrega dados de localStorage
    ↓
    Dashboard renderiza dados do usuário
    ↓
    Usuário clica "Sair"
    ↓
    Frontend remove localStorage
    ↓
    Frontend redireciona para /

11. EXEMPLO DE RESPOSTA DO MAGNUS (para referência):

    {
    "success": true,
    "access_token": "...",
    "user": {
    "id": 931917042,
    "name": "Mario guth",
    "email": "empresahenriqueguth@gmail.com",
    "balance": 0,
    "currency": "BRL",
    "status": "NEW",
    "clientVerificationState": "VERIFIED",
    "docNumber": "90633504068", // ← REMOVER
    "lastLoginIp": "45.179.91.55", // ← REMOVER
    "fingerprint": "...", // ← REMOVER
    "accountNumbers": [...], // ← REMOVER
    ...mais campos...
    }
    }

12. RESULTADO ESPERADO:
    ✅ Página de login funcional
    ✅ Login com credenciais reais retorna dados
    ✅ Dashboard exibe dados do usuário
    ✅ Logout limpa dados e redireciona
    ✅ Dados sensíveis NUNCA chegam ao frontend
    ✅ Mensagens de erro claras
    ✅ Loading states funcionais
    ✅ Responsivo em mobile/tablet/desktop
    ✅ Sem erros de console
    ✅ TypeScript sem erros

13. DESIGN - MANTENHA SIMPLES:

    • Sem temas complexos
    • Sem animações
    • Sem gradientes
    • Sem imagens
    • Apenas cores básicas: branco, cinza, preto
    • Fonte padrão (sans-serif)
    • Espaçamento simples
    • Botões básicos
    • Inputs básicos
    • Cards básicos

14. DOCUMENTAÇÃO TÉCNICA COMPLETA:

    Para mais detalhes sobre a implementação, consulte o arquivo
    TECHNICAL_DOCUMENTATION.txt que contém:

    • Arquitetura detalhada

    • Fluxo de autenticação completo

    • Integração com Magnus

    • Estrutura real do JSON

    • Tratamento de erros

    • Exemplos de código

    • Pontos críticos