68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
# 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
|
|
```json
|
|
{
|
|
"items": [...],
|
|
"total": 25,
|
|
"page": 1,
|
|
"per_page": 12,
|
|
"pages": 3
|
|
}
|
|
```
|
|
|
|
### PropertyAdminOut (estendido)
|
|
```json
|
|
{
|
|
"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 }
|
|
]
|
|
}
|
|
```
|