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/app/[locale]/(dashboard)/layout.tsx

@@ -12,25 +12,28 @@ import {
   Home,
   List,
   LogOut,
-  Menu,
   MessageSquare,
   Moon,
   Plus,
+  Search,
   Sun,
   Target,
   User,
-  X,
   type LucideIcon,
 } from 'lucide-react';
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
-import { useRouter } from '@/i18n/navigation';
+import { DashboardLayout } from '@/components/design-system/dashboard-layout';
+import { CompactHeader } from '@/components/design-system/compact-header';
 import { NotificationBell } from '@/components/notifications/notification-bell';
 import { useTheme } from '@/components/providers/theme-provider';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
 import { Link } from '@/i18n/navigation';
+import { useRouter } from '@/i18n/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import { cn } from '@/lib/utils';
 
@@ -45,18 +48,47 @@ interface NavGroup {
   items: NavItem[];
 }
 
-export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+/** Icon-only sidebar button with tooltip. */
+function SidebarNavItem({
+  item,
+  active,
+  onClick,
+}: {
+  item: NavItem;
+  active: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      href={item.href}
+      onClick={onClick}
+      aria-label={item.label}
+      title={item.label}
+      className={cn(
+        'group relative flex h-10 w-10 items-center justify-center rounded-md transition-colors',
+        active
+          ? 'bg-primary/10 text-primary'
+          : 'text-foreground-muted hover:bg-background-surface hover:text-foreground',
+      )}
+    >
+      <item.icon className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
+      {/* Tooltip */}
+      <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap rounded bg-background-elevated px-2 py-1 text-xs text-foreground opacity-0 shadow-elevation-2 transition-opacity group-hover:opacity-100">
+        {item.label}
+      </span>
+    </Link>
+  );
+}
+
+export default function AppDashboardLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const router = useRouter();
   const { user, isAuthenticated, isInitialized, logout } = useAuthStore();
   const { theme, toggleTheme } = useTheme();
   const t = useTranslations();
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [now, setNow] = useState<Date | null>(null);
 
-  // Auth guard — redirect unauthenticated users to /login once the auth store
-  // has finished its cookie→profile probe. Without this, protected queries
-  // inside the dashboard fire against the API and flood the console with
-  // 401 ApiErrors before the user even sees the sign-in screen.
+  // Auth guard
   useEffect(() => {
     if (isInitialized && !isAuthenticated) {
       const next = encodeURIComponent(pathname);
@@ -64,12 +96,16 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     }
   }, [isInitialized, isAuthenticated, pathname, router]);
 
-  // While the auth store initialises, OR right after we've decided to redirect,
-  // render a lightweight skeleton rather than the full dashboard so no queries
-  // mount and fire.
+  // Live clock for status bar
+  useEffect(() => {
+    setNow(new Date());
+    const id = setInterval(() => setNow(new Date()), 30_000);
+    return () => clearInterval(id);
+  }, []);
+
   if (!isInitialized || !isAuthenticated) {
     return (
-      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
+      <div className="flex min-h-screen items-center justify-center text-sm text-foreground-muted">
         {t('common.loading')}
       </div>
     );
@@ -78,8 +114,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const role = user?.role;
   const isDeveloper = role === 'DEVELOPER';
   const isParkOperator = role === 'PARK_OPERATOR';
-  // B2B roles get a focused nav: dashboard + their owned catalog + CRM + profile.
-  // ADMIN / AGENT / SELLER / BUYER keep the full nav.
   const showListings = !isDeveloper && !isParkOperator;
   const showProjects = !isParkOperator;
   const showParks = !isDeveloper;
@@ -113,9 +147,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
           ? [
               {
                 href: '/industrial-parks',
-                label: isParkOperator
-                  ? 'KCN của tôi'
-                  : t('dashboard.manageIndustrialParks'),
+                label: isParkOperator ? 'KCN của tôi' : t('dashboard.manageIndustrialParks'),
                 icon: Factory,
               },
             ]
@@ -138,7 +170,11 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             items: [
               { href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 },
               { href: '/dashboard/reports', label: t('dashboard.reports'), icon: FileText },
-              { href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
+              {
+                href: '/dashboard/saved-searches',
+                label: t('dashboard.savedSearches'),
+                icon: Bookmark,
+              },
               { href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
             ],
           },
@@ -150,223 +186,139 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         { href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
         ...(showListings
           ? [
-              { href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
-              { href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
+              {
+                href: '/dashboard/subscription',
+                label: t('dashboard.subscription'),
+                icon: Gem,
+              },
+              {
+                href: '/dashboard/payments',
+                label: t('dashboard.payments'),
+                icon: CreditCard,
+              },
             ]
           : []),
       ],
     },
   ].filter((g) => g.items.length > 0);
 
-  // Flat list for desktop nav (only primary items shown inline)
-  const primaryNav: NavItem[] = [
-    { href: '/dashboard', label: t('dashboard.title'), icon: Home },
-    ...(showListings ? [{ href: '/listings', label: t('dashboard.listings'), icon: List }] : []),
-    ...(showProjects
-      ? [
-          {
-            href: '/projects',
-            label: isDeveloper ? 'Dự án của tôi' : t('dashboard.manageProjects'),
-            icon: Building2,
-          },
-        ]
-      : []),
-    ...(showParks
-      ? [
-          {
-            href: '/industrial-parks',
-            label: isParkOperator ? 'KCN của tôi' : t('dashboard.manageIndustrialParks'),
-            icon: Factory,
-          },
-        ]
-      : []),
-    { href: '/inquiries', label: t('dashboard.inquiries'), icon: MessageSquare },
-    ...(showListings
-      ? [{ href: '/analytics', label: t('dashboard.analytics'), icon: BarChart3 }]
-      : []),
-  ];
-
-  const secondaryNav: NavItem[] = [
-    { href: '/dashboard/reports', label: t('dashboard.reports'), icon: FileText },
-    { href: '/dashboard/saved-searches', label: t('dashboard.savedSearches'), icon: Bookmark },
-    { href: '/dashboard/valuation', label: t('dashboard.aiValuation'), icon: Bot },
-    { href: '/dashboard/profile', label: t('dashboard.profile'), icon: User },
-    { href: '/dashboard/subscription', label: t('dashboard.subscription'), icon: Gem },
-    { href: '/dashboard/payments', label: t('dashboard.payments'), icon: CreditCard },
-  ];
+  const allNavItems = navGroups.flatMap((g) => g.items);
 
   const isActive = (href: string) =>
     pathname === href || (href !== '/dashboard' && pathname.startsWith(href));
 
-  return (
-    <div className="min-h-screen bg-background">
-      {/* Mobile overlay */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/50 md:hidden"
-          onClick={() => setSidebarOpen(false)}
-          aria-hidden="true"
-        />
-      )}
-
-      {/* Mobile sidebar — grouped nav */}
-      <aside
-        role="navigation"
-        aria-label={t('nav.dashboardNav')}
-        className={cn(
-          'fixed inset-y-0 left-0 z-50 w-64 border-r bg-card transition-transform md:hidden',
-          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
-        )}
+  // ── Sidebar (icon-only 56px, mobile uses sheet drawer) ──────────────────
+  const sidebar = (
+    <div className="flex h-full flex-col items-center gap-1 py-3">
+      {/* Logo mark */}
+      <Link
+        href="/dashboard"
+        className="mb-2 flex h-10 w-10 items-center justify-center rounded-md text-primary"
+        aria-label={t('common.goodgo')}
+        title={t('common.goodgo')}
       >
-        <div className="flex h-14 items-center border-b px-4">
-          <Link href="/" className="flex items-center space-x-2">
-            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
-          </Link>
-          <button
-            aria-label={t('nav.closeMenu')}
-            className="ml-auto"
-            onClick={() => setSidebarOpen(false)}
-          >
-            <X className="h-5 w-5" />
-          </button>
+        <span className="text-sm font-bold leading-none">GG</span>
+      </Link>
+
+      <div className="h-px w-8 bg-border" />
+
+      {/* Nav items */}
+      <nav className="flex flex-1 flex-col items-center gap-1 pt-2" aria-label={t('nav.dashboardNav')}>
+        {allNavItems.map((item) => (
+          <SidebarNavItem key={item.href} item={item} active={isActive(item.href)} />
+        ))}
+      </nav>
+
+      {/* Bottom: logout */}
+      <div className="flex flex-col items-center gap-1 pb-1">
+        <button
+          onClick={() => logout()}
+          aria-label={t('common.logout')}
+          title={t('common.logout')}
+          className="flex h-10 w-10 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-background-surface hover:text-foreground"
+        >
+          <LogOut className="h-[18px] w-[18px]" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  );
+
+  // ── CompactHeader ────────────────────────────────────────────────────────
+  const header = (
+    <CompactHeader
+      logo={
+        <span className="text-sm font-bold text-primary">{t('common.goodgo')}</span>
+      }
+      breadcrumb={
+        <span className="text-foreground-dim">/</span>
+      }
+      search={
+        <div className="relative">
+          <Search
+            className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-foreground-dim"
+            aria-hidden="true"
+          />
+          <Input
+            type="search"
+            placeholder="Tìm bất động sản..."
+            className="h-8 w-full bg-background-surface pl-8 text-sm placeholder:text-foreground-dim focus-visible:ring-primary"
+            aria-label="Tìm kiếm"
+          />
         </div>
-
-        <nav className="flex flex-col gap-4 overflow-y-auto p-3">
-          {navGroups.map((group) => (
-            <div key={group.label}>
-              <p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
-                {group.label}
-              </p>
-              <div className="flex flex-col gap-0.5">
-                {group.items.map((item) => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    onClick={() => setSidebarOpen(false)}
-                    className={cn(
-                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                      isActive(item.href)
-                        ? 'bg-primary/10 text-primary'
-                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-                    )}
-                  >
-                    <item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
-                    {item.label}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          ))}
-        </nav>
-
-        <div className="mt-auto border-t p-3">
-          {user && (
-            <p className="mb-2 truncate px-3 text-xs text-muted-foreground">{user.fullName}</p>
-          )}
+      }
+      actions={
+        <>
+          {user && <NotificationBell />}
+          <LanguageSwitcher />
           <Button
             variant="ghost"
             size="sm"
-            className="w-full justify-start gap-2"
-            onClick={() => logout()}
+            onClick={toggleTheme}
+            aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
+            className="h-8 w-8 p-0 text-foreground-muted hover:text-foreground"
           >
-            <LogOut className="h-4 w-4" aria-hidden="true" />
-            {t('common.logout')}
-          </Button>
-        </div>
-      </aside>
-
-      <header
-        role="banner"
-        className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
-      >
-        <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
-          {/* Mobile hamburger */}
-          <button
-            aria-label={t('nav.openMenu')}
-            className="mr-3 inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground md:hidden"
-            onClick={() => setSidebarOpen(true)}
-          >
-            <Menu className="h-5 w-5" />
-          </button>
-
-          <Link href="/" className="mr-4 flex items-center space-x-2">
-            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
-          </Link>
-
-          {/* Desktop nav — primary items with labels, secondary icon-only */}
-          <nav aria-label={t('nav.dashboardNav')} className="hidden items-center md:flex">
-            <div className="flex items-center">
-              {primaryNav.map((item) => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  aria-label={item.label}
-                  title={item.label}
-                  className={cn(
-                    'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
-                    isActive(item.href)
-                      ? 'bg-accent text-accent-foreground'
-                      : 'text-muted-foreground',
-                  )}
-                >
-                  <item.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
-                  <span className="hidden xl:inline">{item.label}</span>
-                </Link>
-              ))}
-            </div>
-
-            <div className="mx-2 h-5 w-px bg-border" aria-hidden="true" />
-
-            <div className="flex items-center">
-              {secondaryNav.map((item) => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  aria-label={item.label}
-                  title={item.label}
-                  className={cn(
-                    'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground',
-                    isActive(item.href)
-                      ? 'bg-accent text-accent-foreground'
-                      : 'text-muted-foreground',
-                  )}
-                >
-                  <item.icon className="h-4 w-4" aria-hidden="true" />
-                </Link>
-              ))}
-            </div>
-          </nav>
-
-          <div className="ml-auto flex items-center space-x-1">
-            {user && (
-              <span className="hidden text-sm text-muted-foreground lg:inline">
-                {user.fullName}
-              </span>
+            {theme === 'light' ? (
+              <Moon className="h-4 w-4" aria-hidden="true" />
+            ) : (
+              <Sun className="h-4 w-4" aria-hidden="true" />
             )}
-            {user && <NotificationBell />}
-            <LanguageSwitcher />
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={toggleTheme}
-              aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
-              className="h-9 w-9 p-0"
+          </Button>
+          {user && (
+            <span
+              className="hidden max-w-[8rem] truncate text-xs text-foreground-muted lg:inline"
+              title={user.fullName}
             >
-              {theme === 'light' ? (
-                <Moon className="h-4 w-4" aria-hidden="true" />
-              ) : (
-                <Sun className="h-4 w-4" aria-hidden="true" />
-              )}
-            </Button>
-            <Button variant="ghost" size="sm" className="hidden gap-1.5 md:inline-flex" onClick={() => logout()}>
-              <LogOut className="h-4 w-4" aria-hidden="true" />
-              <span className="hidden lg:inline">{t('common.logout')}</span>
-            </Button>
-          </div>
-        </div>
-      </header>
+              {user.fullName}
+            </span>
+          )}
+        </>
+      }
+    />
+  );
 
-      <main id="main-content" role="main" className="mx-auto max-w-7xl px-4 py-6">{children}</main>
-    </div>
+  // ── Status bar ───────────────────────────────────────────────────────────
+  const statusBar = (
+    <>
+      <span className="inline-flex items-center gap-1.5">
+        <span className="h-1.5 w-1.5 rounded-full bg-signal-up" aria-hidden="true" />
+        <span>Đã kết nối</span>
+      </span>
+      {now && (
+        <span className="text-foreground-dim">
+          Cập nhật lúc {now.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' })}
+        </span>
+      )}
+    </>
+  );
+
+  return (
+    <DashboardLayout
+      sidebar={sidebar}
+      header={header}
+      statusBar={statusBar}
+      sidebarCollapsed
+    >
+      {children}
+    </DashboardLayout>
   );
 }