- Add grid/map view toggle on /du-an listing page with Mapbox project markers - Enhance du-an detail with master plan viewer, neighborhood radar chart, POI map, and price history chart - Create neighborhood component suite: radar chart (Recharts), POI map (Mapbox), score badges - Add du-an API client, server-side fetching, and React Query hooks - Wire NotificationBell into public layout header for authenticated users - Fix missing PROJECT_STATUS_COLORS import in du-an detail client Co-Authored-By: Paperclip <noreply@paperclip.ing>
200 lines
5.0 KiB
TypeScript
200 lines
5.0 KiB
TypeScript
import { apiClient } from './api-client';
|
|
import type { ListingDetail } from './listings-api';
|
|
|
|
// ─── Enums ───────────────────────────────────────────────
|
|
|
|
export type ProjectStatus =
|
|
| 'UPCOMING'
|
|
| 'SELLING'
|
|
| 'HANDOVER'
|
|
| 'COMPLETED';
|
|
|
|
export type ProjectPropertyType =
|
|
| 'APARTMENT'
|
|
| 'VILLA'
|
|
| 'TOWNHOUSE'
|
|
| 'SHOPHOUSE'
|
|
| 'LAND'
|
|
| 'MIXED';
|
|
|
|
// ─── Interfaces ──────────────────────────────────────────
|
|
|
|
export interface ProjectMedia {
|
|
id: string;
|
|
url: string;
|
|
type: 'image' | 'video' | 'master_plan' | 'document';
|
|
order: number;
|
|
caption: string | null;
|
|
}
|
|
|
|
export interface ProjectBlock {
|
|
id: string;
|
|
name: string;
|
|
totalUnits: number;
|
|
availableUnits: number;
|
|
floors: number;
|
|
}
|
|
|
|
export interface ProjectAmenity {
|
|
id: string;
|
|
name: string;
|
|
icon: string;
|
|
category: string;
|
|
}
|
|
|
|
export interface ProjectPriceRange {
|
|
propertyType: ProjectPropertyType;
|
|
minPrice: string;
|
|
maxPrice: string;
|
|
pricePerM2Min: number | null;
|
|
pricePerM2Max: number | null;
|
|
}
|
|
|
|
export interface ProjectPriceHistory {
|
|
period: string;
|
|
avgPricePerM2: number;
|
|
transactionCount: number;
|
|
}
|
|
|
|
export interface NeighborhoodScore {
|
|
category: string;
|
|
score: number;
|
|
label: string;
|
|
}
|
|
|
|
export interface ProjectPOI {
|
|
id: string;
|
|
name: string;
|
|
type: string;
|
|
distance: number;
|
|
latitude: number;
|
|
longitude: number;
|
|
}
|
|
|
|
export interface ProjectDeveloper {
|
|
id: string;
|
|
name: string;
|
|
logoUrl: string | null;
|
|
totalProjects: number;
|
|
}
|
|
|
|
export interface ProjectDocument {
|
|
id: string;
|
|
name: string;
|
|
url: string;
|
|
type: string;
|
|
sizeBytes: number;
|
|
}
|
|
|
|
export interface ProjectSummary {
|
|
id: string;
|
|
slug: string;
|
|
name: string;
|
|
status: ProjectStatus;
|
|
developer: ProjectDeveloper;
|
|
city: string;
|
|
district: string;
|
|
address: string;
|
|
latitude: number | null;
|
|
longitude: number | null;
|
|
thumbnailUrl: string | null;
|
|
totalArea: number;
|
|
totalUnits: number;
|
|
propertyTypes: ProjectPropertyType[];
|
|
minPrice: string | null;
|
|
maxPrice: string | null;
|
|
completionDate: string | null;
|
|
createdAt: string;
|
|
}
|
|
|
|
export interface ProjectDetail extends ProjectSummary {
|
|
description: string;
|
|
media: ProjectMedia[];
|
|
blocks: ProjectBlock[];
|
|
amenities: ProjectAmenity[];
|
|
priceRanges: ProjectPriceRange[];
|
|
priceHistory: ProjectPriceHistory[];
|
|
neighborhoodScores: NeighborhoodScore[];
|
|
pois: ProjectPOI[];
|
|
documents: ProjectDocument[];
|
|
linkedListingCount: number;
|
|
}
|
|
|
|
export interface PaginatedResult<T> {
|
|
data: T[];
|
|
total: number;
|
|
page: number;
|
|
limit: number;
|
|
totalPages: number;
|
|
}
|
|
|
|
export interface SearchProjectsParams {
|
|
city?: string;
|
|
district?: string;
|
|
developerId?: string;
|
|
status?: ProjectStatus;
|
|
propertyType?: ProjectPropertyType;
|
|
minPrice?: string;
|
|
maxPrice?: string;
|
|
sort?: string;
|
|
page?: number;
|
|
limit?: number;
|
|
q?: string;
|
|
}
|
|
|
|
// ─── Status Labels ───────────────────────────────────────
|
|
|
|
export const PROJECT_STATUS_LABELS: Record<ProjectStatus, string> = {
|
|
UPCOMING: 'Sắp mở bán',
|
|
SELLING: 'Đang bán',
|
|
HANDOVER: 'Đang bàn giao',
|
|
COMPLETED: 'Đã hoàn thành',
|
|
};
|
|
|
|
export const PROJECT_STATUS_COLORS: Record<ProjectStatus, string> = {
|
|
UPCOMING: 'bg-blue-100 text-blue-800',
|
|
SELLING: 'bg-green-100 text-green-800',
|
|
HANDOVER: 'bg-amber-100 text-amber-800',
|
|
COMPLETED: 'bg-gray-100 text-gray-800',
|
|
};
|
|
|
|
export const PROJECT_PROPERTY_TYPE_LABELS: Record<ProjectPropertyType, string> = {
|
|
APARTMENT: 'Căn hộ',
|
|
VILLA: 'Biệt thự',
|
|
TOWNHOUSE: 'Nhà phố',
|
|
SHOPHOUSE: 'Shophouse',
|
|
LAND: 'Đất nền',
|
|
MIXED: 'Tổng hợp',
|
|
};
|
|
|
|
// ─── API Functions ───────────────────────────────────────
|
|
|
|
export const duAnApi = {
|
|
search: (params: SearchProjectsParams = {}) => {
|
|
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<ProjectSummary>>(
|
|
`/projects${qs ? `?${qs}` : ''}`,
|
|
);
|
|
},
|
|
|
|
getBySlug: (slug: string) =>
|
|
apiClient.get<ProjectDetail>(`/projects/${slug}`),
|
|
|
|
getLinkedListings: (projectId: string, params: { page?: number; limit?: number } = {}) => {
|
|
const query = new URLSearchParams();
|
|
if (params.page) query.append('page', String(params.page));
|
|
if (params.limit) query.append('limit', String(params.limit));
|
|
const qs = query.toString();
|
|
return apiClient.get<PaginatedResult<ListingDetail>>(
|
|
`/projects/${projectId}/listings${qs ? `?${qs}` : ''}`,
|
|
);
|
|
},
|
|
|
|
submitInquiry: (projectId: string, data: { name: string; phone: string; message: string }) =>
|
|
apiClient.post<{ inquiryId: string }>(`/projects/${projectId}/inquiries`, data),
|
|
};
|