# 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.