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>

apps/web/app/[locale]/(dashboard)/dashboard/kyc/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Check } from 'lucide-react';
 import { useState, useCallback, useEffect } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -530,8 +531,8 @@ export default function KycPage() {
       {kycStatus === 'VERIFIED' && (
         <Card>
           <CardContent className="flex flex-col items-center justify-center py-12">
-            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 text-3xl">
-              ✓
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 text-green-700">
+              <Check className="h-8 w-8" aria-hidden="true" />
             </div>
             <h2 className="text-xl font-semibold">Danh tính đã được xác minh</h2>
             <p className="mt-2 text-center text-sm text-muted-foreground">

apps/web/app/[locale]/(dashboard)/inquiries/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Inbox } from 'lucide-react';
 import * as React from 'react';
 import { InquiryDetailDialog } from '@/components/inquiries/inquiry-detail-dialog';
 import { InquiryRow, InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
@@ -103,7 +104,7 @@ export default function InquiriesPage() {
         </div>
       ) : filteredData.length === 0 ? (
         <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
-          <p className="text-4xl mb-3">📭</p>
+          <Inbox className="mb-3 h-12 w-12" aria-hidden="true" />
           <p>Chưa có liên hệ nào</p>
           <p className="text-xs mt-1">
             Khi khách hàng gửi yêu cầu tư vấn, chúng sẽ xuất hiện ở đây

apps/web/app/[locale]/(public)/chuyen-nhuong/page.tsx

@@ -133,21 +133,25 @@ export default function ChuyenNhuongPage() {
         >
           Tất cả
         </button>
-        {(Object.entries(CATEGORY_LABELS) as [TransferCategory, string][]).map(([key, label]) => (
-          <button
-            key={key}
-            role="tab"
-            aria-selected={filters.category === key}
-            className={`shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
-              filters.category === key
-                ? 'border-primary text-primary'
-                : 'border-transparent text-muted-foreground hover:text-foreground'
-            }`}
-            onClick={() => handleCategoryChange(key)}
-          >
-            {CATEGORY_ICONS[key]} {label}
-          </button>
-        ))}
+        {(Object.entries(CATEGORY_LABELS) as [TransferCategory, string][]).map(([key, label]) => {
+          const Icon = CATEGORY_ICONS[key];
+          return (
+            <button
+              key={key}
+              role="tab"
+              aria-selected={filters.category === key}
+              className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
+                filters.category === key
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+              onClick={() => handleCategoryChange(key)}
+            >
+              <Icon className="h-4 w-4" aria-hidden="true" />
+              {label}
+            </button>
+          );
+        })}
       </div>
 
       {/* Results */}

apps/web/components/chuyen-nhuong/chuyen-nhuong-detail-client.tsx

@@ -43,8 +43,12 @@ export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientPr
           <Badge className={cn('text-xs', statusColor)} variant="secondary">
             {STATUS_LABELS[listing.status]}
           </Badge>
-          <Badge variant="outline" className="text-xs">
-            {CATEGORY_ICONS[listing.category]} {CATEGORY_LABELS[listing.category]}
+          <Badge variant="outline" className="inline-flex items-center gap-1 text-xs">
+            {(() => {
+              const Icon = CATEGORY_ICONS[listing.category];
+              return <Icon className="h-3.5 w-3.5" aria-hidden="true" />;
+            })()}
+            {CATEGORY_LABELS[listing.category]}
           </Badge>
           {listing.isNegotiable && (
             <Badge className="bg-blue-100 text-blue-800 text-xs" variant="secondary">

apps/web/components/chuyen-nhuong/transfer-listing-card.tsx

@@ -44,8 +44,12 @@ export function TransferListingCard({ listing }: TransferListingCardProps) {
 
           {/* Category */}
           <div className="mb-3">
-            <Badge variant="outline" className="text-xs">
-              {CATEGORY_ICONS[listing.category]} {CATEGORY_LABELS[listing.category]}
+            <Badge variant="outline" className="inline-flex items-center gap-1 text-xs">
+              {(() => {
+                const Icon = CATEGORY_ICONS[listing.category];
+                return <Icon className="h-3.5 w-3.5" aria-hidden="true" />;
+              })()}
+              {CATEGORY_LABELS[listing.category]}
             </Badge>
           </div>
 

apps/web/components/chuyen-nhuong/transfer-wizard-client.tsx

@@ -52,7 +52,10 @@ function StepCategory() {
               category === value && 'border-primary bg-primary/5 ring-1 ring-primary',
             )}
           >
-            <span className="text-2xl">{CATEGORY_ICONS[value]}</span>
+            {(() => {
+              const Icon = CATEGORY_ICONS[value];
+              return <Icon className="h-6 w-6" aria-hidden="true" />;
+            })()}
             <span>{label}</span>
           </button>
         ))}

apps/web/components/listings/listing-detail-client.tsx

@@ -527,7 +527,9 @@ function PersonaFitCard({
                 className="group relative inline-flex items-center gap-1.5 rounded-full border bg-card px-3 py-1.5 text-sm shadow-sm"
                 title={p.reason}
               >
-                <span aria-hidden="true">{p.emoji}</span>
+                <span className="inline-flex items-center text-primary">
+                  <p.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
+                </span>
                 <span className="font-medium">{p.label}</span>
               </div>
             ))}

apps/web/components/neighborhood/neighborhood-poi-map.tsx

@@ -8,6 +8,26 @@ import { useMapboxStyle } from '@/lib/mapbox-style';
 import { cn } from '@/lib/utils';
 import { type POIItem, type POICategory, POI_CATEGORY_CONFIG  } from './types';
 
+/**
+ * Hard-coded inline SVG markup for the 6 POI categories. Sourced from
+ * lucide-react (same icons referenced in POI_CATEGORY_CONFIG). Used to render
+ * the Lucide glyph inside Mapbox marker DOM where we can't mount a React tree.
+ */
+const POI_MARKER_SVG: Record<POICategory, string> = {
+  school:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>',
+  hospital:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 2v2"/><path d="M5 2v2"/><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"/><path d="M8 15a6 6 0 0 0 12 0v-3"/><circle cx="20" cy="10" r="2"/></svg>',
+  transit:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.1V7a4 4 0 0 0 8 0V3.1"/><path d="m9 15-1-1"/><path d="m15 15 1-1"/><path d="M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z"/><path d="m8 19-2 3"/><path d="m16 19 2 3"/></svg>',
+  shopping:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>',
+  restaurant:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8"/><path d="M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7"/><path d="m2.1 21.8 6.4-6.3"/><path d="m19 5-7 7"/></svg>',
+  park:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"/><path d="M7 16v6"/><path d="M13 19v3"/><path d="M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"/></svg>',
+};
+
 interface NeighborhoodPOIMapProps {
   center: { lat: number; lng: number };
   pois: POIItem[];
@@ -105,8 +125,8 @@ export function NeighborhoodPOIMap({
       const el = document.createElement('div');
       el.className = 'poi-marker';
       el.style.cssText = `
-        width: 28px;
-        height: 28px;
+        width: 32px;
+        height: 32px;
         border-radius: 50%;
         background: ${config.color};
         border: 2px solid white;
@@ -114,12 +134,16 @@ export function NeighborhoodPOIMap({
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 14px;
         cursor: pointer;
         transition: transform 0.15s;
       `;
-      el.textContent = config.icon;
+      el.innerHTML = POI_MARKER_SVG[poi.category];
       el.title = `${poi.name} (${config.label})`;
+      // Inner SVG would otherwise swallow the click before Mapbox's marker
+      // handler sees it — mark it as passthrough so pointer events hit the
+      // wrapping .poi-marker div that Mapbox bound setPopup to.
+      const innerSvg = el.querySelector('svg');
+      if (innerSvg) innerSvg.style.pointerEvents = 'none';
 
       el.addEventListener('mouseenter', () => {
         el.style.transform = 'scale(1.3)';
@@ -128,10 +152,10 @@ export function NeighborhoodPOIMap({
         el.style.transform = 'scale(1)';
       });
 
-      const popup = new mapboxgl.Popup({ offset: 20, closeButton: false })
+      const popup = new mapboxgl.Popup({ offset: 20, closeButton: true, closeOnClick: true })
         .setHTML(
           `<div style="font-family:system-ui,sans-serif;background:hsl(var(--card));color:hsl(var(--card-foreground));padding:8px;border-radius:6px;">
-            <p style="font-weight:600;font-size:13px;margin:0 0 2px;">${config.icon} ${poi.name}</p>
+            <p style="font-weight:600;font-size:13px;margin:0 0 2px;">${poi.name}</p>
             <p style="font-size:12px;color:hsl(var(--muted-foreground));margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
           </div>`,
         );
@@ -198,7 +222,7 @@ export function NeighborhoodPOIMap({
               )}
               title={`${isActive ? 'Ẩn' : 'Hiện'} ${config.label}`}
             >
-              <span>{config.icon}</span>
+              <config.icon className="h-3.5 w-3.5" aria-hidden="true" />
               <span>{config.label}</span>
               {poiCount > 0 && (
                 <span

apps/web/components/neighborhood/types.ts

@@ -1,5 +1,15 @@
 /** Neighborhood scoring types shared across components */
 
+import {
+  GraduationCap,
+  ShoppingBag,
+  Stethoscope,
+  TrainFront,
+  Trees,
+  UtensilsCrossed,
+  type LucideIcon,
+} from 'lucide-react';
+
 export interface NeighborhoodCategory {
   category: string;
   label: string;
@@ -33,14 +43,14 @@ export interface NeighborhoodScoreData {
 
 export const POI_CATEGORY_CONFIG: Record<
   POICategory,
-  { label: string; color: string; icon: string }
+  { label: string; color: string; icon: LucideIcon }
 > = {
-  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: '🌳' },
+  school: { label: 'Trường học', color: '#3B82F6', icon: GraduationCap },
+  hospital: { label: 'Bệnh viện', color: '#EF4444', icon: Stethoscope },
+  transit: { label: 'Giao thông', color: '#8B5CF6', icon: TrainFront },
+  shopping: { label: 'Mua sắm', color: '#F59E0B', icon: ShoppingBag },
+  restaurant: { label: 'Nhà hàng', color: '#F97316', icon: UtensilsCrossed },
+  park: { label: 'Công viên', color: '#22C55E', icon: Trees },
 };
 
 export const DEFAULT_CATEGORIES: NeighborhoodCategory[] = [

apps/web/lib/chuyen-nhuong-api.ts

@@ -1,3 +1,12 @@
+import {
+  ChefHat,
+  Home,
+  Monitor,
+  Refrigerator,
+  Sofa,
+  Store,
+  type LucideIcon,
+} from 'lucide-react';
 import { apiClient } from './api-client';
 
 // ─── Types ──────────────────────────────────────────────
@@ -122,13 +131,13 @@ export const CATEGORY_LABELS: Record<TransferCategory, string> = {
   FULL_UNIT: 'Trọn bộ',
 };
 
-export const CATEGORY_ICONS: Record<TransferCategory, string> = {
-  FURNITURE: '🛋️',
-  APPLIANCE: '🧊',
-  OFFICE_EQUIPMENT: '🖥️',
-  KITCHEN: '🍳',
-  PREMISES: '🏪',
-  FULL_UNIT: '🏠',
+export const CATEGORY_ICONS: Record<TransferCategory, LucideIcon> = {
+  FURNITURE: Sofa,
+  APPLIANCE: Refrigerator,
+  OFFICE_EQUIPMENT: Monitor,
+  KITCHEN: ChefHat,
+  PREMISES: Store,
+  FULL_UNIT: Home,
 };
 
 export const CONDITION_LABELS: Record<TransferCondition, string> = {

apps/web/lib/listing-personas.ts

@@ -7,6 +7,17 @@
  * 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';
 
@@ -23,19 +34,19 @@ export type PersonaKey =
 export interface Persona {
   key: PersonaKey;
   label: string;
-  emoji: string;
+  icon: LucideIcon;
   reason: string;
 }
 
-const PERSONA_LABELS: Record<PersonaKey, { label: string; emoji: string }> = {
-  family_with_kids: { label: 'Gia đình có con nhỏ', emoji: '👨‍👩‍👧' },
-  young_family: { label: 'Gia đình trẻ', emoji: '🏡' },
-  commuter: { label: 'Người đi làm xa', emoji: '🚇' },
-  single_young: { label: 'Người trẻ / độc thân', emoji: '🧑‍💻' },
-  nature_lover: { label: 'Yêu thiên nhiên', emoji: '🌳' },
-  investor: { label: 'Nhà đầu tư', emoji: '📈' },
-  safety_first: { label: 'Ưu tiên an ninh', emoji: '🛡️' },
-  senior: { label: 'Người lớn tuổi', emoji: '🏥' },
+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>>;

apps/web/lib/validations/transfer.ts

@@ -1,14 +1,27 @@
+import {
+  ChefHat,
+  Home,
+  Monitor,
+  Refrigerator,
+  Sofa,
+  Store,
+  type LucideIcon,
+} from 'lucide-react';
 import { z } from 'zod';
 
 // ─── Step 1: Category Selection ─────────────────────────
 
-export const TRANSFER_CATEGORIES = [
-  { value: 'FURNITURE', label: 'Nội thất', icon: '🛋️' },
-  { value: 'APPLIANCE', label: 'Thiết bị gia dụng', icon: '🧊' },
-  { value: 'OFFICE_EQUIPMENT', label: 'Thiết bị văn phòng', icon: '🖥️' },
-  { value: 'KITCHEN', label: 'Bếp & thiết bị', icon: '🍳' },
-  { value: 'PREMISES', label: 'Mặt bằng', icon: '🏪' },
-  { value: 'FULL_UNIT', label: 'Trọn bộ', icon: '🏠' },
+export const TRANSFER_CATEGORIES: ReadonlyArray<{
+  value: 'FURNITURE' | 'APPLIANCE' | 'OFFICE_EQUIPMENT' | 'KITCHEN' | 'PREMISES' | 'FULL_UNIT';
+  label: string;
+  icon: LucideIcon;
+}> = [
+  { value: 'FURNITURE', label: 'Nội thất', icon: Sofa },
+  { value: 'APPLIANCE', label: 'Thiết bị gia dụng', icon: Refrigerator },
+  { value: 'OFFICE_EQUIPMENT', label: 'Thiết bị văn phòng', icon: Monitor },
+  { value: 'KITCHEN', label: 'Bếp & thiết bị', icon: ChefHat },
+  { value: 'PREMISES', label: 'Mặt bằng', icon: Store },
+  { value: 'FULL_UNIT', label: 'Trọn bộ', icon: Home },
 ] as const;
 
 export const TRANSFER_CONDITIONS = [