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/price-delta.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type PriceDeltaDirection = 'up' | 'down' | 'neutral';
+
+export interface PriceDeltaProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Phần trăm thay đổi. Dương = tăng, âm = giảm. */
+  value: number;
+  /** Đơn vị hiển thị, mặc định "%". */
+  unit?: string;
+  /** Số chữ số thập phân. */
+  precision?: number;
+  /** Hiển thị ẩn icon. */
+  hideIcon?: boolean;
+  /** Ép direction (ưu tiên hơn dấu của value). */
+  direction?: PriceDeltaDirection;
+  /** Kích cỡ text. */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * Hiển thị biến động giá / % với icon up/down/neutral, dùng signal color.
+ * Số luôn render trong font-mono, tabular-nums.
+ */
+export function PriceDelta({
+  value,
+  unit = '%',
+  precision = 2,
+  hideIcon = false,
+  direction,
+  size = 'md',
+  className,
+  ...rest
+}: PriceDeltaProps) {
+  const dir: PriceDeltaDirection =
+    direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'neutral');
+  const Icon = dir === 'up' ? ArrowUp : dir === 'down' ? ArrowDown : Minus;
+  const colorClass =
+    dir === 'up'
+      ? 'text-signal-up'
+      : dir === 'down'
+        ? 'text-signal-down'
+        : 'text-signal-neutral';
+  const sizeClass =
+    size === 'sm' ? 'text-data-sm' : size === 'lg' ? 'text-data-lg' : 'text-data-md';
+  const formatted = `${value > 0 ? '+' : ''}${value.toFixed(precision)}${unit}`;
+  return (
+    <span
+      data-numeric
+      className={cn(
+        'inline-flex items-center gap-1 font-mono font-medium',
+        colorClass,
+        sizeClass,
+        className,
+      )}
+      {...rest}
+    >
+      {!hideIcon ? <Icon className="h-3 w-3" aria-hidden /> : null}
+      <span>{formatted}</span>
+    </span>
+  );
+}