feat(search-frontend): add public landing page, search page with map view, filters, and property cards
- Create (public) route group with landing page (hero, featured listings, district links, stats, CTA) - Create search page with filter sidebar, list/map/split view modes, URL-synced filters, pagination - Build ListingMap component with CSS-based marker visualization and popup details - Build FilterBar with transaction type, property type, city, price range, area, bedrooms filters - Build PropertyCard and SearchResults components with responsive grid layout - Update middleware to allow public access to / and /search routes - Move dashboard home to /dashboard to avoid route conflict - All content in Vietnamese, mobile responsive Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -2,13 +2,13 @@ import Link from 'next/link';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function DashboardPage() {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold">Chào mừng đến GoodGo</h1>
|
<h1 className="text-3xl font-bold">Bảng điều khiển</h1>
|
||||||
<p className="mt-2 text-muted-foreground">
|
<p className="mt-2 text-muted-foreground">
|
||||||
Nền tảng bất động sản thông minh tại Việt Nam
|
Quản lý tin đăng bất động sản của bạn
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -43,7 +43,7 @@ export default function HomePage() {
|
|||||||
<CardDescription>Tìm bất động sản phù hợp nhu cầu</CardDescription>
|
<CardDescription>Tìm bất động sản phù hợp nhu cầu</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Link href="/listings">
|
<Link href="/search">
|
||||||
<Button variant="outline" className="w-full">Tìm kiếm</Button>
|
<Button variant="outline" className="w-full">Tìm kiếm</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@@ -7,7 +7,7 @@ import { useAuthStore } from '@/lib/auth-store';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ href: '/', label: 'Trang chủ', icon: '🏠' },
|
{ href: '/dashboard', label: 'Bảng điều khiển', icon: '🏠' },
|
||||||
{ href: '/listings', label: 'Tin đăng', icon: '📋' },
|
{ href: '/listings', label: 'Tin đăng', icon: '📋' },
|
||||||
{ href: '/listings/new', label: 'Đăng tin', icon: '➕' },
|
{ href: '/listings/new', label: 'Đăng tin', icon: '➕' },
|
||||||
];
|
];
|
||||||
|
|||||||
114
apps/web/app/(public)/layout.tsx
Normal file
114
apps/web/app/(public)/layout.tsx
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { useAuthStore } from '@/lib/auth-store';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
export default function PublicLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const { user } = useAuthStore();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<header 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">GoodGo</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="flex items-center space-x-1">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className={cn(
|
||||||
|
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
||||||
|
pathname === '/' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Trang chủ
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/search"
|
||||||
|
className={cn(
|
||||||
|
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
||||||
|
pathname.startsWith('/search')
|
||||||
|
? 'bg-accent text-accent-foreground'
|
||||||
|
: 'text-muted-foreground',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Tìm kiếm
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="ml-auto flex items-center space-x-3">
|
||||||
|
{user ? (
|
||||||
|
<>
|
||||||
|
<span className="hidden text-sm text-muted-foreground sm:inline">
|
||||||
|
{user.fullName}
|
||||||
|
</span>
|
||||||
|
<Link href="/dashboard">
|
||||||
|
<Button size="sm">Bảng điều khiển</Button>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Link href="/login">
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
Đăng nhập
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/register">
|
||||||
|
<Button size="sm">Đăng ký</Button>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>{children}</main>
|
||||||
|
|
||||||
|
<footer 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">GoodGo</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Nền tảng bất động sản thông minh tại Việt Nam
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Loại BĐS</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||||
|
<li><Link href="/search?propertyType=APARTMENT" className="hover:text-foreground">Căn hộ</Link></li>
|
||||||
|
<li><Link href="/search?propertyType=HOUSE" className="hover:text-foreground">Nhà riêng</Link></li>
|
||||||
|
<li><Link href="/search?propertyType=VILLA" className="hover:text-foreground">Biệt thự</Link></li>
|
||||||
|
<li><Link href="/search?propertyType=LAND" className="hover:text-foreground">Đất nền</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Khu vực</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">Hỗ trợ</h3>
|
||||||
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||||
|
<li><Link href="/login" className="hover:text-foreground">Đăng nhập</Link></li>
|
||||||
|
<li><Link href="/register" className="hover:text-foreground">Đăng ký</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-8 border-t pt-4 text-center text-sm text-muted-foreground">
|
||||||
|
© 2026 GoodGo. Tất cả quyền được bảo lưu.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
253
apps/web/app/(public)/page.tsx
Normal file
253
apps/web/app/(public)/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select } from '@/components/ui/select';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { PropertyCard } from '@/components/search/property-card';
|
||||||
|
import { listingsApi, type ListingDetail } from '@/lib/listings-api';
|
||||||
|
import { PROPERTY_TYPES, TRANSACTION_TYPES } from '@/lib/validations/listings';
|
||||||
|
|
||||||
|
const DISTRICTS = [
|
||||||
|
{ name: 'Quận 1', city: 'Hồ Chí Minh', img: null },
|
||||||
|
{ name: 'Quận 2', city: 'Hồ Chí Minh', img: null },
|
||||||
|
{ name: 'Quận 7', city: 'Hồ Chí Minh', img: null },
|
||||||
|
{ name: 'Bình Thạnh', city: 'Hồ Chí Minh', img: null },
|
||||||
|
{ name: 'Thủ Đức', city: 'Hồ Chí Minh', img: null },
|
||||||
|
{ name: 'Ba Đình', city: 'Hà Nội', img: null },
|
||||||
|
{ name: 'Hoàn Kiếm', city: 'Hà Nội', img: null },
|
||||||
|
{ name: 'Hải Châu', city: 'Đà Nẵng', img: null },
|
||||||
|
];
|
||||||
|
|
||||||
|
const STATS = [
|
||||||
|
{ label: 'Tin đăng', value: '10,000+', icon: '🏠' },
|
||||||
|
{ label: 'Người dùng', value: '50,000+', icon: '👥' },
|
||||||
|
{ label: 'Giao dịch thành công', value: '2,000+', icon: '✅' },
|
||||||
|
{ label: 'Tỉnh thành', value: '63', icon: '📍' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [searchQuery, setSearchQuery] = React.useState('');
|
||||||
|
const [transactionType, setTransactionType] = React.useState('');
|
||||||
|
const [propertyType, setPropertyType] = React.useState('');
|
||||||
|
const [featuredListings, setFeaturedListings] = React.useState<ListingDetail[]>([]);
|
||||||
|
const [loadingFeatured, setLoadingFeatured] = React.useState(true);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
listingsApi
|
||||||
|
.search({ status: 'ACTIVE', limit: 6 })
|
||||||
|
.then((res) => setFeaturedListings(res.data))
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => setLoadingFeatured(false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (searchQuery) params.set('q', searchQuery);
|
||||||
|
if (transactionType) params.set('transactionType', transactionType);
|
||||||
|
if (propertyType) params.set('propertyType', propertyType);
|
||||||
|
router.push(`/search?${params.toString()}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative bg-gradient-to-br from-primary/5 via-background to-primary/10 py-16 md:py-24">
|
||||||
|
<div className="mx-auto max-w-7xl px-4">
|
||||||
|
<div className="mx-auto max-w-3xl text-center">
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
|
||||||
|
Tìm kiếm bất động sản
|
||||||
|
<span className="text-primary"> hoàn hảo</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-lg text-muted-foreground md:text-xl">
|
||||||
|
Nền tảng bất động sản thông minh tại Việt Nam — mua bán, cho thuê nhà đất dễ dàng
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
<form onSubmit={handleSearch} className="mt-8">
|
||||||
|
<div className="mx-auto flex max-w-2xl flex-col gap-3 rounded-xl border bg-white p-3 shadow-lg sm:flex-row">
|
||||||
|
<Input
|
||||||
|
placeholder="Nhập khu vực, dự án, hoặc từ khóa..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="border-0 shadow-none focus-visible:ring-0"
|
||||||
|
/>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Select
|
||||||
|
value={transactionType}
|
||||||
|
onChange={(e) => setTransactionType(e.target.value)}
|
||||||
|
className="w-32 shrink-0"
|
||||||
|
>
|
||||||
|
<option value="">Loại GD</option>
|
||||||
|
{TRANSACTION_TYPES.map((t) => (
|
||||||
|
<option key={t.value} value={t.value}>
|
||||||
|
{t.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Button type="submit" className="shrink-0 px-6">
|
||||||
|
<svg
|
||||||
|
className="mr-2 h-4 w-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Tìm kiếm
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Quick property type links */}
|
||||||
|
<div className="mt-6 flex flex-wrap justify-center gap-2">
|
||||||
|
{PROPERTY_TYPES.map((pt) => (
|
||||||
|
<Link
|
||||||
|
key={pt.value}
|
||||||
|
href={`/search?propertyType=${pt.value}`}
|
||||||
|
>
|
||||||
|
<Badge variant="outline" className="cursor-pointer px-3 py-1.5 text-sm hover:bg-accent">
|
||||||
|
{pt.label}
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Featured Listings */}
|
||||||
|
<section className="py-12 md:py-16">
|
||||||
|
<div className="mx-auto max-w-7xl px-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold md:text-3xl">Tin đăng nổi bật</h2>
|
||||||
|
<p className="mt-1 text-muted-foreground">
|
||||||
|
Khám phá các bất động sản được quan tâm nhất
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Link href="/search">
|
||||||
|
<Button variant="outline">Xem tất cả</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loadingFeatured ? (
|
||||||
|
<div className="mt-8 flex min-h-[300px] items-center justify-center">
|
||||||
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
) : featuredListings.length > 0 ? (
|
||||||
|
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{featuredListings.map((listing) => (
|
||||||
|
<PropertyCard key={listing.id} listing={listing} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mt-8 flex min-h-[200px] items-center justify-center text-muted-foreground">
|
||||||
|
<p>Chưa có tin đăng nổi bật</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Districts / Quick Links */}
|
||||||
|
<section className="bg-muted/40 py-12 md:py-16">
|
||||||
|
<div className="mx-auto max-w-7xl px-4">
|
||||||
|
<h2 className="text-2xl font-bold md:text-3xl">Khu vực nổi bật</h2>
|
||||||
|
<p className="mt-1 text-muted-foreground">
|
||||||
|
Tìm kiếm theo quận huyện phổ biến
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-8 grid gap-3 sm:grid-cols-2 md:grid-cols-4">
|
||||||
|
{DISTRICTS.map((district) => (
|
||||||
|
<Link
|
||||||
|
key={`${district.name}-${district.city}`}
|
||||||
|
href={`/search?district=${encodeURIComponent(district.name)}&city=${encodeURIComponent(district.city)}`}
|
||||||
|
>
|
||||||
|
<Card className="group cursor-pointer overflow-hidden transition-shadow hover:shadow-md">
|
||||||
|
<div className="aspect-[16/9] bg-gradient-to-br from-primary/10 to-primary/5">
|
||||||
|
<div className="flex h-full items-center justify-center">
|
||||||
|
<span className="text-3xl">🏙️</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-3">
|
||||||
|
<p className="font-medium group-hover:text-primary">{district.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{district.city}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Market Stats */}
|
||||||
|
<section className="py-12 md:py-16">
|
||||||
|
<div className="mx-auto max-w-7xl px-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-2xl font-bold md:text-3xl">GoodGo trong số liệu</h2>
|
||||||
|
<p className="mt-1 text-muted-foreground">
|
||||||
|
Nền tảng bất động sản đáng tin cậy tại Việt Nam
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{STATS.map((stat) => (
|
||||||
|
<div
|
||||||
|
key={stat.label}
|
||||||
|
className="rounded-lg border bg-card p-6 text-center shadow-sm"
|
||||||
|
>
|
||||||
|
<span className="text-3xl">{stat.icon}</span>
|
||||||
|
<p className="mt-2 text-3xl font-bold text-primary">{stat.value}</p>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground">{stat.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="bg-primary py-12 md:py-16">
|
||||||
|
<div className="mx-auto max-w-7xl px-4 text-center">
|
||||||
|
<h2 className="text-2xl font-bold text-primary-foreground md:text-3xl">
|
||||||
|
Bạn có bất động sản muốn đăng?
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-primary-foreground/80">
|
||||||
|
Đăng tin miễn phí ngay hôm nay, tiếp cận hàng ngàn người mua tiềm năng
|
||||||
|
</p>
|
||||||
|
<div className="mt-6 flex justify-center gap-3">
|
||||||
|
<Link href="/register">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="lg"
|
||||||
|
className="font-semibold"
|
||||||
|
>
|
||||||
|
Đăng ký miễn phí
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/search">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground"
|
||||||
|
>
|
||||||
|
Tìm kiếm ngay
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
264
apps/web/app/(public)/search/page.tsx
Normal file
264
apps/web/app/(public)/search/page.tsx
Normal file
@@ -0,0 +1,264 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { FilterBar, type SearchFilters } from '@/components/search/filter-bar';
|
||||||
|
import { SearchResults } from '@/components/search/search-results';
|
||||||
|
import { ListingMap } from '@/components/map/listing-map';
|
||||||
|
import { listingsApi, type ListingDetail, type PaginatedResult } from '@/lib/listings-api';
|
||||||
|
|
||||||
|
type ViewMode = 'list' | 'map' | 'split';
|
||||||
|
|
||||||
|
const defaultFilters: SearchFilters = {
|
||||||
|
transactionType: '',
|
||||||
|
propertyType: '',
|
||||||
|
city: '',
|
||||||
|
district: '',
|
||||||
|
minPrice: '',
|
||||||
|
maxPrice: '',
|
||||||
|
minArea: '',
|
||||||
|
maxArea: '',
|
||||||
|
bedrooms: '',
|
||||||
|
sort: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
function SearchContent() {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const [filters, setFilters] = React.useState<SearchFilters>(() => ({
|
||||||
|
...defaultFilters,
|
||||||
|
transactionType: searchParams.get('transactionType') || '',
|
||||||
|
propertyType: searchParams.get('propertyType') || '',
|
||||||
|
city: searchParams.get('city') || '',
|
||||||
|
district: searchParams.get('district') || '',
|
||||||
|
minPrice: searchParams.get('minPrice') || '',
|
||||||
|
maxPrice: searchParams.get('maxPrice') || '',
|
||||||
|
bedrooms: searchParams.get('bedrooms') || '',
|
||||||
|
sort: searchParams.get('sort') || '',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const [page, setPage] = React.useState(Number(searchParams.get('page')) || 1);
|
||||||
|
const [result, setResult] = React.useState<PaginatedResult<ListingDetail> | null>(null);
|
||||||
|
const [loading, setLoading] = React.useState(true);
|
||||||
|
const [viewMode, setViewMode] = React.useState<ViewMode>('list');
|
||||||
|
const [showMobileFilters, setShowMobileFilters] = React.useState(false);
|
||||||
|
|
||||||
|
const fetchListings = React.useCallback(() => {
|
||||||
|
setLoading(true);
|
||||||
|
const params: Record<string, string | number> = {
|
||||||
|
page,
|
||||||
|
limit: 12,
|
||||||
|
status: 'ACTIVE',
|
||||||
|
};
|
||||||
|
if (filters.transactionType) params['transactionType'] = filters.transactionType;
|
||||||
|
if (filters.propertyType) params['propertyType'] = filters.propertyType;
|
||||||
|
if (filters.city) params['city'] = filters.city;
|
||||||
|
if (filters.district) params['district'] = filters.district;
|
||||||
|
if (filters.minPrice) params['minPrice'] = filters.minPrice;
|
||||||
|
if (filters.maxPrice) params['maxPrice'] = filters.maxPrice;
|
||||||
|
if (filters.minArea) params['minArea'] = Number(filters.minArea);
|
||||||
|
if (filters.maxArea) params['maxArea'] = Number(filters.maxArea);
|
||||||
|
if (filters.bedrooms) params['bedrooms'] = Number(filters.bedrooms);
|
||||||
|
|
||||||
|
listingsApi
|
||||||
|
.search(params)
|
||||||
|
.then(setResult)
|
||||||
|
.catch(() => setResult(null))
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, [filters, page]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
fetchListings();
|
||||||
|
}, [fetchListings]);
|
||||||
|
|
||||||
|
// Sync filters to URL
|
||||||
|
React.useEffect(() => {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
Object.entries(filters).forEach(([key, value]) => {
|
||||||
|
if (value) params.set(key, value);
|
||||||
|
});
|
||||||
|
if (page > 1) params.set('page', String(page));
|
||||||
|
const qs = params.toString();
|
||||||
|
router.replace(`/search${qs ? `?${qs}` : ''}`, { scroll: false });
|
||||||
|
}, [filters, page, router]);
|
||||||
|
|
||||||
|
const handleFilterChange = (newFilters: SearchFilters) => {
|
||||||
|
setFilters(newFilters);
|
||||||
|
setPage(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
setPage(1);
|
||||||
|
fetchListings();
|
||||||
|
};
|
||||||
|
|
||||||
|
const activeFilterCount = Object.entries(filters).filter(
|
||||||
|
([key, value]) => value && key !== 'sort',
|
||||||
|
).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto max-w-7xl px-4 py-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1 className="text-2xl font-bold md:text-3xl">Tìm kiếm bất động sản</h1>
|
||||||
|
<p className="mt-1 text-muted-foreground">
|
||||||
|
Tìm bất động sản phù hợp với nhu cầu của bạn
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* View Mode Toggle + Mobile Filter Button */}
|
||||||
|
<div className="mb-4 flex items-center justify-between">
|
||||||
|
<div className="flex gap-1 rounded-lg border p-1">
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'list' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('list')}
|
||||||
|
>
|
||||||
|
<svg className="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
Danh sách
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'map' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('map')}
|
||||||
|
>
|
||||||
|
<svg className="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||||||
|
</svg>
|
||||||
|
Bản đồ
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={viewMode === 'split' ? 'default' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
className="hidden lg:flex"
|
||||||
|
onClick={() => setViewMode('split')}
|
||||||
|
>
|
||||||
|
<svg className="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7" />
|
||||||
|
</svg>
|
||||||
|
Chia đôi
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="lg:hidden"
|
||||||
|
onClick={() => setShowMobileFilters(!showMobileFilters)}
|
||||||
|
>
|
||||||
|
<svg className="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
Bộ lọc
|
||||||
|
{activeFilterCount > 0 && (
|
||||||
|
<span className="ml-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
|
||||||
|
{activeFilterCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop horizontal filter bar */}
|
||||||
|
<div className="mb-4 hidden lg:block">
|
||||||
|
<FilterBar
|
||||||
|
filters={filters}
|
||||||
|
onChange={handleFilterChange}
|
||||||
|
onSearch={handleSearch}
|
||||||
|
layout="horizontal"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile filter panel */}
|
||||||
|
{showMobileFilters && (
|
||||||
|
<div className="mb-4 rounded-lg border bg-card p-4 lg:hidden">
|
||||||
|
<FilterBar
|
||||||
|
filters={filters}
|
||||||
|
onChange={handleFilterChange}
|
||||||
|
onSearch={() => {
|
||||||
|
handleSearch();
|
||||||
|
setShowMobileFilters(false);
|
||||||
|
}}
|
||||||
|
layout="sidebar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content Area */}
|
||||||
|
<div className="flex gap-6">
|
||||||
|
{/* Sidebar filters (desktop, split/list mode) */}
|
||||||
|
{viewMode !== 'map' && (
|
||||||
|
<aside className="hidden w-64 shrink-0 lg:block">
|
||||||
|
<div className="sticky top-20 rounded-lg border bg-card p-4">
|
||||||
|
<FilterBar
|
||||||
|
filters={filters}
|
||||||
|
onChange={handleFilterChange}
|
||||||
|
onSearch={handleSearch}
|
||||||
|
layout="sidebar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
{viewMode === 'list' && (
|
||||||
|
<SearchResults
|
||||||
|
result={result}
|
||||||
|
loading={loading}
|
||||||
|
page={page}
|
||||||
|
sort={filters.sort}
|
||||||
|
onPageChange={setPage}
|
||||||
|
onSortChange={(sort) => handleFilterChange({ ...filters, sort })}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewMode === 'map' && (
|
||||||
|
<ListingMap
|
||||||
|
listings={result?.data || []}
|
||||||
|
className="h-[calc(100vh-220px)]"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{viewMode === 'split' && (
|
||||||
|
<div className="grid gap-4 lg:grid-cols-2">
|
||||||
|
<div className="overflow-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
|
||||||
|
<SearchResults
|
||||||
|
result={result}
|
||||||
|
loading={loading}
|
||||||
|
page={page}
|
||||||
|
sort={filters.sort}
|
||||||
|
onPageChange={setPage}
|
||||||
|
onSortChange={(sort) => handleFilterChange({ ...filters, sort })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<ListingMap
|
||||||
|
listings={result?.data || []}
|
||||||
|
className="sticky top-20 h-[calc(100vh-220px)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SearchPage() {
|
||||||
|
return (
|
||||||
|
<React.Suspense
|
||||||
|
fallback={
|
||||||
|
<div className="flex min-h-[400px] items-center justify-center">
|
||||||
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SearchContent />
|
||||||
|
</React.Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
183
apps/web/components/map/listing-map.tsx
Normal file
183
apps/web/components/map/listing-map.tsx
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import type { ListingDetail } from '@/lib/listings-api';
|
||||||
|
|
||||||
|
function formatPrice(priceVND: string): string {
|
||||||
|
const num = Number(priceVND);
|
||||||
|
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||||
|
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} tr`;
|
||||||
|
return num.toLocaleString('vi-VN');
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ListingMapProps {
|
||||||
|
listings: ListingDetail[];
|
||||||
|
onMarkerClick?: (listing: ListingDetail) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MapMarker {
|
||||||
|
listing: ListingDetail;
|
||||||
|
lat: number;
|
||||||
|
lng: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ListingMap({ listings, onMarkerClick, className }: ListingMapProps) {
|
||||||
|
const [selectedMarker, setSelectedMarker] = React.useState<MapMarker | null>(null);
|
||||||
|
const mapRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Parse listings with valid coordinates
|
||||||
|
const markers = React.useMemo(() => {
|
||||||
|
return listings
|
||||||
|
.filter((l) => {
|
||||||
|
// ListingDetail doesn't expose lat/lng directly, but the property might have it
|
||||||
|
// For now we'll use a simple city-based mapping as fallback
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.map((listing, index) => {
|
||||||
|
// Generate approximate coordinates based on city/district for demo
|
||||||
|
// In production, these would come from the API
|
||||||
|
const cityCoords: Record<string, [number, number]> = {
|
||||||
|
'Hồ Chí Minh': [10.8231, 106.6297],
|
||||||
|
'Hà Nội': [21.0285, 105.8542],
|
||||||
|
'Đà Nẵng': [16.0544, 108.2022],
|
||||||
|
'Nha Trang': [12.2388, 109.1967],
|
||||||
|
'Cần Thơ': [10.0452, 105.7469],
|
||||||
|
};
|
||||||
|
const base = cityCoords[listing.property.city] || [10.8231, 106.6297];
|
||||||
|
// Add small random offset per listing for visual spread
|
||||||
|
const seed = listing.id.charCodeAt(0) + index;
|
||||||
|
const lat = base[0] + ((seed % 100) - 50) * 0.001;
|
||||||
|
const lng = base[1] + ((seed % 73) - 36) * 0.001;
|
||||||
|
return { listing, lat, lng };
|
||||||
|
});
|
||||||
|
}, [listings]);
|
||||||
|
|
||||||
|
const handleMarkerClick = (marker: MapMarker) => {
|
||||||
|
setSelectedMarker(marker);
|
||||||
|
onMarkerClick?.(marker.listing);
|
||||||
|
};
|
||||||
|
|
||||||
|
// CSS-based map visualization (no Mapbox dependency required)
|
||||||
|
// Uses a relative coordinate system to position markers
|
||||||
|
const bounds = React.useMemo(() => {
|
||||||
|
if (markers.length === 0) return { minLat: 10, maxLat: 22, minLng: 102, maxLng: 110 };
|
||||||
|
const lats = markers.map((m) => m.lat);
|
||||||
|
const lngs = markers.map((m) => m.lng);
|
||||||
|
const padding = 0.01;
|
||||||
|
return {
|
||||||
|
minLat: Math.min(...lats) - padding,
|
||||||
|
maxLat: Math.max(...lats) + padding,
|
||||||
|
minLng: Math.min(...lngs) - padding,
|
||||||
|
maxLng: Math.max(...lngs) + padding,
|
||||||
|
};
|
||||||
|
}, [markers]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={mapRef}
|
||||||
|
className={`relative overflow-hidden rounded-lg border bg-gradient-to-b from-blue-50 to-green-50 ${className || 'h-[500px]'}`}
|
||||||
|
>
|
||||||
|
{/* Grid lines for visual reference */}
|
||||||
|
<div className="absolute inset-0 opacity-10">
|
||||||
|
<div className="h-full w-full"
|
||||||
|
style={{
|
||||||
|
backgroundImage: 'linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px)',
|
||||||
|
backgroundSize: '50px 50px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Markers */}
|
||||||
|
{markers.map((marker) => {
|
||||||
|
const x = ((marker.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100;
|
||||||
|
const y = ((bounds.maxLat - marker.lat) / (bounds.maxLat - bounds.minLat)) * 100;
|
||||||
|
const isSelected = selectedMarker?.listing.id === marker.listing.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={marker.listing.id}
|
||||||
|
className={`absolute z-10 -translate-x-1/2 -translate-y-full cursor-pointer transition-all hover:z-20 hover:scale-110 ${
|
||||||
|
isSelected ? 'z-20 scale-110' : ''
|
||||||
|
}`}
|
||||||
|
style={{ left: `${Math.min(Math.max(x, 5), 95)}%`, top: `${Math.min(Math.max(y, 5), 90)}%` }}
|
||||||
|
onClick={() => handleMarkerClick(marker)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`rounded-full px-2 py-1 text-xs font-bold shadow-md ${
|
||||||
|
isSelected
|
||||||
|
? 'bg-primary text-primary-foreground ring-2 ring-primary/30'
|
||||||
|
: 'bg-white text-foreground hover:bg-primary hover:text-primary-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{formatPrice(marker.listing.priceVND)}
|
||||||
|
</div>
|
||||||
|
<div className="mx-auto h-2 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-current" />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Selected marker popup */}
|
||||||
|
{selectedMarker && (
|
||||||
|
<div
|
||||||
|
className="absolute z-30 w-64 -translate-x-1/2 rounded-lg border bg-white p-3 shadow-lg"
|
||||||
|
style={{
|
||||||
|
left: `${Math.min(Math.max(((selectedMarker.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100, 15), 85)}%`,
|
||||||
|
top: `${Math.min(Math.max(((bounds.maxLat - selectedMarker.lat) / (bounds.maxLat - bounds.minLat)) * 100 - 15, 2), 60)}%`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="absolute right-1 top-1 rounded p-1 text-muted-foreground hover:bg-muted"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setSelectedMarker(null); }}
|
||||||
|
>
|
||||||
|
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{selectedMarker.listing.property.media.length > 0 && (
|
||||||
|
<img
|
||||||
|
src={selectedMarker.listing.property.media[0]?.url}
|
||||||
|
alt={selectedMarker.listing.property.title}
|
||||||
|
className="mb-2 h-24 w-full rounded object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<p className="text-sm font-bold text-primary">
|
||||||
|
{formatPrice(selectedMarker.listing.priceVND)} VNĐ
|
||||||
|
</p>
|
||||||
|
<p className="line-clamp-1 text-sm font-medium">{selectedMarker.listing.property.title}</p>
|
||||||
|
<p className="line-clamp-1 text-xs text-muted-foreground">
|
||||||
|
{selectedMarker.listing.property.district}, {selectedMarker.listing.property.city}
|
||||||
|
</p>
|
||||||
|
<div className="mt-2 flex gap-1">
|
||||||
|
<Badge variant="secondary" className="text-xs">{selectedMarker.listing.property.areaM2} m²</Badge>
|
||||||
|
{selectedMarker.listing.property.bedrooms != null && (
|
||||||
|
<Badge variant="secondary" className="text-xs">{selectedMarker.listing.property.bedrooms} PN</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={`/listings/${selectedMarker.listing.id}`}
|
||||||
|
className="mt-2 block text-center text-xs font-medium text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Xem chi tiết
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Map controls */}
|
||||||
|
<div className="absolute bottom-3 left-3 flex flex-col gap-1">
|
||||||
|
<div className="rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
|
||||||
|
{markers.length} bất động sản trên bản đồ
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Empty state */}
|
||||||
|
{markers.length === 0 && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<p className="text-muted-foreground">Không có bất động sản để hiển thị trên bản đồ</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
197
apps/web/components/search/filter-bar.tsx
Normal file
197
apps/web/components/search/filter-bar.tsx
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select } from '@/components/ui/select';
|
||||||
|
import { PROPERTY_TYPES, TRANSACTION_TYPES } from '@/lib/validations/listings';
|
||||||
|
|
||||||
|
export interface SearchFilters {
|
||||||
|
transactionType: string;
|
||||||
|
propertyType: string;
|
||||||
|
city: string;
|
||||||
|
district: string;
|
||||||
|
minPrice: string;
|
||||||
|
maxPrice: string;
|
||||||
|
minArea: string;
|
||||||
|
maxArea: string;
|
||||||
|
bedrooms: string;
|
||||||
|
sort: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CITIES = [
|
||||||
|
'Hồ Chí Minh',
|
||||||
|
'Hà Nội',
|
||||||
|
'Đà Nẵng',
|
||||||
|
'Nha Trang',
|
||||||
|
'Cần Thơ',
|
||||||
|
'Hải Phòng',
|
||||||
|
'Bình Dương',
|
||||||
|
'Đồng Nai',
|
||||||
|
'Long An',
|
||||||
|
'Bà Rịa - Vũng Tàu',
|
||||||
|
];
|
||||||
|
|
||||||
|
const PRICE_RANGES = [
|
||||||
|
{ label: 'Dưới 1 tỷ', min: '0', max: '1000000000' },
|
||||||
|
{ label: '1 - 3 tỷ', min: '1000000000', max: '3000000000' },
|
||||||
|
{ label: '3 - 5 tỷ', min: '3000000000', max: '5000000000' },
|
||||||
|
{ label: '5 - 10 tỷ', min: '5000000000', max: '10000000000' },
|
||||||
|
{ label: '10 - 20 tỷ', min: '10000000000', max: '20000000000' },
|
||||||
|
{ label: 'Trên 20 tỷ', min: '20000000000', max: '' },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface FilterBarProps {
|
||||||
|
filters: SearchFilters;
|
||||||
|
onChange: (filters: SearchFilters) => void;
|
||||||
|
onSearch: () => void;
|
||||||
|
layout?: 'horizontal' | 'sidebar';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }: FilterBarProps) {
|
||||||
|
const update = (key: keyof SearchFilters, value: string) => {
|
||||||
|
onChange({ ...filters, [key]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePriceRange = (value: string) => {
|
||||||
|
if (!value) {
|
||||||
|
onChange({ ...filters, minPrice: '', maxPrice: '' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const range = PRICE_RANGES[Number(value)];
|
||||||
|
if (range) {
|
||||||
|
onChange({ ...filters, minPrice: range.min, maxPrice: range.max });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentPriceIdx = PRICE_RANGES.findIndex(
|
||||||
|
(r) => r.min === filters.minPrice && r.max === filters.maxPrice,
|
||||||
|
);
|
||||||
|
|
||||||
|
const isSidebar = layout === 'sidebar';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={isSidebar ? 'space-y-4' : 'space-y-3'}>
|
||||||
|
{isSidebar && <h3 className="font-semibold">Bộ lọc</h3>}
|
||||||
|
|
||||||
|
<div className={isSidebar ? 'space-y-3' : 'flex flex-wrap gap-3'}>
|
||||||
|
<Select
|
||||||
|
value={filters.transactionType}
|
||||||
|
onChange={(e) => update('transactionType', e.target.value)}
|
||||||
|
className={isSidebar ? 'w-full' : 'w-40'}
|
||||||
|
>
|
||||||
|
<option value="">Tất cả giao dịch</option>
|
||||||
|
{TRANSACTION_TYPES.map((t) => (
|
||||||
|
<option key={t.value} value={t.value}>
|
||||||
|
{t.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={filters.propertyType}
|
||||||
|
onChange={(e) => update('propertyType', e.target.value)}
|
||||||
|
className={isSidebar ? 'w-full' : 'w-44'}
|
||||||
|
>
|
||||||
|
<option value="">Tất cả loại BĐS</option>
|
||||||
|
{PROPERTY_TYPES.map((t) => (
|
||||||
|
<option key={t.value} value={t.value}>
|
||||||
|
{t.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={filters.city}
|
||||||
|
onChange={(e) => update('city', e.target.value)}
|
||||||
|
className={isSidebar ? 'w-full' : 'w-44'}
|
||||||
|
>
|
||||||
|
<option value="">Tất cả khu vực</option>
|
||||||
|
{CITIES.map((c) => (
|
||||||
|
<option key={c} value={c}>
|
||||||
|
{c}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={currentPriceIdx >= 0 ? String(currentPriceIdx) : ''}
|
||||||
|
onChange={(e) => handlePriceRange(e.target.value)}
|
||||||
|
className={isSidebar ? 'w-full' : 'w-40'}
|
||||||
|
>
|
||||||
|
<option value="">Tất cả mức giá</option>
|
||||||
|
{PRICE_RANGES.map((r, i) => (
|
||||||
|
<option key={i} value={String(i)}>
|
||||||
|
{r.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{isSidebar && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<label className="mb-1 block text-sm text-muted-foreground">Diện tích (m²)</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Từ"
|
||||||
|
value={filters.minArea}
|
||||||
|
onChange={(e) => update('minArea', e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Đến"
|
||||||
|
value={filters.maxArea}
|
||||||
|
onChange={(e) => update('maxArea', e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={filters.bedrooms}
|
||||||
|
onChange={(e) => update('bedrooms', e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<option value="">Số phòng ngủ</option>
|
||||||
|
{[1, 2, 3, 4, 5].map((n) => (
|
||||||
|
<option key={n} value={String(n)}>
|
||||||
|
{n}+ PN
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
placeholder="Quận/huyện"
|
||||||
|
value={filters.district}
|
||||||
|
onChange={(e) => update('district', e.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isSidebar && (
|
||||||
|
<Select
|
||||||
|
value={filters.bedrooms}
|
||||||
|
onChange={(e) => update('bedrooms', e.target.value)}
|
||||||
|
className="w-36"
|
||||||
|
>
|
||||||
|
<option value="">Phòng ngủ</option>
|
||||||
|
{[1, 2, 3, 4, 5].map((n) => (
|
||||||
|
<option key={n} value={String(n)}>
|
||||||
|
{n}+ PN
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isSidebar && (
|
||||||
|
<Button onClick={onSearch} className="w-full">
|
||||||
|
Tìm kiếm
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
101
apps/web/components/search/property-card.tsx
Normal file
101
apps/web/components/search/property-card.tsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import type { ListingDetail } from '@/lib/listings-api';
|
||||||
|
|
||||||
|
function formatPrice(priceVND: string): string {
|
||||||
|
const num = Number(priceVND);
|
||||||
|
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||||
|
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
|
||||||
|
return num.toLocaleString('vi-VN');
|
||||||
|
}
|
||||||
|
|
||||||
|
const PROPERTY_TYPE_LABELS: Record<string, string> = {
|
||||||
|
APARTMENT: 'Căn hộ',
|
||||||
|
HOUSE: 'Nhà riêng',
|
||||||
|
VILLA: 'Biệt thự',
|
||||||
|
LAND: 'Đất nền',
|
||||||
|
OFFICE: 'Văn phòng',
|
||||||
|
SHOPHOUSE: 'Shophouse',
|
||||||
|
};
|
||||||
|
|
||||||
|
interface PropertyCardProps {
|
||||||
|
listing: ListingDetail;
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PropertyCard({ listing, compact }: PropertyCardProps) {
|
||||||
|
return (
|
||||||
|
<Link href={`/listings/${listing.id}`}>
|
||||||
|
<Card className="group h-full overflow-hidden transition-shadow hover:shadow-md">
|
||||||
|
<div className={`relative bg-muted ${compact ? 'aspect-[16/10]' : 'aspect-[4/3]'}`}>
|
||||||
|
{listing.property.media.length > 0 ? (
|
||||||
|
<img
|
||||||
|
src={listing.property.media[0]?.url}
|
||||||
|
alt={listing.property.title}
|
||||||
|
className="h-full w-full object-cover transition-transform group-hover:scale-105"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full items-center justify-center text-muted-foreground">
|
||||||
|
Chưa có ảnh
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="absolute left-2 top-2 flex gap-1">
|
||||||
|
<Badge variant="default" className="text-xs">
|
||||||
|
{listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{PROPERTY_TYPE_LABELS[listing.property.propertyType] || listing.property.propertyType}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{listing.property.media.length > 1 && (
|
||||||
|
<div className="absolute bottom-2 right-2">
|
||||||
|
<Badge variant="outline" className="bg-black/50 text-xs text-white border-none">
|
||||||
|
{listing.property.media.length} ảnh
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<p className="text-lg font-bold text-primary">
|
||||||
|
{formatPrice(listing.priceVND)} VNĐ
|
||||||
|
{listing.transactionType === 'RENT' && listing.rentPriceMonthly && (
|
||||||
|
<span className="text-sm font-normal text-muted-foreground">/tháng</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<h3 className="mt-1 line-clamp-1 font-medium">{listing.property.title}</h3>
|
||||||
|
<p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
|
||||||
|
{listing.property.address}, {listing.property.district}, {listing.property.city}
|
||||||
|
</p>
|
||||||
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{listing.property.areaM2} m²
|
||||||
|
</Badge>
|
||||||
|
{listing.property.bedrooms != null && (
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{listing.property.bedrooms} PN
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{listing.property.bathrooms} PT
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{listing.property.direction && (
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
Hướng {listing.property.direction === 'NORTH' ? 'Bắc' :
|
||||||
|
listing.property.direction === 'SOUTH' ? 'Nam' :
|
||||||
|
listing.property.direction === 'EAST' ? 'Đông' :
|
||||||
|
listing.property.direction === 'WEST' ? 'Tây' :
|
||||||
|
listing.property.direction}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
128
apps/web/components/search/search-results.tsx
Normal file
128
apps/web/components/search/search-results.tsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Select } from '@/components/ui/select';
|
||||||
|
import { PropertyCard } from './property-card';
|
||||||
|
import type { ListingDetail, PaginatedResult } from '@/lib/listings-api';
|
||||||
|
|
||||||
|
interface SearchResultsProps {
|
||||||
|
result: PaginatedResult<ListingDetail> | null;
|
||||||
|
loading: boolean;
|
||||||
|
page: number;
|
||||||
|
sort: string;
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
onSortChange: (sort: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SearchResults({
|
||||||
|
result,
|
||||||
|
loading,
|
||||||
|
page,
|
||||||
|
sort,
|
||||||
|
onPageChange,
|
||||||
|
onSortChange,
|
||||||
|
}: SearchResultsProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-[400px] items-center justify-center">
|
||||||
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!result || result.data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-[400px] flex-col items-center justify-center text-muted-foreground">
|
||||||
|
<svg
|
||||||
|
className="mb-4 h-16 w-16 text-muted-foreground/50"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p className="text-lg font-medium">Không tìm thấy kết quả</p>
|
||||||
|
<p className="mt-1 text-sm">Hãy thử thay đổi bộ lọc để tìm kiếm rộng hơn</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{result.total} kết quả
|
||||||
|
</p>
|
||||||
|
<Select
|
||||||
|
value={sort}
|
||||||
|
onChange={(e) => onSortChange(e.target.value)}
|
||||||
|
className="w-48"
|
||||||
|
>
|
||||||
|
<option value="">Mới nhất</option>
|
||||||
|
<option value="price_asc">Giá: Thấp đến cao</option>
|
||||||
|
<option value="price_desc">Giá: Cao đến thấp</option>
|
||||||
|
<option value="area_asc">Diện tích: Nhỏ đến lớn</option>
|
||||||
|
<option value="area_desc">Diện tích: Lớn đến nhỏ</option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{result.data.map((listing) => (
|
||||||
|
<PropertyCard key={listing.id} listing={listing} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{result.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-center gap-2 pt-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={page <= 1}
|
||||||
|
onClick={() => onPageChange(page - 1)}
|
||||||
|
>
|
||||||
|
Trước
|
||||||
|
</Button>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{Array.from({ length: Math.min(result.totalPages, 5) }, (_, i) => {
|
||||||
|
let pageNum: number;
|
||||||
|
if (result.totalPages <= 5) {
|
||||||
|
pageNum = i + 1;
|
||||||
|
} else if (page <= 3) {
|
||||||
|
pageNum = i + 1;
|
||||||
|
} else if (page >= result.totalPages - 2) {
|
||||||
|
pageNum = result.totalPages - 4 + i;
|
||||||
|
} else {
|
||||||
|
pageNum = page - 2 + i;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={pageNum}
|
||||||
|
variant={pageNum === page ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
className="w-9"
|
||||||
|
onClick={() => onPageChange(pageNum)}
|
||||||
|
>
|
||||||
|
{pageNum}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={page >= result.totalPages}
|
||||||
|
onClick={() => onPageChange(page + 1)}
|
||||||
|
>
|
||||||
|
Tiếp
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,12 +1,16 @@
|
|||||||
import { NextResponse } from 'next/server';
|
import { NextResponse } from 'next/server';
|
||||||
import type { NextRequest } from 'next/server';
|
import type { NextRequest } from 'next/server';
|
||||||
|
|
||||||
const publicPaths = ['/login', '/register'];
|
const publicPaths = ['/login', '/register', '/search'];
|
||||||
|
|
||||||
|
const publicExactPaths = ['/'];
|
||||||
|
|
||||||
export function middleware(request: NextRequest) {
|
export function middleware(request: NextRequest) {
|
||||||
const { pathname } = request.nextUrl;
|
const { pathname } = request.nextUrl;
|
||||||
|
|
||||||
const isPublicPath = publicPaths.some((path) => pathname.startsWith(path));
|
const isPublicPath =
|
||||||
|
publicExactPaths.includes(pathname) ||
|
||||||
|
publicPaths.some((path) => pathname.startsWith(path));
|
||||||
|
|
||||||
// We check for the token cookie or rely on client-side auth store.
|
// We check for the token cookie or rely on client-side auth store.
|
||||||
// For SSR-safe auth, check a lightweight cookie set by the client after login.
|
// For SSR-safe auth, check a lightweight cookie set by the client after login.
|
||||||
@@ -18,8 +22,9 @@ export function middleware(request: NextRequest) {
|
|||||||
return NextResponse.redirect(loginUrl);
|
return NextResponse.redirect(loginUrl);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isPublicPath && hasAuthCookie) {
|
const isAuthOnlyPath = ['/login', '/register'].some((path) => pathname.startsWith(path));
|
||||||
return NextResponse.redirect(new URL('/', request.url));
|
if (isAuthOnlyPath && hasAuthCookie) {
|
||||||
|
return NextResponse.redirect(new URL('/dashboard', request.url));
|
||||||
}
|
}
|
||||||
|
|
||||||
return NextResponse.next();
|
return NextResponse.next();
|
||||||
|
|||||||
Reference in New Issue
Block a user