sass-imobiliaria/specs/029-ux-area-do-cliente/plan.md

Implementation Plan: Revisao UX/UI - Area do Cliente

Branch: 029-ux-area-do-cliente | Date: 2026-04-22 | Spec: 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)

specs/029-ux-area-do-cliente/
├── plan.md
├── spec.md
├── tasks.md
├── ux-audit.md
└── checklists/

Source Code (repository root)

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.