Skip to main content

Módulo 15: Portal do Cliente — UI

Status: Rascunho Inicial Regras de negócio: ver regras-negocio/15_portal_cliente.md Domínio: ver dominio/cliente.md

1. Diretriz de Design: Responsivo e Mobile-First​

O Portal do Cliente é desenvolvido sob o conceito de PWA (Progressive Web App), o que exige foco total em visualização móvel (smartphones) e design limpo.

  • Tema Dinâmico (CSS Variables):
    • O portal consome as variáveis de design tokens informadas pela API do tenant.
    • Exemplo de aplicação em CSS puro: 
      :root {
        --primary-color: var(--tenant-primary-color, #1a73e8);
        --secondary-color: var(--tenant-secondary-color, #0f9d58);
        --border-radius: var(--tenant-radius, 8px);
      }

2. Componentes e Telas do Portal​

2.1 Tela de Autenticação (Login & Acesso)​

  • Login Simples:
    • Campo numérico para CPF/CNPJ (máscara automática).
    • Campo de senha com alternância de visibilidade (ícone de olho).
    • Botão de ação principal: "Entrar".
  • Primeiro Acesso / Esqueci Senha (OTP):
    • Link: "Esqueceu sua senha? Clique aqui".
    • Redireciona para tela de inserção de CPF. Se válido, exibe contador regressivo de 60 segundos e envia código de 6 dígitos via WhatsApp.
    • Input dividido em 6 caixas de texto individuais para inserção do código OTP.

2.2 Tela Principal (Home do Associado)​

  • Cabeçalho: Exibe a logo do Tenant (White-label) e saudação ao associado.
  • Botão de Emergência (Assistência 24h):
    • Botão destacado no topo, na cor vermelha primária ou com destaque visual forte.
    • Texto: "📞 Ligar para Assistência 24h".
    • Ao clicar, exibe janela pop-up confirmando a ligação ou abrindo o canal do WhatsApp direto.
  • Lista de Veículos:
    • Carrossel horizontal ou lista vertical de cards.
    • Cada card exibe a miniatura ilustrativa do tipo do veículo (Carro, Moto, Caminhão), placa e status (ATIVO, INADIMPLENTE, SUSPENSO).

2.3 Detalhe do Veículo & Cartão Virtual​

  • Cartão de Cobertura:
    • Card estilizado que imita um documento físico contendo: Nome do Titular, Placa, Modelo do Veículo, Vigência do Contrato e Número do Contrato.
    • Botão: "Salvar Cartão (PDF)".
  • Resumo de Coberturas:
    • Lista de itens do plano em formato de tópicos com ícones (ex: 👥 Proteção contra terceiros: R$ 50.000 · 🛞 Reboque: 1000km · 🔨 Assistência a vidros: Incluso).

2.4 Aba Financeira​

  • Visão Principal:
    • Listagem vertical de parcelas.
    • Faturas pagas exibem badge verde "Paga".
    • Faturas pendentes exibem badge cinza ou amarelo com as ações: Copiar Linha Digitável e Copiar Chave PIX em botões rápidos, além do botão de download de PDF.
  • Tratamento de Indisponibilidade do ERP:
    • Se a API do ERP retornar erro de conexão, a listagem de faturas é substituída por um card de erro suave:

      ⚠️ Informação O carregamento das faturas está indisponível no momento. Nossa equipe já está trabalhando para reestabelecer a conexão. Suas coberturas e assistências permanecem ativas normalmente.

2.5 Formulário de Aviso de Sinistro​

  • Etapas do formulário (Wizard):
    1. O que aconteceu: Dropdown de tipo de sinistro (Colisão, Furto/Roubo, Incêndio, Danos da Natureza) + Campo de descrição livre.
    2. Quando e Onde: Data, hora e campo de geolocalização por mapa ou inserção manual de endereço.
    3. Fotos e Documentos: Drag & drop para anexar foto do Boletim de Ocorrência (B.O.) e fotos de danos do veículo.
  • Conclusão: Tela de sucesso mostrando o número do protocolo gerado para acompanhamento.