Introduce DialogContext using React.useId() that auto-wires aria-labelledby
and aria-describedby on DialogContent, with matching ids on DialogTitle and
DialogDescription. Adds role="dialog" and aria-modal="true". All 12+ existing
consumers get proper ARIA labels without any call-site changes.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
User feedback: typing lat/lng by hand is painful — wire a real map
picker.
New component apps/web/components/map/location-picker.tsx:
- Mapbox map with theme-synced style (uses useMapboxStyle).
- Draggable primary marker (custom pin, inner-wrapped so Mapbox's
translate isn't clobbered — follows the hover-fix pattern we shipped
last commit).
- Click anywhere on the map → marker jumps + onChange fires.
- Dragend → onChange fires.
- Search box using Mapbox Geocoding API
(/geocoding/v5/mapbox.places) scoped to country=vn, language=vi,
limit=5, debounced 350ms with AbortController. Clicking a suggestion
centers the map + fills the resolved { address, ward, district,
city } from feature.context.
- Graceful fallback when NEXT_PUBLIC_MAPBOX_TOKEN is missing.
- Inline help "Nhấp vào bản đồ hoặc kéo pin để chọn vị trí".
StepLocation (listing-form-steps.tsx):
- New optional `setValue` + `watch` props. When both are passed the
picker renders and wires lat/lng (+ address/ward/district/city from
geocoder) into the form. Without them, the Step falls back to the
manual-only layout (kept for callers that don't want the picker).
- Dynamic-import the picker with ssr:false so mapbox-gl stays out of
the server bundle.
Wired into:
- /listings/new page — picker enabled on Step 2 (Vị trí).
- /listings/[id]/edit page — picker enabled on the Location tab, with
latitude/longitude now hydrated from property.latitude/longitude.
Test fixture update: listing-form-steps.spec.tsx no longer asserts the
placeholder string — instead verifies the lat/lng inputs still render
when the picker is absent (setValue not supplied), matching the new
opt-in contract.
Verification
- Typecheck clean across touched files.
- 624 / 624 web tests pass.
- Preview smoke: /listings/<id>/edit → Vị trí tab renders map +
draggable pin + search, lat/lng prefilled from listing data.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Schema (prisma/migrations/20260419000000_property_rich_fields)
--------------------------------------------------------------
New Prisma enums:
- Furnishing: FULLY_FURNISHED / BASIC_FURNISHED / UNFURNISHED
- PropertyCondition: NEW / LIKE_NEW / RENOVATED / USED
New Property columns (all optional / default empty, no data loss):
- furnishing, propertyCondition — enums above
- balconyDirection — reuses existing Direction enum
- maintenanceFeeVND BigInt (phí quản lý/tháng)
- parkingSlots Int
- viewType String[] (e.g. ["Sông","Thành phố"])
- petFriendly Boolean (null = unknown)
- suitableFor String[] — admin-chosen persona labels
- whyThisLocation Text — admin narrative
Backend wiring end-to-end
-------------------------
- Create/Update DTOs: @IsEnum/@IsString/@IsNumber/@IsBoolean/@IsArray
validators; maintenanceFeeVND accepted as a numeric string, cast to
BigInt on the way to Prisma. whyThisLocation capped at 2000 chars.
- Introduced a small `PropertyExtras` interface on the create/update
commands so the constructor signature stays readable instead of
ballooning to 30+ positional args. Handlers forward it to the repo.
- Prisma property repository writes all new columns via raw SQL
INSERT/UPDATE and reads them on findById.
- ListingDetailData + findByIdWithProperty expose the 9 new fields
(maintenanceFeeVND serialised as decimal string to avoid BigInt JSON).
Frontend
--------
- listings-api.ts: ListingDetail.property + CreateListingPayload carry
the 9 new fields; Furnishing + PropertyCondition exported as string
unions.
- validations/listings.ts: zod schema extended; FURNISHING_OPTIONS,
PROPERTY_CONDITION_OPTIONS, VIEW_TYPE_OPTIONS label arrays added in
the existing DIRECTIONS style (Vietnamese labels).
- listing-form-steps.tsx StepDetails: new "Nội thất & điều kiện"
fieldset with selects/inputs for each field. viewType + suitableFor
are comma-separated text (same convention as amenities).
petFriendly is a 3-way select (không chọn / Có / Không).
- new/page.tsx + [id]/edit/page.tsx: submit handlers split CSV inputs
into arrays, coerce petFriendly, prune empty selects.
- listing-detail-client.tsx Details card: new rows for furnishing,
propertyCondition, balconyDirection, maintenanceFeeVND (VND
formatted), parkingSlots, viewType (joined · ), petFriendly
(Cho phép / Không cho phép / hide when null).
- PersonaFitCard now takes the listing directly and MERGES admin
suitableFor (rendered first with a "Người đăng chọn" badge in primary
accent) with the derived personas (deduped by label). When
whyThisLocation is non-empty it overrides the derived narrative.
Tests
-----
- listing-detail-client.spec.tsx fixture gains all 9 nullable/empty
defaults.
- listing-form-steps.spec.tsx direction-options duplication fixed.
- pnpm --filter @goodgo/api test --run: 1975/1975 pass.
- pnpm --filter @goodgo/web test --run: 624/624 pass.
Phase B of 4. Next: Phase E AI advisor via Anthropic Opus (URL+key to
be provided by the user).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Enable prefer-inline for import-x/no-duplicates to support barrel
import patterns (value + type imports from same module)
- Inline duplicate type imports in middleware.ts and listing-form-steps.tsx
- Fix import ordering across API test files and MCP controller
- Add next-intl mock to search spec (FilterBar uses useTranslations)
- Exclude [locale] test duplicates from vitest (need proper i18n test setup)
All 801 tests passing (653 API + 119 web + 29 MCP). Zero lint errors.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Multi-step wizard for listing creation (basic info, location, details, pricing, images)
- Listing detail page with image gallery, property specs, seller/agent info, stats
- Listings index page with filters (transaction type, property type) and pagination
- Edit page with tab-based form (read-only until backend PATCH endpoint available)
- Drag & drop image upload component with preview and multi-file support
- Dashboard layout with navigation bar
- New UI primitives: textarea, select, badge, tabs
- Listings API client with typed endpoints matching backend contract
- Zod validation schemas for all form steps
- Status badges with Vietnamese labels for all listing states
- Responsive design across all pages
Co-Authored-By: Paperclip <noreply@paperclip.ing>
