Some checks failed
Deploy / Build API Image (push) Failing after 19s
Deploy / Build Web Image (push) Failing after 11s
Security Scanning / Trivy Filesystem Scan (push) Failing after 27s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 11s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 37s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 10s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 47s
Security Scanning / Trivy Scan — Web Image (push) Failing after 31s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 32s
Deploy / Smoke Test Staging (push) Has been skipped
Security Scanning / Security Gate (push) Failing after 1s
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
User directive: avoid emojis for UI chrome; keep the icon language consistent with the rest of the design system (shadcn + lucide-react). Swaps ----- - lib/listing-personas.ts — Persona emojis (👨👩👧🏡🚇🧑💻🌳📈🛡️🏥) → Lucide icons (Baby, Home, TrainFront, Laptop, Trees, TrendingUp, Shield, HeartPulse). Persona type now carries `icon: LucideIcon`. - components/neighborhood/types.ts — POI_CATEGORY_CONFIG emojis (🏫🏥🚇🛒🍽️🌳) → Lucide (GraduationCap, Stethoscope, TrainFront, ShoppingBag, UtensilsCrossed, Trees). Config type tightened to `icon: LucideIcon`. - components/neighborhood/neighborhood-poi-map.tsx — filter pills now render <config.icon h-3.5 w-3.5>. Map markers were text-emoji (el.textContent = config.icon); replaced with hard-coded inline SVG strings per category (POI_MARKER_SVG) since lucide-static isn't installed. Marker bumped 28px → 32px for larger hit target. Popup now shows only the property name + category label (no emoji prefix). closeButton: true + closeOnClick: true for better dismissibility. - listing-detail-client.tsx — PersonaFitCard now renders <p.icon h-4 w-4 aria-hidden>. - transfer / chuyen-nhuong files — category icons (🛋️🧊🖥️🍳🛍️🏠) migrated to Lucide (Sofa, Refrigerator, Monitor, ChefHat, Store, Home) with type `icon: LucideIcon`. - Small replacements: inquiries page 📭 → Inbox; kyc page ✓ → Check. POI popup click fix ------------------- The inner SVG inside each POI marker was capturing pointer events before Mapbox's marker-click handler saw them, so clicking a marker did nothing. Explicit `innerSvg.style.pointerEvents = 'none'` lets clicks reach the wrapping .poi-marker div that setPopup() is bound to. Verified via DOM dispatch: click → popup opens with property name + category + distance + × close. Verification ------------ - Grep across the 4 scoped files for emoji code points → 0 hits. - pnpm -w test: 624/624 green. - Typecheck: no new errors in touched files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
238 lines
7.9 KiB
TypeScript
238 lines
7.9 KiB
TypeScript
/**
|
|
* Derive "Phù hợp với ai" personas and compose a "Vì sao nên ở đây"
|
|
* narrative from existing data (listing + neighborhood score + nearby POIs).
|
|
*
|
|
* Phase D of the listings-detail enhancement: purely client-side — no new
|
|
* backend fields are needed. Admin-authored overrides can layer on top later
|
|
* once we have a `suitableFor` / `whyThisLocation` column (Phase B).
|
|
*/
|
|
|
|
import {
|
|
Baby,
|
|
HeartPulse,
|
|
Home,
|
|
Laptop,
|
|
Shield,
|
|
TrainFront,
|
|
Trees,
|
|
TrendingUp,
|
|
type LucideIcon,
|
|
} from 'lucide-react';
|
|
import type { NearbyPOICategory } from './analytics-api';
|
|
import type { ListingDetail, NeighborhoodScoreResult } from './listings-api';
|
|
|
|
export type PersonaKey =
|
|
| 'family_with_kids'
|
|
| 'young_family'
|
|
| 'commuter'
|
|
| 'single_young'
|
|
| 'nature_lover'
|
|
| 'investor'
|
|
| 'safety_first'
|
|
| 'senior';
|
|
|
|
export interface Persona {
|
|
key: PersonaKey;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
reason: string;
|
|
}
|
|
|
|
const PERSONA_LABELS: Record<PersonaKey, { label: string; icon: LucideIcon }> = {
|
|
family_with_kids: { label: 'Gia đình có con nhỏ', icon: Baby },
|
|
young_family: { label: 'Gia đình trẻ', icon: Home },
|
|
commuter: { label: 'Người đi làm xa', icon: TrainFront },
|
|
single_young: { label: 'Người trẻ / độc thân', icon: Laptop },
|
|
nature_lover: { label: 'Yêu thiên nhiên', icon: Trees },
|
|
investor: { label: 'Nhà đầu tư', icon: TrendingUp },
|
|
safety_first: { label: 'Ưu tiên an ninh', icon: Shield },
|
|
senior: { label: 'Người lớn tuổi', icon: HeartPulse },
|
|
};
|
|
|
|
type POICountByCategory = Partial<Record<NearbyPOICategory, number>>;
|
|
|
|
function countPOIs(pois: Array<{ category: NearbyPOICategory }>): POICountByCategory {
|
|
const counts: POICountByCategory = {};
|
|
for (const p of pois) {
|
|
counts[p.category] = (counts[p.category] ?? 0) + 1;
|
|
}
|
|
return counts;
|
|
}
|
|
|
|
export function derivePersonas(
|
|
listing: ListingDetail,
|
|
score: NeighborhoodScoreResult | null,
|
|
pois: Array<{ category: NearbyPOICategory }>,
|
|
): Persona[] {
|
|
const { property } = listing;
|
|
const poiCount = countPOIs(pois);
|
|
const out: Persona[] = [];
|
|
|
|
// Gia đình có con nhỏ — cần trường học + 2+ phòng ngủ.
|
|
if (score && score.educationScore >= 7 && (property.bedrooms ?? 0) >= 2) {
|
|
const schools = poiCount.school ?? 0;
|
|
out.push({
|
|
...PERSONA_LABELS.family_with_kids,
|
|
key: 'family_with_kids',
|
|
reason: schools > 0
|
|
? `Khu vực có ${schools} trường học gần & điểm giáo dục ${score.educationScore}/10.`
|
|
: `Điểm giáo dục khu vực ${score.educationScore}/10.`,
|
|
});
|
|
}
|
|
|
|
// Gia đình trẻ — 2 PN + y tế tốt (mẹ và bé).
|
|
if (property.bedrooms === 2 && score && score.healthcareScore >= 7) {
|
|
const hospitals = poiCount.hospital ?? 0;
|
|
out.push({
|
|
...PERSONA_LABELS.young_family,
|
|
key: 'young_family',
|
|
reason: hospitals > 0
|
|
? `Có ${hospitals} bệnh viện/phòng khám gần, y tế ${score.healthcareScore}/10.`
|
|
: `Y tế khu vực đạt ${score.healthcareScore}/10.`,
|
|
});
|
|
}
|
|
|
|
// Người đi làm xa — gần metro (<1km) HOẶC điểm giao thông cao.
|
|
const metroM = property.metroDistanceM;
|
|
const transitCount = poiCount.transit ?? 0;
|
|
if ((metroM != null && metroM <= 1000) || (score && score.transportScore >= 7) || transitCount >= 2) {
|
|
out.push({
|
|
...PERSONA_LABELS.commuter,
|
|
key: 'commuter',
|
|
reason: metroM != null && metroM <= 1000
|
|
? `Cách metro chỉ ${metroM < 1000 ? `${metroM}m` : `${(metroM / 1000).toFixed(1)}km`}.`
|
|
: `Giao thông ${score?.transportScore ?? '?'}/10, ${transitCount} điểm metro/bus gần.`,
|
|
});
|
|
}
|
|
|
|
// Người trẻ/độc thân — studio/1PN HOẶC apartment gần mua sắm/ăn uống.
|
|
const bedrooms = property.bedrooms ?? 0;
|
|
const restaurantCount = poiCount.restaurant ?? 0;
|
|
if (
|
|
bedrooms <= 1 ||
|
|
(property.propertyType === 'APARTMENT' && score && score.shoppingScore >= 7 && restaurantCount >= 2)
|
|
) {
|
|
out.push({
|
|
...PERSONA_LABELS.single_young,
|
|
key: 'single_young',
|
|
reason: bedrooms <= 1
|
|
? `Thiết kế ${bedrooms} phòng ngủ phù hợp ở một mình / cặp đôi trẻ.`
|
|
: `Gần ${restaurantCount} nhà hàng/quán cafe, mua sắm ${score?.shoppingScore ?? '?'}/10.`,
|
|
});
|
|
}
|
|
|
|
// Yêu thiên nhiên — điểm môi trường cao hoặc có công viên gần.
|
|
const parkCount = poiCount.park ?? 0;
|
|
if ((score && score.greeneryScore >= 7) || parkCount >= 1) {
|
|
out.push({
|
|
...PERSONA_LABELS.nature_lover,
|
|
key: 'nature_lover',
|
|
reason: parkCount > 0
|
|
? `Có ${parkCount} công viên gần, môi trường ${score?.greeneryScore ?? '?'}/10.`
|
|
: `Môi trường khu vực ${score?.greeneryScore ?? '?'}/10.`,
|
|
});
|
|
}
|
|
|
|
// Ưu tiên an ninh.
|
|
if (score && score.safetyScore >= 8) {
|
|
out.push({
|
|
...PERSONA_LABELS.safety_first,
|
|
key: 'safety_first',
|
|
reason: `An ninh khu vực đạt ${score.safetyScore}/10.`,
|
|
});
|
|
}
|
|
|
|
// Người lớn tuổi — gần y tế + không ồn ào (bedrooms >= 2, có elevator ngầm
|
|
// nếu là chung cư cao tầng thì totalFloors >= 5 không phải walk-up).
|
|
const hospitals = poiCount.hospital ?? 0;
|
|
if (score && score.healthcareScore >= 8 && hospitals >= 2) {
|
|
out.push({
|
|
...PERSONA_LABELS.senior,
|
|
key: 'senior',
|
|
reason: `Có ${hospitals} bệnh viện gần, y tế ${score.healthcareScore}/10.`,
|
|
});
|
|
}
|
|
|
|
// Nhà đầu tư — SALE + transport cao + total score high → khu vực hot.
|
|
if (
|
|
listing.transactionType === 'SALE' &&
|
|
score &&
|
|
score.totalScore >= 75 &&
|
|
score.transportScore >= 7
|
|
) {
|
|
out.push({
|
|
...PERSONA_LABELS.investor,
|
|
key: 'investor',
|
|
reason: `Khu vực tổng điểm ${score.totalScore}/100 với giao thông ${score.transportScore}/10 — tiềm năng cho thuê tốt.`,
|
|
});
|
|
}
|
|
|
|
return out;
|
|
}
|
|
|
|
/**
|
|
* Compose a short narrative highlighting the strongest 2-3 reasons to live
|
|
* here. Returns null when there isn't enough signal to say anything useful.
|
|
*/
|
|
export function composeWhyThisLocation(
|
|
listing: ListingDetail,
|
|
score: NeighborhoodScoreResult | null,
|
|
pois: Array<{ category: NearbyPOICategory }>,
|
|
): string | null {
|
|
if (!score) return null;
|
|
|
|
const { property } = listing;
|
|
const poiCount = countPOIs(pois);
|
|
|
|
const scoreEntries: Array<{ label: string; score: number; detail: string }> = [
|
|
{
|
|
label: 'giáo dục',
|
|
score: score.educationScore,
|
|
detail: poiCount.school ? `${poiCount.school} trường học gần` : 'hệ thống trường đa dạng',
|
|
},
|
|
{
|
|
label: 'y tế',
|
|
score: score.healthcareScore,
|
|
detail: poiCount.hospital ? `${poiCount.hospital} bệnh viện trong 2km` : 'tiện ích y tế đầy đủ',
|
|
},
|
|
{
|
|
label: 'giao thông',
|
|
score: score.transportScore,
|
|
detail:
|
|
property.metroDistanceM != null && property.metroDistanceM <= 1000
|
|
? `cách metro chỉ ${property.metroDistanceM}m`
|
|
: poiCount.transit
|
|
? `${poiCount.transit} điểm metro/bus gần`
|
|
: 'dễ kết nối các khu vực khác',
|
|
},
|
|
{
|
|
label: 'mua sắm',
|
|
score: score.shoppingScore,
|
|
detail: poiCount.shopping ? `${poiCount.shopping} siêu thị/TTTM gần` : 'nhiều lựa chọn mua sắm',
|
|
},
|
|
{
|
|
label: 'môi trường',
|
|
score: score.greeneryScore,
|
|
detail: poiCount.park ? `${poiCount.park} công viên gần` : 'không gian xanh tốt',
|
|
},
|
|
{
|
|
label: 'an ninh',
|
|
score: score.safetyScore,
|
|
detail: 'khu dân cư yên tĩnh',
|
|
},
|
|
];
|
|
|
|
const highlights = scoreEntries
|
|
.filter((e) => e.score >= 7)
|
|
.sort((a, b) => b.score - a.score)
|
|
.slice(0, 3);
|
|
|
|
if (highlights.length === 0) return null;
|
|
|
|
const sentences = highlights.map(
|
|
(h) => `${h.label.charAt(0).toUpperCase()}${h.label.slice(1)} đạt ${h.score}/10 (${h.detail})`,
|
|
);
|
|
|
|
return `${sentences.join('. ')}.`;
|
|
}
|