feat(web): dashboard gets Dự án + KCN nav; listings pages use list layout

Three asks after a walk-through of the dashboard:

1. Dashboard navigation was missing direct entry points to the two
   catalog surfaces (Dự án, Khu Công Nghiệp) even though both exist at
   /du-an and /khu-cong-nghiep. Users landing in the dashboard had to
   go back out to the public header to reach them.

2. The "Tin đăng" (dashboard listings) page defaulted to a 3-column
   grid which shows only a handful of properties per viewport. Scanning
   many listings at once is easier as a vertical list of horizontal
   rows.

3. The public /search results used the same 3-column grid via
   PropertyCard. Asked to flip to list there too.

Changes
- (dashboard)/layout.tsx: new `catalogs` nav group with Building2 +
  Factory icons pointing at /du-an and /khu-cong-nghiep. Primary
  desktop nav also exposes both so they're reachable without opening
  the hamburger. Uses existing `nav.projects` / `nav.industrialParks`
  i18n keys plus a new `dashboard.catalogs` label in vi/en.
- (dashboard)/listings/page.tsx: default viewMode flipped from 'grid'
  to 'list'. The list mode renders a horizontal row per listing
  (thumbnail + title/location + price + badges + engagement counters)
  inside an <ul>. Toggle button relabelled "Danh sách".
- components/search/search-results.tsx + property-card.tsx: add a
  `layout?: 'card' | 'list'` prop to PropertyCard. When `list`, the
  card renders as a horizontal row with 224px thumbnail on sm+,
  stacked on mobile. SearchResults wraps items in a <ul><li> and asks
  for list layout. Default card layout preserved so other callers
  (compare, related, etc.) keep their vertical card view.

No API / DB changes. Typecheck clean for the touched surfaces.

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

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

@@ -19,22 +19,133 @@ const PROPERTY_TYPE_LABELS: Record<string, string> = {
 interface PropertyCardProps {
   listing: ListingDetail;
   compact?: boolean;
+  /** 'card' (default, vertical) or 'list' (horizontal row) */
+  layout?: 'card' | 'list';
 }
 
-export function PropertyCard({ listing, compact }: PropertyCardProps) {
+export function PropertyCard({ listing, compact, layout = 'card' }: PropertyCardProps) {
   const transactionLabel = listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê';
   const propertyTypeLabel = PROPERTY_TYPE_LABELS[listing.property.propertyType] || listing.property.propertyType;
+  const mediaCount = listing.property.media?.length ?? 0;
+  const firstImage = listing.property.media?.[0]?.url;
+  const directionLabel =
+    listing.property.direction === 'NORTH' ? 'Bắc' :
+    listing.property.direction === 'SOUTH' ? 'Nam' :
+    listing.property.direction === 'EAST' ? 'Đông' :
+    listing.property.direction === 'WEST' ? 'Tây' :
+    listing.property.direction;
+
+  const ariaLabel = `${listing.property.title} — ${transactionLabel} ${propertyTypeLabel}, ${formatPrice(listing.priceVND)} VNĐ`;
+
+  if (layout === 'list') {
+    return (
+      <article aria-label={ariaLabel}>
+        <Link href={`/listings/${listing.id}`} className="group block">
+          <Card className="overflow-hidden transition-shadow hover:shadow-md">
+            <div className="flex flex-col sm:flex-row">
+              <div className="relative h-44 w-full shrink-0 bg-muted sm:h-36 sm:w-56">
+                {firstImage ? (
+                  <Image
+                    src={firstImage}
+                    alt={`Ảnh bất động sản: ${listing.property.title}`}
+                    fill
+                    sizes="(max-width: 640px) 100vw, 224px"
+                    className="object-cover transition-transform group-hover:scale-105"
+                    placeholder="blur"
+                    blurDataURL={shimmerBlurDataURL()}
+                  />
+                ) : (
+                  <div
+                    className="flex h-full items-center justify-center text-sm text-muted-foreground"
+                    aria-hidden="true"
+                  >
+                    Chưa có ảnh
+                  </div>
+                )}
+                <div className="absolute left-2 top-2 flex gap-1">
+                  <Badge variant="default" className="text-xs">
+                    {transactionLabel}
+                  </Badge>
+                  <Badge variant="secondary" className="text-xs">
+                    {propertyTypeLabel}
+                  </Badge>
+                </div>
+                {mediaCount > 1 && (
+                  <div className="absolute bottom-2 right-2">
+                    <Badge
+                      variant="outline"
+                      className="border-none bg-black/50 text-xs text-white"
+                      aria-label={`${mediaCount} ảnh`}
+                    >
+                      {mediaCount} ảnh
+                    </Badge>
+                  </div>
+                )}
+                <div className="absolute right-2 top-2">
+                  <AddToCompareButton listingId={listing.id} compact />
+                </div>
+              </div>
+              <CardContent className="flex flex-1 flex-col gap-2 p-4">
+                <div className="flex flex-wrap items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="line-clamp-1 font-semibold group-hover:text-primary">
+                      {listing.property.title}
+                    </h3>
+                    <p className="mt-0.5 line-clamp-1 text-sm text-muted-foreground">
+                      {listing.property.address}, {listing.property.district}, {listing.property.city}
+                    </p>
+                  </div>
+                  <p className="shrink-0 text-lg font-bold text-primary">
+                    {formatPrice(listing.priceVND)} VNĐ
+                    {listing.transactionType === 'RENT' && listing.rentPriceMonthly && (
+                      <span className="text-sm font-normal text-muted-foreground">/tháng</span>
+                    )}
+                  </p>
+                </div>
+                <ul className="flex flex-wrap gap-1.5" aria-label="Thông tin bất động sản">
+                  <li>
+                    <Badge variant="secondary" className="text-xs">
+                      {listing.property.areaM2} m²
+                    </Badge>
+                  </li>
+                  {listing.property.bedrooms != null && (
+                    <li>
+                      <Badge variant="secondary" className="text-xs">
+                        {listing.property.bedrooms} PN
+                      </Badge>
+                    </li>
+                  )}
+                  {listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
+                    <li>
+                      <Badge variant="secondary" className="text-xs">
+                        {listing.property.bathrooms} PT
+                      </Badge>
+                    </li>
+                  )}
+                  {listing.property.direction && (
+                    <li>
+                      <Badge variant="outline" className="text-xs">
+                        Hướng {directionLabel}
+                      </Badge>
+                    </li>
+                  )}
+                </ul>
+              </CardContent>
+            </div>
+          </Card>
+        </Link>
+      </article>
+    );
+  }
 
   return (
-    <article
-      aria-label={`${listing.property.title} — ${transactionLabel} ${propertyTypeLabel}, ${formatPrice(listing.priceVND)} VNĐ`}
-    >
+    <article aria-label={ariaLabel}>
       <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) > 0 ? (
+            {firstImage ? (
               <Image
-                src={listing.property.media![0]?.url ?? ''}
+                src={firstImage}
                 alt={`Ảnh bất động sản: ${listing.property.title}`}
                 fill
                 sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
@@ -55,10 +166,10 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
                 {propertyTypeLabel}
               </Badge>
             </div>
-            {(listing.property.media?.length ?? 0) > 1 && (
+            {mediaCount > 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={`${mediaCount} ảnh`}>
+                  {mediaCount} ảnh
                 </Badge>
               </div>
             )}
@@ -100,11 +211,7 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
               {listing.property.direction && (
                 <li>
                   <Badge variant="outline" className="text-xs">
-                    Hướng {listing.property.direction === 'NORTH' ? 'Bắc' :
-                      listing.property.direction === 'SOUTH' ? 'Nam' :
-                      listing.property.direction === 'EAST' ? 'Đông' :
-                      listing.property.direction === 'WEST' ? 'Tây' :
-                      listing.property.direction}
+                    Hướng {directionLabel}
                   </Badge>
                 </li>
               )}

apps/web/components/search/search-results.tsx

@@ -90,11 +90,13 @@ export function SearchResults({
         </Select>
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <ul className="flex flex-col gap-3">
         {result.data.map((listing) => (
-          <PropertyCard key={listing.id} listing={listing} />
+          <li key={listing.id}>
+            <PropertyCard listing={listing} layout="list" />
+          </li>
         ))}
-      </div>
+      </ul>
 
       {result.totalPages > 1 && (
         <div className="flex items-center justify-center gap-2 pt-4">