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
@@ -53,4 +53,7 @@ export const apiClient = {
|
||||
|
||||
authPost: <T>(endpoint: string, token: string, body?: unknown) =>
|
||||
request<T>(endpoint, { method: 'POST', body, headers: authHeaders(token) }),
|
||||
|
||||
authPatch: <T>(endpoint: string, token: string, body?: unknown) =>
|
||||
request<T>(endpoint, { method: 'PATCH', body, headers: authHeaders(token) }),
|
||||
};
|
||||
|
||||
179
apps/web/lib/listings-api.ts
Normal file
179
apps/web/lib/listings-api.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
import { apiClient } from './api-client';
|
||||
|
||||
// ─── Enums ───────────────────────────────────────────────
|
||||
|
||||
export type TransactionType = 'SALE' | 'RENT';
|
||||
export type PropertyType = 'APARTMENT' | 'HOUSE' | 'VILLA' | 'LAND' | 'OFFICE' | 'SHOPHOUSE';
|
||||
export type ListingStatus =
|
||||
| 'DRAFT'
|
||||
| 'PENDING_REVIEW'
|
||||
| 'ACTIVE'
|
||||
| 'RESERVED'
|
||||
| 'SOLD'
|
||||
| 'RENTED'
|
||||
| 'EXPIRED'
|
||||
| 'REJECTED';
|
||||
export type Direction =
|
||||
| 'NORTH'
|
||||
| 'SOUTH'
|
||||
| 'EAST'
|
||||
| 'WEST'
|
||||
| 'NORTHEAST'
|
||||
| 'NORTHWEST'
|
||||
| 'SOUTHEAST'
|
||||
| 'SOUTHWEST';
|
||||
|
||||
// ─── Interfaces ──────────────────────────────────────────
|
||||
|
||||
export interface PropertyMedia {
|
||||
id: string;
|
||||
url: string;
|
||||
type: 'image' | 'video';
|
||||
order: number;
|
||||
caption: string | null;
|
||||
}
|
||||
|
||||
export interface ListingDetail {
|
||||
id: string;
|
||||
status: ListingStatus;
|
||||
transactionType: TransactionType;
|
||||
priceVND: string;
|
||||
pricePerM2: number | null;
|
||||
rentPriceMonthly: string | null;
|
||||
commissionPct: number | null;
|
||||
viewCount: number;
|
||||
saveCount: number;
|
||||
inquiryCount: number;
|
||||
publishedAt: string | null;
|
||||
createdAt: string;
|
||||
property: {
|
||||
id: string;
|
||||
propertyType: PropertyType;
|
||||
title: string;
|
||||
description: string;
|
||||
address: string;
|
||||
ward: string;
|
||||
district: string;
|
||||
city: string;
|
||||
areaM2: number;
|
||||
bedrooms: number | null;
|
||||
bathrooms: number | null;
|
||||
floors: number | null;
|
||||
direction: Direction | null;
|
||||
yearBuilt: number | null;
|
||||
legalStatus: string | null;
|
||||
amenities: string[] | null;
|
||||
projectName: string | null;
|
||||
media: PropertyMedia[];
|
||||
};
|
||||
seller: {
|
||||
id: string;
|
||||
fullName: string;
|
||||
phone: string;
|
||||
};
|
||||
agent: {
|
||||
id: string;
|
||||
userId: string;
|
||||
agency: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export interface PaginatedResult<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export interface CreateListingPayload {
|
||||
transactionType: TransactionType;
|
||||
priceVND: string;
|
||||
propertyType: PropertyType;
|
||||
title: string;
|
||||
description: string;
|
||||
address: string;
|
||||
ward: string;
|
||||
district: string;
|
||||
city: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
areaM2: number;
|
||||
usableAreaM2?: number;
|
||||
bedrooms?: number;
|
||||
bathrooms?: number;
|
||||
floors?: number;
|
||||
floor?: number;
|
||||
totalFloors?: number;
|
||||
direction?: Direction;
|
||||
yearBuilt?: number;
|
||||
legalStatus?: string;
|
||||
amenities?: string[];
|
||||
projectName?: string;
|
||||
rentPriceMonthly?: string;
|
||||
commissionPct?: number;
|
||||
}
|
||||
|
||||
export interface SearchListingsParams {
|
||||
status?: ListingStatus;
|
||||
transactionType?: TransactionType;
|
||||
propertyType?: PropertyType;
|
||||
city?: string;
|
||||
district?: string;
|
||||
minPrice?: string;
|
||||
maxPrice?: string;
|
||||
minArea?: number;
|
||||
maxArea?: number;
|
||||
bedrooms?: number;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
// ─── API Functions ───────────────────────────────────────
|
||||
|
||||
const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001';
|
||||
|
||||
export const listingsApi = {
|
||||
create: (token: string, data: CreateListingPayload) =>
|
||||
apiClient.authPost<{ listingId: string; propertyId: string; status: string }>(
|
||||
'/listings',
|
||||
token,
|
||||
data,
|
||||
),
|
||||
|
||||
getById: (id: string) => apiClient.get<ListingDetail>(`/listings/${id}`),
|
||||
|
||||
search: (params: SearchListingsParams = {}) => {
|
||||
const query = new URLSearchParams();
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (value !== undefined && value !== '') query.append(key, String(value));
|
||||
});
|
||||
const qs = query.toString();
|
||||
return apiClient.get<PaginatedResult<ListingDetail>>(`/listings${qs ? `?${qs}` : ''}`);
|
||||
},
|
||||
|
||||
updateStatus: (token: string, id: string, status: ListingStatus, moderationNotes?: string) =>
|
||||
apiClient.authPost<{ status: string }>(`/listings/${id}/status`, token, {
|
||||
status,
|
||||
moderationNotes,
|
||||
}),
|
||||
|
||||
uploadMedia: async (token: string, listingId: string, file: File, caption?: string) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
if (caption) formData.append('caption', caption);
|
||||
|
||||
const res = await fetch(`${API_BASE_URL}/listings/${listingId}/media`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const error = await res.json().catch(() => ({ message: res.statusText }));
|
||||
throw new Error(error.message || 'Upload failed');
|
||||
}
|
||||
|
||||
return res.json() as Promise<{ mediaId: string; url: string }>;
|
||||
},
|
||||
};
|
||||
99
apps/web/lib/validations/listings.ts
Normal file
99
apps/web/lib/validations/listings.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
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>;
|
||||
Reference in New Issue
Block a user