diff --git a/src/components/parks/ParkFilters.tsx b/src/components/parks/ParkFilters.tsx index 3323e5a4..c87f6b09 100644 --- a/src/components/parks/ParkFilters.tsx +++ b/src/components/parks/ParkFilters.tsx @@ -82,16 +82,14 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp return (propertyOwners || []).map(p => ({ label: p.name, value: p.id })); }, [propertyOwners]); - const parkTypes = [ - { value: 'all', label: 'All Types' }, - { value: 'theme_park', label: 'Theme Parks' }, - { value: 'amusement_park', label: 'Amusement Parks' }, - { value: 'water_park', label: 'Water Parks' }, + const parkTypes: MultiSelectOption[] = [ + { value: 'theme_park', label: 'Theme Park' }, + { value: 'amusement_park', label: 'Amusement Park' }, + { value: 'water_park', label: 'Water Park' }, { value: 'family_entertainment', label: 'Family Entertainment' } ]; - const statusOptions = [ - { value: 'all', label: 'All Status' }, + const statusOptions: MultiSelectOption[] = [ { value: 'operating', label: 'Operating' }, { value: 'seasonal', label: 'Seasonal' }, { value: 'under_construction', label: 'Under Construction' }, @@ -113,9 +111,9 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp const resetFilters = () => { onFiltersChange({ search: '', - parkType: 'all', - status: 'all', - country: 'all', + parkType: [], + status: [], + country: [], states: [], cities: [], operators: [], @@ -145,66 +143,29 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
- {/* Park Type */} -
- - -
+ onFiltersChange({ ...filters, parkType: value })} + placeholder="Select park types" + /> - {/* Status */} -
- - -
+ onFiltersChange({ ...filters, status: value })} + placeholder="Select status" + /> - {/* Country */} -
- - -
+ onFiltersChange({ ...filters, country: value })} + placeholder="Select countries" + /> 0 && !filters.parkType.includes(park.park_type)) return false; + if (filters.status.length > 0 && !filters.status.includes(park.status)) return false; + if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) return false; const rating = park.average_rating || 0; if (rating < filters.minRating || rating > filters.maxRating) return false; diff --git a/src/pages/OwnerParks.tsx b/src/pages/OwnerParks.tsx index c2fc4fbe..2b981465 100644 --- a/src/pages/OwnerParks.tsx +++ b/src/pages/OwnerParks.tsx @@ -18,9 +18,9 @@ import { FilterState, SortState } from './Parks'; const initialFilters: FilterState = { search: '', - parkType: 'all', - status: 'all', - country: 'all', + parkType: [], + status: [], + country: [], minRating: 0, maxRating: 5, minRides: 0, @@ -98,9 +98,9 @@ export default function OwnerParks() { park.location?.country?.toLowerCase().includes(searchTerm); if (!matchesSearch) return false; } - if (filters.parkType !== 'all' && park.park_type !== filters.parkType) return false; - if (filters.status !== 'all' && park.status !== filters.status) return false; - if (filters.country !== 'all' && park.location?.country !== filters.country) return false; + if (filters.parkType.length > 0 && !filters.parkType.includes(park.park_type)) return false; + if (filters.status.length > 0 && !filters.status.includes(park.status)) return false; + if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) return false; const rating = park.average_rating || 0; if (rating < filters.minRating || rating > filters.maxRating) return false; diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx index 409c83df..82dab882 100644 --- a/src/pages/Parks.tsx +++ b/src/pages/Parks.tsx @@ -39,9 +39,9 @@ import { useAuthModal } from '@/hooks/useAuthModal'; export interface FilterState { search: string; - parkType: string; - status: string; - country: string; + parkType: string[]; + status: string[]; + country: string[]; states?: string[]; cities?: string[]; operators?: string[]; @@ -65,9 +65,9 @@ export interface SortState { const initialFilters: FilterState = { search: '', - parkType: 'all', - status: 'all', - country: 'all', + parkType: [], + status: [], + country: [], states: [], cities: [], operators: [], @@ -158,17 +158,17 @@ export default function Parks() { } // Park type filter - if (filters.parkType !== 'all' && park.park_type !== filters.parkType) { + if (filters.parkType.length > 0 && !filters.parkType.includes(park.park_type)) { return false; } // Status filter - if (filters.status !== 'all' && park.status !== filters.status) { + if (filters.status.length > 0 && !filters.status.includes(park.status)) { return false; } // Country filter - if (filters.country !== 'all' && park.location?.country !== filters.country) { + if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) { return false; } @@ -291,9 +291,9 @@ export default function Parks() { const activeFilterCount = useMemo(() => { let count = 0; if (filters.search) count++; - if (filters.parkType !== 'all') count++; - if (filters.status !== 'all') count++; - if (filters.country !== 'all') count++; + if (filters.parkType.length > 0) count++; + if (filters.status.length > 0) count++; + if (filters.country.length > 0) count++; if (filters.minRating > 0 || filters.maxRating < 5) count++; if (filters.minRides > 0 || filters.maxRides < 1000) count++; if (filters.openingYearStart || filters.openingYearEnd) count++;