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/components/du-an/project-map.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+/* eslint-disable import-x/no-named-as-default-member */
+import mapboxgl from 'mapbox-gl';
+import * as React from 'react';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { formatPrice } from '@/lib/currency';
+import {
+  PROJECT_STATUS_LABELS,
+  type ProjectSummary,
+} from '@/lib/du-an-api';
+
+interface ProjectMapProps {
+  projects: ProjectSummary[];
+  className?: string;
+}
+
+const DEFAULT_CENTER: [number, number] = [106.6297, 10.8231]; // HCMC
+const DEFAULT_ZOOM = 12;
+
+export function ProjectMap({ projects, className }: ProjectMapProps) {
+  const mapContainerRef = React.useRef<HTMLDivElement>(null);
+  const mapRef = React.useRef<mapboxgl.Map | null>(null);
+  const markersRef = React.useRef<mapboxgl.Marker[]>([]);
+
+  const geoProjects = React.useMemo(
+    () => projects.filter((p) => p.latitude != null && p.longitude != null),
+    [projects],
+  );
+
+  React.useEffect(() => {
+    if (!mapContainerRef.current) return;
+
+    const token = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
+    if (!token) return;
+
+    mapboxgl.accessToken = token;
+
+    const map = new mapboxgl.Map({
+      container: mapContainerRef.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: DEFAULT_CENTER,
+      zoom: DEFAULT_ZOOM,
+      attributionControl: false,
+    });
+
+    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+    map.addControl(new mapboxgl.AttributionControl({ compact: true }), 'bottom-right');
+
+    mapRef.current = map;
+
+    return () => {
+      map.remove();
+      mapRef.current = null;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    markersRef.current.forEach((m) => m.remove());
+    markersRef.current = [];
+
+    if (geoProjects.length === 0) return;
+
+    const bounds = new mapboxgl.LngLatBounds();
+
+    geoProjects.forEach((project) => {
+      const el = document.createElement('div');
+      el.className = 'project-map-marker';
+      el.style.cssText = `
+        background: white;
+        border-radius: 8px;
+        padding: 4px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+        white-space: nowrap;
+        cursor: pointer;
+        border-left: 3px solid hsl(142.1, 76.2%, 36.3%);
+        transition: transform 0.15s;
+        max-width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `;
+      el.textContent = project.name;
+      el.addEventListener('mouseenter', () => {
+        el.style.transform = 'scale(1.05)';
+      });
+      el.addEventListener('mouseleave', () => {
+        el.style.transform = 'scale(1)';
+      });
+
+      const statusLabel = PROJECT_STATUS_LABELS[project.status];
+      const priceText = project.minPrice ? formatPrice(project.minPrice) : 'Liên hệ';
+
+      const popup = new mapboxgl.Popup({ offset: 15, maxWidth: '240px', closeButton: false })
+        .setHTML(
+          `<div style="font-family:system-ui,sans-serif;padding:4px 0;">
+            <p style="font-weight:600;font-size:13px;margin:0 0 4px;">${project.name}</p>
+            <p style="font-size:12px;color:#666;margin:0 0 4px;">${project.district}, ${project.city}</p>
+            <p style="font-size:12px;margin:0 0 4px;">
+              <span style="background:#f1f5f9;padding:2px 6px;border-radius:4px;">${statusLabel}</span>
+              <span style="margin-left:4px;font-weight:600;color:hsl(142.1,76.2%,36.3%);">${priceText}</span>
+            </p>
+            <a href="/du-an/${project.slug}" style="font-size:12px;color:hsl(142.1,76.2%,36.3%);text-decoration:none;">Xem chi tiết →</a>
+          </div>`,
+        );
+
+      const marker = new mapboxgl.Marker({ element: el, anchor: 'left' })
+        .setLngLat([project.longitude!, project.latitude!])
+        .setPopup(popup)
+        .addTo(map);
+
+      markersRef.current.push(marker);
+      bounds.extend([project.longitude!, project.latitude!]);
+    });
+
+    if (geoProjects.length > 1) {
+      map.fitBounds(bounds, { padding: 60, maxZoom: 15 });
+    } else {
+      map.flyTo({ center: [geoProjects[0]!.longitude!, geoProjects[0]!.latitude!], zoom: 14 });
+    }
+  }, [geoProjects]);
+
+  const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
+
+  return (
+    <div className={`relative overflow-hidden rounded-lg border ${className || 'h-[400px] md:h-[500px]'}`}>
+      <div ref={mapContainerRef} className="h-full w-full" />
+
+      {!hasToken && (
+        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50">
+          <p className="text-sm text-muted-foreground">
+            Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ
+          </p>
+        </div>
+      )}
+
+      <div className="absolute bottom-3 left-3 rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
+        {geoProjects.length} dự án trên bản đồ
+      </div>
+    </div>
+  );
+}