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/app/[locale]/(public)/du-an/page.tsx

@@ -1,20 +1,30 @@
 'use client';
 
-import { Building2 } from 'lucide-react';
+import { Building2, LayoutGrid, Map } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import * as React from 'react';
 import { ProjectCard } from '@/components/du-an/project-card';
 import { ProjectFilterBar } from '@/components/du-an/project-filter-bar';
 import { Button } from '@/components/ui/button';
 import type { SearchProjectsParams } from '@/lib/du-an-api';
 import { useProjectsSearch } from '@/lib/hooks/use-du-an';
+import { cn } from '@/lib/utils';
+
+const ProjectMap = dynamic(
+  () => import('@/components/du-an/project-map').then((m) => m.ProjectMap),
+  { ssr: false },
+);
 
 const PAGE_SIZE = 12;
 
+type ViewMode = 'grid' | 'map';
+
 export default function DuAnPage() {
   const [filters, setFilters] = React.useState<SearchProjectsParams>({
     page: 1,
     limit: PAGE_SIZE,
   });
+  const [viewMode, setViewMode] = React.useState<ViewMode>('grid');
 
   const { data, isLoading, isError } = useProjectsSearch(filters);
 
@@ -31,11 +41,41 @@ export default function DuAnPage() {
   return (
     <div className="mx-auto max-w-7xl px-4 py-6">
       {/* Page header */}
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold md:text-3xl">Dự án bất động sản</h1>
-        <p className="mt-1 text-muted-foreground">
-          Khám phá các dự án mới nhất từ các chủ đầu tư uy tín
-        </p>
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <h1 className="text-2xl font-bold md:text-3xl">Dự án bất động sản</h1>
+          <p className="mt-1 text-muted-foreground">
+            Khám phá các dự án mới nhất từ các chủ đầu tư uy tín
+          </p>
+        </div>
+        <div className="flex gap-1 rounded-lg border p-1">
+          <button
+            type="button"
+            onClick={() => setViewMode('grid')}
+            className={cn(
+              'rounded-md p-2 transition-colors',
+              viewMode === 'grid'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+            aria-label="Xem dạng lưới"
+          >
+            <LayoutGrid className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setViewMode('map')}
+            className={cn(
+              'rounded-md p-2 transition-colors',
+              viewMode === 'map'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+            aria-label="Xem trên bản đồ"
+          >
+            <Map className="h-4 w-4" />
+          </button>
+        </div>
       </div>
 
       {/* Filters */}
@@ -70,14 +110,19 @@ export default function DuAnPage() {
             <p className="mb-4 text-sm text-muted-foreground">
               {data.total} dự án được tìm thấy
             </p>
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              {data.data.map((project) => (
-                <ProjectCard key={project.id} project={project} />
-              ))}
-            </div>
 
-            {/* Pagination */}
-            {data.totalPages > 1 && (
+            {viewMode === 'map' ? (
+              <ProjectMap projects={data.data} />
+            ) : (
+              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {data.data.map((project) => (
+                  <ProjectCard key={project.id} project={project} />
+                ))}
+              </div>
+            )}
+
+            {/* Pagination (grid mode only) */}
+            {viewMode === 'grid' && data.totalPages > 1 && (
               <div className="mt-8 flex items-center justify-center gap-2">
                 <Button
                   variant="outline"

apps/web/app/[locale]/(public)/layout.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { CompareFloatingBar } from '@/components/comparison/compare-floating-bar';
+import { NotificationBell } from '@/components/notifications/notification-bell';
 import { Button } from '@/components/ui/button';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
 import { Link } from '@/i18n/navigation';
@@ -28,6 +29,11 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
       label: t('nav.search'),
       isActive: pathname.includes('/search'),
     },
+    {
+      href: '/du-an' as const,
+      label: t('nav.projects'),
+      isActive: pathname.includes('/du-an'),
+    },
     {
       href: '/pricing' as const,
       label: t('nav.pricing'),
@@ -68,6 +74,7 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
             <LanguageSwitcher />
             {user ? (
               <>
+                <NotificationBell />
                 <span className="hidden text-sm text-muted-foreground sm:inline">
                   {user.fullName}
                 </span>