feat(web): add price range filter and list view to /du-an page

Add minPrice/maxPrice inputs to ProjectFilterBar and introduce a
list view mode alongside the existing grid/map toggle for project
browsing.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-16 17:40:30 +07:00
parent a6e53e3d06
commit f3a2a012c4
8 changed files with 340 additions and 7 deletions

View File

@@ -29,7 +29,7 @@ export function ProjectFilterBar({ filters, onFilterChange }: ProjectFilterBarPr
updateFilter('q', search.trim());
};
const hasFilters = filters.city || filters.district || filters.status || filters.propertyType || filters.q;
const hasFilters = filters.city || filters.district || filters.status || filters.propertyType || filters.minPrice || filters.maxPrice || filters.q;
const clearAll = () => {
setSearch('');
@@ -104,6 +104,34 @@ export function ProjectFilterBar({ filters, onFilterChange }: ProjectFilterBarPr
aria-label="Quận/Huyện"
/>
<Input
type="number"
placeholder="Giá từ (tỷ)"
value={filters.minPrice ? String(Number(filters.minPrice) / 1_000_000_000) : ''}
onChange={(e) => {
const val = e.target.value;
updateFilter('minPrice', val ? String(Number(val) * 1_000_000_000) : '');
}}
className="w-28"
aria-label="Giá tối thiểu"
min={0}
step={0.1}
/>
<Input
type="number"
placeholder="Giá đến (tỷ)"
value={filters.maxPrice ? String(Number(filters.maxPrice) / 1_000_000_000) : ''}
onChange={(e) => {
const val = e.target.value;
updateFilter('maxPrice', val ? String(Number(val) * 1_000_000_000) : '');
}}
className="w-28"
aria-label="Giá tối đa"
min={0}
step={0.1}
/>
<select
value={filters.sort || ''}
onChange={(e) => updateFilter('sort', e.target.value)}