feat: comprehensive seed, Lucide icons, grouped dashboard nav, API fixes

- Rewrite prisma/seed.ts to populate all 27 models with realistic
  Vietnamese real estate data (8 users with login, 10 properties,
  10 listings, orders, payments, reviews, notifications, etc.)
- Replace all emoji icons with Lucide React SVG icons across frontend
  for consistent rendering, sizing, and accessibility
- Redesign dashboard nav: grouped sidebar with section headers,
  primary/secondary split on desktop, icon-only secondary items
- Replace language switcher flag emoji with Globe icon
- Replace SVG theme toggle with Lucide Moon/Sun icons
- Fix API startup: graceful fallback for Sentry profiling, Google OAuth,
  and Zalo OAuth when credentials are not configured
- Relax rate limiting in development mode (10k req/min)
- Fix listings API to include media[] array in search response
- Add optional chaining for property.media across frontend components
- Update OAuth strategy tests to match graceful fallback behavior

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>

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

@@ -238,9 +238,9 @@ export default function DashboardPage() {
                   className="flex items-center gap-4 rounded-lg border p-3 transition-colors hover:bg-accent"
                 >
                   <div className="relative h-12 w-16 flex-shrink-0 overflow-hidden rounded bg-muted">
-                    {listing.property.media.length > 0 ? (
+                    {(listing.property.media?.length ?? 0) > 0 ? (
                       <Image
-                        src={listing.property.media[0]?.url ?? ''}
+                        src={listing.property.media![0]?.url ?? ''}
                         alt={listing.property.title}
                         fill
                         sizes="64px"

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

@@ -1,6 +1,24 @@
 'use client';
 
-import { LogOut, Menu, X } from 'lucide-react';
+import {
+  BarChart3,
+  Bookmark,
+  Bot,
+  CreditCard,
+  Gem,
+  Home,
+  List,
+  LogOut,
+  Menu,
+  MessageSquare,
+  Moon,
+  Plus,
+  Sun,
+  Target,
+  User,
+  X,
+  type LucideIcon,
+} from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -11,6 +29,17 @@ import { Link } from '@/i18n/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import { cn } from '@/lib/utils';
 
+interface NavItem {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+interface NavGroup {
+  label: string;
+  items: NavItem[];
+}
+
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const { user, logout } = useAuthStore();
@@ -18,20 +47,61 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const t = useTranslations();
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
-  const navItems = [
-    { href: '/dashboard' as const, label: t('dashboard.title'), icon: '🏠' },
-    { href: '/listings' as const, label: t('dashboard.listings'), icon: '📋' },
-    { href: '/listings/new' as const, label: t('dashboard.createListing'), icon: '➕' },
-    { href: '/inquiries' as const, label: t('dashboard.inquiries'), icon: '💬' },
-    { href: '/leads' as const, label: t('dashboard.leads'), icon: '🎯' },
-    { href: '/analytics' as const, label: t('dashboard.analytics'), icon: '📊' },
-    { href: '/dashboard/saved-searches' as const, label: t('dashboard.savedSearches'), icon: '🔖' },
-    { href: '/dashboard/valuation' as const, label: t('dashboard.aiValuation'), icon: '🤖' },
-    { href: '/dashboard/profile' as const, label: t('dashboard.profile'), icon: '👤' },
-    { href: '/dashboard/subscription' as const, label: t('dashboard.subscription'), icon: '💎' },
-    { href: '/dashboard/payments' as const, label: t('dashboard.payments'), icon: '💳' },
+  const navGroups: NavGroup[] = [
+    {
+      label: t('dashboard.title'),
+      items: [
+        { href: '/dashboard', label: t('dashboard.title'), icon: Home },
+        { href: '/listings', label: t('dashboard.listings'), icon: List },
+        { href: '/listings/new', label: t('dashboard.createListing'), icon: Plus },
+      ],
+    },
+    {
+      label: 'CRM',
+      items: [
+        { href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
+        { href: '/leads', label: t('dashboard.leads'), icon: Target },
+      ],
+    },
+    {
+      label: t('dashboard.analytics'),
+      items: [
+        { href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
+        { href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
+        { href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
+      ],
+    },
+    {
+      label: t('dashboard.profile'),
+      items: [
+        { href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
+        { href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
+        { href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
+      ],
+    },
   ];
 
+  // Flat list for desktop nav (only primary items shown inline)
+  const primaryNav: NavItem[] = [
+    { href: '/dashboard', label: t('dashboard.title'), icon: Home },
+    { href: '/listings', label: t('dashboard.listings'), icon: List },
+    { href: '/listings/new', label: t('dashboard.createListing'), icon: Plus },
+    { href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
+    { href: '/leads', label: t('dashboard.leads'), icon: Target },
+    { href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
+  ];
+
+  const secondaryNav: NavItem[] = [
+    { href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
+    { href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
+    { href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
+    { href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
+    { href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
+  ];
+
+  const isActive = (href: string) =>
+    pathname === href || (href !== '/dashboard' && pathname.startsWith(href));
+
   return (
     <div className="min-h-screen bg-background">
       {/* Mobile overlay */}
@@ -43,7 +113,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         />
       )}
 
-      {/* Mobile sidebar */}
+      {/* Mobile sidebar — grouped nav */}
       <aside
         role="navigation"
         aria-label={t('nav.dashboardNav')}
@@ -65,22 +135,31 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
           </button>
         </div>
 
-        <nav className="flex flex-col gap-1 p-3">
-          {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              onClick={() => setSidebarOpen(false)}
-              className={cn(
-                'flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
-                pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
-                  ? 'bg-primary/10 text-primary'
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-              )}
-            >
-              <span aria-hidden="true">{item.icon}</span>
-              {item.label}
-            </Link>
+        <nav className="flex flex-col gap-4 overflow-y-auto p-3">
+          {navGroups.map((group) => (
+            <div key={group.label}>
+              <p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
+                {group.label}
+              </p>
+              <div className="flex flex-col gap-0.5">
+                {group.items.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setSidebarOpen(false)}
+                    className={cn(
+                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                      isActive(item.href)
+                        ? 'bg-primary/10 text-primary'
+                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                    )}
+                  >
+                    <item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
           ))}
         </nav>
 
@@ -114,33 +193,57 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             <Menu className="h-5 w-5" />
           </button>
 
-          <Link href="/" className="mr-6 flex items-center space-x-2">
+          <Link href="/" className="mr-4 flex items-center space-x-2">
             <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
           </Link>
 
-          {/* Desktop nav */}
-          <nav aria-label={t('nav.dashboardNav')} className="hidden items-center space-x-1 md:flex">
-            {navItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                aria-label={item.label}
-                className={cn(
-                  'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
-                  pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))
-                    ? 'bg-accent text-accent-foreground'
-                    : 'text-muted-foreground',
-                )}
-              >
-                <span className="mr-1.5" aria-hidden="true">{item.icon}</span>
-                <span className="hidden lg:inline">{item.label}</span>
-              </Link>
-            ))}
+          {/* Desktop nav — primary items with labels, secondary icon-only */}
+          <nav aria-label={t('nav.dashboardNav')} className="hidden items-center md:flex">
+            <div className="flex items-center">
+              {primaryNav.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  aria-label={item.label}
+                  title={item.label}
+                  className={cn(
+                    'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
+                    isActive(item.href)
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  <item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
+                  <span className="hidden xl:inline">{item.label}</span>
+                </Link>
+              ))}
+            </div>
+
+            <div className="mx-2 h-5 w-px bg-border" aria-hidden="true" />
+
+            <div className="flex items-center">
+              {secondaryNav.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  aria-label={item.label}
+                  title={item.label}
+                  className={cn(
+                    'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground',
+                    isActive(item.href)
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  <item.icon className="h-4 w-4" aria-hidden="true" />
+                </Link>
+              ))}
+            </div>
           </nav>
 
-          <div className="ml-auto flex items-center space-x-2">
+          <div className="ml-auto flex items-center space-x-1">
             {user && (
-              <span className="hidden text-sm text-muted-foreground sm:inline">
+              <span className="hidden text-sm text-muted-foreground lg:inline">
                 {user.fullName}
               </span>
             )}
@@ -153,17 +256,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
               className="h-9 w-9 p-0"
             >
               {theme === 'light' ? (
-                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                </svg>
+                <Moon className="h-4 w-4" aria-hidden="true" />
               ) : (
-                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                </svg>
+                <Sun className="h-4 w-4" aria-hidden="true" />
               )}
             </Button>
-            <Button variant="ghost" size="sm" className="hidden md:inline-flex" onClick={() => logout()}>
-              {t('common.logout')}
+            <Button variant="ghost" size="sm" className="hidden gap-1.5 md:inline-flex" onClick={() => logout()}>
+              <LogOut className="h-4 w-4" aria-hidden="true" />
+              <span className="hidden lg:inline">{t('common.logout')}</span>
             </Button>
           </div>
         </div>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { ClipboardList } from 'lucide-react';
 import * as React from 'react';
 import { CreateLeadDialog } from '@/components/leads/create-lead-dialog';
 import { LeadDetailDialog } from '@/components/leads/lead-detail-dialog';
@@ -149,7 +150,7 @@ export default function LeadsPage() {
         </div>
       ) : !result || result.data.length === 0 ? (
         <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
-          <p className="text-4xl mb-3">📋</p>
+          <ClipboardList className="h-10 w-10 text-muted-foreground mb-3" aria-hidden="true" />
           <p>Chưa có lead nào</p>
           <Button variant="outline" size="sm" className="mt-3" onClick={() => setCreateOpen(true)}>
             Thêm lead đầu tiên

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

@@ -184,9 +184,9 @@ export default function ListingsPage() {
             <Link key={listing.id} href={`/listings/${listing.id}`}>
               <Card className="h-full overflow-hidden transition-shadow hover:shadow-md">
                 <div className="relative aspect-[4/3] bg-muted">
-                  {listing.property.media.length > 0 ? (
+                  {(listing.property.media?.length ?? 0) > 0 ? (
                     <Image
-                      src={listing.property.media[0]?.url ?? ''}
+                      src={listing.property.media![0]?.url ?? ''}
                       alt={listing.property.title}
                       fill
                       sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { Building2, CheckCircle2, Home, MapPin, Users, type LucideIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import * as React from 'react';
 import { PropertyCard } from '@/components/search/property-card';
@@ -24,11 +25,11 @@ const DISTRICTS = [
 
 type StatKey = 'listings' | 'users' | 'transactions' | 'provinces';
 
-const STATS: { key: StatKey; value: string; icon: string }[] = [
-  { key: 'listings', value: '10,000+', icon: '🏠' },
-  { key: 'users', value: '50,000+', icon: '👥' },
-  { key: 'transactions', value: '2,000+', icon: '✅' },
-  { key: 'provinces', value: '63', icon: '📍' },
+const STATS: { key: StatKey; value: string; icon: LucideIcon }[] = [
+  { key: 'listings', value: '10,000+', icon: Home },
+  { key: 'users', value: '50,000+', icon: Users },
+  { key: 'transactions', value: '2,000+', icon: CheckCircle2 },
+  { key: 'provinces', value: '63', icon: MapPin },
 ];
 
 const PROPERTY_TYPE_KEYS = ['APARTMENT', 'HOUSE', 'VILLA', 'LAND', 'OFFICE', 'SHOPHOUSE'] as const;
@@ -201,7 +202,7 @@ export default function LandingPage() {
                 <Card className="group cursor-pointer overflow-hidden transition-shadow hover:shadow-md">
                   <div className="aspect-[16/9] bg-gradient-to-br from-primary/10 to-primary/5">
                     <div className="flex h-full items-center justify-center">
-                      <span className="text-3xl" aria-hidden="true">🏙️</span>
+                      <Building2 className="h-8 w-8 text-primary" aria-hidden="true" />
                     </div>
                   </div>
                   <CardContent className="p-3">
@@ -231,7 +232,7 @@ export default function LandingPage() {
                 key={stat.key}
                 className="rounded-lg border bg-card p-6 text-center shadow-sm"
               >
-                <span className="text-3xl" aria-hidden="true">{stat.icon}</span>
+                <stat.icon className="h-8 w-8 text-primary" aria-hidden="true" />
                 <p className="mt-2 text-3xl font-bold text-primary">{stat.value}</p>
                 <p className="mt-1 text-sm text-muted-foreground">{t(`stats.${stat.key}`)}</p>
               </div>