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
@@ -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 },
|
||||
];
|
||||
Reference in New Issue
Block a user