feat(listings-frontend): add create/edit form, detail page, and listing components
- 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>
This commit is contained in:
Ho Ngoc Hai
249
apps/web/components/listings/listing-form-steps.tsx
Normal file
249
apps/web/components/listings/listing-form-steps.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
'use client';
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import {
|
||||
TRANSACTION_TYPES,
|
||||
PROPERTY_TYPES,
|
||||
DIRECTIONS,
|
||||
} from '@/lib/validations/listings';
|
||||
import type { UseFormRegister, FieldErrors } from 'react-hook-form';
|
||||
import type { CreateListingFormData } from '@/lib/validations/listings';
|
||||
|
||||
interface StepProps {
|
||||
register: UseFormRegister<CreateListingFormData>;
|
||||
errors: FieldErrors<CreateListingFormData>;
|
||||
}
|
||||
|
||||
function FieldError({ message }: { message?: string }) {
|
||||
if (!message) return null;
|
||||
return <p className="mt-1 text-xs text-destructive">{message}</p>;
|
||||
}
|
||||
|
||||
// ─── Step 1: Basic Info ──────────────────────────────────
|
||||
|
||||
export function StepBasicInfo({ register, errors }: StepProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Thông tin cơ bản</h3>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label htmlFor="transactionType">Loại giao dịch *</Label>
|
||||
<Select id="transactionType" {...register('transactionType')}>
|
||||
<option value="">-- Chọn --</option>
|
||||
{TRANSACTION_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<FieldError message={errors.transactionType?.message} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="propertyType">Loại bất động sản *</Label>
|
||||
<Select id="propertyType" {...register('propertyType')}>
|
||||
<option value="">-- Chọn --</option>
|
||||
{PROPERTY_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<FieldError message={errors.propertyType?.message} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="title">Tiêu đề tin đăng *</Label>
|
||||
<Input id="title" placeholder="VD: Bán căn hộ 2PN tại Vinhomes Central Park" {...register('title')} />
|
||||
<FieldError message={errors.title?.message} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">Mô tả chi tiết *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
rows={5}
|
||||
placeholder="Mô tả chi tiết về bất động sản..."
|
||||
{...register('description')}
|
||||
/>
|
||||
<FieldError message={errors.description?.message} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Step 2: Location ────────────────────────────────────
|
||||
|
||||
export function StepLocation({ register, errors }: StepProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Vị trí</h3>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="address">Địa chỉ *</Label>
|
||||
<Input id="address" placeholder="Số nhà, tên đường" {...register('address')} />
|
||||
<FieldError message={errors.address?.message} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<Label htmlFor="ward">Phường/Xã *</Label>
|
||||
<Input id="ward" placeholder="Phường/Xã" {...register('ward')} />
|
||||
<FieldError message={errors.ward?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="district">Quận/Huyện *</Label>
|
||||
<Input id="district" placeholder="Quận/Huyện" {...register('district')} />
|
||||
<FieldError message={errors.district?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="city">Tỉnh/Thành phố *</Label>
|
||||
<Input id="city" placeholder="Tỉnh/Thành phố" {...register('city')} />
|
||||
<FieldError message={errors.city?.message} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label htmlFor="latitude">Vĩ độ</Label>
|
||||
<Input
|
||||
id="latitude"
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="VD: 10.7769"
|
||||
{...register('latitude')}
|
||||
/>
|
||||
<FieldError message={errors.latitude?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="longitude">Kinh độ</Label>
|
||||
<Input
|
||||
id="longitude"
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="VD: 106.7009"
|
||||
{...register('longitude')}
|
||||
/>
|
||||
<FieldError message={errors.longitude?.message} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
|
||||
Bản đồ chọn vị trí sẽ được tích hợp trong phiên bản tiếp theo
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Step 3: Details ─────────────────────────────────────
|
||||
|
||||
export function StepDetails({ register, errors }: StepProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Thông số chi tiết</h3>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
|
||||
<div>
|
||||
<Label htmlFor="areaM2">Diện tích (m²) *</Label>
|
||||
<Input id="areaM2" type="number" step="0.1" placeholder="VD: 75" {...register('areaM2')} />
|
||||
<FieldError message={errors.areaM2?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="usableAreaM2">Diện tích sử dụng (m²)</Label>
|
||||
<Input id="usableAreaM2" type="number" step="0.1" {...register('usableAreaM2')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="bedrooms">Phòng ngủ</Label>
|
||||
<Input id="bedrooms" type="number" min="0" {...register('bedrooms')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="bathrooms">Phòng tắm</Label>
|
||||
<Input id="bathrooms" type="number" min="0" {...register('bathrooms')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="floors">Số tầng</Label>
|
||||
<Input id="floors" type="number" min="0" {...register('floors')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="floor">Tầng số</Label>
|
||||
<Input id="floor" type="number" min="0" {...register('floor')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="totalFloors">Tổng số tầng tòa nhà</Label>
|
||||
<Input id="totalFloors" type="number" min="0" {...register('totalFloors')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="direction">Hướng nhà</Label>
|
||||
<Select id="direction" {...register('direction')}>
|
||||
<option value="">-- Không chọn --</option>
|
||||
{DIRECTIONS.map((d) => (
|
||||
<option key={d.value} value={d.value}>
|
||||
{d.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="yearBuilt">Năm xây dựng</Label>
|
||||
<Input id="yearBuilt" type="number" placeholder="VD: 2020" {...register('yearBuilt')} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="legalStatus">Pháp lý</Label>
|
||||
<Input id="legalStatus" placeholder="VD: Sổ hồng, sổ đỏ..." {...register('legalStatus')} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="projectName">Tên dự án</Label>
|
||||
<Input id="projectName" placeholder="VD: Vinhomes Central Park" {...register('projectName')} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="amenities">Tiện ích (cách nhau bởi dấu phẩy)</Label>
|
||||
<Input id="amenities" placeholder="VD: Hồ bơi, Gym, Công viên" {...register('amenities')} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Step 4: Pricing ─────────────────────────────────────
|
||||
|
||||
export function StepPricing({ register, errors }: StepProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Giá & Hoa hồng</h3>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="priceVND">Giá bán (VNĐ) *</Label>
|
||||
<Input id="priceVND" placeholder="VD: 5000000000" {...register('priceVND')} />
|
||||
<FieldError message={errors.priceVND?.message} />
|
||||
<p className="mt-1 text-xs text-muted-foreground">Nhập số không có dấu chấm hoặc dấu phẩy</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label htmlFor="rentPriceMonthly">Giá thuê/tháng (VNĐ)</Label>
|
||||
<Input id="rentPriceMonthly" placeholder="Chỉ áp dụng cho thuê" {...register('rentPriceMonthly')} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="commissionPct">Hoa hồng (%)</Label>
|
||||
<Input
|
||||
id="commissionPct"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="VD: 2.5"
|
||||
{...register('commissionPct')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user