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">