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/market-index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { PriceDelta, type PriceDeltaDirection } from './price-delta';
+
+export interface MarketIndexProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tên index, vd "GGX Market". */
+  name: string;
+  /** Giá trị hiện tại. */
+  value: string | number;
+  /** Biến động % so với mốc tham chiếu. */
+  changePercent: number;
+  /** Biến động tuyệt đối (optional). */
+  change?: string | number;
+  /** Khung thời gian, vd "24h". */
+  window?: string;
+  /** Ép direction cho delta. */
+  direction?: PriceDeltaDirection;
+}
+
+/**
+ * Index lớn hiển thị chỉ số thị trường tổng: dùng cho header/hero dashboard.
+ */
+export function MarketIndex({
+  name,
+  value,
+  changePercent,
+  change,
+  window = '24h',
+  direction,
+  className,
+  ...rest
+}: MarketIndexProps) {
+  return (
+    <div className={cn('flex items-end gap-4', className)} {...rest}>
+      <div className="flex flex-col">
+        <span className="text-xs font-medium uppercase tracking-wider text-foreground-muted">
+          {name}
+        </span>
+        <span
+          data-numeric
+          className="font-mono text-3xl font-semibold leading-none text-foreground"
+        >
+          {value}
+        </span>
+      </div>
+      <div className="flex flex-col items-start gap-0.5 pb-1">
+        <PriceDelta value={changePercent} size="md" direction={direction} />
+        {typeof change !== 'undefined' ? (
+          <span data-numeric className="font-mono text-[11px] text-foreground-muted">
+            {change} ({window})
+          </span>
+        ) : (
+          <span className="text-[11px] text-foreground-dim">{window}</span>
+        )}
+      </div>
+    </div>
+  );
+}