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