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)
118 lines
4.6 KiB
Markdown
118 lines
4.6 KiB
Markdown
# Implementation Plan: Revisao UX/UI - Area do Cliente
|
|
|
|
**Branch**: `029-ux-area-do-cliente` | **Date**: 2026-04-22 | **Spec**: [spec.md](spec.md)
|
|
**Input**: Feature specification from `specs/029-ux-area-do-cliente/spec.md`
|
|
|
|
## Summary
|
|
|
|
Esta feature simplifica a area do cliente removendo etapas de baixo valor (dashboard e boletos no frontend), melhora a navegacao contextual (menu com 4 itens e iconografia SVG consistente), aumenta a qualidade de leitura de favoritos (thumbnail, preco e localizacao), adiciona a acao de cancelamento de visitas pendentes e cria a pagina Minha Conta com atualizacao de nome e troca de senha.
|
|
|
|
## Technical Context
|
|
|
|
**Language/Version**: Python 3.12 (backend) + TypeScript 5.5 (frontend)
|
|
**Primary Dependencies**: Flask 3.x, SQLAlchemy 2.x, Pydantic v2, bcrypt (backend); React 18, react-router-dom v6, Axios, Tailwind CSS 3.4 (frontend)
|
|
**Storage**: PostgreSQL 16 (sem novas tabelas nesta feature)
|
|
**Testing**: `pytest` para backend; `npm run build` para frontend; checklist manual de UX
|
|
**Target Platform**: SPA web responsiva (desktop/mobile)
|
|
**Project Type**: web app full-stack com foco principal em UX frontend
|
|
**Performance Goals**: navegacao da area do cliente sem etapa intermediaria e atualizacoes sem reload para acoes principais
|
|
**Constraints**: nao alterar schemas do banco; manter auth JWT existente; manter backend de boletos intacto
|
|
**Scale/Scope**: rotas e componentes da area do cliente + 3 endpoints PATCH no backend
|
|
|
|
## Constitution Check
|
|
|
|
| Principio | Status | Observacao |
|
|
|---|---|---|
|
|
| Design-First | PASS | Mudancas focadas em fluxo, hierarquia visual e consistencia de icones |
|
|
| Separation of Concerns | PASS | Regras de dominio no backend e comportamento de tela no frontend |
|
|
| Spec-Driven | PASS | Plano derivado de `spec.md`, `ux-audit.md` e `tasks.md` |
|
|
| Data Integrity | PASS | Sem migrations de schema; update em entidades existentes |
|
|
| Security | PASS | Endpoints novos protegidos por JWT e ownership checks |
|
|
| Simplicity First | PASS | Remove telas redundantes e reduz friccao de navegacao |
|
|
|
|
## Project Structure
|
|
|
|
### Documentation (this feature)
|
|
|
|
```text
|
|
specs/029-ux-area-do-cliente/
|
|
├── plan.md
|
|
├── spec.md
|
|
├── tasks.md
|
|
├── ux-audit.md
|
|
└── checklists/
|
|
```
|
|
|
|
### Source Code (repository root)
|
|
|
|
```text
|
|
backend/
|
|
└── app/
|
|
├── routes/client_area.py
|
|
└── schemas/client_area.py
|
|
|
|
frontend/
|
|
└── src/
|
|
├── App.tsx
|
|
├── layouts/ClientLayout.tsx
|
|
├── contexts/AuthContext.tsx
|
|
├── services/clientArea.ts
|
|
├── types/clientArea.ts
|
|
└── pages/client/
|
|
├── FavoritesPage.tsx
|
|
├── VisitsPage.tsx
|
|
├── ComparisonPage.tsx
|
|
└── ProfilePage.tsx
|
|
```
|
|
|
|
**Structure Decision**: manter estrutura web existente, com mudancas localizadas em rotas/schemas backend e paginas/layouts da area do cliente no frontend.
|
|
|
|
## Implementation Approach
|
|
|
|
### 1. Roteamento e navegacao
|
|
|
|
- Redirecionar index da area do cliente para favoritos.
|
|
- Remover rota e item visual de boletos no frontend.
|
|
- Introduzir rota Minha Conta e manter destaque de item ativo em desktop/mobile.
|
|
|
|
### 2. Favoritos com contexto visual
|
|
|
|
- Enriquecer payload de favoritos no backend com dados de card (`price`, `city`, `neighborhood`, `cover_photo_url`).
|
|
- Atualizar card de favoritos para exibicao direta desses dados com fallback de imagem.
|
|
- Manter remocao sem reload com comportamento otimista.
|
|
|
|
### 3. Visitas com acao de cancelamento
|
|
|
|
- Exibir botao de cancelamento apenas para `status=pending`.
|
|
- Criar endpoint de cancelamento com validacao de ownership e estado atual.
|
|
- Aplicar update otimista no frontend com rollback em erro.
|
|
|
|
### 4. Minha Conta
|
|
|
|
- Criar tela `/area-do-cliente/conta` com formulario de nome e formulario de senha.
|
|
- Criar endpoints `PATCH /me/profile` e `PATCH /me/password`.
|
|
- Expor `updateUser` no `AuthContext` para refletir nome atualizado imediatamente.
|
|
|
|
### 5. Qualidade visual e consistencia
|
|
|
|
- Trocar iconografia por SVG Heroicons no layout do cliente.
|
|
- Melhorar empty states e feedbacks de erro/sucesso nas principais interacoes.
|
|
|
|
## Rollout and Validation
|
|
|
|
### Executavel
|
|
|
|
- Frontend: `npm run build`
|
|
- Backend: `pytest` nos cenarios relevantes de cliente (quando disponiveis)
|
|
|
|
### Manual
|
|
|
|
- Verificar redirecionamento `/area-do-cliente -> /area-do-cliente/favoritos`
|
|
- Verificar ausencia de menu/rota de boletos no frontend
|
|
- Verificar card de favorito com imagem/preco/localizacao
|
|
- Verificar cancelamento de visita pendente e bloqueio para estados nao pendentes
|
|
- Verificar atualizacao de nome e troca de senha em Minha Conta
|
|
|
|
## Complexity Tracking
|
|
|
|
Nenhuma excecao arquitetural requerida para esta feature.
|