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>
|
||||||
|
);
|
||||||
|
}
|
||||||
349
apps/web/components/listings/image-lightbox.tsx
Normal file
349
apps/web/components/listings/image-lightbox.tsx
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Image from 'next/image';
|
||||||
|
import * as React from 'react';
|
||||||
|
import type { PropertyMedia } from '@/lib/listings-api';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
// ─── Types ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface ImageLightboxProps {
|
||||||
|
images: PropertyMedia[];
|
||||||
|
initialIndex?: number;
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Swipe hook ─────────────────────────────────────────
|
||||||
|
|
||||||
|
function useSwipe(onSwipeLeft: () => void, onSwipeRight: () => void) {
|
||||||
|
const touchStart = React.useRef<{ x: number; y: number } | null>(null);
|
||||||
|
const touchEnd = React.useRef<{ x: number; y: number } | null>(null);
|
||||||
|
const minSwipeDistance = 50;
|
||||||
|
|
||||||
|
const onTouchStart = React.useCallback((e: React.TouchEvent) => {
|
||||||
|
const touch = e.targetTouches[0];
|
||||||
|
if (!touch) return;
|
||||||
|
touchEnd.current = null;
|
||||||
|
touchStart.current = { x: touch.clientX, y: touch.clientY };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onTouchMove = React.useCallback((e: React.TouchEvent) => {
|
||||||
|
const touch = e.targetTouches[0];
|
||||||
|
if (!touch) return;
|
||||||
|
touchEnd.current = { x: touch.clientX, y: touch.clientY };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onTouchEnd = React.useCallback(() => {
|
||||||
|
if (!touchStart.current || !touchEnd.current) return;
|
||||||
|
const distanceX = touchStart.current.x - touchEnd.current.x;
|
||||||
|
const distanceY = Math.abs(touchStart.current.y - touchEnd.current.y);
|
||||||
|
// Only consider horizontal swipes (ignore vertical scrolling)
|
||||||
|
if (Math.abs(distanceX) > minSwipeDistance && Math.abs(distanceX) > distanceY) {
|
||||||
|
if (distanceX > 0) {
|
||||||
|
onSwipeLeft();
|
||||||
|
} else {
|
||||||
|
onSwipeRight();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [onSwipeLeft, onSwipeRight]);
|
||||||
|
|
||||||
|
return { onTouchStart, onTouchMove, onTouchEnd };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Focus trap hook ────────────────────────────────────
|
||||||
|
|
||||||
|
function useFocusTrap(containerRef: React.RefObject<HTMLDivElement | null>, active: boolean) {
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!active) return;
|
||||||
|
const container = containerRef.current;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const previouslyFocused = document.activeElement as HTMLElement | null;
|
||||||
|
const focusableSelector =
|
||||||
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
||||||
|
|
||||||
|
// Focus the first focusable element
|
||||||
|
const firstFocusable = container.querySelector<HTMLElement>(focusableSelector);
|
||||||
|
firstFocusable?.focus();
|
||||||
|
|
||||||
|
function handleKeyDown(e: KeyboardEvent) {
|
||||||
|
if (e.key !== 'Tab' || !container) return;
|
||||||
|
|
||||||
|
const focusableElements = container.querySelectorAll<HTMLElement>(focusableSelector);
|
||||||
|
if (focusableElements.length === 0) return;
|
||||||
|
|
||||||
|
const first = focusableElements[0] as HTMLElement | undefined;
|
||||||
|
const last = focusableElements[focusableElements.length - 1] as HTMLElement | undefined;
|
||||||
|
if (!first || !last) return;
|
||||||
|
|
||||||
|
if (e.shiftKey) {
|
||||||
|
if (document.activeElement === first) {
|
||||||
|
e.preventDefault();
|
||||||
|
last.focus();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (document.activeElement === last) {
|
||||||
|
e.preventDefault();
|
||||||
|
first.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
previouslyFocused?.focus();
|
||||||
|
};
|
||||||
|
}, [containerRef, active]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Component ──────────────────────────────────────────
|
||||||
|
|
||||||
|
export function ImageLightbox({ images, initialIndex = 0, open, onClose }: ImageLightboxProps) {
|
||||||
|
const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
|
||||||
|
const [isImageLoaded, setIsImageLoaded] = React.useState(false);
|
||||||
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const thumbnailsRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Reset index when lightbox opens with a new initialIndex
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setCurrentIndex(initialIndex);
|
||||||
|
setIsImageLoaded(false);
|
||||||
|
}
|
||||||
|
}, [open, initialIndex]);
|
||||||
|
|
||||||
|
// Lock body scroll
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
};
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
// Focus trap
|
||||||
|
useFocusTrap(containerRef, open);
|
||||||
|
|
||||||
|
// Navigation handlers
|
||||||
|
const goToPrevious = React.useCallback(() => {
|
||||||
|
setCurrentIndex((i) => (i > 0 ? i - 1 : images.length - 1));
|
||||||
|
setIsImageLoaded(false);
|
||||||
|
}, [images.length]);
|
||||||
|
|
||||||
|
const goToNext = React.useCallback(() => {
|
||||||
|
setCurrentIndex((i) => (i < images.length - 1 ? i + 1 : 0));
|
||||||
|
setIsImageLoaded(false);
|
||||||
|
}, [images.length]);
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
|
||||||
|
function handleKeyDown(e: KeyboardEvent) {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'Escape':
|
||||||
|
onClose();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
goToPrevious();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
goToNext();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [open, onClose, goToPrevious, goToNext]);
|
||||||
|
|
||||||
|
// Swipe support
|
||||||
|
const swipeHandlers = useSwipe(goToNext, goToPrevious);
|
||||||
|
|
||||||
|
// Scroll active thumbnail into view
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!open || !thumbnailsRef.current) return;
|
||||||
|
const activeThumb = thumbnailsRef.current.children[currentIndex] as HTMLElement | undefined;
|
||||||
|
activeThumb?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
||||||
|
}, [currentIndex, open]);
|
||||||
|
|
||||||
|
// Preload adjacent images
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!open || images.length <= 1) return;
|
||||||
|
const preloadIndices = [
|
||||||
|
(currentIndex + 1) % images.length,
|
||||||
|
(currentIndex - 1 + images.length) % images.length,
|
||||||
|
];
|
||||||
|
preloadIndices.forEach((idx) => {
|
||||||
|
const imageToPreload = images[idx];
|
||||||
|
if (!imageToPreload) return;
|
||||||
|
const img = new window.Image();
|
||||||
|
img.src = imageToPreload.url;
|
||||||
|
});
|
||||||
|
}, [currentIndex, open, images]);
|
||||||
|
|
||||||
|
if (!open || images.length === 0) return null;
|
||||||
|
|
||||||
|
const currentImage = images[currentIndex];
|
||||||
|
if (!currentImage) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="fixed inset-0 z-50 flex flex-col bg-black/95"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="Xem ảnh toàn màn hình"
|
||||||
|
>
|
||||||
|
{/* Top bar */}
|
||||||
|
<div className="flex items-center justify-between px-4 py-3">
|
||||||
|
<p className="text-sm text-white/80">
|
||||||
|
{currentIndex + 1} / {images.length}
|
||||||
|
</p>
|
||||||
|
{currentImage.caption && (
|
||||||
|
<p className="mx-4 flex-1 truncate text-center text-sm text-white/70">
|
||||||
|
{currentImage.caption}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="rounded-full p-2 text-white/80 transition-colors hover:bg-white/10 hover:text-white"
|
||||||
|
aria-label="Đóng (Escape)"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M18 6 6 18" />
|
||||||
|
<path d="m6 6 12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main image area */}
|
||||||
|
<div
|
||||||
|
className="relative flex flex-1 items-center justify-center px-12 md:px-20"
|
||||||
|
{...swipeHandlers}
|
||||||
|
>
|
||||||
|
{/* Loading spinner */}
|
||||||
|
{!isImageLoaded && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-white/80" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Image */}
|
||||||
|
<div className="relative h-full w-full">
|
||||||
|
<Image
|
||||||
|
key={currentImage.id}
|
||||||
|
src={currentImage.url}
|
||||||
|
alt={currentImage.caption || `Ảnh ${currentIndex + 1}`}
|
||||||
|
fill
|
||||||
|
sizes="100vw"
|
||||||
|
className={cn(
|
||||||
|
'object-contain transition-opacity duration-200',
|
||||||
|
isImageLoaded ? 'opacity-100' : 'opacity-0',
|
||||||
|
)}
|
||||||
|
priority
|
||||||
|
onLoad={() => setIsImageLoaded(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation arrows */}
|
||||||
|
{images.length > 1 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={goToPrevious}
|
||||||
|
className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/25 md:left-4"
|
||||||
|
aria-label="Ảnh trước (phím mũi tên trái)"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="m15 18-6-6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={goToNext}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/25 md:right-4"
|
||||||
|
aria-label="Ảnh tiếp (phím mũi tên phải)"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="m9 18 6-6-6-6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Thumbnail strip */}
|
||||||
|
{images.length > 1 && (
|
||||||
|
<div className="border-t border-white/10 px-4 py-3">
|
||||||
|
<div
|
||||||
|
ref={thumbnailsRef}
|
||||||
|
className="flex justify-center gap-2 overflow-x-auto"
|
||||||
|
role="tablist"
|
||||||
|
aria-label="Danh sách ảnh thu nhỏ"
|
||||||
|
>
|
||||||
|
{images.map((img, index) => (
|
||||||
|
<button
|
||||||
|
key={img.id}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={index === currentIndex}
|
||||||
|
aria-label={img.caption || `Ảnh ${index + 1}`}
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentIndex(index);
|
||||||
|
setIsImageLoaded(false);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'relative h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border-2 transition-all md:h-16 md:w-16',
|
||||||
|
index === currentIndex
|
||||||
|
? 'border-white ring-1 ring-white/50'
|
||||||
|
: 'border-transparent opacity-50 hover:opacity-80',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={img.url}
|
||||||
|
alt={img.caption || `Thumbnail ${index + 1}`}
|
||||||
|
fill
|
||||||
|
sizes="64px"
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
apps/web/components/providers/web-vitals.tsx
Normal file
42
apps/web/components/providers/web-vitals.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Client component that initialises Core Web Vitals reporting.
|
||||||
|
*
|
||||||
|
* Tracks: LCP, FCP, CLS, TTFB, INP (the five web-vitals v5 metrics).
|
||||||
|
* FID was deprecated — INP is the modern responsiveness metric;
|
||||||
|
* FCP (First Contentful Paint) replaces FID in the library.
|
||||||
|
*
|
||||||
|
* Metrics are batched and sent to the backend `/web-vitals` endpoint via
|
||||||
|
* `navigator.sendBeacon` for reliability during page transitions.
|
||||||
|
*/
|
||||||
|
export function WebVitals() {
|
||||||
|
useEffect(() => {
|
||||||
|
// Dynamic import so the library is only loaded in the browser
|
||||||
|
import('web-vitals').then(({ onLCP, onFCP, onCLS, onTTFB, onINP }) => {
|
||||||
|
import('@/lib/web-vitals').then(({ reportWebVital, flushWebVitals }) => {
|
||||||
|
onLCP(reportWebVital);
|
||||||
|
onFCP(reportWebVital);
|
||||||
|
onCLS(reportWebVital);
|
||||||
|
onTTFB(reportWebVital);
|
||||||
|
onINP(reportWebVital);
|
||||||
|
|
||||||
|
// Flush remaining metrics when the page is hidden (tab switch, close, navigate)
|
||||||
|
const handleVisibilityChange = () => {
|
||||||
|
if (document.visibilityState === 'hidden') {
|
||||||
|
flushWebVitals();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
57
apps/web/lib/hooks/use-saved-searches.ts
Normal file
57
apps/web/lib/hooks/use-saved-searches.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { savedSearchApi, type CreateSavedSearchPayload, type UpdateSavedSearchPayload } from '@/lib/saved-search-api';
|
||||||
|
|
||||||
|
export const savedSearchKeys = {
|
||||||
|
all: ['savedSearches'] as const,
|
||||||
|
list: (params?: { page?: number; limit?: number }) => ['savedSearches', 'list', params] as const,
|
||||||
|
detail: (id: string) => ['savedSearches', 'detail', id] as const,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useSavedSearches(params?: { page?: number; limit?: number }) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: savedSearchKeys.list(params),
|
||||||
|
queryFn: () => savedSearchApi.list(params),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSavedSearchDetail(id: string) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: savedSearchKeys.detail(id),
|
||||||
|
queryFn: () => savedSearchApi.getById(id),
|
||||||
|
enabled: !!id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCreateSavedSearch() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (data: CreateSavedSearchPayload) => savedSearchApi.create(data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: savedSearchKeys.all });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateSavedSearch() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, data }: { id: string; data: UpdateSavedSearchPayload }) =>
|
||||||
|
savedSearchApi.update(id, data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: savedSearchKeys.all });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteSavedSearch() {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (id: string) => savedSearchApi.delete(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: savedSearchKeys.all });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
53
apps/web/lib/image-blur.ts
Normal file
53
apps/web/lib/image-blur.ts
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
* Tiny SVG-based blur placeholder for next/image.
|
||||||
|
*
|
||||||
|
* Generates a small, inline base64-encoded SVG that next/image displays while
|
||||||
|
* the real image loads. This eliminates layout shift (CLS) and provides a smooth
|
||||||
|
* visual transition without needing to pre-compute per-image blur hashes.
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* <Image placeholder="blur" blurDataURL={shimmerBlurDataURL()} ... />
|
||||||
|
*/
|
||||||
|
|
||||||
|
const SHIMMER_SVG = `
|
||||||
|
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#e5e7eb"/>
|
||||||
|
<stop offset="50%" stop-color="#f3f4f6"/>
|
||||||
|
<stop offset="100%" stop-color="#e5e7eb"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="400" height="300" fill="#e5e7eb"/>
|
||||||
|
<rect width="400" height="300" fill="url(#g)">
|
||||||
|
<animate attributeName="x" from="-400" to="400" dur="1.5s" repeatCount="indefinite"/>
|
||||||
|
</rect>
|
||||||
|
</svg>`.trim();
|
||||||
|
|
||||||
|
const STATIC_BLUR_SVG = `
|
||||||
|
<svg width="8" height="6" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="8" height="6" fill="#d1d5db"/>
|
||||||
|
</svg>`.trim();
|
||||||
|
|
||||||
|
function toBase64(str: string): string {
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return Buffer.from(str).toString('base64');
|
||||||
|
}
|
||||||
|
return btoa(str);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animated shimmer blur placeholder (for listing thumbnails).
|
||||||
|
* Shows a shimmer animation while the image loads.
|
||||||
|
*/
|
||||||
|
export function shimmerBlurDataURL(): string {
|
||||||
|
return `data:image/svg+xml;base64,${toBase64(SHIMMER_SVG)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Static grey blur placeholder (for small thumbnails like table rows).
|
||||||
|
* Lightweight, no animation.
|
||||||
|
*/
|
||||||
|
export function staticBlurDataURL(): string {
|
||||||
|
return `data:image/svg+xml;base64,${toBase64(STATIC_BLUR_SVG)}`;
|
||||||
|
}
|
||||||
66
apps/web/lib/saved-search-api.ts
Normal file
66
apps/web/lib/saved-search-api.ts
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import { apiClient } from './api-client';
|
||||||
|
|
||||||
|
// ─── Interfaces ──────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface SavedSearchFilters {
|
||||||
|
transactionType?: string;
|
||||||
|
propertyType?: string;
|
||||||
|
city?: string;
|
||||||
|
district?: string;
|
||||||
|
priceMin?: string;
|
||||||
|
priceMax?: string;
|
||||||
|
areaMin?: string;
|
||||||
|
areaMax?: string;
|
||||||
|
bedrooms?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SavedSearch {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
filters: SavedSearchFilters;
|
||||||
|
alertEnabled: boolean;
|
||||||
|
lastAlertAt: string | null;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SavedSearchListResult {
|
||||||
|
data: SavedSearch[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateSavedSearchPayload {
|
||||||
|
name: string;
|
||||||
|
filters: SavedSearchFilters;
|
||||||
|
alertEnabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateSavedSearchPayload {
|
||||||
|
name?: string;
|
||||||
|
filters?: SavedSearchFilters;
|
||||||
|
alertEnabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── API Functions ───────────────────────────────────────
|
||||||
|
|
||||||
|
export const savedSearchApi = {
|
||||||
|
list: (params: { page?: number; limit?: number } = {}) => {
|
||||||
|
const query = new URLSearchParams();
|
||||||
|
if (params.page) query.append('page', String(params.page));
|
||||||
|
if (params.limit) query.append('limit', String(params.limit));
|
||||||
|
const qs = query.toString();
|
||||||
|
return apiClient.get<SavedSearchListResult>(`/saved-searches${qs ? `?${qs}` : ''}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
getById: (id: string) => apiClient.get<SavedSearch>(`/saved-searches/${id}`),
|
||||||
|
|
||||||
|
create: (data: CreateSavedSearchPayload) =>
|
||||||
|
apiClient.post<SavedSearch>('/saved-searches', data),
|
||||||
|
|
||||||
|
update: (id: string, data: UpdateSavedSearchPayload) =>
|
||||||
|
apiClient.patch<SavedSearch>(`/saved-searches/${id}`, data),
|
||||||
|
|
||||||
|
delete: (id: string) =>
|
||||||
|
apiClient.delete<{ deleted: boolean }>(`/saved-searches/${id}`),
|
||||||
|
};
|
||||||
119
apps/web/lib/web-vitals.ts
Normal file
119
apps/web/lib/web-vitals.ts
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
import type { Metric } from 'web-vitals';
|
||||||
|
|
||||||
|
const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001/api/v1';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Baseline targets for Core Web Vitals:
|
||||||
|
* LCP < 2.5s (good), < 4.0s (needs improvement)
|
||||||
|
* FCP < 1.8s (good), < 3.0s (needs improvement)
|
||||||
|
* CLS < 0.1 (good), < 0.25 (needs improvement)
|
||||||
|
* TTFB < 800ms (good)
|
||||||
|
* INP < 200ms (good), < 500ms (needs improvement)
|
||||||
|
*/
|
||||||
|
export const WEB_VITALS_THRESHOLDS = {
|
||||||
|
LCP: { good: 2500, poor: 4000 },
|
||||||
|
FCP: { good: 1800, poor: 3000 },
|
||||||
|
CLS: { good: 0.1, poor: 0.25 },
|
||||||
|
TTFB: { good: 800, poor: 1800 },
|
||||||
|
INP: { good: 200, poor: 500 },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
type VitalName = keyof typeof WEB_VITALS_THRESHOLDS;
|
||||||
|
|
||||||
|
function getRating(name: string, value: number): 'good' | 'needs-improvement' | 'poor' {
|
||||||
|
const thresholds = WEB_VITALS_THRESHOLDS[name as VitalName];
|
||||||
|
if (!thresholds) return 'good';
|
||||||
|
if (value <= thresholds.good) return 'good';
|
||||||
|
if (value <= thresholds.poor) return 'needs-improvement';
|
||||||
|
return 'poor';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WebVitalPayload {
|
||||||
|
name: string;
|
||||||
|
value: number;
|
||||||
|
rating: string;
|
||||||
|
delta: number;
|
||||||
|
id: string;
|
||||||
|
navigationType: string;
|
||||||
|
url: string;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Queue metrics and flush in batches to avoid per-metric requests. */
|
||||||
|
const queue: WebVitalPayload[] = [];
|
||||||
|
let flushTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
const FLUSH_INTERVAL_MS = 5000;
|
||||||
|
const MAX_BATCH_SIZE = 10;
|
||||||
|
|
||||||
|
function flushQueue(): void {
|
||||||
|
if (queue.length === 0) return;
|
||||||
|
|
||||||
|
const batch = queue.splice(0, MAX_BATCH_SIZE);
|
||||||
|
const body = JSON.stringify({ metrics: batch });
|
||||||
|
|
||||||
|
// Use sendBeacon for reliability during page unload; fall back to fetch
|
||||||
|
if (typeof navigator !== 'undefined' && navigator.sendBeacon) {
|
||||||
|
const blob = new Blob([body], { type: 'application/json' });
|
||||||
|
const sent = navigator.sendBeacon(`${API_BASE_URL}/web-vitals`, blob);
|
||||||
|
if (!sent) {
|
||||||
|
sendViaFetch(body);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
sendViaFetch(body);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendViaFetch(body: string): void {
|
||||||
|
fetch(`${API_BASE_URL}/web-vitals`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body,
|
||||||
|
keepalive: true,
|
||||||
|
}).catch(() => {
|
||||||
|
// Silently drop — metrics are best-effort
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function enqueue(payload: WebVitalPayload): void {
|
||||||
|
queue.push(payload);
|
||||||
|
|
||||||
|
if (queue.length >= MAX_BATCH_SIZE) {
|
||||||
|
if (flushTimer) clearTimeout(flushTimer);
|
||||||
|
flushTimer = null;
|
||||||
|
flushQueue();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!flushTimer) {
|
||||||
|
flushTimer = setTimeout(() => {
|
||||||
|
flushTimer = null;
|
||||||
|
flushQueue();
|
||||||
|
}, FLUSH_INTERVAL_MS);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Report a single web-vitals Metric to the backend. */
|
||||||
|
export function reportWebVital(metric: Metric): void {
|
||||||
|
const payload: WebVitalPayload = {
|
||||||
|
name: metric.name,
|
||||||
|
value: metric.value,
|
||||||
|
rating: metric.rating ?? getRating(metric.name, metric.value),
|
||||||
|
delta: metric.delta,
|
||||||
|
id: metric.id,
|
||||||
|
navigationType: metric.navigationType ?? 'unknown',
|
||||||
|
url: typeof location !== 'undefined' ? location.pathname : '',
|
||||||
|
timestamp: Date.now(),
|
||||||
|
};
|
||||||
|
|
||||||
|
enqueue(payload);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Flush any remaining metrics (call on page hide / unload). */
|
||||||
|
export function flushWebVitals(): void {
|
||||||
|
if (flushTimer) {
|
||||||
|
clearTimeout(flushTimer);
|
||||||
|
flushTimer = null;
|
||||||
|
}
|
||||||
|
flushQueue();
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user