207a2013f3
- 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>
100 lines
4.1 KiB
TypeScript
100 lines
4.1 KiB
TypeScript
import { z } from 'zod';
|
|
|
|
export const TRANSACTION_TYPES = [
|
|
{ value: 'SALE', label: 'Bán' },
|
|
{ value: 'RENT', label: 'Cho thuê' },
|
|
] as const;
|
|
|
|
export const PROPERTY_TYPES = [
|
|
{ value: 'APARTMENT', label: 'Căn hộ' },
|
|
{ value: 'HOUSE', label: 'Nhà riêng' },
|
|
{ value: 'VILLA', label: 'Biệt thự' },
|
|
{ value: 'LAND', label: 'Đất nền' },
|
|
{ value: 'OFFICE', label: 'Văn phòng' },
|
|
{ value: 'SHOPHOUSE', label: 'Shophouse' },
|
|
] as const;
|
|
|
|
export const DIRECTIONS = [
|
|
{ value: 'NORTH', label: 'Bắc' },
|
|
{ value: 'SOUTH', label: 'Nam' },
|
|
{ value: 'EAST', label: 'Đông' },
|
|
{ value: 'WEST', label: 'Tây' },
|
|
{ value: 'NORTHEAST', label: 'Đông Bắc' },
|
|
{ value: 'NORTHWEST', label: 'Tây Bắc' },
|
|
{ value: 'SOUTHEAST', label: 'Đông Nam' },
|
|
{ value: 'SOUTHWEST', label: 'Tây Nam' },
|
|
] as const;
|
|
|
|
export const LISTING_STATUSES = {
|
|
DRAFT: { label: 'Nháp', variant: 'secondary' as const },
|
|
PENDING_REVIEW: { label: 'Chờ duyệt', variant: 'warning' as const },
|
|
ACTIVE: { label: 'Đang bán', variant: 'success' as const },
|
|
RESERVED: { label: 'Đã đặt cọc', variant: 'info' as const },
|
|
SOLD: { label: 'Đã bán', variant: 'default' as const },
|
|
RENTED: { label: 'Đã cho thuê', variant: 'default' as const },
|
|
EXPIRED: { label: 'Hết hạn', variant: 'destructive' as const },
|
|
REJECTED: { label: 'Bị từ chối', variant: 'destructive' as const },
|
|
};
|
|
|
|
// ─── Step 1: Basic Info ──────────────────────────────────
|
|
|
|
export const listingBasicSchema = z.object({
|
|
transactionType: z.enum(['SALE', 'RENT'], {
|
|
message: 'Vui lòng chọn loại giao dịch',
|
|
}),
|
|
propertyType: z.enum(['APARTMENT', 'HOUSE', 'VILLA', 'LAND', 'OFFICE', 'SHOPHOUSE'], {
|
|
message: 'Vui lòng chọn loại bất động sản',
|
|
}),
|
|
title: z.string().min(5, 'Tiêu đề tối thiểu 5 ký tự'),
|
|
description: z.string().min(10, 'Mô tả tối thiểu 10 ký tự'),
|
|
});
|
|
|
|
// ─── Step 2: Location ────────────────────────────────────
|
|
|
|
export const listingLocationSchema = z.object({
|
|
address: z.string().min(1, 'Vui lòng nhập địa chỉ'),
|
|
ward: z.string().min(1, 'Vui lòng nhập phường/xã'),
|
|
district: z.string().min(1, 'Vui lòng nhập quận/huyện'),
|
|
city: z.string().min(1, 'Vui lòng nhập tỉnh/thành phố'),
|
|
latitude: z.string().optional(),
|
|
longitude: z.string().optional(),
|
|
});
|
|
|
|
// ─── Step 3: Details ─────────────────────────────────────
|
|
|
|
export const listingDetailsSchema = z.object({
|
|
areaM2: z.string().min(1, 'Diện tích tối thiểu 1 m²'),
|
|
usableAreaM2: z.string().optional(),
|
|
bedrooms: z.string().optional(),
|
|
bathrooms: z.string().optional(),
|
|
floors: z.string().optional(),
|
|
floor: z.string().optional(),
|
|
totalFloors: z.string().optional(),
|
|
direction: z.string().optional(),
|
|
yearBuilt: z.string().optional(),
|
|
legalStatus: z.string().optional(),
|
|
amenities: z.string().optional(),
|
|
projectName: z.string().optional(),
|
|
});
|
|
|
|
// ─── Step 4: Pricing ─────────────────────────────────────
|
|
|
|
export const listingPricingSchema = z.object({
|
|
priceVND: z.string().min(1, 'Vui lòng nhập giá'),
|
|
rentPriceMonthly: z.string().optional(),
|
|
commissionPct: z.string().optional(),
|
|
});
|
|
|
|
// ─── Full Schema ─────────────────────────────────────────
|
|
|
|
export const createListingSchema = listingBasicSchema
|
|
.merge(listingLocationSchema)
|
|
.merge(listingDetailsSchema)
|
|
.merge(listingPricingSchema);
|
|
|
|
export type ListingBasicData = z.infer<typeof listingBasicSchema>;
|
|
export type ListingLocationData = z.infer<typeof listingLocationSchema>;
|
|
export type ListingDetailsData = z.infer<typeof listingDetailsSchema>;
|
|
export type ListingPricingData = z.infer<typeof listingPricingSchema>;
|
|
export type CreateListingFormData = z.infer<typeof createListingSchema>;
|