feat: Implement comprehensive entity filtering

src/components/designers/DesignerFilters.tsx

@@ -0,0 +1,194 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
+import { Company } from '@/types/database';
+
+export interface DesignerFilterState {
+  personType: string;
+  countries: string[];
+  minRating: number;
+  maxRating: number;
+  minReviewCount: number;
+  maxReviewCount: number;
+  foundedDateFrom: Date | null;
+  foundedDateTo: Date | null;
+  hasRating: boolean;
+  hasFoundedDate: boolean;
+  isIndividual: boolean;
+}
+
+export const defaultDesignerFilters: DesignerFilterState = {
+  personType: 'all',
+  countries: [],
+  minRating: 0,
+  maxRating: 5,
+  minReviewCount: 0,
+  maxReviewCount: 1000,
+  foundedDateFrom: null,
+  foundedDateTo: null,
+  hasRating: false,
+  hasFoundedDate: false,
+  isIndividual: false,
+};
+
+interface DesignerFiltersProps {
+  filters: DesignerFilterState;
+  onFiltersChange: (filters: DesignerFilterState) => void;
+  designers: Company[];
+}
+
+export function DesignerFilters({ filters, onFiltersChange, designers }: DesignerFiltersProps) {
+  const { data: locations } = useQuery({
+    queryKey: ['filter-locations'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('locations')
+        .select('country')
+        .not('country', 'is', null);
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const countryOptions: MultiSelectOption[] = useMemo(() => {
+    const countries = new Set(locations?.map(l => l.country).filter(Boolean) || []);
+    return Array.from(countries).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const maxReviewCount = useMemo(() => {
+    return Math.max(...designers.map(d => d.review_count || 0), 1000);
+  }, [designers]);
+
+  const resetFilters = () => {
+    onFiltersChange({ ...defaultDesignerFilters, maxReviewCount });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Designers</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      <FilterSection>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label>Entity Type</Label>
+            <Select
+              value={filters.personType}
+              onValueChange={(value) => onFiltersChange({ ...filters, personType: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="company">Companies</SelectItem>
+                <SelectItem value="individual">Individuals</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <FilterMultiSelectCombobox
+            label="Headquarters Country"
+            options={countryOptions}
+            value={filters.countries}
+            onChange={(value) => onFiltersChange({ ...filters, countries: value })}
+            placeholder="Select countries"
+          />
+
+          <FilterDateRangePicker
+            label="Founded Date"
+            fromDate={filters.foundedDateFrom}
+            toDate={filters.foundedDateTo}
+            onFromChange={(date) => onFiltersChange({ ...filters, foundedDateFrom: date || null })}
+            onToChange={(date) => onFiltersChange({ ...filters, foundedDateTo: date || null })}
+            fromPlaceholder="From year"
+            toPlaceholder="To year"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FilterRangeSlider
+            label="Rating"
+            value={[filters.minRating, filters.maxRating]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minRating: min, maxRating: max })}
+            min={0}
+            max={5}
+            step={0.1}
+            formatValue={(v) => `${v.toFixed(1)} stars`}
+          />
+          <FilterRangeSlider
+            label="Review Count"
+            value={[filters.minReviewCount, filters.maxReviewCount]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minReviewCount: min, maxReviewCount: max })}
+            min={0}
+            max={maxReviewCount}
+            step={10}
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Other Options">
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasRating"
+              checked={filters.hasRating}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasRating: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasRating" className="cursor-pointer">
+              Has rating
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasFoundedDate"
+              checked={filters.hasFoundedDate}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasFoundedDate: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasFoundedDate" className="cursor-pointer">
+              Has founded date
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="isIndividual"
+              checked={filters.isIndividual}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, isIndividual: checked as boolean })
+              }
+            />
+            <Label htmlFor="isIndividual" className="cursor-pointer">
+              Individual designers only
+            </Label>
+          </div>
+        </div>
+      </FilterSection>
+    </div>
+  );
+}

src/components/filters/FilterDateRangePicker.tsx

@@ -0,0 +1,48 @@
+import { Label } from '@/components/ui/label';
+import { MonthYearPicker } from '@/components/ui/month-year-picker';
+
+interface FilterDateRangePickerProps {
+  label: string;
+  fromDate: Date | null;
+  toDate: Date | null;
+  onFromChange: (date: Date | undefined) => void;
+  onToChange: (date: Date | undefined) => void;
+  fromYear?: number;
+  toYear?: number;
+  fromPlaceholder?: string;
+  toPlaceholder?: string;
+}
+
+export function FilterDateRangePicker({
+  label,
+  fromDate,
+  toDate,
+  onFromChange,
+  onToChange,
+  fromYear = 1900,
+  toYear = new Date().getFullYear(),
+  fromPlaceholder = 'From',
+  toPlaceholder = 'To'
+}: FilterDateRangePickerProps) {
+  return (
+    <div className="space-y-2">
+      <Label>{label}</Label>
+      <div className="flex gap-2">
+        <MonthYearPicker
+          date={fromDate || undefined}
+          onSelect={onFromChange}
+          placeholder={fromPlaceholder}
+          fromYear={fromYear}
+          toYear={toYear}
+        />
+        <MonthYearPicker
+          date={toDate || undefined}
+          onSelect={onToChange}
+          placeholder={toPlaceholder}
+          fromYear={fromYear}
+          toYear={toYear}
+        />
+      </div>
+    </div>
+  );
+}

src/components/filters/FilterMultiSelectCombobox.tsx

@@ -0,0 +1,36 @@
+import { Label } from '@/components/ui/label';
+import { MultiSelectCombobox, MultiSelectOption } from '@/components/ui/multi-select-combobox';
+
+interface FilterMultiSelectComboboxProps {
+  label: string;
+  options: MultiSelectOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  emptyText?: string;
+  maxDisplay?: number;
+}
+
+export function FilterMultiSelectCombobox({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = 'Select...',
+  emptyText = 'No options found',
+  maxDisplay = 2
+}: FilterMultiSelectComboboxProps) {
+  return (
+    <div className="space-y-2">
+      <Label>{label}</Label>
+      <MultiSelectCombobox
+        options={options}
+        value={value}
+        onValueChange={onChange}
+        placeholder={placeholder}
+        emptyText={emptyText}
+        maxDisplay={maxDisplay}
+      />
+    </div>
+  );
+}

src/components/filters/FilterRangeSlider.tsx

@@ -0,0 +1,52 @@
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Badge } from '@/components/ui/badge';
+
+interface FilterRangeSliderProps {
+  label: string;
+  value: [number, number];
+  onChange: (value: [number, number]) => void;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  formatValue?: (value: number) => string;
+}
+
+export function FilterRangeSlider({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  unit = '',
+  formatValue
+}: FilterRangeSliderProps) {
+  const format = formatValue || ((v: number) => `${v}${unit}`);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Label>{label}</Label>
+        <Badge variant="outline">
+          {format(value[0])} - {format(value[1])}
+        </Badge>
+      </div>
+      <div className="px-2">
+        <Slider
+          value={value}
+          onValueChange={onChange}
+          min={min}
+          max={max}
+          step={step}
+          className="w-full"
+        />
+        <div className="flex justify-between text-xs text-muted-foreground mt-1">
+          <span>{format(min)}</span>
+          <span>{format(max)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/filters/FilterSection.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Separator } from '@/components/ui/separator';
+
+interface FilterSectionProps {
+  title?: string;
+  children: ReactNode;
+  showSeparator?: boolean;
+}
+
+export function FilterSection({ title, children, showSeparator = false }: FilterSectionProps) {
+  return (
+    <div className="space-y-4">
+      {title && <h4 className="text-sm font-semibold text-muted-foreground">{title}</h4>}
+      {children}
+      {showSeparator && <Separator className="my-6" />}
+    </div>
+  );
+}

src/components/manufacturers/ManufacturerFilters.tsx

@@ -0,0 +1,194 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
+import { Company } from '@/types/database';
+
+export interface ManufacturerFilterState {
+  personType: string;
+  countries: string[];
+  minRating: number;
+  maxRating: number;
+  minReviewCount: number;
+  maxReviewCount: number;
+  foundedDateFrom: Date | null;
+  foundedDateTo: Date | null;
+  hasRating: boolean;
+  hasFoundedDate: boolean;
+  isIndividual: boolean;
+}
+
+export const defaultManufacturerFilters: ManufacturerFilterState = {
+  personType: 'all',
+  countries: [],
+  minRating: 0,
+  maxRating: 5,
+  minReviewCount: 0,
+  maxReviewCount: 1000,
+  foundedDateFrom: null,
+  foundedDateTo: null,
+  hasRating: false,
+  hasFoundedDate: false,
+  isIndividual: false,
+};
+
+interface ManufacturerFiltersProps {
+  filters: ManufacturerFilterState;
+  onFiltersChange: (filters: ManufacturerFilterState) => void;
+  manufacturers: Company[];
+}
+
+export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }: ManufacturerFiltersProps) {
+  const { data: locations } = useQuery({
+    queryKey: ['filter-locations'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('locations')
+        .select('country')
+        .not('country', 'is', null);
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const countryOptions: MultiSelectOption[] = useMemo(() => {
+    const countries = new Set(locations?.map(l => l.country).filter(Boolean) || []);
+    return Array.from(countries).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const maxReviewCount = useMemo(() => {
+    return Math.max(...manufacturers.map(m => m.review_count || 0), 1000);
+  }, [manufacturers]);
+
+  const resetFilters = () => {
+    onFiltersChange({ ...defaultManufacturerFilters, maxReviewCount });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Manufacturers</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      <FilterSection>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label>Entity Type</Label>
+            <Select
+              value={filters.personType}
+              onValueChange={(value) => onFiltersChange({ ...filters, personType: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="company">Companies</SelectItem>
+                <SelectItem value="individual">Individuals</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <FilterMultiSelectCombobox
+            label="Headquarters Country"
+            options={countryOptions}
+            value={filters.countries}
+            onChange={(value) => onFiltersChange({ ...filters, countries: value })}
+            placeholder="Select countries"
+          />
+
+          <FilterDateRangePicker
+            label="Founded Date"
+            fromDate={filters.foundedDateFrom}
+            toDate={filters.foundedDateTo}
+            onFromChange={(date) => onFiltersChange({ ...filters, foundedDateFrom: date || null })}
+            onToChange={(date) => onFiltersChange({ ...filters, foundedDateTo: date || null })}
+            fromPlaceholder="From year"
+            toPlaceholder="To year"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FilterRangeSlider
+            label="Rating"
+            value={[filters.minRating, filters.maxRating]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minRating: min, maxRating: max })}
+            min={0}
+            max={5}
+            step={0.1}
+            formatValue={(v) => `${v.toFixed(1)} stars`}
+          />
+          <FilterRangeSlider
+            label="Review Count"
+            value={[filters.minReviewCount, filters.maxReviewCount]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minReviewCount: min, maxReviewCount: max })}
+            min={0}
+            max={maxReviewCount}
+            step={10}
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Other Options">
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasRating"
+              checked={filters.hasRating}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasRating: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasRating" className="cursor-pointer">
+              Has rating
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasFoundedDate"
+              checked={filters.hasFoundedDate}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasFoundedDate: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasFoundedDate" className="cursor-pointer">
+              Has founded date
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="isIndividual"
+              checked={filters.isIndividual}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, isIndividual: checked as boolean })
+              }
+            />
+            <Label htmlFor="isIndividual" className="cursor-pointer">
+              Individual designers only
+            </Label>
+          </div>
+        </div>
+      </FilterSection>
+    </div>
+  );
+}

src/components/operators/OperatorFilters.tsx

@@ -0,0 +1,175 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
+import { Company } from '@/types/database';
+
+export interface OperatorFilterState {
+  countries: string[];
+  minRating: number;
+  maxRating: number;
+  minReviewCount: number;
+  maxReviewCount: number;
+  minParkCount: number;
+  maxParkCount: number;
+  foundedDateFrom: Date | null;
+  foundedDateTo: Date | null;
+  hasRating: boolean;
+  hasFoundedDate: boolean;
+}
+
+export const defaultOperatorFilters: OperatorFilterState = {
+  countries: [],
+  minRating: 0,
+  maxRating: 5,
+  minReviewCount: 0,
+  maxReviewCount: 1000,
+  minParkCount: 0,
+  maxParkCount: 100,
+  foundedDateFrom: null,
+  foundedDateTo: null,
+  hasRating: false,
+  hasFoundedDate: false,
+};
+
+interface OperatorFiltersProps {
+  filters: OperatorFilterState;
+  onFiltersChange: (filters: OperatorFilterState) => void;
+  operators: (Company & { park_count?: number })[];
+}
+
+export function OperatorFilters({ filters, onFiltersChange, operators }: OperatorFiltersProps) {
+  const { data: locations } = useQuery({
+    queryKey: ['filter-locations'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('locations')
+        .select('country')
+        .not('country', 'is', null);
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const countryOptions: MultiSelectOption[] = useMemo(() => {
+    const countries = new Set(locations?.map(l => l.country).filter(Boolean) || []);
+    return Array.from(countries).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const maxParkCount = useMemo(() => {
+    return Math.max(...operators.map(o => o.park_count || 0), 100);
+  }, [operators]);
+
+  const maxReviewCount = useMemo(() => {
+    return Math.max(...operators.map(o => o.review_count || 0), 1000);
+  }, [operators]);
+
+  const resetFilters = () => {
+    onFiltersChange({ ...defaultOperatorFilters, maxParkCount, maxReviewCount });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Operators</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      <FilterSection>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FilterMultiSelectCombobox
+            label="Headquarters Country"
+            options={countryOptions}
+            value={filters.countries}
+            onChange={(value) => onFiltersChange({ ...filters, countries: value })}
+            placeholder="Select countries"
+          />
+          <FilterDateRangePicker
+            label="Founded Date"
+            fromDate={filters.foundedDateFrom}
+            toDate={filters.foundedDateTo}
+            onFromChange={(date) => onFiltersChange({ ...filters, foundedDateFrom: date || null })}
+            onToChange={(date) => onFiltersChange({ ...filters, foundedDateTo: date || null })}
+            fromPlaceholder="From year"
+            toPlaceholder="To year"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FilterRangeSlider
+            label="Rating"
+            value={[filters.minRating, filters.maxRating]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minRating: min, maxRating: max })}
+            min={0}
+            max={5}
+            step={0.1}
+            formatValue={(v) => `${v.toFixed(1)} stars`}
+          />
+          <FilterRangeSlider
+            label="Review Count"
+            value={[filters.minReviewCount, filters.maxReviewCount]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minReviewCount: min, maxReviewCount: max })}
+            min={0}
+            max={maxReviewCount}
+            step={10}
+          />
+          <FilterRangeSlider
+            label="Park Count"
+            value={[filters.minParkCount, filters.maxParkCount]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minParkCount: min, maxParkCount: max })}
+            min={0}
+            max={maxParkCount}
+            step={1}
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Other Options">
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasRating"
+              checked={filters.hasRating}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasRating: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasRating" className="cursor-pointer">
+              Has rating
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasFoundedDate"
+              checked={filters.hasFoundedDate}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasFoundedDate: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasFoundedDate" className="cursor-pointer">
+              Has founded date
+            </Label>
+          </div>
+        </div>
+      </FilterSection>
+    </div>
+  );
+}

src/components/parks/ParkFilters.tsx

@@ -1,15 +1,18 @@
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Slider } from '@/components/ui/slider';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
 import { Park } from '@/types/database';
 import { FilterState } from '@/pages/Parks';
-import { MonthYearPicker } from '@/components/ui/month-year-picker';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
 
 interface ParkFiltersProps {
   filters: FilterState;
@@ -18,15 +21,66 @@ interface ParkFiltersProps {
 }
 
 export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProps) {
-  const countries = useMemo(() => {
-    const countrySet = new Set<string>();
-    parks.forEach(park => {
-      if (park.location?.country) {
-        countrySet.add(park.location.country);
-      }
-    });
-    return Array.from(countrySet).sort();
-  }, [parks]);
+  const { data: locations } = useQuery({
+    queryKey: ['filter-locations'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('locations')
+        .select('country, state_province, city')
+        .not('country', 'is', null);
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: operators } = useQuery({
+    queryKey: ['filter-operators'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('companies')
+        .select('id, name')
+        .eq('company_type', 'operator')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: propertyOwners } = useQuery({
+    queryKey: ['filter-property-owners'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('companies')
+        .select('id, name')
+        .eq('company_type', 'property_owner')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const countryOptions: MultiSelectOption[] = useMemo(() => {
+    const countries = new Set(locations?.map(l => l.country).filter(Boolean) || []);
+    return Array.from(countries).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const stateOptions: MultiSelectOption[] = useMemo(() => {
+    const states = new Set(locations?.map(l => l.state_province).filter(Boolean) || []);
+    return Array.from(states).sort().map(s => ({ label: s, value: s }));
+  }, [locations]);
+
+  const cityOptions: MultiSelectOption[] = useMemo(() => {
+    const cities = new Set(locations?.map(l => l.city).filter(Boolean) || []);
+    return Array.from(cities).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const operatorOptions: MultiSelectOption[] = useMemo(() => {
+    return (operators || []).map(o => ({ label: o.name, value: o.id }));
+  }, [operators]);
+
+  const propertyOwnerOptions: MultiSelectOption[] = useMemo(() => {
+    return (propertyOwners || []).map(p => ({ label: p.name, value: p.id }));
+  }, [propertyOwners]);
 
   const parkTypes = [
     { value: 'all', label: 'All Types' },
@@ -48,8 +102,13 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
     return Math.max(...parks.map(p => p.ride_count || 0), 100);
   }, [parks]);
 
-  const currentYear = new Date().getFullYear();
-  const minYear = 1900;
+  const maxCoasters = useMemo(() => {
+    return Math.max(...parks.map(p => p.coaster_count || 0), 50);
+  }, [parks]);
+
+  const maxReviews = useMemo(() => {
+    return Math.max(...parks.map(p => p.review_count || 0), 1000);
+  }, [parks]);
 
   const resetFilters = () => {
     onFiltersChange({
@@ -57,10 +116,18 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
       parkType: 'all',
       status: 'all',
       country: 'all',
+      states: [],
+      cities: [],
+      operators: [],
+      propertyOwners: [],
       minRating: 0,
       maxRating: 5,
       minRides: 0,
       maxRides: maxRides,
+      minCoasters: 0,
+      maxCoasters: maxCoasters,
+      minReviews: 0,
+      maxReviews: maxReviews,
       openingYearStart: null,
       openingYearEnd: null,
     });
@@ -76,155 +143,169 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
         </Button>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-        {/* Park Type */}
-        <div className="space-y-2">
-          <Label>Park Type</Label>
-          <Select 
-            value={filters.parkType} 
-            onValueChange={(value) => onFiltersChange({ ...filters, parkType: value })}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {parkTypes.map(type => (
-                <SelectItem key={type.value} value={type.value}>
-                  {type.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Status */}
-        <div className="space-y-2">
-          <Label>Status</Label>
-          <Select 
-            value={filters.status} 
-            onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {statusOptions.map(status => (
-                <SelectItem key={status.value} value={status.value}>
-                  {status.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Country */}
-        <div className="space-y-2">
-          <Label>Country</Label>
-          <Select 
-            value={filters.country} 
-            onValueChange={(value) => onFiltersChange({ ...filters, country: value })}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Countries</SelectItem>
-              {countries.map(country => (
-                <SelectItem key={country} value={country}>
-                  {country}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Opening Year Range */}
-        <div className="space-y-2">
-          <Label>Opening Year</Label>
-          <div className="flex gap-2">
-            <MonthYearPicker
-              date={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : undefined}
-              onSelect={(date) => onFiltersChange({ 
-                ...filters, 
-                openingYearStart: date ? date.getFullYear() : null 
-              })}
-              placeholder="From year"
-              fromYear={minYear}
-              toYear={currentYear}
-            />
-            <MonthYearPicker
-              date={filters.openingYearEnd ? new Date(filters.openingYearEnd, 0, 1) : undefined}
-              onSelect={(date) => onFiltersChange({ 
-                ...filters, 
-                openingYearEnd: date ? date.getFullYear() : null 
-              })}
-              placeholder="To year"
-              fromYear={minYear}
-              toYear={currentYear}
-            />
+      <FilterSection>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          {/* Park Type */}
+          <div className="space-y-2">
+            <Label>Park Type</Label>
+            <Select 
+              value={filters.parkType} 
+              onValueChange={(value) => onFiltersChange({ ...filters, parkType: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {parkTypes.map(type => (
+                  <SelectItem key={type.value} value={type.value}>
+                    {type.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
+
+          {/* Status */}
+          <div className="space-y-2">
+            <Label>Status</Label>
+            <Select 
+              value={filters.status} 
+              onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {statusOptions.map(status => (
+                  <SelectItem key={status.value} value={status.value}>
+                    {status.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Country */}
+          <div className="space-y-2">
+            <Label>Country</Label>
+            <Select 
+              value={filters.country} 
+              onValueChange={(value) => onFiltersChange({ ...filters, country: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Countries</SelectItem>
+                {Array.from(new Set(locations?.map(l => l.country).filter(Boolean) || [])).sort().map(country => (
+                  <SelectItem key={country} value={country}>
+                    {country}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <FilterMultiSelectCombobox
+            label="States/Provinces"
+            options={stateOptions}
+            value={filters.states || []}
+            onChange={(value) => onFiltersChange({ ...filters, states: value })}
+            placeholder="Select states"
+          />
+
+          <FilterMultiSelectCombobox
+            label="Cities"
+            options={cityOptions}
+            value={filters.cities || []}
+            onChange={(value) => onFiltersChange({ ...filters, cities: value })}
+            placeholder="Select cities"
+          />
         </div>
-      </div>
+      </FilterSection>
 
       <Separator />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {/* Rating Range */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <Label>Rating Range</Label>
-            <div className="flex items-center gap-2">
-              <Badge variant="outline">
-                {filters.minRating.toFixed(1)} - {filters.maxRating.toFixed(1)} stars
-              </Badge>
-            </div>
-          </div>
-          <div className="px-2">
-            <Slider
-              value={[filters.minRating, filters.maxRating]}
-              onValueChange={([min, max]) => 
-                onFiltersChange({ ...filters, minRating: min, maxRating: max })
-              }
-              min={0}
-              max={5}
-              step={0.1}
-              className="w-full"
-            />
-            <div className="flex justify-between text-xs text-muted-foreground mt-1">
-              <span>0 stars</span>
-              <span>5 stars</span>
-            </div>
-          </div>
+      <FilterSection title="Operators & Owners">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FilterMultiSelectCombobox
+            label="Operators"
+            options={operatorOptions}
+            value={filters.operators || []}
+            onChange={(value) => onFiltersChange({ ...filters, operators: value })}
+            placeholder="Select operators"
+          />
+          <FilterMultiSelectCombobox
+            label="Property Owners"
+            options={propertyOwnerOptions}
+            value={filters.propertyOwners || []}
+            onChange={(value) => onFiltersChange({ ...filters, propertyOwners: value })}
+            placeholder="Select owners"
+          />
         </div>
+      </FilterSection>
 
-        {/* Ride Count Range */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <Label>Number of Rides</Label>
-            <div className="flex items-center gap-2">
-              <Badge variant="outline">
-                {filters.minRides} - {filters.maxRides} rides
-              </Badge>
-            </div>
-          </div>
-          <div className="px-2">
-            <Slider
-              value={[filters.minRides, filters.maxRides]}
-              onValueChange={([min, max]) => 
-                onFiltersChange({ ...filters, minRides: min, maxRides: max })
-              }
-              min={0}
-              max={maxRides}
-              step={1}
-              className="w-full"
-            />
-            <div className="flex justify-between text-xs text-muted-foreground mt-1">
-              <span>0 rides</span>
-              <span>{maxRides} rides</span>
-            </div>
-          </div>
+      <Separator />
+
+      <FilterSection title="Opening Dates">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FilterDateRangePicker
+            label="Opening Year"
+            fromDate={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : null}
+            toDate={filters.openingYearEnd ? new Date(filters.openingYearEnd, 0, 1) : null}
+            onFromChange={(date) => onFiltersChange({ 
+              ...filters, 
+              openingYearStart: date ? date.getFullYear() : null 
+            })}
+            onToChange={(date) => onFiltersChange({ 
+              ...filters, 
+              openingYearEnd: date ? date.getFullYear() : null 
+            })}
+            fromPlaceholder="From year"
+            toPlaceholder="To year"
+          />
         </div>
-      </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FilterRangeSlider
+            label="Rating"
+            value={[filters.minRating, filters.maxRating]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minRating: min, maxRating: max })}
+            min={0}
+            max={5}
+            step={0.1}
+            formatValue={(v) => `${v.toFixed(1)} stars`}
+          />
+          <FilterRangeSlider
+            label="Ride Count"
+            value={[filters.minRides, filters.maxRides]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minRides: min, maxRides: max })}
+            min={0}
+            max={maxRides}
+            step={1}
+          />
+          <FilterRangeSlider
+            label="Coaster Count"
+            value={[filters.minCoasters || 0, filters.maxCoasters || maxCoasters]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minCoasters: min, maxCoasters: max })}
+            min={0}
+            max={maxCoasters}
+            step={1}
+          />
+          <FilterRangeSlider
+            label="Review Count"
+            value={[filters.minReviews || 0, filters.maxReviews || maxReviews]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minReviews: min, maxReviews: max })}
+            min={0}
+            max={maxReviews}
+            step={10}
+          />
+        </div>
+      </FilterSection>
     </div>
   );
 }

src/components/rides/RideFilters.tsx

@@ -0,0 +1,438 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Separator } from '@/components/ui/separator';
+import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
+import { Ride } from '@/types/database';
+
+export interface RideFilterState {
+  categories: string[];
+  status: string;
+  countries: string[];
+  statesProvinces: string[];
+  cities: string[];
+  parks: string[];
+  manufacturers: string[];
+  designers: string[];
+  coasterTypes: string[];
+  seatingTypes: string[];
+  intensityLevels: string[];
+  trackMaterials: string[];
+  minSpeed: number;
+  maxSpeed: number;
+  minHeight: number;
+  maxHeight: number;
+  minLength: number;
+  maxLength: number;
+  minInversions: number;
+  maxInversions: number;
+  openingDateFrom: Date | null;
+  openingDateTo: Date | null;
+  hasInversions: boolean;
+  operatingOnly: boolean;
+}
+
+export const defaultRideFilters: RideFilterState = {
+  categories: [],
+  status: 'all',
+  countries: [],
+  statesProvinces: [],
+  cities: [],
+  parks: [],
+  manufacturers: [],
+  designers: [],
+  coasterTypes: [],
+  seatingTypes: [],
+  intensityLevels: [],
+  trackMaterials: [],
+  minSpeed: 0,
+  maxSpeed: 200,
+  minHeight: 0,
+  maxHeight: 150,
+  minLength: 0,
+  maxLength: 3000,
+  minInversions: 0,
+  maxInversions: 14,
+  openingDateFrom: null,
+  openingDateTo: null,
+  hasInversions: false,
+  operatingOnly: false,
+};
+
+interface RideFiltersProps {
+  filters: RideFilterState;
+  onFiltersChange: (filters: RideFilterState) => void;
+  rides: Ride[];
+}
+
+export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProps) {
+  // Fetch unique filter options
+  const { data: locations } = useQuery({
+    queryKey: ['filter-locations'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('locations')
+        .select('country, state_province, city')
+        .not('country', 'is', null);
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: parks } = useQuery({
+    queryKey: ['filter-parks'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('parks')
+        .select('id, name')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: manufacturers } = useQuery({
+    queryKey: ['filter-manufacturers'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('companies')
+        .select('id, name')
+        .eq('company_type', 'manufacturer')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: designers } = useQuery({
+    queryKey: ['filter-designers'],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from('companies')
+        .select('id, name')
+        .eq('company_type', 'designer')
+        .order('name');
+      return data || [];
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const countryOptions: MultiSelectOption[] = useMemo(() => {
+    const countries = new Set(locations?.map(l => l.country).filter(Boolean) || []);
+    return Array.from(countries).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const stateOptions: MultiSelectOption[] = useMemo(() => {
+    const states = new Set(locations?.map(l => l.state_province).filter(Boolean) || []);
+    return Array.from(states).sort().map(s => ({ label: s, value: s }));
+  }, [locations]);
+
+  const cityOptions: MultiSelectOption[] = useMemo(() => {
+    const cities = new Set(locations?.map(l => l.city).filter(Boolean) || []);
+    return Array.from(cities).sort().map(c => ({ label: c, value: c }));
+  }, [locations]);
+
+  const parkOptions: MultiSelectOption[] = useMemo(() => {
+    return (parks || []).map(p => ({ label: p.name, value: p.id }));
+  }, [parks]);
+
+  const manufacturerOptions: MultiSelectOption[] = useMemo(() => {
+    return (manufacturers || []).map(m => ({ label: m.name, value: m.id }));
+  }, [manufacturers]);
+
+  const designerOptions: MultiSelectOption[] = useMemo(() => {
+    return (designers || []).map(d => ({ label: d.name, value: d.id }));
+  }, [designers]);
+
+  const categoryOptions: MultiSelectOption[] = [
+    { label: 'Roller Coasters', value: 'roller_coaster' },
+    { label: 'Flat Rides', value: 'flat_ride' },
+    { label: 'Water Rides', value: 'water_ride' },
+    { label: 'Dark Rides', value: 'dark_ride' },
+    { label: 'Kiddie Rides', value: 'kiddie_ride' },
+    { label: 'Transportation', value: 'transportation' },
+  ];
+
+  const statusOptions = [
+    { value: 'all', label: 'All Status' },
+    { value: 'operating', label: 'Operating' },
+    { value: 'seasonal', label: 'Seasonal' },
+    { value: 'under_construction', label: 'Under Construction' },
+    { value: 'closed', label: 'Closed' },
+  ];
+
+  const coasterTypeOptions: MultiSelectOption[] = [
+    { label: 'Steel', value: 'steel' },
+    { label: 'Wood', value: 'wood' },
+    { label: 'Hybrid', value: 'hybrid' },
+    { label: 'Inverted', value: 'inverted' },
+    { label: 'Suspended', value: 'suspended' },
+    { label: 'Flying', value: 'flying' },
+    { label: 'Wing', value: 'wing' },
+    { label: 'Dive', value: 'dive' },
+  ];
+
+  const seatingTypeOptions: MultiSelectOption[] = [
+    { label: 'Sit Down', value: 'sit_down' },
+    { label: 'Stand Up', value: 'stand_up' },
+    { label: 'Inverted', value: 'inverted' },
+    { label: 'Flying', value: 'flying' },
+    { label: 'Floorless', value: 'floorless' },
+  ];
+
+  const intensityOptions: MultiSelectOption[] = [
+    { label: 'Family', value: 'family' },
+    { label: 'Moderate', value: 'moderate' },
+    { label: 'Thrill', value: 'thrill' },
+    { label: 'Extreme', value: 'extreme' },
+  ];
+
+  const trackMaterialOptions: MultiSelectOption[] = [
+    { label: 'Steel', value: 'steel' },
+    { label: 'Wood', value: 'wood' },
+    { label: 'Hybrid', value: 'hybrid' },
+  ];
+
+  const resetFilters = () => {
+    onFiltersChange(defaultRideFilters);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Rides</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      {/* Basic Filters */}
+      <FilterSection title="Basic Filters">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <FilterMultiSelectCombobox
+            label="Categories"
+            options={categoryOptions}
+            value={filters.categories}
+            onChange={(value) => onFiltersChange({ ...filters, categories: value })}
+            placeholder="Select categories"
+          />
+
+          <div className="space-y-2">
+            <Label>Status</Label>
+            <Select
+              value={filters.status}
+              onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {statusOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Geographic Filters */}
+      <FilterSection title="Location">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <FilterMultiSelectCombobox
+            label="Countries"
+            options={countryOptions}
+            value={filters.countries}
+            onChange={(value) => onFiltersChange({ ...filters, countries: value })}
+            placeholder="Select countries"
+          />
+          <FilterMultiSelectCombobox
+            label="States/Provinces"
+            options={stateOptions}
+            value={filters.statesProvinces}
+            onChange={(value) => onFiltersChange({ ...filters, statesProvinces: value })}
+            placeholder="Select states"
+          />
+          <FilterMultiSelectCombobox
+            label="Cities"
+            options={cityOptions}
+            value={filters.cities}
+            onChange={(value) => onFiltersChange({ ...filters, cities: value })}
+            placeholder="Select cities"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Relationship Filters */}
+      <FilterSection title="Parks & Companies">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <FilterMultiSelectCombobox
+            label="Parks"
+            options={parkOptions}
+            value={filters.parks}
+            onChange={(value) => onFiltersChange({ ...filters, parks: value })}
+            placeholder="Select parks"
+          />
+          <FilterMultiSelectCombobox
+            label="Manufacturers"
+            options={manufacturerOptions}
+            value={filters.manufacturers}
+            onChange={(value) => onFiltersChange({ ...filters, manufacturers: value })}
+            placeholder="Select manufacturers"
+          />
+          <FilterMultiSelectCombobox
+            label="Designers"
+            options={designerOptions}
+            value={filters.designers}
+            onChange={(value) => onFiltersChange({ ...filters, designers: value })}
+            placeholder="Select designers"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Coaster-Specific Filters */}
+      <FilterSection title="Coaster Details">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <FilterMultiSelectCombobox
+            label="Coaster Type"
+            options={coasterTypeOptions}
+            value={filters.coasterTypes}
+            onChange={(value) => onFiltersChange({ ...filters, coasterTypes: value })}
+            placeholder="Select types"
+          />
+          <FilterMultiSelectCombobox
+            label="Seating Type"
+            options={seatingTypeOptions}
+            value={filters.seatingTypes}
+            onChange={(value) => onFiltersChange({ ...filters, seatingTypes: value })}
+            placeholder="Select seating"
+          />
+          <FilterMultiSelectCombobox
+            label="Intensity"
+            options={intensityOptions}
+            value={filters.intensityLevels}
+            onChange={(value) => onFiltersChange({ ...filters, intensityLevels: value })}
+            placeholder="Select intensity"
+          />
+          <FilterMultiSelectCombobox
+            label="Track Material"
+            options={trackMaterialOptions}
+            value={filters.trackMaterials}
+            onChange={(value) => onFiltersChange({ ...filters, trackMaterials: value })}
+            placeholder="Select material"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Numeric Range Filters */}
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FilterRangeSlider
+            label="Speed"
+            value={[filters.minSpeed, filters.maxSpeed]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minSpeed: min, maxSpeed: max })}
+            min={0}
+            max={200}
+            step={5}
+            unit=" km/h"
+          />
+          <FilterRangeSlider
+            label="Height"
+            value={[filters.minHeight, filters.maxHeight]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minHeight: min, maxHeight: max })}
+            min={0}
+            max={150}
+            step={5}
+            unit=" m"
+          />
+          <FilterRangeSlider
+            label="Length"
+            value={[filters.minLength, filters.maxLength]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minLength: min, maxLength: max })}
+            min={0}
+            max={3000}
+            step={50}
+            unit=" m"
+          />
+          <FilterRangeSlider
+            label="Inversions"
+            value={[filters.minInversions, filters.maxInversions]}
+            onChange={([min, max]) => onFiltersChange({ ...filters, minInversions: min, maxInversions: max })}
+            min={0}
+            max={14}
+            step={1}
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Date Filters */}
+      <FilterSection title="Dates">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FilterDateRangePicker
+            label="Opening Date"
+            fromDate={filters.openingDateFrom}
+            toDate={filters.openingDateTo}
+            onFromChange={(date) => onFiltersChange({ ...filters, openingDateFrom: date || null })}
+            onToChange={(date) => onFiltersChange({ ...filters, openingDateTo: date || null })}
+            fromPlaceholder="From year"
+            toPlaceholder="To year"
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      {/* Boolean Filters */}
+      <FilterSection title="Other Options">
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hasInversions"
+              checked={filters.hasInversions}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, hasInversions: checked as boolean })
+              }
+            />
+            <Label htmlFor="hasInversions" className="cursor-pointer">
+              Has inversions
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="operatingOnly"
+              checked={filters.operatingOnly}
+              onCheckedChange={(checked) =>
+                onFiltersChange({ ...filters, operatingOnly: checked as boolean })
+              }
+            />
+            <Label htmlFor="operatingOnly" className="cursor-pointer">
+              Operating only
+            </Label>
+          </div>
+        </div>
+      </FilterSection>
+    </div>
+  );
+}