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>
This commit is contained in:
Ho Ngoc Hai
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
146
apps/web/components/du-an/project-map.tsx
Normal file
146
apps/web/components/du-an/project-map.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { NeighborhoodPOIMap } from '../neighborhood-poi-map';
|
||||
import type { POIItem } from '../types';
|
||||
|
||||
// Mock mapbox-gl
|
||||
vi.mock('mapbox-gl', () => {
|
||||
const MockMap = vi.fn().mockImplementation(() => ({
|
||||
addControl: vi.fn(),
|
||||
remove: vi.fn(),
|
||||
flyTo: vi.fn(),
|
||||
on: vi.fn(),
|
||||
}));
|
||||
const MockMarker = vi.fn().mockImplementation(() => ({
|
||||
setLngLat: vi.fn().mockReturnThis(),
|
||||
setPopup: vi.fn().mockReturnThis(),
|
||||
addTo: vi.fn().mockReturnThis(),
|
||||
remove: vi.fn(),
|
||||
}));
|
||||
const MockPopup = vi.fn().mockImplementation(() => ({
|
||||
setHTML: vi.fn().mockReturnThis(),
|
||||
setLngLat: vi.fn().mockReturnThis(),
|
||||
addTo: vi.fn().mockReturnThis(),
|
||||
remove: vi.fn(),
|
||||
}));
|
||||
|
||||
return {
|
||||
default: {
|
||||
Map: MockMap,
|
||||
Marker: MockMarker,
|
||||
Popup: MockPopup,
|
||||
NavigationControl: vi.fn(),
|
||||
AttributionControl: vi.fn(),
|
||||
accessToken: '',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));
|
||||
|
||||
const samplePois: POIItem[] = [
|
||||
{ id: '1', name: 'Trường THPT Nguyễn Du', category: 'school', lat: 10.82, lng: 106.63, distance: 200 },
|
||||
{ id: '2', name: 'Bệnh viện Nhân dân 115', category: 'hospital', lat: 10.83, lng: 106.64, distance: 500 },
|
||||
{ id: '3', name: 'Trạm Metro Bến Thành', category: 'transit', lat: 10.77, lng: 106.70, distance: 800 },
|
||||
];
|
||||
|
||||
const center = { lat: 10.82, lng: 106.63 };
|
||||
|
||||
describe('NeighborhoodPOIMap', () => {
|
||||
it('renders map container', () => {
|
||||
const { container } = render(
|
||||
<NeighborhoodPOIMap center={center} pois={samplePois} />,
|
||||
);
|
||||
expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all category toggle buttons', () => {
|
||||
render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
|
||||
expect(screen.getByText('Trường học')).toBeInTheDocument();
|
||||
expect(screen.getByText('Bệnh viện')).toBeInTheDocument();
|
||||
expect(screen.getByText('Giao thông')).toBeInTheDocument();
|
||||
expect(screen.getByText('Mua sắm')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nhà hàng')).toBeInTheDocument();
|
||||
expect(screen.getByText('Công viên')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows POI counts in toggle buttons', () => {
|
||||
render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
|
||||
// school: 1, hospital: 1, transit: 1
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBeGreaterThanOrEqual(6);
|
||||
});
|
||||
|
||||
it('toggles category on click', () => {
|
||||
render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
|
||||
const schoolBtn = screen.getByText('Trường học').closest('button')!;
|
||||
fireEvent.click(schoolBtn);
|
||||
// After clicking, it should be toggled off (line-through style applied)
|
||||
expect(schoolBtn.className).toContain('line-through');
|
||||
});
|
||||
|
||||
it('shows fallback when no mapbox token', () => {
|
||||
const originalEnv = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
|
||||
delete process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
|
||||
|
||||
render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
|
||||
expect(screen.getByText(/NEXT_PUBLIC_MAPBOX_TOKEN/)).toBeInTheDocument();
|
||||
|
||||
if (originalEnv) process.env['NEXT_PUBLIC_MAPBOX_TOKEN'] = originalEnv;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,71 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { NeighborhoodRadarChart } from '../neighborhood-radar-chart';
|
||||
import type { NeighborhoodCategory } from '../types';
|
||||
|
||||
// Mock recharts
|
||||
vi.mock('recharts', () => ({
|
||||
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="responsive-container">{children}</div>
|
||||
),
|
||||
RadarChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
|
||||
<div data-testid="radar-chart" data-count={data.length}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
Radar: ({ dataKey }: { dataKey: string }) => <div data-testid={`radar-${dataKey}`} />,
|
||||
PolarGrid: () => <div data-testid="polar-grid" />,
|
||||
PolarAngleAxis: ({ dataKey }: { dataKey: string }) => (
|
||||
<div data-testid={`polar-angle-${dataKey}`} />
|
||||
),
|
||||
PolarRadiusAxis: () => <div data-testid="polar-radius" />,
|
||||
Tooltip: () => <div data-testid="tooltip" />,
|
||||
}));
|
||||
|
||||
const sampleCategories: NeighborhoodCategory[] = [
|
||||
{ category: 'education', label: 'Giáo dục', score: 8.5 },
|
||||
{ category: 'healthcare', label: 'Y tế', score: 7.2 },
|
||||
{ category: 'transport', label: 'Giao thông', score: 6.0 },
|
||||
{ category: 'shopping', label: 'Mua sắm', score: 4.5 },
|
||||
{ category: 'dining', label: 'Ẩm thực', score: 9.0 },
|
||||
{ category: 'environment', label: 'Môi trường', score: 3.2 },
|
||||
];
|
||||
|
||||
describe('NeighborhoodRadarChart', () => {
|
||||
it('renders responsive container', () => {
|
||||
render(<NeighborhoodRadarChart categories={sampleCategories} />);
|
||||
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders radar chart with correct data count', () => {
|
||||
render(<NeighborhoodRadarChart categories={sampleCategories} />);
|
||||
expect(screen.getByTestId('radar-chart')).toHaveAttribute('data-count', '6');
|
||||
});
|
||||
|
||||
it('renders radar data layer', () => {
|
||||
render(<NeighborhoodRadarChart categories={sampleCategories} />);
|
||||
expect(screen.getByTestId('radar-score')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders polar grid and axes', () => {
|
||||
render(<NeighborhoodRadarChart categories={sampleCategories} />);
|
||||
expect(screen.getByTestId('polar-grid')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('polar-angle-subject')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('polar-radius')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders score badges by default', () => {
|
||||
render(<NeighborhoodRadarChart categories={sampleCategories} />);
|
||||
// Green badge for scores > 7
|
||||
expect(screen.getByText(/Giáo dục: 8.5/)).toBeInTheDocument();
|
||||
// Yellow badge for scores 5-7
|
||||
expect(screen.getByText(/Giao thông: 6.0/)).toBeInTheDocument();
|
||||
// Red badge for scores < 5
|
||||
expect(screen.getByText(/Môi trường: 3.2/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides badges when showBadges is false', () => {
|
||||
render(<NeighborhoodRadarChart categories={sampleCategories} showBadges={false} />);
|
||||
expect(screen.queryByText(/Giáo dục: 8.5/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
10
apps/web/components/neighborhood/index.ts
Normal file
10
apps/web/components/neighborhood/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export { NeighborhoodRadarChart } from './neighborhood-radar-chart';
|
||||
export { NeighborhoodPOIMap } from './neighborhood-poi-map';
|
||||
export { NeighborhoodScore } from './neighborhood-score';
|
||||
export type {
|
||||
NeighborhoodCategory,
|
||||
NeighborhoodScoreData,
|
||||
POIItem,
|
||||
POICategory,
|
||||
} from './types';
|
||||
export { POI_CATEGORY_CONFIG, DEFAULT_CATEGORIES } from './types';
|
||||
244
apps/web/components/neighborhood/neighborhood-poi-map.tsx
Normal file
244
apps/web/components/neighborhood/neighborhood-poi-map.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
'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 { cn } from '@/lib/utils';
|
||||
import { type POIItem, type POICategory, POI_CATEGORY_CONFIG } from './types';
|
||||
|
||||
interface NeighborhoodPOIMapProps {
|
||||
center: { lat: number; lng: number };
|
||||
pois: POIItem[];
|
||||
zoom?: number;
|
||||
height?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function NeighborhoodPOIMap({
|
||||
center,
|
||||
pois,
|
||||
zoom = 14,
|
||||
height = '400px',
|
||||
className,
|
||||
}: NeighborhoodPOIMapProps) {
|
||||
const mapContainerRef = React.useRef<HTMLDivElement>(null);
|
||||
const mapRef = React.useRef<mapboxgl.Map | null>(null);
|
||||
const markersRef = React.useRef<mapboxgl.Marker[]>([]);
|
||||
|
||||
const [activeCategories, setActiveCategories] = React.useState<Set<POICategory>>(
|
||||
() => new Set(Object.keys(POI_CATEGORY_CONFIG) as POICategory[]),
|
||||
);
|
||||
|
||||
const toggleCategory = React.useCallback((category: POICategory) => {
|
||||
setActiveCategories((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(category)) {
|
||||
next.delete(category);
|
||||
} else {
|
||||
next.add(category);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Initialize map
|
||||
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: [center.lng, center.lat],
|
||||
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;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update center when prop changes
|
||||
React.useEffect(() => {
|
||||
mapRef.current?.flyTo({ center: [center.lng, center.lat], zoom });
|
||||
}, [center, zoom]);
|
||||
|
||||
// Render POI markers based on active categories
|
||||
React.useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
// Clear existing markers
|
||||
markersRef.current.forEach((m) => m.remove());
|
||||
markersRef.current = [];
|
||||
|
||||
const visiblePois = pois.filter((poi) => activeCategories.has(poi.category));
|
||||
|
||||
visiblePois.forEach((poi) => {
|
||||
const config = POI_CATEGORY_CONFIG[poi.category];
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'poi-marker';
|
||||
el.style.cssText = `
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: ${config.color};
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s;
|
||||
`;
|
||||
el.textContent = config.icon;
|
||||
el.title = `${poi.name} (${config.label})`;
|
||||
|
||||
el.addEventListener('mouseenter', () => {
|
||||
el.style.transform = 'scale(1.3)';
|
||||
});
|
||||
el.addEventListener('mouseleave', () => {
|
||||
el.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
const popup = new mapboxgl.Popup({ offset: 20, 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 2px;">${config.icon} ${poi.name}</p>
|
||||
<p style="font-size:12px;color:#666;margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
|
||||
</div>`,
|
||||
);
|
||||
|
||||
const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
|
||||
.setLngLat([poi.lng, poi.lat])
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
|
||||
markersRef.current.push(marker);
|
||||
});
|
||||
}, [pois, activeCategories]);
|
||||
|
||||
// Add property center marker
|
||||
React.useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.style.cssText = `
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: hsl(142.1, 76.2%, 36.3%);
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 0 2px hsl(142.1, 76.2%, 36.3%), 0 2px 8px rgba(0,0,0,0.3);
|
||||
`;
|
||||
|
||||
const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
|
||||
.setLngLat([center.lng, center.lat])
|
||||
.addTo(map);
|
||||
|
||||
return () => {
|
||||
marker.remove();
|
||||
};
|
||||
}, [center]);
|
||||
|
||||
const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
|
||||
|
||||
const allCategories = Object.entries(POI_CATEGORY_CONFIG) as [
|
||||
POICategory,
|
||||
(typeof POI_CATEGORY_CONFIG)[POICategory],
|
||||
][];
|
||||
|
||||
return (
|
||||
<div className={cn('relative overflow-hidden rounded-lg border', className)}>
|
||||
<div ref={mapContainerRef} style={{ height }} className="w-full" />
|
||||
|
||||
{/* Layer toggle controls */}
|
||||
<div className="absolute left-3 top-3 flex flex-col gap-1.5">
|
||||
{allCategories.map(([key, config]) => {
|
||||
const isActive = activeCategories.has(key);
|
||||
const poiCount = pois.filter((p) => p.category === key).length;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => toggleCategory(key)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm transition-all',
|
||||
isActive
|
||||
? 'bg-white text-foreground ring-1 ring-inset ring-border'
|
||||
: 'bg-white/60 text-muted-foreground line-through ring-1 ring-inset ring-transparent',
|
||||
)}
|
||||
title={`${isActive ? 'Ẩn' : 'Hiện'} ${config.label}`}
|
||||
>
|
||||
<span>{config.icon}</span>
|
||||
<span>{config.label}</span>
|
||||
{poiCount > 0 && (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold',
|
||||
isActive
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'bg-muted text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{poiCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Fallback when no Mapbox token */}
|
||||
{!hasToken && (
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50"
|
||||
style={{ height }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<svg
|
||||
className="mx-auto mb-2 h-10 w-10 text-muted-foreground"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ POI
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
apps/web/components/neighborhood/neighborhood-radar-chart.tsx
Normal file
103
apps/web/components/neighborhood/neighborhood-radar-chart.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Radar,
|
||||
RadarChart,
|
||||
PolarGrid,
|
||||
PolarAngleAxis,
|
||||
PolarRadiusAxis,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
} from 'recharts';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { NeighborhoodCategory } from './types';
|
||||
|
||||
interface NeighborhoodRadarChartProps {
|
||||
categories: NeighborhoodCategory[];
|
||||
height?: number;
|
||||
showBadges?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function getScoreVariant(score: number): 'success' | 'warning' | 'destructive' {
|
||||
if (score > 7) return 'success';
|
||||
if (score >= 5) return 'warning';
|
||||
return 'destructive';
|
||||
}
|
||||
|
||||
function getScoreLabel(score: number): string {
|
||||
if (score > 7) return 'Tốt';
|
||||
if (score >= 5) return 'TB';
|
||||
return 'Yếu';
|
||||
}
|
||||
|
||||
export function NeighborhoodRadarChart({
|
||||
categories,
|
||||
height = 300,
|
||||
showBadges = true,
|
||||
className,
|
||||
}: NeighborhoodRadarChartProps) {
|
||||
const chartData = categories.map((cat) => ({
|
||||
subject: cat.label,
|
||||
score: cat.score,
|
||||
fullMark: 10,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<ResponsiveContainer width="100%" height={height}>
|
||||
<RadarChart cx="50%" cy="50%" outerRadius="75%" data={chartData}>
|
||||
<PolarGrid
|
||||
stroke="hsl(var(--border))"
|
||||
strokeDasharray="3 3"
|
||||
/>
|
||||
<PolarAngleAxis
|
||||
dataKey="subject"
|
||||
tick={{
|
||||
fontSize: 12,
|
||||
fill: 'hsl(var(--muted-foreground))',
|
||||
}}
|
||||
/>
|
||||
<PolarRadiusAxis
|
||||
angle={90}
|
||||
domain={[0, 10]}
|
||||
tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
|
||||
tickCount={6}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
formatter={(value) => [`${Number(value).toFixed(1)}/10`, 'Điểm']}
|
||||
/>
|
||||
<Radar
|
||||
name="Điểm"
|
||||
dataKey="score"
|
||||
stroke="hsl(var(--primary))"
|
||||
fill="hsl(var(--primary))"
|
||||
fillOpacity={0.2}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{showBadges && (
|
||||
<div className="mt-3 flex flex-wrap items-center justify-center gap-2">
|
||||
{categories.map((cat) => (
|
||||
<Badge
|
||||
key={cat.category}
|
||||
variant={getScoreVariant(cat.score)}
|
||||
className="gap-1 text-xs"
|
||||
>
|
||||
{cat.label}: {cat.score.toFixed(1)}
|
||||
<span className="opacity-70">({getScoreLabel(cat.score)})</span>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
apps/web/components/neighborhood/neighborhood-score.tsx
Normal file
78
apps/web/components/neighborhood/neighborhood-score.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { NeighborhoodPOIMap } from './neighborhood-poi-map';
|
||||
import { NeighborhoodRadarChart } from './neighborhood-radar-chart';
|
||||
import type { NeighborhoodScoreData } from './types';
|
||||
|
||||
interface NeighborhoodScoreProps {
|
||||
data: NeighborhoodScoreData;
|
||||
showMap?: boolean;
|
||||
mapHeight?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function getOverallVariant(score: number): 'success' | 'warning' | 'destructive' {
|
||||
if (score > 7) return 'success';
|
||||
if (score >= 5) return 'warning';
|
||||
return 'destructive';
|
||||
}
|
||||
|
||||
function getOverallLabel(score: number): string {
|
||||
if (score > 7) return 'Khu vực tốt';
|
||||
if (score >= 5) return 'Khu vực trung bình';
|
||||
return 'Khu vực cần cải thiện';
|
||||
}
|
||||
|
||||
export function NeighborhoodScore({
|
||||
data,
|
||||
showMap = true,
|
||||
mapHeight = '350px',
|
||||
className,
|
||||
}: NeighborhoodScoreProps) {
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
{/* Overall Score Header */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">Đánh giá khu vực</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={getOverallVariant(data.overallScore)} className="text-sm">
|
||||
{data.overallScore.toFixed(1)}/10
|
||||
</Badge>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{getOverallLabel(data.overallScore)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<NeighborhoodRadarChart
|
||||
categories={data.categories}
|
||||
height={280}
|
||||
showBadges
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* POI Map */}
|
||||
{showMap && data.pois.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg">Tiện ích xung quanh</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<NeighborhoodPOIMap
|
||||
center={data.center}
|
||||
pois={data.pois}
|
||||
height={mapHeight}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
apps/web/components/neighborhood/types.ts
Normal file
53
apps/web/components/neighborhood/types.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
/** Neighborhood scoring types shared across components */
|
||||
|
||||
export interface NeighborhoodCategory {
|
||||
category: string;
|
||||
label: string;
|
||||
score: number; // 0–10
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface POIItem {
|
||||
id: string;
|
||||
name: string;
|
||||
category: POICategory;
|
||||
lat: number;
|
||||
lng: number;
|
||||
distance?: number; // meters from property
|
||||
}
|
||||
|
||||
export type POICategory =
|
||||
| 'school'
|
||||
| 'hospital'
|
||||
| 'transit'
|
||||
| 'shopping'
|
||||
| 'restaurant'
|
||||
| 'park';
|
||||
|
||||
export interface NeighborhoodScoreData {
|
||||
overallScore: number;
|
||||
categories: NeighborhoodCategory[];
|
||||
pois: POIItem[];
|
||||
center: { lat: number; lng: number };
|
||||
}
|
||||
|
||||
export const POI_CATEGORY_CONFIG: Record<
|
||||
POICategory,
|
||||
{ label: string; color: string; icon: string }
|
||||
> = {
|
||||
school: { label: 'Trường học', color: '#3B82F6', icon: '🏫' },
|
||||
hospital: { label: 'Bệnh viện', color: '#EF4444', icon: '🏥' },
|
||||
transit: { label: 'Giao thông', color: '#8B5CF6', icon: '🚇' },
|
||||
shopping: { label: 'Mua sắm', color: '#F59E0B', icon: '🛒' },
|
||||
restaurant: { label: 'Nhà hàng', color: '#F97316', icon: '🍽️' },
|
||||
park: { label: 'Công viên', color: '#22C55E', icon: '🌳' },
|
||||
};
|
||||
|
||||
export const DEFAULT_CATEGORIES: NeighborhoodCategory[] = [
|
||||
{ category: 'education', label: 'Giáo dục', score: 0 },
|
||||
{ category: 'healthcare', label: 'Y tế', score: 0 },
|
||||
{ category: 'transport', label: 'Giao thông', score: 0 },
|
||||
{ category: 'shopping', label: 'Mua sắm', score: 0 },
|
||||
{ category: 'dining', label: 'Ẩm thực', score: 0 },
|
||||
{ category: 'environment', label: 'Môi trường', score: 0 },
|
||||
];
|
||||
199
apps/web/lib/du-an-api.ts
Normal file
199
apps/web/lib/du-an-api.ts
Normal file
@@ -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),
|
||||
};
|
||||
58
apps/web/lib/du-an-server.ts
Normal file
58
apps/web/lib/du-an-server.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Server-side project data fetching for Next.js Server Components.
|
||||
*
|
||||
* Uses `fetch` directly (no browser-only helpers) so it can run
|
||||
* inside `generateMetadata`, `generateStaticParams`, `sitemap()`, etc.
|
||||
*/
|
||||
|
||||
import type { ProjectDetail, ProjectSummary, PaginatedResult } from './du-an-api';
|
||||
|
||||
const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001/api/v1';
|
||||
|
||||
/**
|
||||
* Fetch a single project by slug — server-only.
|
||||
* Returns `null` when the project is not found (404) so callers can `notFound()`.
|
||||
*/
|
||||
export async function fetchProjectBySlug(slug: string): Promise<ProjectDetail | null> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/projects/${slug}`, {
|
||||
next: { revalidate: 300 }, // ISR: re-validate every 5 min
|
||||
});
|
||||
|
||||
if (!res.ok) return null;
|
||||
return (await res.json()) as ProjectDetail;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch active projects — server-only, used by the dynamic sitemap.
|
||||
*/
|
||||
export async function fetchProjects(params: {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
city?: string;
|
||||
status?: string;
|
||||
}): Promise<PaginatedResult<ProjectSummary>> {
|
||||
const query = new URLSearchParams({
|
||||
page: String(params.page ?? 1),
|
||||
limit: String(params.limit ?? 100),
|
||||
});
|
||||
if (params.city) query.append('city', params.city);
|
||||
if (params.status) query.append('status', params.status);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/projects?${query}`, {
|
||||
next: { revalidate: 3600 }, // re-validate every hour for sitemap
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
return { data: [], total: 0, page: 1, limit: 100, totalPages: 0 };
|
||||
}
|
||||
|
||||
return (await res.json()) as PaginatedResult<ProjectSummary>;
|
||||
} catch {
|
||||
return { data: [], total: 0, page: 1, limit: 100, totalPages: 0 };
|
||||
}
|
||||
}
|
||||
39
apps/web/lib/hooks/use-du-an.ts
Normal file
39
apps/web/lib/hooks/use-du-an.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {
|
||||
duAnApi,
|
||||
type SearchProjectsParams,
|
||||
} from '@/lib/du-an-api';
|
||||
|
||||
export const projectKeys = {
|
||||
all: ['projects'] as const,
|
||||
search: (params: SearchProjectsParams) => ['projects', 'search', params] as const,
|
||||
detail: (slug: string) => ['projects', 'detail', slug] as const,
|
||||
linkedListings: (projectId: string, page: number) =>
|
||||
['projects', 'listings', projectId, page] as const,
|
||||
};
|
||||
|
||||
export function useProjectsSearch(params: SearchProjectsParams = {}) {
|
||||
return useQuery({
|
||||
queryKey: projectKeys.search(params),
|
||||
queryFn: () => duAnApi.search(params),
|
||||
});
|
||||
}
|
||||
|
||||
export function useProjectDetail(slug: string) {
|
||||
return useQuery({
|
||||
queryKey: projectKeys.detail(slug),
|
||||
queryFn: () => duAnApi.getBySlug(slug),
|
||||
enabled: !!slug,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProjectLinkedListings(
|
||||
projectId: string,
|
||||
page: number = 1,
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: projectKeys.linkedListings(projectId, page),
|
||||
queryFn: () => duAnApi.getLinkedListings(projectId, { page, limit: 12 }),
|
||||
enabled: !!projectId,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user