76 lines
5.4 KiB
Markdown
76 lines
5.4 KiB
Markdown
# 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)
|
||
```
|
||
|
||
### 2. Layout base (menu lateral)
|
||
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.
|