+ {/* Grid lines for visual reference */}
+
+ );
+}
diff --git a/apps/web/components/search/filter-bar.tsx b/apps/web/components/search/filter-bar.tsx
new file mode 100644
index 0000000..0e9ede2
--- /dev/null
+++ b/apps/web/components/search/filter-bar.tsx
@@ -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 (
+
+
+
+
+ {/* 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 (
+
+ );
+ })}
+
+ {/* Selected marker popup */}
+ {selectedMarker && (
+
+
+ {selectedMarker.listing.property.media.length > 0 && (
+ 
+ )}
+
+ )}
+
+ {/* Map controls */}
+ + {formatPrice(selectedMarker.listing.priceVND)} VNĐ +
+{selectedMarker.listing.property.title}
++ {selectedMarker.listing.property.district}, {selectedMarker.listing.property.city} +
+
+ {selectedMarker.listing.property.areaM2} m²
+ {selectedMarker.listing.property.bedrooms != null && (
+ {selectedMarker.listing.property.bedrooms} PN
+ )}
+
+
+ Xem chi tiết
+
+
+
+
+ {/* Empty state */}
+ {markers.length === 0 && (
+
+ {markers.length} bất động sản trên bản đồ
+
+
+
+ )}
+ Không có bất động sản để hiển thị trên bản đồ
+
+ {isSidebar &&
+ );
+}
diff --git a/apps/web/components/search/property-card.tsx b/apps/web/components/search/property-card.tsx
new file mode 100644
index 0000000..e7e6447
--- /dev/null
+++ b/apps/web/components/search/property-card.tsx
@@ -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: RecordBộ lọc
} + +
+
+
+
+
+
+
+
+
+ {isSidebar && (
+ <>
+
+
+ {isSidebar && (
+
+ )}
+
+
+
+
+
+
+ update('district', e.target.value)}
+ className="w-full"
+ />
+
+ )}
+
+ {!isSidebar && (
+
+ )}
+
+ update('minArea', e.target.value)}
+ className="w-full"
+ />
+ update('maxArea', e.target.value)}
+ className="w-full"
+ />
+
+
+ {listing.property.media.length > 0 ? (
+ 
+ ) : (
+
+
+ Chưa có ảnh
+
+ )}
+
+
+ {listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
+
+
+ {PROPERTY_TYPE_LABELS[listing.property.propertyType] || listing.property.propertyType}
+
+
+ {listing.property.media.length > 1 && (
+
+
+ {listing.property.media.length} ảnh
+
+
+ )}
+ + {formatPrice(listing.priceVND)} VNĐ + {listing.transactionType === 'RENT' && listing.rentPriceMonthly && ( + /tháng + )} +
+{listing.property.title}
++ {listing.property.address}, {listing.property.district}, {listing.property.city} +
+
+
+ {listing.property.areaM2} m²
+
+ {listing.property.bedrooms != null && (
+
+ {listing.property.bedrooms} PN
+
+ )}
+ {listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
+
+ {listing.property.bathrooms} PT
+
+ )}
+ {listing.property.direction && (
+
+ 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}
+
+ )}
+
+
+
+
+ );
+ }
+
+ if (!result || result.data.length === 0) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+ Không tìm thấy kết quả
+Hãy thử thay đổi bộ lọc để tìm kiếm rộng hơn
+
+
+ );
+}
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index 33b9039..6913f13 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -1,12 +1,16 @@
import { NextResponse } 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) {
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.
// 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);
}
- if (isPublicPath && hasAuthCookie) {
- return NextResponse.redirect(new URL('/', request.url));
+ const isAuthOnlyPath = ['/login', '/register'].some((path) => pathname.startsWith(path));
+ if (isAuthOnlyPath && hasAuthCookie) {
+ return NextResponse.redirect(new URL('/dashboard', request.url));
}
return NextResponse.next();
+
+
+ + {result.total} kết quả +
+ +
+ {result.data.map((listing) => (
+
+
+ {result.totalPages > 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 (
+
+ );
+ })}
+
+
+