sass-imobiliaria/.specify/features/008-admin-properties-redesign/plan.md

Plan: Redesign da Listagem de Imóveis (Admin)

Feature: 008-admin-properties-redesign Input: spec.md, DESIGN.md

Arquitetura

Backend

• PropertyAdminOut estendido com photos: list[PhotoOut], city_name, neighborhood_name, code
• GET /api/v1/admin/properties com query params: ?q, ?city_id, ?neighborhood_id, ?page, ?per_page
• GET /api/v1/admin/cities → lista todas as cidades
• GET /api/v1/admin/neighborhoods?city_id= → bairros por cidade

Frontend

• AdminPropertiesPage.tsx reescrita com:
  • FilterBar: <input> busca + <select> cidade + <select> bairro (dependente)
  • PropertyCard: card com carrossel de imagens, badges, dados e ações
  • Pagination: controles prev/next com número de página
  • Debounce de 350ms no input de busca

Design Tokens Utilizados

Elemento	Token Tailwind
Fundo da página	bg-canvas
Cards	bg-surface border border-borderPrimary
Texto principal	text-textPrimary
Texto secundário	text-textSecondary
Texto muted	text-textTertiary
Botão primário	bg-brand hover:bg-accentHover text-white
Input/Select	bg-panel border border-borderPrimary text-textSecondary
Badge status ativo	bg-statusEmerald/10 text-statusEmerald
Badge status inativo	bg-red-500/10 text-red-400

Estrutura de Dados

GET /admin/properties response

{
  "items": [...],
  "total": 25,
  "page": 1,
  "per_page": 12,
  "pages": 3
}

PropertyAdminOut (estendido)

{
  "id": "uuid",
  "title": "Apto 3 dorms",
  "address": "Rua X, 123",
  "price": 450000.00,
  "type": "venda",
  "bedrooms": 3,
  "bathrooms": 2,
  "parking_spots": 1,
  "area_m2": 85,
  "is_active": true,
  "is_featured": false,
  "code": "AP001",
  "city_name": "São Paulo",
  "neighborhood_name": "Vila Madalena",
  "photos": [
    { "url": "https://...", "alt_text": "Sala", "display_order": 0 }
  ]
}