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>
This commit is contained in:
Ho Ngoc Hai
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user