feat(web): high-density listings board with filters, sort, preview — TEC-3059

Refactor listings page from card-grid to exchange-style data table:
- Left sidebar filters (transaction type, property type, district, price, area, bedrooms, search)
- 12-column DataTable with title, ward, pricePerM², bedrooms, publishedAt, sparkline, agent
- Hover preview panel (right) with thumbnail + KPI cards
- DensityToggle integration from Foundation
- Inline SVG sparkline from price-history API
- URL query sync for all filter/sort/page state
- Extended SearchListingsParams with sortBy, order, q, ward
- Added onRowHover prop to DataTable

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/listings/listing-preview-panel.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import Image from 'next/image';
+import * as React from 'react';
+import { KpiCard } from '@/components/design-system';
+import { formatPrice, formatPricePerM2 } from '@/lib/currency';
+import type { ListingDetail } from '@/lib/listings-api';
+
+interface ListingPreviewPanelProps {
+  listing: ListingDetail | null;
+}
+
+/**
+ * Right-side preview panel shown on row hover in the listings table.
+ * Displays the first image + key KPIs for the hovered listing.
+ */
+export function ListingPreviewPanel({ listing }: ListingPreviewPanelProps) {
+  if (!listing) {
+    return (
+      <div className="flex h-full items-center justify-center text-body-sm text-foreground-dim">
+        Di chuột qua dòng để xem trước
+      </div>
+    );
+  }
+
+  const thumbnail =
+    listing.property.thumbnail ??
+    listing.property.media?.[0]?.url ??
+    null;
+
+  return (
+    <div className="flex h-full flex-col gap-3 overflow-auto p-3">
+      {/* Image */}
+      {thumbnail ? (
+        <div className="relative aspect-[16/10] w-full overflow-hidden rounded-md bg-background-surface">
+          <Image
+            src={thumbnail}
+            alt={listing.property.title}
+            fill
+            sizes="320px"
+            className="object-cover"
+          />
+        </div>
+      ) : (
+        <div className="flex aspect-[16/10] w-full items-center justify-center rounded-md bg-background-surface text-[12px] text-foreground-dim">
+          Không có ảnh
+        </div>
+      )}
+
+      {/* Title */}
+      <h3 className="text-body-sm font-semibold text-foreground line-clamp-2">
+        {listing.property.title}
+      </h3>
+
+      {/* Location */}
+      <p className="text-[12px] text-foreground-muted">
+        {listing.property.ward}, {listing.property.district}
+      </p>
+
+      {/* KPI grid */}
+      <div className="grid grid-cols-2 gap-2">
+        <KpiCard label="Giá" value={`${formatPrice(listing.priceVND)}`} className="p-2" />
+        <KpiCard
+          label="Giá/m²"
+          value={listing.pricePerM2 ? formatPricePerM2(listing.pricePerM2) : '—'}
+          className="p-2"
+        />
+        <KpiCard label="Diện tích" value={`${listing.property.areaM2} m²`} className="p-2" />
+        <KpiCard
+          label="Phòng ngủ"
+          value={listing.property.bedrooms != null ? String(listing.property.bedrooms) : '—'}
+          className="p-2"
+        />
+        <KpiCard label="Lượt xem" value={listing.viewCount.toLocaleString('vi-VN')} className="p-2" />
+        <KpiCard
+          label="Lượt lưu"
+          value={listing.saveCount.toLocaleString('vi-VN')}
+          className="p-2"
+        />
+      </div>
+
+      {/* Agent */}
+      {listing.agent && (
+        <div className="mt-auto border-t border-border pt-2">
+          <p className="text-[11px] text-foreground-dim">Môi giới</p>
+          <p className="text-[12px] text-foreground">
+            {listing.agent.agency ?? 'Cá nhân'}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}