Initial project import

Schemas/09-frontend-base.md

@@ -0,0 +1,75 @@
+# 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.