feat(web): add industrial compare page, listing search, and Mapbox park map
- Add interactive Mapbox map to /khu-cong-nghiep landing page with park markers and popups - Build compare page at /khu-cong-nghiep/so-sanh with recharts RadarChart and detailed comparison table - Build listing search page at /khu-cong-nghiep/cho-thue with filters for property type, lease type, area, and price - Add IndustrialListing types, API client functions, and React Query hooks Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
231
apps/web/components/khu-cong-nghiep/listing-search-client.tsx
Normal file
231
apps/web/components/khu-cong-nghiep/listing-search-client.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
'use client';
|
||||
|
||||
import { ArrowLeft, Factory, Search, X } from 'lucide-react';
|
||||
import * as React from 'react';
|
||||
import { IndustrialListingCard } from '@/components/khu-cong-nghiep/listing-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { useIndustrialListingsSearch } from '@/lib/hooks/use-khu-cong-nghiep';
|
||||
import {
|
||||
type IndustrialLeaseType,
|
||||
type IndustrialPropertyType,
|
||||
type SearchIndustrialListingsParams,
|
||||
LEASE_TYPE_LABELS,
|
||||
PROPERTY_TYPE_LABELS,
|
||||
} from '@/lib/khu-cong-nghiep-api';
|
||||
|
||||
const PAGE_SIZE = 12;
|
||||
|
||||
export function ListingSearchClient() {
|
||||
const [filters, setFilters] = React.useState<SearchIndustrialListingsParams>({
|
||||
page: 1,
|
||||
limit: PAGE_SIZE,
|
||||
});
|
||||
const [searchInput, setSearchInput] = React.useState('');
|
||||
|
||||
const { data, isLoading, isError } = useIndustrialListingsSearch(filters);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setFilters((prev) => ({ ...prev, q: searchInput.trim() || undefined, page: 1 }));
|
||||
};
|
||||
|
||||
const updateFilter = (key: keyof SearchIndustrialListingsParams, value: string) => {
|
||||
setFilters((prev) => ({ ...prev, [key]: value || undefined, page: 1 }));
|
||||
};
|
||||
|
||||
const updateNumericFilter = (key: keyof SearchIndustrialListingsParams, value: string) => {
|
||||
const num = value ? Number(value) : undefined;
|
||||
setFilters((prev) => ({ ...prev, [key]: num, page: 1 }));
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setFilters((prev) => ({ ...prev, page }));
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setSearchInput('');
|
||||
setFilters({ page: 1, limit: PAGE_SIZE });
|
||||
};
|
||||
|
||||
const hasFilters = filters.q || filters.propertyType || filters.leaseType ||
|
||||
filters.minAreaM2 || filters.maxAreaM2 || filters.minPriceUsdM2 || filters.maxPriceUsdM2;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl px-4 py-6">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<Link href="/khu-cong-nghiep">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold md:text-3xl">Cho Thuê Bất Động Sản Công Nghiệp</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Tìm nhà xưởng, kho bãi, đất công nghiệp cho thuê tại các KCN
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search bar */}
|
||||
<form onSubmit={handleSearch} className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Tìm kiếm theo tên, KCN, vị trí..."
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" size="sm">Tìm</Button>
|
||||
</form>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<select
|
||||
value={filters.propertyType ?? ''}
|
||||
onChange={(e) => updateFilter('propertyType', e.target.value)}
|
||||
className="rounded-md border bg-background px-3 py-1.5 text-sm"
|
||||
aria-label="Loại BĐS"
|
||||
>
|
||||
<option value="">Loại BĐS</option>
|
||||
{(Object.entries(PROPERTY_TYPE_LABELS) as [IndustrialPropertyType, string][]).map(
|
||||
([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={filters.leaseType ?? ''}
|
||||
onChange={(e) => updateFilter('leaseType', e.target.value)}
|
||||
className="rounded-md border bg-background px-3 py-1.5 text-sm"
|
||||
aria-label="Hình thức"
|
||||
>
|
||||
<option value="">Hình thức thuê</option>
|
||||
{(Object.entries(LEASE_TYPE_LABELS) as [IndustrialLeaseType, string][]).map(
|
||||
([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Diện tích từ (m²)"
|
||||
value={filters.minAreaM2 ?? ''}
|
||||
onChange={(e) => updateNumericFilter('minAreaM2', e.target.value)}
|
||||
className="w-36 text-sm"
|
||||
aria-label="Diện tích tối thiểu"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Diện tích đến (m²)"
|
||||
value={filters.maxAreaM2 ?? ''}
|
||||
onChange={(e) => updateNumericFilter('maxAreaM2', e.target.value)}
|
||||
className="w-36 text-sm"
|
||||
aria-label="Diện tích tối đa"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Giá từ (USD/m²)"
|
||||
value={filters.minPriceUsdM2 ?? ''}
|
||||
onChange={(e) => updateNumericFilter('minPriceUsdM2', e.target.value)}
|
||||
className="w-36 text-sm"
|
||||
aria-label="Giá tối thiểu"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Giá đến (USD/m²)"
|
||||
value={filters.maxPriceUsdM2 ?? ''}
|
||||
onChange={(e) => updateNumericFilter('maxPriceUsdM2', e.target.value)}
|
||||
className="w-36 text-sm"
|
||||
aria-label="Giá tối đa"
|
||||
/>
|
||||
|
||||
{hasFilters && (
|
||||
<Button variant="ghost" size="sm" onClick={handleClear} className="gap-1">
|
||||
<X className="h-3.5 w-3.5" />
|
||||
Xóa bộ lọc
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="mt-6">
|
||||
{isLoading ? (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="h-64 animate-pulse rounded-lg bg-muted" />
|
||||
))}
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
Không thể tải danh sách tin cho thuê. Vui lòng thử lại.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => setFilters({ ...filters })}
|
||||
>
|
||||
Thử lại
|
||||
</Button>
|
||||
</div>
|
||||
) : data && data.data.length > 0 ? (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
{data.total} tin cho thuê được tìm thấy
|
||||
</p>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{data.data.map((listing) => (
|
||||
<IndustrialListingCard key={listing.id} listing={listing} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{data.totalPages > 1 && (
|
||||
<div className="mt-8 flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={filters.page === 1}
|
||||
onClick={() => handlePageChange((filters.page || 1) - 1)}
|
||||
>
|
||||
Trước
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Trang {data.page} / {data.totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page >= data.totalPages}
|
||||
onClick={() => handlePageChange((filters.page || 1) + 1)}
|
||||
>
|
||||
Sau
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="py-12 text-center">
|
||||
<Factory className="mx-auto h-12 w-12 text-muted-foreground/30" />
|
||||
<p className="mt-4 text-lg font-medium">Không tìm thấy tin cho thuê</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Thử thay đổi bộ lọc để tìm kiếm nhiều hơn
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user