9bb4c42f84
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>
344 lines
14 KiB
TypeScript
344 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { LogOut, Menu, Moon, Sun, User as UserIcon, X } from 'lucide-react';
|
|
import { TickerStrip } from '@/components/design-system/ticker-strip';
|
|
import type { TickerItem } from '@/components/design-system/ticker-strip';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useState } from 'react';
|
|
import { CompareFloatingBar } from '@/components/comparison/compare-floating-bar';
|
|
import { NotificationBell } from '@/components/notifications/notification-bell';
|
|
import { useTheme } from '@/components/providers/theme-provider';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { LanguageSwitcher } from '@/components/ui/language-switcher';
|
|
import { Link, useRouter } from '@/i18n/navigation';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/** Map backend role strings to Vietnamese labels shown in the nav. */
|
|
const ROLE_LABELS: Record<string, string> = {
|
|
ADMIN: 'Quản trị viên',
|
|
AGENT: 'Đại lý',
|
|
SELLER: 'Người bán',
|
|
BUYER: 'Người mua',
|
|
};
|
|
|
|
/** First+last initials fallback for when avatarUrl is null. */
|
|
function getInitials(fullName: string): string {
|
|
const parts = fullName.trim().split(/\s+/).filter(Boolean);
|
|
if (parts.length === 0) return '?';
|
|
if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
|
|
return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
|
|
}
|
|
|
|
export default function PublicLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { user, logout } = useAuthStore();
|
|
const { theme, toggleTheme } = useTheme();
|
|
const t = useTranslations();
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
/** Route the Dashboard CTA to the correct surface based on role. */
|
|
const dashboardHref = user?.role === 'ADMIN' ? '/admin' : '/dashboard';
|
|
|
|
const handleLogout = async () => {
|
|
setMobileMenuOpen(false);
|
|
await logout();
|
|
router.push('/');
|
|
};
|
|
|
|
const navLinks = [
|
|
{
|
|
href: '/' as const,
|
|
label: t('nav.home'),
|
|
isActive: pathname === '/' || !!pathname.match(/^\/(vi|en)\/?$/),
|
|
},
|
|
{
|
|
href: '/search' as const,
|
|
label: t('nav.search'),
|
|
isActive: pathname.includes('/search'),
|
|
},
|
|
{
|
|
href: '/du-an' as const,
|
|
label: t('nav.projects'),
|
|
isActive: pathname.includes('/du-an'),
|
|
},
|
|
{
|
|
href: '/khu-cong-nghiep' as const,
|
|
label: t('nav.industrialParks'),
|
|
isActive: pathname.includes('/khu-cong-nghiep'),
|
|
},
|
|
{
|
|
href: '/chuyen-nhuong' as const,
|
|
label: t('nav.transfer'),
|
|
isActive: pathname.includes('/chuyen-nhuong'),
|
|
},
|
|
{
|
|
href: '/pricing' as const,
|
|
label: t('nav.pricing'),
|
|
isActive: pathname.includes('/pricing'),
|
|
},
|
|
];
|
|
|
|
/** Mock top-8 district price movement data (7-day delta). */
|
|
const tickerItems: TickerItem[] = [
|
|
{ id: 'q1', label: 'Quận 1', changePercent: 2.4, direction: 'up' },
|
|
{ id: 'q2', label: 'Quận 2', changePercent: -0.8, direction: 'down' },
|
|
{ id: 'q3', label: 'Quận 3', changePercent: 1.1, direction: 'up' },
|
|
{ id: 'q7', label: 'Quận 7', changePercent: 3.2, direction: 'up' },
|
|
{ id: 'binhthanh', label: 'Bình Thạnh', changePercent: 0.0, direction: 'neutral' },
|
|
{ id: 'thuduc', label: 'Thủ Đức', changePercent: 1.7, direction: 'up' },
|
|
{ id: 'tanbinhdistrict', label: 'Tân Bình', changePercent: -1.3, direction: 'down' },
|
|
{ id: 'phuninh', label: 'Phú Nhuận', changePercent: 0.5, direction: 'up' },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Ticker strip — biến động 7d top 8 quận */}
|
|
<div className="h-ticker-bar border-b border-border bg-background-elevated">
|
|
<TickerStrip items={tickerItems} />
|
|
</div>
|
|
<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">
|
|
<Link href="/" className="mr-6 flex items-center space-x-2">
|
|
<span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
|
|
</Link>
|
|
|
|
{/* Desktop nav */}
|
|
<nav aria-label={t('nav.mainNav')} className="hidden items-center space-x-1 sm:flex">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={cn(
|
|
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
|
link.isActive
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'text-muted-foreground',
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="ml-auto flex min-w-0 items-center gap-1 sm:gap-2">
|
|
<LanguageSwitcher />
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={toggleTheme}
|
|
aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
|
|
className="h-9 w-9 shrink-0 p-0"
|
|
>
|
|
{theme === 'light' ? (
|
|
<Moon className="h-4 w-4" aria-hidden="true" />
|
|
) : (
|
|
<Sun className="h-4 w-4" aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
{user ? (
|
|
<>
|
|
{/* Bell only on sm+ to avoid overcrowding mobile header */}
|
|
<div className="hidden sm:block">
|
|
<NotificationBell />
|
|
</div>
|
|
<span className="hidden max-w-[12rem] truncate text-sm text-muted-foreground sm:inline">
|
|
{user.fullName}
|
|
</span>
|
|
{/* Dashboard button is desktop-only; mobile users reach it via the hamburger menu */}
|
|
<Link href={dashboardHref} className="hidden sm:inline-flex">
|
|
<Button size="sm">
|
|
{user.role === 'ADMIN' ? t('common.admin') : t('common.dashboard')}
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="hidden sm:inline-flex">
|
|
<Button variant="ghost" size="sm">
|
|
{t('common.login')}
|
|
</Button>
|
|
</Link>
|
|
<Link href="/register" className="hidden sm:inline-flex">
|
|
<Button size="sm">{t('common.register')}</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
{/* Mobile menu toggle */}
|
|
<button
|
|
type="button"
|
|
aria-label={mobileMenuOpen ? t('nav.closeMenu') : t('nav.openMenu')}
|
|
aria-expanded={mobileMenuOpen}
|
|
className="inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground sm:hidden"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{mobileMenuOpen && (
|
|
<nav
|
|
aria-label={t('nav.mainNav')}
|
|
className="border-t px-4 pb-4 pt-2 sm:hidden"
|
|
>
|
|
<div className="space-y-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className={cn(
|
|
'block rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
|
|
link.isActive
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 space-y-2 border-t pt-3">
|
|
{user ? (
|
|
<>
|
|
{/* User card: avatar (or initials) + name + email/phone + role */}
|
|
<div className="flex items-center gap-3 px-2 py-1">
|
|
{user.avatarUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={user.avatarUrl}
|
|
alt=""
|
|
className="h-10 w-10 shrink-0 rounded-full border object-cover"
|
|
/>
|
|
) : (
|
|
<div
|
|
aria-hidden="true"
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary"
|
|
>
|
|
{getInitials(user.fullName)}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{user.fullName}</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{user.email ?? user.phone}
|
|
</p>
|
|
</div>
|
|
{ROLE_LABELS[user.role] ? (
|
|
<Badge variant="outline" className="shrink-0 text-[10px]">
|
|
{ROLE_LABELS[user.role]}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
|
|
<Link
|
|
href={dashboardHref}
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="block"
|
|
>
|
|
<Button size="sm" className="w-full">
|
|
{user.role === 'ADMIN' ? t('common.admin') : t('common.dashboard')}
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/dashboard/profile"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="block"
|
|
>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="w-full justify-center gap-2"
|
|
>
|
|
<UserIcon className="h-4 w-4" aria-hidden="true" />
|
|
{t('common.profile')}
|
|
</Button>
|
|
</Link>
|
|
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="w-full justify-center gap-2 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut className="h-4 w-4" aria-hidden="true" />
|
|
{t('common.logout')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<Link href="/login" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
|
|
<Button variant="ghost" size="sm" className="w-full">
|
|
{t('common.login')}
|
|
</Button>
|
|
</Link>
|
|
<Link href="/register" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
|
|
<Button size="sm" className="w-full">{t('common.register')}</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)}
|
|
</header>
|
|
|
|
<main id="main-content" role="main">
|
|
{children}
|
|
</main>
|
|
|
|
<CompareFloatingBar />
|
|
|
|
<footer role="contentinfo" className="border-t bg-muted/40">
|
|
<div className="mx-auto max-w-7xl px-4 py-8">
|
|
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<h3 className="mb-3 text-sm font-semibold">{t('common.goodgo')}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('footer.description')}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-3 text-sm font-semibold">{t('footer.propertyTypes')}</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li><Link href="/search?propertyType=APARTMENT" className="hover:text-foreground">{t('propertyTypes.APARTMENT')}</Link></li>
|
|
<li><Link href="/search?propertyType=HOUSE" className="hover:text-foreground">{t('propertyTypes.HOUSE')}</Link></li>
|
|
<li><Link href="/search?propertyType=VILLA" className="hover:text-foreground">{t('propertyTypes.VILLA')}</Link></li>
|
|
<li><Link href="/search?propertyType=LAND" className="hover:text-foreground">{t('propertyTypes.LAND')}</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-3 text-sm font-semibold">{t('footer.areas')}</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li><Link href="/search?city=Hồ Chí Minh" className="hover:text-foreground">TP. Hồ Chí Minh</Link></li>
|
|
<li><Link href="/search?city=Hà Nội" className="hover:text-foreground">Hà Nội</Link></li>
|
|
<li><Link href="/search?city=Đà Nẵng" className="hover:text-foreground">Đà Nẵng</Link></li>
|
|
<li><Link href="/search?city=Nha Trang" className="hover:text-foreground">Nha Trang</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-3 text-sm font-semibold">{t('footer.support')}</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li><Link href="/pricing" className="hover:text-foreground">{t('nav.pricing')}</Link></li>
|
|
<li><Link href="/login" className="hover:text-foreground">{t('common.login')}</Link></li>
|
|
<li><Link href="/register" className="hover:text-foreground">{t('common.register')}</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 border-t pt-4 text-center text-sm text-muted-foreground">
|
|
{t('common.allRightsReserved')}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|