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

2.5 KiB

Feature Specification: Redesign da Listagem de Imóveis (Admin)

Feature Branch: 008-admin-properties-redesign Created: 2026-04-14 Status: In Progress

Contexto

A página de listagem de imóveis do admin está com design defasado (tabela simples, sem visual system). Esta feature moderniza a interface seguindo o Design System (DESIGN.md): cards com carrossel de imagens, barra de filtros numa linha (busca por nome, filtro de cidade, filtro de bairro) e paginação.

User Stories

US1 — Admin filtra e busca imóveis (P1)

Given admin na página /admin/properties, When digita no campo de busca ou seleciona cidade/bairro, Then a lista atualiza em tempo real (debounce) sem reload.

Acceptance Scenarios:

  1. Given lista com 30 imóveis, When digita "Apto", Then lista mostra apenas imóveis com "Apto" no título.
  2. Given filtro com cidade selecionada, When seleciona bairro do dropdown dependente, Then lista filtra por cidade+bairro.
  3. Given busca ativa, When limpa input, Then lista volta a mostrar todos.

US2 — Admin navega com paginação (P1)

Given admin com mais de 12 imóveis, When a página carrega, Then exibe no máximo 12 cards e controles de paginação.

Acceptance Scenarios:

  1. Given 25 imóveis, When página 1 carrega, Then exibe 12 cards e botão "Próxima".
  2. Given página 2 ativa, When clica "Anterior", Then volta para página 1.
  3. Given filtros ativos, When muda para próxima página, Then paginação respeita os filtros.

US3 — Admin visualiza cards modernos com carrossel (P2)

Given imóvel com múltiplas fotos, When o card é renderizado, Then exibe carrossel com navegação por setas e indicador de posição.

Acceptance Scenarios:

  1. Given imóvel com 3 fotos, When card renderiza, Then foto 1 é exibida com setas prev/next.
  2. Given seta "next" clicada, When última foto ativa, Then volta para a primeira (loop).
  3. Given imóvel sem fotos, When card renderiza, Then exibe placeholder com ícone de imagem.

Acceptance Criteria Gerais

  • Design 100% fiel ao DESIGN.md (tokens de cor, tipografia, bordas)
  • Filtros na mesma linha horizontal (busca + cidade + bairro)
  • Cards em grid: 3 colunas (lg), 2 (md), 1 (sm)
  • Carrossel de imagens com loop, setas e contador "1/N"
  • Paginação com previous/next e indicador de página atual
  • Backend retorna fotos e metadados de cidade/bairro no payload
  • Sem regressões nas funcionalidades de criar/editar/remover