feat(web): add saved searches, image lightbox, and web vitals tracking
New features: - Saved searches dashboard page with CRUD hooks and API client - Image lightbox component for property gallery full-screen viewing - Web vitals provider and reporting utilities for performance monitoring - Image blur placeholder generation utility Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -0,0 +1,270 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import * as React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
useSavedSearches,
|
||||
useDeleteSavedSearch,
|
||||
useUpdateSavedSearch,
|
||||
} from '@/lib/hooks/use-saved-searches';
|
||||
import { type SavedSearch, type SavedSearchFilters } from '@/lib/saved-search-api';
|
||||
|
||||
const PROPERTY_TYPE_LABELS: Record<string, string> = {
|
||||
APARTMENT: 'Chung cư',
|
||||
HOUSE: 'Nhà phố',
|
||||
VILLA: 'Biệt thự',
|
||||
LAND: 'Đất nền',
|
||||
OFFICE: 'Văn phòng',
|
||||
SHOPHOUSE: 'Shophouse',
|
||||
};
|
||||
|
||||
const TRANSACTION_TYPE_LABELS: Record<string, string> = {
|
||||
SALE: 'Bán',
|
||||
RENT: 'Cho thuê',
|
||||
};
|
||||
|
||||
function formatPrice(value: string): string {
|
||||
const num = Number(value);
|
||||
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');
|
||||
}
|
||||
|
||||
function formatFilters(filters: SavedSearchFilters): string[] {
|
||||
const parts: string[] = [];
|
||||
|
||||
if (filters.transactionType) {
|
||||
parts.push(TRANSACTION_TYPE_LABELS[filters.transactionType] ?? filters.transactionType);
|
||||
}
|
||||
if (filters.propertyType) {
|
||||
parts.push(PROPERTY_TYPE_LABELS[filters.propertyType] ?? filters.propertyType);
|
||||
}
|
||||
if (filters.district) parts.push(filters.district);
|
||||
if (filters.city) parts.push(filters.city);
|
||||
if (filters.priceMin && filters.priceMax) {
|
||||
parts.push(`${formatPrice(filters.priceMin)} - ${formatPrice(filters.priceMax)}`);
|
||||
} else if (filters.priceMin) {
|
||||
parts.push(`Từ ${formatPrice(filters.priceMin)}`);
|
||||
} else if (filters.priceMax) {
|
||||
parts.push(`Đến ${formatPrice(filters.priceMax)}`);
|
||||
}
|
||||
if (filters.areaMin || filters.areaMax) {
|
||||
if (filters.areaMin && filters.areaMax) {
|
||||
parts.push(`${filters.areaMin} - ${filters.areaMax} m²`);
|
||||
} else if (filters.areaMin) {
|
||||
parts.push(`Từ ${filters.areaMin} m²`);
|
||||
} else if (filters.areaMax) {
|
||||
parts.push(`Đến ${filters.areaMax} m²`);
|
||||
}
|
||||
}
|
||||
if (filters.bedrooms) parts.push(`${filters.bedrooms}+ phòng ngủ`);
|
||||
|
||||
return parts;
|
||||
}
|
||||
|
||||
function SavedSearchCard({
|
||||
search,
|
||||
onDelete,
|
||||
onToggleAlert,
|
||||
onApplySearch,
|
||||
}: {
|
||||
search: SavedSearch;
|
||||
onDelete: (id: string) => void;
|
||||
onToggleAlert: (id: string, enabled: boolean) => void;
|
||||
onApplySearch: (filters: SavedSearchFilters) => void;
|
||||
}) {
|
||||
const [confirmDelete, setConfirmDelete] = React.useState(false);
|
||||
const filterTags = formatFilters(search.filters);
|
||||
|
||||
return (
|
||||
<Card className="transition-shadow hover:shadow-md">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="truncate text-base">{search.name}</CardTitle>
|
||||
<CardDescription className="mt-1 text-xs">
|
||||
Tạo lúc {new Date(search.createdAt).toLocaleDateString('vi-VN')}
|
||||
{search.lastAlertAt && (
|
||||
<> · Thông báo gần nhất: {new Date(search.lastAlertAt).toLocaleDateString('vi-VN')}</>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="ml-2 flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => onToggleAlert(search.id, !search.alertEnabled)}
|
||||
className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${
|
||||
search.alertEnabled
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
|
||||
}`}
|
||||
title={search.alertEnabled ? 'Tắt thông báo' : 'Bật thông báo'}
|
||||
>
|
||||
{search.alertEnabled ? 'Thông báo bật' : 'Thông báo tắt'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Filter tags */}
|
||||
{filterTags.length > 0 && (
|
||||
<div className="mb-3 flex flex-wrap gap-1.5">
|
||||
{filterTags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="rounded-md bg-accent px-2 py-0.5 text-xs text-accent-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
onClick={() => onApplySearch(search.filters)}
|
||||
>
|
||||
<svg className="mr-1.5 h-3.5 w-3.5" 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>
|
||||
|
||||
{confirmDelete ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
onDelete(search.id);
|
||||
setConfirmDelete(false);
|
||||
}}
|
||||
>
|
||||
Xác nhận xóa
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setConfirmDelete(false)}
|
||||
>
|
||||
Hủy
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
<svg className="mr-1 h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Xóa
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SavedSearchesPage() {
|
||||
const router = useRouter();
|
||||
const { data, isLoading, error } = useSavedSearches();
|
||||
const deleteMutation = useDeleteSavedSearch();
|
||||
const updateMutation = useUpdateSavedSearch();
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteMutation.mutate(id);
|
||||
};
|
||||
|
||||
const handleToggleAlert = (id: string, enabled: boolean) => {
|
||||
updateMutation.mutate({ id, data: { alertEnabled: enabled } });
|
||||
};
|
||||
|
||||
const handleApplySearch = (filters: SavedSearchFilters) => {
|
||||
const params = new URLSearchParams();
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
if (value) params.set(key, String(value));
|
||||
});
|
||||
const qs = params.toString();
|
||||
router.push(`/search${qs ? `?${qs}` : ''}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold md:text-3xl">Tìm kiếm đã lưu</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Quản lý các bộ lọc tìm kiếm và nhận thông báo khi có kết quả mới
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => router.push('/search')}>
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Tìm kiếm mới
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{isLoading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<Card>
|
||||
<CardContent className="flex h-48 flex-col items-center justify-center gap-3">
|
||||
<p className="text-sm text-destructive">Không thể tải danh sách tìm kiếm đã lưu</p>
|
||||
<Button variant="outline" size="sm" onClick={() => window.location.reload()}>
|
||||
Thử lại
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : !data || data.data.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex h-64 flex-col items-center justify-center gap-4 text-center">
|
||||
<div className="rounded-full bg-muted p-4">
|
||||
<svg className="h-8 w-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Chưa có tìm kiếm nào được lưu</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Bạn có thể lưu bộ lọc tìm kiếm từ trang tìm kiếm để nhận thông báo khi có kết quả mới
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => router.push('/search')}>
|
||||
Đi đến trang tìm kiếm
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{data.total} tìm kiếm đã lưu
|
||||
</p>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{data.data.map((search) => (
|
||||
<SavedSearchCard
|
||||
key={search.id}
|
||||
search={search}
|
||||
onDelete={handleDelete}
|
||||
onToggleAlert={handleToggleAlert}
|
||||
onApplySearch={handleApplySearch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user