Refactor: Implement app-wide DatePicker enhancements

This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 16:42:10 +00:00
parent b327cefd1c
commit f6a06ad2fa
7 changed files with 459 additions and 65 deletions

View File

@@ -10,6 +10,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
import { ChevronDown, Filter, X } from 'lucide-react';
import { Combobox } from '@/components/ui/combobox';
import { useCountries, useStatesProvinces, useManufacturers, useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker';
export interface SearchFilters {
// Park filters
@@ -19,6 +20,7 @@ export interface SearchFilters {
status?: string;
openingYearMin?: number;
openingYearMax?: number;
openingDateRange?: DateRange;
ratingMin?: number;
ratingMax?: number;
rideCountMin?: number;
@@ -33,11 +35,13 @@ export interface SearchFilters {
speedMin?: number;
speedMax?: number;
intensityLevel?: string;
rideDateRange?: DateRange;
// Company filters
companyType?: string;
foundedYearMin?: number;
foundedYearMax?: number;
companyDateRange?: DateRange;
headquarters?: string;
}
@@ -179,25 +183,37 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
<div className="space-y-4">
<div className="space-y-2">
<Label>Opening Year Range</Label>
<div className="grid grid-cols-2 gap-2">
<Input
type="number"
placeholder="From"
min="1800"
max={currentYear}
value={filters.openingYearMin || ''}
onChange={(e) => updateFilter('openingYearMin', e.target.value ? parseInt(e.target.value) : undefined)}
/>
<Input
type="number"
placeholder="To"
min="1800"
max={currentYear}
value={filters.openingYearMax || ''}
onChange={(e) => updateFilter('openingYearMax', e.target.value ? parseInt(e.target.value) : undefined)}
/>
</div>
<Label>Opening Date Range</Label>
<DateRangePicker
value={filters.openingDateRange}
onChange={(range) => updateFilter('openingDateRange', range)}
placeholder="Select opening date range"
disableFuture={true}
fromYear={1800}
presets={[
{
label: "Last 10 years",
range: {
from: new Date(new Date().getFullYear() - 10, 0, 1),
to: new Date(),
},
},
{
label: "Last 25 years",
range: {
from: new Date(new Date().getFullYear() - 25, 0, 1),
to: new Date(),
},
},
{
label: "Before 2000",
range: {
from: new Date(1800, 0, 1),
to: new Date(1999, 11, 31),
},
},
]}
/>
</div>
<div className="space-y-2">
@@ -301,6 +317,40 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
</div>
<div className="space-y-4">
<div className="space-y-2">
<Label>Opening Date Range</Label>
<DateRangePicker
value={filters.rideDateRange}
onChange={(range) => updateFilter('rideDateRange', range)}
placeholder="Select ride opening date range"
disableFuture={true}
fromYear={1800}
presets={[
{
label: "Recent (last 5 years)",
range: {
from: new Date(new Date().getFullYear() - 5, 0, 1),
to: new Date(),
},
},
{
label: "Modern era (2000+)",
range: {
from: new Date(2000, 0, 1),
to: new Date(),
},
},
{
label: "Classic era (before 2000)",
range: {
from: new Date(1800, 0, 1),
to: new Date(1999, 11, 31),
},
},
]}
/>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Height Range (meters)</Label>
@@ -382,25 +432,37 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
</div>
<div className="space-y-2">
<Label>Founded Year Range</Label>
<div className="grid grid-cols-2 gap-2">
<Input
type="number"
placeholder="From"
min="1800"
max={currentYear}
value={filters.foundedYearMin || ''}
onChange={(e) => updateFilter('foundedYearMin', e.target.value ? parseInt(e.target.value) : undefined)}
/>
<Input
type="number"
placeholder="To"
min="1800"
max={currentYear}
value={filters.foundedYearMax || ''}
onChange={(e) => updateFilter('foundedYearMax', e.target.value ? parseInt(e.target.value) : undefined)}
/>
</div>
<Label>Founded Date Range</Label>
<DateRangePicker
value={filters.companyDateRange}
onChange={(range) => updateFilter('companyDateRange', range)}
placeholder="Select founding date range"
disableFuture={true}
fromYear={1800}
presets={[
{
label: "Founded after 2000",
range: {
from: new Date(2000, 0, 1),
to: new Date(),
},
},
{
label: "Founded 1950-2000",
range: {
from: new Date(1950, 0, 1),
to: new Date(1999, 11, 31),
},
},
{
label: "Founded before 1950",
range: {
from: new Date(1800, 0, 1),
to: new Date(1949, 11, 31),
},
},
]}
/>
</div>
</div>
)}