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>

apps/web/lib/du-an-api.ts

@@ -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),
+};