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/compact-header.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface CompactHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  /** Logo node. */
+  logo?: React.ReactNode;
+  /** Breadcrumb / tiêu đề ngắn. */
+  breadcrumb?: React.ReactNode;
+  /** Khối search (input/dropdown). */
+  search?: React.ReactNode;
+  /** Action phía phải (avatar, notif, theme toggle). */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Header compact (h: 48px) dạng terminal financial.
+ * Dùng thay cho header card/spacious trước đây.
+ */
+export function CompactHeader({
+  logo,
+  breadcrumb,
+  search,
+  actions,
+  className,
+  ...rest
+}: CompactHeaderProps) {
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-30 flex h-header-compact items-center gap-3 border-b border-border bg-background-elevated px-4',
+        className,
+      )}
+      {...rest}
+    >
+      {logo ? <div className="flex items-center">{logo}</div> : null}
+      {breadcrumb ? (
+        <div className="flex items-center text-data-sm text-foreground-muted">
+          {breadcrumb}
+        </div>
+      ) : null}
+      {search ? <div className="ml-4 hidden max-w-md flex-1 md:block">{search}</div> : null}
+      <div className="ml-auto flex items-center gap-2">{actions}</div>
+    </header>
+  );
+}

apps/web/components/design-system/dashboard-layout.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  header?: React.ReactNode;
+  sidebar?: React.ReactNode;
+  ticker?: React.ReactNode;
+  statusBar?: React.ReactNode;
+  /** Chiều rộng sidebar khi expand (collapsed luôn 56px). */
+  sidebarWidth?: number;
+  /** Có collapse sidebar không. */
+  sidebarCollapsed?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * Layout khung cho toàn bộ trang dashboard / trading terminal.
+ *
+ * Cấu trúc:
+ *  ┌─────────────────────────────────────┐
+ *  │ TICKER STRIP (optional, 32px)      │
+ *  ├──────────┬─────────────────────────┤
+ *  │ SIDEBAR  │ HEADER (48px)          │
+ *  │ (56 px   ├─────────────────────────┤
+ *  │  hoặc    │ MAIN                    │
+ *  │  expand) │ (scroll-y)              │
+ *  ├──────────┴─────────────────────────┤
+ *  │ STATUS BAR (optional, 24px)        │
+ *  └─────────────────────────────────────┘
+ */
+export function DashboardLayout({
+  header,
+  sidebar,
+  ticker,
+  statusBar,
+  sidebarWidth = 200,
+  sidebarCollapsed = true,
+  children,
+  className,
+  ...rest
+}: DashboardLayoutProps) {
+  const sidebarPx = sidebarCollapsed ? 56 : sidebarWidth;
+  return (
+    <div
+      className={cn('flex min-h-screen flex-col bg-background text-foreground', className)}
+      {...rest}
+    >
+      {ticker ? (
+        <div className="h-ticker-bar border-b border-border bg-background-elevated">
+          {ticker}
+        </div>
+      ) : null}
+      <div className="flex flex-1">
+        {sidebar ? (
+          <aside
+            className="shrink-0 border-r border-border bg-background-elevated transition-[width] duration-200"
+            style={{ width: sidebarPx }}
+          >
+            {sidebar}
+          </aside>
+        ) : null}
+        <div className="flex min-w-0 flex-1 flex-col">
+          {header}
+          <main className="flex-1 overflow-y-auto px-4 py-4 md:px-6">{children}</main>
+        </div>
+      </div>
+      {statusBar ? (
+        <div className="flex h-6 items-center gap-4 border-t border-border bg-background-elevated px-4 text-[11px] text-foreground-muted">
+          {statusBar}
+        </div>
+      ) : null}
+    </div>
+  );
+}

apps/web/components/design-system/data-table.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type DataTableAlign = 'left' | 'right' | 'center';
+
+export interface DataTableColumn<T> {
+  /** Key duy nhất. */
+  id: string;
+  /** Header hiển thị. */
+  header: React.ReactNode;
+  /** Render cell. */
+  cell: (row: T, index: number) => React.ReactNode;
+  /** Căn lề. */
+  align?: DataTableAlign;
+  /** Có cho phép sort không. */
+  sortable?: boolean;
+  /** Function lấy giá trị sort (trả về number | string). */
+  sortValue?: (row: T) => number | string;
+  /** Rộng cột. */
+  width?: string;
+  /** Hiển thị dạng mono (tabular-nums). */
+  numeric?: boolean;
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  /** Hàm trả về key row duy nhất. */
+  getRowId?: (row: T, index: number) => string | number;
+  /** Click row. */
+  onRowClick?: (row: T) => void;
+  /** Hiện sticky header. */
+  stickyHeader?: boolean;
+  /** Trạng thái loading. */
+  loading?: boolean;
+  /** Text hiển thị khi rỗng. */
+  emptyText?: React.ReactNode;
+  className?: string;
+  /** Compact row height. */
+  dense?: boolean;
+  /** Col sort mặc định. */
+  defaultSortId?: string;
+  defaultSortDir?: 'asc' | 'desc';
+}
+
+/**
+ * DataTable ticker-style:
+ * - Row cao 36px (dense mặc định), alternating bg, sticky header.
+ * - Sort client-side qua `sortable` + `sortValue`.
+ * - Số hiển thị font-mono với `column.numeric = true`.
+ *
+ * Giữ nguyên data contract: không tự fetch, component chỉ render.
+ */
+export function DataTable<T>({
+  columns,
+  data,
+  getRowId,
+  onRowClick,
+  stickyHeader = true,
+  loading = false,
+  emptyText = 'Không có dữ liệu',
+  className,
+  dense = true,
+  defaultSortId,
+  defaultSortDir = 'desc',
+}: DataTableProps<T>) {
+  const [sortId, setSortId] = React.useState<string | undefined>(defaultSortId);
+  const [sortDir, setSortDir] = React.useState<'asc' | 'desc'>(defaultSortDir);
+
+  const sortedData = React.useMemo(() => {
+    if (!sortId) return data;
+    const col = columns.find((c) => c.id === sortId);
+    if (!col || !col.sortValue) return data;
+    const getValue = col.sortValue;
+    const sorted = [...data].sort((a, b) => {
+      const va = getValue(a);
+      const vb = getValue(b);
+      if (va === vb) return 0;
+      if (typeof va === 'number' && typeof vb === 'number') {
+        return sortDir === 'asc' ? va - vb : vb - va;
+      }
+      return sortDir === 'asc'
+        ? String(va).localeCompare(String(vb), 'vi')
+        : String(vb).localeCompare(String(va), 'vi');
+    });
+    return sorted;
+  }, [data, columns, sortId, sortDir]);
+
+  function toggleSort(colId: string) {
+    if (sortId !== colId) {
+      setSortId(colId);
+      setSortDir('desc');
+    } else {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative w-full overflow-auto rounded-md border border-border bg-background-elevated',
+        className,
+      )}
+    >
+      <table className="w-full caption-bottom border-collapse text-data-sm">
+        <thead
+          className={cn(
+            'bg-background-surface text-[11px] uppercase tracking-wide text-foreground-muted',
+            stickyHeader && 'sticky top-0 z-10',
+          )}
+        >
+          <tr className="border-b border-border">
+            {columns.map((col) => {
+              const active = col.sortable && sortId === col.id;
+              return (
+                <th
+                  key={col.id}
+                  scope="col"
+                  style={col.width ? { width: col.width } : undefined}
+                  className={cn(
+                    'h-8 select-none px-3 font-medium',
+                    col.align === 'right' && 'text-right',
+                    col.align === 'center' && 'text-center',
+                    !col.align && 'text-left',
+                    col.sortable && 'cursor-pointer hover:text-foreground',
+                  )}
+                  onClick={col.sortable ? () => toggleSort(col.id) : undefined}
+                >
+                  <span
+                    className={cn(
+                      'inline-flex items-center gap-1',
+                      col.align === 'right' && 'justify-end',
+                    )}
+                  >
+                    {col.header}
+                    {col.sortable ? (
+                      <span className="inline-flex h-3 w-3 items-center justify-center text-foreground-dim">
+                        {active ? (
+                          sortDir === 'asc' ? (
+                            <ChevronUp className="h-3 w-3 text-foreground" />
+                          ) : (
+                            <ChevronDown className="h-3 w-3 text-foreground" />
+                          )
+                        ) : (
+                          <ChevronDown className="h-3 w-3" />
+                        )}
+                      </span>
+                    ) : null}
+                  </span>
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-3 py-8 text-center text-foreground-muted"
+              >
+                Đang tải...
+              </td>
+            </tr>
+          ) : sortedData.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-3 py-8 text-center text-foreground-muted"
+              >
+                {emptyText}
+              </td>
+            </tr>
+          ) : (
+            sortedData.map((row, index) => {
+              const key = getRowId ? getRowId(row, index) : index;
+              return (
+                <tr
+                  key={key}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  className={cn(
+                    'border-b border-border/60 transition-colors',
+                    dense ? 'h-row' : 'h-10',
+                    index % 2 === 1 && 'bg-background-surface/40',
+                    onRowClick && 'cursor-pointer hover:bg-background-surface',
+                  )}
+                >
+                  {columns.map((col) => (
+                    <td
+                      key={col.id}
+                      className={cn(
+                        'px-3 align-middle',
+                        col.align === 'right' && 'text-right',
+                        col.align === 'center' && 'text-center',
+                        col.numeric && 'font-mono tabular-nums',
+                      )}
+                      data-numeric={col.numeric || undefined}
+                    >
+                      {col.cell(row, index)}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

apps/web/components/design-system/index.ts

@@ -0,0 +1,20 @@
+export { DataTable } from './data-table';
+export type { DataTableColumn, DataTableProps, DataTableAlign } from './data-table';
+
+export { StatCard } from './stat-card';
+export type { StatCardProps } from './stat-card';
+
+export { MarketIndex } from './market-index';
+export type { MarketIndexProps } from './market-index';
+
+export { PriceDelta } from './price-delta';
+export type { PriceDeltaProps, PriceDeltaDirection } from './price-delta';
+
+export { CompactHeader } from './compact-header';
+export type { CompactHeaderProps } from './compact-header';
+
+export { DashboardLayout } from './dashboard-layout';
+export type { DashboardLayoutProps } from './dashboard-layout';
+
+export { TickerStrip } from './ticker-strip';
+export type { TickerStripProps, TickerItem } from './ticker-strip';

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

apps/web/components/design-system/ticker-strip.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { PriceDelta, type PriceDeltaDirection } from './price-delta';
+
+export interface TickerItem {
+  id: string;
+  label: string;
+  changePercent: number;
+  direction?: PriceDeltaDirection;
+}
+
+export interface TickerStripProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: TickerItem[];
+  /** Tắt animation (cho unit test / reduced motion). */
+  paused?: boolean;
+}
+
+/**
+ * Thanh chạy ngang hiển thị biến động giá top quận.
+ * Render 2 lần liên tiếp để tạo vòng lặp mượt với animation `-50%`.
+ */
+export function TickerStrip({ items, paused, className, ...rest }: TickerStripProps) {
+  const duplicated = React.useMemo(() => [...items, ...items], [items]);
+  return (
+    <div className={cn('relative h-full overflow-hidden', className)} {...rest}>
+      <div
+        className={cn(
+          'flex h-full w-max items-center gap-6 whitespace-nowrap px-4 font-mono text-ticker',
+          !paused && 'animate-ticker',
+        )}
+      >
+        {duplicated.map((item, idx) => (
+          <span
+            key={`${item.id}-${idx}`}
+            className="inline-flex items-center gap-2 text-foreground-muted"
+          >
+            <span className="text-foreground">{item.label}</span>
+            <PriceDelta
+              value={item.changePercent}
+              size="sm"
+              hideIcon={false}
+              direction={item.direction}
+            />
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}