# UX/UI Audit — Área do Cliente (`/area-do-cliente`)

**Data:** 2026-04-22  
**Auditor:** GitHub Copilot (UX/UI Review)  
**Escopo:** Todas as páginas e componentes sob `/area-do-cliente`

---

## 1. Inventário de Telas Atuais

| Rota | Componente | Status |
|------|-----------|--------|
| `/area-do-cliente` | `ClientDashboardPage` | ❌ Remover |
| `/area-do-cliente/favoritos` | `FavoritesPage` | 🔧 Melhorar |
| `/area-do-cliente/comparar` | `ComparisonPage` | 🔧 Melhorar |
| `/area-do-cliente/visitas` | `VisitsPage` | 🔧 Melhorar |
| `/area-do-cliente/boletos` | `BoletosPage` | ❌ Remover |

---

## 2. Problemas Identificados

### 2.1 Dashboard (Painel) — REMOVER
- **Problema:** 3 cards com números (favoritos, visitas, boletos). Não agrega valor real ao usuário — ele precisa clicar de qualquer forma para ver os detalhes.
- **Impacto:** UX: Alto. Adiciona um clique desnecessário para chegar ao conteúdo real.
- **Decisão:** Remover o dashboard. Redirecionar `/area-do-cliente` → `/area-do-cliente/favoritos`.

### 2.2 Boletos — REMOVER
- **Problema:** Funcionalidade de boletos é uma feature de gestão imobiliária avançada raramente usada. A tabela existe mas os dados dependem de inserção manual pelo admin. Gera confusão para usuários sem boletos.
- **Impacto:** UX: Médio. Ruído visual no menu, expectativa não cumprida.
- **Decisão:** Remover a rota, o componente e o item do menu. Manter o backend (não excluir o model/API).

### 2.3 Navegação (Sidebar) — Ícones
- **Problema:** Ícones usam caracteres Unicode/emoji (`⊞`, `♡`, `⇄`, `📅`, `📄`) que rendem de forma inconsistente entre sistemas operacionais e navegadores. Look não-profissional em temas dark/light.
- **Impacto:** Visual: Alto. Inconsistência de rendering cross-platform.
- **Decisão:** Substituir por SVG inline (Heroicons 2.0 outline) para cada item de nav.

### 2.4 FavoritesPage — Cards sem imagem/preço
- **Problema:** Cards de favoritos mostram apenas título e link "Ver detalhes →". O usuário não consegue lembrar qual imóvel é qual sem clicar.
- **Impacto:** UX: Alto. Experiência frustrante para quem tem múltiplos favoritos.
- **Decisão:** Mostrar thumbnail da primeira foto, preço e cidade/bairro no card.

### 2.5 FavoritesPage — Layout de grid muito esparso
- **Problema:** Grid `1 → 2 → 3 colunas` com cards muito altos (h-48 skeleton) para conteúdo mínimo.
- **Decisão:** Cards com imagem real + info resumida, altura proporcional.

### 2.6 VisitsPage — Sem ação do usuário
- **Problema:** O usuário só visualiza visitas. Não há como cancelar, nem há indicação clara de próximos passos.
- **Impacto:** UX: Médio. Usuário precisa entrar em contato por outro canal para cancelar.
- **Decisão:** Adicionar botão "Solicitar cancelamento" para visitas com status `pending`.

### 2.7 VisitsPage — Layout de lista plana
- **Problema:** Cards de visita não têm hierarquia visual clara. Data e status competem com o título.
- **Decisão:** Refatorar card de visita com: título em destaque, data em destaque, status badge alinhado à direita, mensagem como texto secundário colapsável.

### 2.8 ComparisonPage — Empty state sem call-to-action útil
- **Problema:** Empty state tem apenas "Nenhum imóvel selecionado" e link para `/imoveis`. Usuário não sabe como adicionar imóveis à comparação.
- **Decisão:** Empty state explicativo com instrução de como usar a feature (tooltip/hint).

### 2.9 ClientLayout — Sidebar sem perfil editável
- **Problema:** Sidebar mostra avatar + nome + email mas sem link para perfil/configurações.
- **Impacto:** UX: Médio. Usuário não consegue alterar dados cadastrais pela área do cliente.
- **Decisão:** Adicionar link "Minha conta" apontando para nova rota `/area-do-cliente/conta`.

### 2.10 ClientLayout — Botão "Sair" sem ícone próprio
- **Problema:** Usa `→` como ícone de logout. Semântica errada (parece "ir para").
- **Decisão:** Substituir por ícone ArrowRightOnRectangle (Heroicons logout).

### 2.11 Mobile Nav — Scroll horizontal fraco
- **Problema:** Em mobile, a navegação é uma barra horizontal com scroll. Após remover boletos e painel, teremos 3 itens — cabe bem. Mas ainda carece de indicador visual claro de ativo.
- **Decisão:** Melhorar o indicador ativo com underline/pill e alinhar os 3 itens centralizados.

### 2.12 Ausência de página de perfil/conta
- **Problema:** Não existe `/area-do-cliente/conta`. Usuário não pode ver/editar nome, email ou senha.
- **Decisão:** Criar `ProfilePage` com form de atualização de nome e alteração de senha.

---

## 3. Resumo das Decisões

### ❌ Remover
- `ClientDashboardPage` (`/area-do-cliente`) — redirecionar para `/area-do-cliente/favoritos`
- `BoletosPage` (`/area-do-cliente/boletos`) — remover rota, nav item e componente
- Item "Boletos" e item "Painel" do nav

### ✅ Manter (com melhorias)
- `FavoritesPage` — melhorar cards com thumbnail + preço + localização
- `VisitsPage` — adicionar cancelamento + melhorar layout do card
- `ComparisonPage` — melhorar empty state
- `ClientLayout` — trocar ícones por SVG, adicionar link "Minha conta", melhorar logout

### ➕ Criar
- `ProfilePage` (`/area-do-cliente/conta`) — formulário de edição de perfil

---

## 4. Nova Estrutura de Navegação

**Antes (5 itens + Painel):**
```
⊞ Painel
♡ Favoritos
⇄ Comparar
📅 Visitas
📄 Boletos
```

**Depois (4 itens, sem Painel como item separado — é o redirect):**
```
[heart-icon]     Favoritos
[scale-icon]     Comparar
[calendar-icon]  Visitas
[user-icon]      Minha conta
```

---

## 5. Fluxo UX Revisado

```
/area-do-cliente  →  redirect 302  →  /area-do-cliente/favoritos

/area-do-cliente/favoritos
  Cards: thumbnail | título | preço | cidade
  Ação:  [Remover dos favoritos]  [Ver imóvel →]

/area-do-cliente/visitas
  Cards: título imóvel | data | status badge
  Ação:  [Solicitar cancelamento] (só para status=pending)

/area-do-cliente/comparar
  Tabela: até 3 imóveis lado a lado
  Empty state: instrução de como adicionar imóvel à comparação

/area-do-cliente/conta
  Form: Nome | Email (readonly) | Senha atual | Nova senha | Confirmar senha
  Ação: [Salvar alterações]
```

---

## 6. Componentes Afetados

| Arquivo | Ação |
|---------|------|
| `frontend/src/layouts/ClientLayout.tsx` | Refatorar nav (SVG icons, remover Boletos/Painel, adicionar Conta) |
| `frontend/src/pages/client/ClientDashboardPage.tsx` | Deletar ou converter em redirect |
| `frontend/src/pages/client/BoletosPage.tsx` | Deletar |
| `frontend/src/pages/client/FavoritesPage.tsx` | Melhorar cards |
| `frontend/src/pages/client/VisitsPage.tsx` | Melhorar card + adicionar cancelamento |
| `frontend/src/pages/client/ComparisonPage.tsx` | Melhorar empty state |
| `frontend/src/pages/client/ProfilePage.tsx` | Criar (novo) |
| `frontend/src/services/clientArea.ts` | Adicionar `updateProfile`, `changePassword`, `cancelVisit` |
| `frontend/src/App.tsx` | Atualizar rotas (remover boletos, adicionar conta, redirect) |
| `backend/app/routes/client.py` | Adicionar PATCH `/me/profile`, PATCH `/me/password`, PATCH `/me/visits/:id/cancel` |
| `backend/app/schemas/client.py` | Adicionar schemas de update |

---

## 7. Critérios de Aceite

- [ ] `/area-do-cliente` redireciona para `/area-do-cliente/favoritos`
- [ ] "Boletos" não aparece no menu e a rota 404
- [ ] "Painel" não aparece no menu
- [ ] Ícones do menu são SVG Heroicons consistentes em dark e light
- [ ] Card de favorito mostra: imagem (ou placeholder), título, preço, cidade
- [ ] Card de visita mostra: título, data agendada (ou solicitada), status badge
- [ ] Visita com `status=pending` exibe botão "Cancelar" que muda para `cancelled`
- [ ] Empty state do comparar explica como usar a feature
- [ ] `/area-do-cliente/conta` exibe form com nome e troca de senha
- [ ] Form de conta valida: nome obrigatório, senhas com mínimo 8 chars, confirmação igual
- [ ] Mobile nav centraliza os 4 itens sem scroll (ou scroll suave se necessário)
- [ ] Botão "Sair" usa ícone de logout correto