cf5603243c
- feat(025): favoritos locais com FavoritesContext, HeartButton, PublicFavoritesPage
- feat(026): central de contatos admin (leads/contatos unificados)
- feat(027): configuração da página de contato via admin
- feat(028): trabalhe conosco - candidaturas com upload e admin
- feat(029): UX área do cliente - visitas, comparação, perfil
- feat(030): navbar UX - menu mobile, ThemeToggle, useFavorites
- feat(031): hero light/dark - imagens separadas por tema, upload, preview, seed
- feat(032): performance homepage - Promise.all parallel fetches, sessionStorage cache,
preload hero image, loading=lazy nos cards, useInView hook, will-change carrossel,
keyframes em index.css, AgentsCarousel e HomeScrollScene via props
- fix: light mode HomeScrollScene - gradiente, cores de texto, scroll hint
migrations: g1h2i3j4k5l6 (source em leads), h1i2j3k4l5m6 (contact_config),
i1j2k3l4m5n6 (job_applications), j2k3l4m5n6o7 (hero theme images)
173 lines
8 KiB
Markdown
173 lines
8 KiB
Markdown
# 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
|