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/components/comparison/comparison-table.tsx

@@ -74,9 +74,9 @@ export function ComparisonTable({ listings, onRemove }: ComparisonTableProps) {
                 <div className="flex flex-col items-center gap-2">
                   {/* Image */}
                   <div className="relative aspect-[4/3] w-full max-w-[200px] overflow-hidden rounded-md 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="200px"

apps/web/components/inquiries/inquiry-detail-dialog.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { MessageCircle, Phone } from 'lucide-react';
 import { InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
 import { Button } from '@/components/ui/button';
 import {
@@ -80,7 +81,7 @@ export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDeta
                 href={`tel:${inquiry.phone ?? inquiry.userPhone}`}
                 className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
               >
-                📞 Gọi điện
+                <Phone className="h-4 w-4" aria-hidden="true" /> Gọi điện
               </a>
               <a
                 href={`https://zalo.me/${(inquiry.phone ?? inquiry.userPhone).replace(/^0/, '84')}`}
@@ -88,7 +89,7 @@ export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDeta
                 rel="noopener noreferrer"
                 className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
               >
-                💬 Zalo
+                <MessageCircle className="h-4 w-4" aria-hidden="true" /> Zalo
               </a>
             </div>
           </div>

apps/web/components/leads/lead-detail-dialog.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Mail, MessageCircle, Phone } from 'lucide-react';
 import * as React from 'react';
 import { LeadStatusBadge } from '@/components/leads/lead-status-badge';
 import { Button } from '@/components/ui/button';
@@ -151,14 +152,14 @@ export function LeadDetailDialog({ lead, open, onOpenChange }: LeadDetailDialogP
                 href={`tel:${lead.phone}`}
                 className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
               >
-                📞 Gọi điện
+                <Phone className="h-4 w-4" aria-hidden="true" /> Gọi điện
               </a>
               {lead.email && (
                 <a
                   href={`mailto:${lead.email}`}
                   className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
                 >
-                  ✉️ Email
+                  <Mail className="h-4 w-4" aria-hidden="true" /> Email
                 </a>
               )}
               <a
@@ -167,7 +168,7 @@ export function LeadDetailDialog({ lead, open, onOpenChange }: LeadDetailDialogP
                 rel="noopener noreferrer"
                 className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
               >
-                💬 Zalo
+                <MessageCircle className="h-4 w-4" aria-hidden="true" /> Zalo
               </a>
             </div>
           </div>

apps/web/components/map/listing-map.tsx

@@ -140,9 +140,9 @@ export function ListingMap({ listings, onMarkerClick, selectedListingId, classNa
     const container = document.createElement('div');
     container.style.fontFamily = 'system-ui,sans-serif';
 
-    if (listing.property.media.length > 0) {
+    if ((listing.property.media?.length ?? 0) > 0) {
       const img = document.createElement('img');
-      img.src = listing.property.media[0]!.url;
+      img.src = listing.property.media![0]!.url;
       img.alt = listing.property.title;
       img.style.cssText = 'width:100%;height:96px;object-fit:cover;border-radius:6px;margin-bottom:8px;';
       container.appendChild(img);

apps/web/components/search/property-card.tsx

@@ -32,9 +32,9 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
       <Link href={`/listings/${listing.id}`}>
         <Card className="group h-full overflow-hidden transition-shadow hover:shadow-md">
           <div className={`relative bg-muted ${compact ? 'aspect-[16/10]' : 'aspect-[4/3]'}`}>
-            {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={`Ảnh bất động sản: ${listing.property.title}`}
                 fill
                 sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
@@ -55,10 +55,10 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
                 {propertyTypeLabel}
               </Badge>
             </div>
-            {listing.property.media.length > 1 && (
+            {(listing.property.media?.length ?? 0) > 1 && (
               <div className="absolute bottom-2 right-2">
-                <Badge variant="outline" className="bg-black/50 text-xs text-white border-none" aria-label={`${listing.property.media.length} ảnh`}>
-                  {listing.property.media.length} ảnh
+                <Badge variant="outline" className="bg-black/50 text-xs text-white border-none" aria-label={`${listing.property.media!.length} ảnh`}>
+                  {listing.property.media!.length} ảnh
                 </Badge>
               </div>
             )}

apps/web/components/ui/language-switcher.tsx

@@ -1,12 +1,13 @@
 'use client';
 
+import { Globe } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 import type { Locale } from '@/i18n/config';
 import { usePathname, useRouter } from '@/i18n/navigation';
 
 const localeLabels: Record<Locale, string> = {
-  vi: '🇻🇳 VI',
-  en: '🇬🇧 EN',
+  vi: 'VI',
+  en: 'EN',
 };
 
 export function LanguageSwitcher() {
@@ -28,6 +29,7 @@ export function LanguageSwitcher() {
       className="inline-flex h-9 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
       aria-label={`${t('label')}: ${t(locale)} → ${t(nextLocale)}`}
     >
+      <Globe className="h-4 w-4" aria-hidden="true" />
       <span aria-hidden="true">{localeLabels[nextLocale]}</span>
       <span className="sr-only">{t(nextLocale)}</span>
     </button>