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