feat(web): complete du-an project pages, neighborhood components, and public notification bell
- 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>
This commit is contained in:
Ho Ngoc Hai
199
apps/web/lib/du-an-api.ts
Normal file
199
apps/web/lib/du-an-api.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
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),
|
||||
};
|
||||
58
apps/web/lib/du-an-server.ts
Normal file
58
apps/web/lib/du-an-server.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Server-side project data fetching for Next.js Server Components.
|
||||
*
|
||||
* Uses `fetch` directly (no browser-only helpers) so it can run
|
||||
* inside `generateMetadata`, `generateStaticParams`, `sitemap()`, etc.
|
||||
*/
|
||||
|
||||
import type { ProjectDetail, ProjectSummary, PaginatedResult } from './du-an-api';
|
||||
|
||||
const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001/api/v1';
|
||||
|
||||
/**
|
||||
* Fetch a single project by slug — server-only.
|
||||
* Returns `null` when the project is not found (404) so callers can `notFound()`.
|
||||
*/
|
||||
export async function fetchProjectBySlug(slug: string): Promise<ProjectDetail | null> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/projects/${slug}`, {
|
||||
next: { revalidate: 300 }, // ISR: re-validate every 5 min
|
||||
});
|
||||
|
||||
if (!res.ok) return null;
|
||||
return (await res.json()) as ProjectDetail;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch active projects — server-only, used by the dynamic sitemap.
|
||||
*/
|
||||
export async function fetchProjects(params: {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
city?: string;
|
||||
status?: string;
|
||||
}): Promise<PaginatedResult<ProjectSummary>> {
|
||||
const query = new URLSearchParams({
|
||||
page: String(params.page ?? 1),
|
||||
limit: String(params.limit ?? 100),
|
||||
});
|
||||
if (params.city) query.append('city', params.city);
|
||||
if (params.status) query.append('status', params.status);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/projects?${query}`, {
|
||||
next: { revalidate: 3600 }, // re-validate every hour for sitemap
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
return { data: [], total: 0, page: 1, limit: 100, totalPages: 0 };
|
||||
}
|
||||
|
||||
return (await res.json()) as PaginatedResult<ProjectSummary>;
|
||||
} catch {
|
||||
return { data: [], total: 0, page: 1, limit: 100, totalPages: 0 };
|
||||
}
|
||||
}
|
||||
39
apps/web/lib/hooks/use-du-an.ts
Normal file
39
apps/web/lib/hooks/use-du-an.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {
|
||||
duAnApi,
|
||||
type SearchProjectsParams,
|
||||
} from '@/lib/du-an-api';
|
||||
|
||||
export const projectKeys = {
|
||||
all: ['projects'] as const,
|
||||
search: (params: SearchProjectsParams) => ['projects', 'search', params] as const,
|
||||
detail: (slug: string) => ['projects', 'detail', slug] as const,
|
||||
linkedListings: (projectId: string, page: number) =>
|
||||
['projects', 'listings', projectId, page] as const,
|
||||
};
|
||||
|
||||
export function useProjectsSearch(params: SearchProjectsParams = {}) {
|
||||
return useQuery({
|
||||
queryKey: projectKeys.search(params),
|
||||
queryFn: () => duAnApi.search(params),
|
||||
});
|
||||
}
|
||||
|
||||
export function useProjectDetail(slug: string) {
|
||||
return useQuery({
|
||||
queryKey: projectKeys.detail(slug),
|
||||
queryFn: () => duAnApi.getBySlug(slug),
|
||||
enabled: !!slug,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProjectLinkedListings(
|
||||
projectId: string,
|
||||
page: number = 1,
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: projectKeys.linkedListings(projectId, page),
|
||||
queryFn: () => duAnApi.getLinkedListings(projectId, { page, limit: 12 }),
|
||||
enabled: !!projectId,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user