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/du-an-detail-client.tsx

@@ -4,15 +4,19 @@ import {
   Building2,
   Calendar,
   Download,
+  Expand,
   FileText,
   Grid3X3,
   Home,
   MapPin,
   Phone,
+  X,
 } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import * as React from 'react';
 import { ImageGallery } from '@/components/listings/image-gallery';
+import type { POICategory } from '@/components/neighborhood';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -29,6 +33,19 @@ import {
 } from '@/lib/du-an-api';
 import { cn } from '@/lib/utils';
 
+const PriceTrendChart = dynamic(
+  () => import('@/components/charts/price-trend-chart').then((m) => m.PriceTrendChart),
+  { ssr: false },
+);
+const NeighborhoodRadarChart = dynamic(
+  () => import('@/components/neighborhood').then((m) => m.NeighborhoodRadarChart),
+  { ssr: false },
+);
+const NeighborhoodPOIMap = dynamic(
+  () => import('@/components/neighborhood').then((m) => m.NeighborhoodPOIMap),
+  { ssr: false },
+);
+
 type Tab = 'amenities' | 'location' | 'price' | 'listings' | 'documents';
 
 const TABS: { key: Tab; label: string }[] = [
@@ -178,6 +195,9 @@ export function DuAnDetailClient({ project }: DuAnDetailClientProps) {
             </Card>
           )}
 
+          {/* Master plan */}
+          <MasterPlanViewer project={project} />
+
           {/* Tabs */}
           <div>
             <div className="flex gap-1 overflow-x-auto border-b" role="tablist">
@@ -374,30 +394,59 @@ function AmenitiesTab({ project }: { project: ProjectDetail }) {
   );
 }
 
+const POI_TYPE_MAP: Record<string, POICategory> = {
+  school: 'school',
+  hospital: 'hospital',
+  transit: 'transit',
+  shopping: 'shopping',
+  restaurant: 'restaurant',
+  park: 'park',
+};
+
 function LocationTab({ project }: { project: ProjectDetail }) {
+  const mapPois = project.pois.map((poi) => ({
+    id: poi.id,
+    name: poi.name,
+    category: (POI_TYPE_MAP[poi.type] || 'shopping') as POICategory,
+    lat: poi.latitude,
+    lng: poi.longitude,
+    distance: poi.distance,
+  }));
+
+  const hasCoordinates = project.latitude != null && project.longitude != null;
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       <p className="text-sm">
         {project.address}, {project.district}, {project.city}
       </p>
 
-      {/* Neighborhood scores */}
+      {/* Map */}
+      {hasCoordinates && (
+        <NeighborhoodPOIMap
+          center={{ lat: project.latitude!, lng: project.longitude! }}
+          pois={mapPois}
+          height="400px"
+        />
+      )}
+
+      {/* Neighborhood scores radar chart */}
       {project.neighborhoodScores.length > 0 && (
         <div>
           <h4 className="mb-2 text-sm font-medium">Đánh giá khu vực</h4>
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-            {project.neighborhoodScores.map((score) => (
-              <div key={score.category} className="rounded-lg border p-3 text-center">
-                <p className="text-2xl font-bold text-primary">{score.score}</p>
-                <p className="text-xs text-muted-foreground">{score.label}</p>
-              </div>
-            ))}
-          </div>
+          <NeighborhoodRadarChart
+            categories={project.neighborhoodScores.map((s) => ({
+              category: s.category,
+              label: s.label,
+              score: s.score,
+            }))}
+            height={300}
+          />
         </div>
       )}
 
-      {/* Nearby POIs */}
-      {project.pois.length > 0 && (
+      {/* POI list fallback (when no map) */}
+      {!hasCoordinates && project.pois.length > 0 && (
         <div>
           <h4 className="mb-2 text-sm font-medium">Tiện ích lân cận</h4>
           <div className="space-y-2">
@@ -418,6 +467,72 @@ function LocationTab({ project }: { project: ProjectDetail }) {
   );
 }
 
+function MasterPlanViewer({ project }: { project: ProjectDetail }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const masterPlans = project.media.filter((m) => m.type === 'master_plan');
+
+  if (masterPlans.length === 0) return null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Mặt bằng tổng thể</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4 sm:grid-cols-2">
+          {masterPlans.map((mp) => (
+            <div key={mp.id} className="group relative overflow-hidden rounded-lg border">
+              <Image
+                src={mp.url}
+                alt={mp.caption || 'Mặt bằng tổng thể'}
+                width={600}
+                height={400}
+                className="h-auto w-full object-contain"
+              />
+              <button
+                type="button"
+                className="absolute right-2 top-2 rounded-full bg-black/50 p-1.5 text-white opacity-0 transition-opacity group-hover:opacity-100"
+                onClick={() => setExpanded(true)}
+              >
+                <Expand className="h-4 w-4" />
+              </button>
+              {mp.caption && (
+                <p className="px-2 py-1.5 text-center text-xs text-muted-foreground">
+                  {mp.caption}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Fullscreen overlay */}
+        {expanded && (
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+            onClick={() => setExpanded(false)}
+          >
+            <button
+              type="button"
+              className="absolute right-4 top-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
+              onClick={() => setExpanded(false)}
+            >
+              <X className="h-6 w-6" />
+            </button>
+            <Image
+              src={masterPlans[0]!.url}
+              alt="Mặt bằng tổng thể"
+              width={1200}
+              height={800}
+              className="max-h-[90vh] max-w-[90vw] object-contain"
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
 function PriceTab({ project }: { project: ProjectDetail }) {
   return (
     <div className="space-y-4">
@@ -456,28 +571,18 @@ function PriceTab({ project }: { project: ProjectDetail }) {
         </div>
       )}
 
-      {/* Price history */}
+      {/* Price history chart */}
       {project.priceHistory.length > 0 && (
         <div>
           <h4 className="mb-2 text-sm font-medium">Lịch sử giá</h4>
-          <div className="space-y-1">
-            {project.priceHistory.map((ph) => (
-              <div
-                key={ph.period}
-                className="flex items-center justify-between rounded px-3 py-1.5 text-sm odd:bg-muted/50"
-              >
-                <span>{ph.period}</span>
-                <div className="flex items-center gap-4">
-                  <span>
-                    {(ph.avgPricePerM2 / 1_000_000).toFixed(1)} tr/m²
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {ph.transactionCount} giao dịch
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
+          <PriceTrendChart
+            data={project.priceHistory.map((ph) => ({
+              period: ph.period,
+              'Gia/m2': ph.avgPricePerM2 / 1_000_000,
+              'Tin đăng': ph.transactionCount,
+            }))}
+            height={300}
+          />
         </div>
       )}
 
@@ -496,11 +601,12 @@ function ListingsTab({ project }: { project: ProjectDetail }) {
           <p className="text-sm text-muted-foreground">
             {project.linkedListingCount} tin đăng liên quan đến dự án này
           </p>
-          <Button variant="outline" className="mt-3" asChild>
-            <a href={`/search?projectName=${encodeURIComponent(project.name)}`}>
-              Xem tất cả tin đăng
-            </a>
-          </Button>
+          <a
+            href={`/search?projectName=${encodeURIComponent(project.name)}`}
+            className="mt-3 inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground"
+          >
+            Xem tất cả tin đăng
+          </a>
         </div>
       ) : (
         <p className="text-sm text-muted-foreground">

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