Prompt 09 — Frontend base: layout, menus, autenticação e telas principais

Contexto

Prompts 01–08 concluídos: toda a API funcionando (master, escritório, financeiro, avisos). Leia 10-tracker-progresso.md antes de começar.

Este prompt implementa o frontend estático (HTML/CSS/JS puro, sem build step) descrito na arquitetura v3.0 — servido pelo mesmo HttpServer Java via StaticFileHandler (Prompt 01).

Objetivo

Layout base com menu lateral (Master e Cliente), tela de login única (detecta se é master ou funcionário pelo formulário escolhido), e as telas principais consumindo a API via fetch().

Especificação

1. Estrutura de arquivos

src/main/webapp/
├── index.html            → redireciona pra /login.html se não autenticado
├── login.html            → formulário único com abas "Master" / "Escritório"
├── css/
│   └── app.css            (layout base: sidebar + conteúdo, sem framework CSS)
├── js/
│   ├── api.js              (wrapper de fetch: injeta Authorization: Bearer <token do localStorage>,
│                             trata 401 redirecionando pro login, trata 403 pendencia_financeira
│                             mostrando um banner de aviso)
│   ├── auth.js              (login, logout, leitura do token)
│   └── util.js              (formatação de data, moeda em centavos → R$, toasts de sucesso/erro)
├── master/
│   ├── clientes.html + clientes.js
│   ├── planos.html + planos.js
│   ├── financeiro.html + financeiro.js
│   └── configuracoes.html + configuracoes.js
└── cliente/
    ├── condominios.html + condominios.js        (lista + detalhe agregado do Prompt 06)
    ├── condominio-detalhe.html + condominio-detalhe.js
    │      (abas: Contatos / Espaços comuns / Assembleias / Documentos / Avisos)
    ├── financeiro.html + financeiro.js            (mostra QR Code do PIX, faz polling de status)
    └── configuracoes.html + configuracoes.js       (conectar WhatsApp, mostra QR Code da Evolution)

Reproduzir exatamente a estrutura definida no documento de arquitetura (seção "Dashboard"):

MASTER: Clientes | Planos | Financeiro | Configurações
CLIENTE: Cadastro Condomínio | Financeiro | Configurações

Sidebar fixa à esquerda, com o nome da empresa/usuário logado no topo e botão de logout.
Indicar visualmente o item de menu ativo.
Responsivo o suficiente pra não quebrar em uma tela de notebook comum (não precisa ser mobile-first).

3. Autenticação no frontend

login.html: duas abas. Aba "Master" só pede senha, chama POST /api/master/login. Aba "Escritório" pede e-mail+senha, chama POST /api/auth/login.
Token salvo em localStorage (master_token ou funcionario_token, com o escopo junto pra saber pra qual sidebar redirecionar).
Todas as páginas verificam token válido no carregamento; se ausente/expirado, redireciona pro login.

4. Telas — nível de detalhe esperado

Cada tela deve, no mínimo:

Listar os dados via GET, em tabela simples.
Ter um formulário (modal ou seção inline) para criar/editar, chamando POST/PUT.
Mostrar mensagens de erro da API de forma legível (não só "erro 500").
condominio-detalhe.html: a tela mais rica — mostra os dados do condomínio, e nas abas permite cadastrar contato (com seletor de tipo sindico/subsindico/conselheiro), listar/cadastrar espaços comuns, listar/cadastrar assembleias, fazer upload de documento (<input type="file">), e criar um aviso selecionando destinatários (checkboxes dos contatos + funcionários vinculados) e documentos já cadastrados pra anexar.
cliente/financeiro.html: mostra status do período atual; se pendente, botão "Gerar cobrança PIX" que chama a API e renderiza o QR Code (qr_code_base64 como <img src="data:image/png;base64,...">) + o código copia-e-cola em um campo com botão "Copiar"; faz polling a cada 5s em GET /api/financeiro/pagamentos/{id} até status mudar pra 'pago'.
cliente/configuracoes.html: botão "Conectar WhatsApp" que chama a API e mostra o QR Code da Evolution pra escanear; mostra o status atual (pendente/aprovada/rejeitada).

5. Erro de pendência financeira

Se qualquer chamada de API (fora /api/financeiro/**) retornar 403 com erro: "pendencia_financeira", api.js deve interceptar e mostrar um banner fixo no topo: "Seu acesso está bloqueado por pendência de pagamento — regularize em Financeiro." com link direto pra cliente/financeiro.html, sem deixar a tela quebrada.

Critérios de aceite

Login como master e como funcionário funcionam, cada um caindo na sidebar correta.
Fluxo completo pela UI: criar condomínio → cadastrar síndico → cadastrar espaço comum → criar assembleia → subir documento → criar aviso vinculando o documento e selecionando o síndico como destinatário.
Tela de financeiro do escritório gera e exibe QR Code real (integrado com o Prompt 07).
Tela de configurações do escritório exibe QR Code da Evolution (integrado com o Prompt 08).
Banner de pendência financeira aparece corretamente quando a empresa está bloqueada, sem quebrar a navegação.
Nenhuma tela depende de build step (webpack/vite/npm) — abre direto servido pelo HttpServer Java.

Ao concluir

Atualizar 10-tracker-progresso.md: Prompt 09 concluído, data, resumo. Confirmar Prompts 01–08 seguem marcados.

5.4 KiB Raw Permalink Blame History Unescape Escape