4 Commits

Author	SHA1	Message	Date
Ho Ngoc Hai	66eae72f62	fix(maps): marker hover no longer teleports to (0, 0) ... Mapbox GL JS writes `transform: translate(Xpx, Ypx)` on the DOM element passed to `new Marker({ element })`. Any code that does `el.style.transform = 'scale(...)'` on that same element CLOBBERS the translate and the marker snaps to the map origin (top-left). Five map components were doing exactly this in their hover listeners: - components/neighborhood/neighborhood-poi-map.tsx - components/du-an/project-map.tsx - components/khu-cong-nghiep/park-map.tsx - components/charts/district-heatmap.tsx - components/valuation/comparables-map.tsx Fix: wrap the visible marker chrome in an inner <div> and apply the hover scale to that wrapper. The outer element becomes a thin sizing shell that Mapbox can keep positioning untouched. Also set `pointer-events: none` on the inner where the wrapper already has an interactive role so clicks still bubble to the setPopup-bound outer element. Verified on /listings/[id]: POI marker no longer moves on hover, popup still opens on click with the Phase-C close button. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 17:47:05 +07:00
Ho Ngoc Hai	593d1594bd	refactor(web): replace emoji icons with lucide-react across the app ... 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>	2026-04-19 16:01:13 +07:00
Ho Ngoc Hai	0fc6516880	feat(maps): dark/light Mapbox theme + fix empty Image src & missing keys ... Mapbox theming -------------- - New hook `lib/mapbox-style.ts` returning streets-v12 (light) or dark-v11 (dark) from the app's useTheme(). - Six map components now initialise with the themed style and `map.setStyle(...)` on theme change: project-map, park-map, listing-map, district-heatmap (plus re-adding its heatmap source after style.load), neighborhood-poi-map, valuation/comparables-map. - Marker / popup DOM styles swapped from hard-coded white/#666/#green to shadcn CSS tokens (--card, --card-foreground, --muted-foreground, --primary, --border). Global Mapbox popup + control + attribution skins added in app/globals.css. - POI filter pills on neighborhood-poi-map were hard-coded `bg-white` which rendered same-colour text on white in dark mode — switched to `bg-card`/`bg-card/60` for proper contrast. - Extend the MockMap in comparables-map.spec.tsx with setStyle/on so the new theme-sync effect doesn't blow up in tests. Detail client normaliser (du-an-server) --------------------------------------- - Project media from the backend is a `string[]` (raw URLs) or richer `{url,...}` objects. Handle both shapes and drop entries without a URL so we never feed "" to <Image src>. - Amenities are `string[]` in the DB but the frontend type expects `{id,name,icon,category}`; normalise strings into objects so the AmenitiesTab has stable keys and a displayable name. Resolves three classes of runtime warnings on /du-an/<slug>: "Image is missing required 'src' property", "ReactDOM.preload ... empty href", and "Each child in a list should have a unique 'key' prop" (AmenitiesTab). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 14:12:28 +07:00
Ho Ngoc Hai	e21e096e54	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>	2026-04-16 05:11:21 +07:00