feat(web): listings page — ticker-style DataTable với toggle card view

Tạo mới trang /listings dạng bảng ticker-style theo spec TEC-3034.

- DataTable compact (row 36px, sticky header, alternating rows)
- Cột: #, Mã (GG-xxx), Quận, Loại, Giá, Δ30d, DT m², KL/Views
- Sortable theo Giá, Δ30d, DT m², KL/Views
- Filter inline: Loại giao dịch, Loại BĐS, Quận, Khoảng giá
- Toggle view: Table (default) ↔ Card grid (legacy component cũ)
- Pagination restyle compact, giữ nguyên API params
- Click row → navigate to detail page
- Dùng DataTable + PriceDelta từ @/components/design-system

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

apps/web/components/design-system/stat-card.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { PriceDelta, type PriceDeltaDirection } from './price-delta';
+
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tên chỉ số, vd "Giá TB/m²". */
+  label: string;
+  /** Giá trị chính, đã format sẵn (string) hoặc number. */
+  value: string | number;
+  /** Đơn vị đi kèm, vd "tr/m²". */
+  unit?: string;
+  /** Delta % (nếu có). */
+  delta?: number;
+  /** Ép direction của delta. */
+  deltaDirection?: PriceDeltaDirection;
+  /** Mô tả phụ, vd "24h", "7 ngày". */
+  sublabel?: string;
+  /** Prefix icon. */
+  icon?: React.ReactNode;
+}
+
+/**
+ * Card KPI compact cho Market Dashboard.
+ * Bố cục: label (sans muted) + value (mono lớn) + delta (signal).
+ */
+export function StatCard({
+  label,
+  value,
+  unit,
+  delta,
+  deltaDirection,
+  sublabel,
+  icon,
+  className,
+  ...rest
+}: StatCardProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-1 rounded-md border border-border bg-background-elevated px-4 py-3 shadow-elevation-1',
+        className,
+      )}
+      {...rest}
+    >
+      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-foreground-muted">
+        {icon ? <span className="text-foreground-dim">{icon}</span> : null}
+        <span>{label}</span>
+      </div>
+      <div className="flex items-baseline gap-2">
+        <span data-numeric className="font-mono text-data-lg font-semibold text-foreground">
+          {value}
+        </span>
+        {unit ? <span className="text-xs text-foreground-muted">{unit}</span> : null}
+      </div>
+      <div className="flex items-center justify-between">
+        {typeof delta === 'number' ? (
+          <PriceDelta value={delta} size="sm" direction={deltaDirection} />
+        ) : (
+          <span />
+        )}
+        {sublabel ? (
+          <span className="text-[11px] text-foreground-dim">{sublabel}</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}