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);
-      }
+  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,
   });
-    return Array.from(countrySet).sort();
-  }, [parks]);
+
+  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,7 +143,8 @@ 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">
+      <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>
@@ -129,7 +197,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Countries</SelectItem>
-              {countries.map(country => (
+                {Array.from(new Set(locations?.map(l => l.country).filter(Boolean) || [])).sort().map(country => (
                   <SelectItem key={country} value={country}>
                     {country}
                   </SelectItem>
@@ -138,93 +206,106 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
             </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}
+          <FilterMultiSelectCombobox
+            label="States/Provinces"
+            options={stateOptions}
+            value={filters.states || []}
+            onChange={(value) => onFiltersChange({ ...filters, states: value })}
+            placeholder="Select states"
           />
-            <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}
+
+          <FilterMultiSelectCombobox
+            label="Cities"
+            options={cityOptions}
+            value={filters.cities || []}
+            onChange={(value) => onFiltersChange({ ...filters, cities: value })}
+            placeholder="Select cities"
           />
         </div>
-        </div>
-      </div>
+      </FilterSection>
 
       <Separator />
 
+      <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>
+
+      <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>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Statistics">
         <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
+          <FilterRangeSlider
+            label="Rating"
             value={[filters.minRating, filters.maxRating]}
-              onValueChange={([min, max]) => 
-                onFiltersChange({ ...filters, minRating: min, maxRating: max })
-              }
+            onChange={([min, max]) => onFiltersChange({ ...filters, minRating: min, maxRating: max })}
             min={0}
             max={5}
             step={0.1}
-              className="w-full"
+            formatValue={(v) => `${v.toFixed(1)} stars`}
           />
-            <div className="flex justify-between text-xs text-muted-foreground mt-1">
-              <span>0 stars</span>
-              <span>5 stars</span>
-            </div>
-          </div>
-        </div>
-
-        {/* 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
+          <FilterRangeSlider
+            label="Ride Count"
             value={[filters.minRides, filters.maxRides]}
-              onValueChange={([min, max]) => 
-                onFiltersChange({ ...filters, minRides: min, maxRides: max })
-              }
+            onChange={([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>
-        </div>
+          <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>
+  );
+}

src/pages/Designers.tsx

@@ -5,8 +5,11 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
+import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Ruler, Plus } from 'lucide-react';
+import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter } from 'lucide-react';
+import { DesignerFilters, DesignerFilterState, defaultDesignerFilters } from '@/components/designers/DesignerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { DesignerCard } from '@/components/designers/DesignerCard';
@@ -27,6 +30,8 @@ export default function Designers() {
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('name');
+  const [filters, setFilters] = useState<DesignerFilterState>(defaultDesignerFilters);
+  const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const handleCreateSubmit = async (data: any) => {
@@ -144,8 +149,9 @@ export default function Designers() {
             />
           </div>
           
+          <div className="flex gap-2">
             <Select value={sortBy} onValueChange={setSortBy}>
-            <SelectTrigger className="w-full h-10">
+              <SelectTrigger className="w-[180px] h-10">
                 <SlidersHorizontal className="h-4 w-4 mr-2" />
                 <SelectValue />
               </SelectTrigger>
@@ -154,6 +160,22 @@ export default function Designers() {
                 <SelectItem value="founded">Founded (Newest)</SelectItem>
               </SelectContent>
             </Select>
+            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
+              <Filter className="w-4 h-4" />
+              Filters
+              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+            </Button>
+          </div>
+          
+          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+            <CollapsibleContent>
+              <Card className="mt-4">
+                <CardContent className="pt-6">
+                  <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
+                </CardContent>
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
         {/* Companies Grid */}

src/pages/Manufacturers.tsx

@@ -5,8 +5,11 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
+import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Factory, Plus } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter } from 'lucide-react';
+import { ManufacturerFilters, ManufacturerFilterState, defaultManufacturerFilters } from '@/components/manufacturers/ManufacturerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
@@ -27,6 +30,8 @@ export default function Manufacturers() {
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('name');
+  const [filters, setFilters] = useState<ManufacturerFilterState>(defaultManufacturerFilters);
+  const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   
 
@@ -157,8 +162,9 @@ export default function Manufacturers() {
             />
           </div>
           
+          <div className="flex gap-2">
             <Select value={sortBy} onValueChange={setSortBy}>
-            <SelectTrigger className="w-full h-10">
+              <SelectTrigger className="w-[180px] h-10">
                 <SlidersHorizontal className="h-4 w-4 mr-2" />
                 <SelectValue />
               </SelectTrigger>
@@ -167,6 +173,22 @@ export default function Manufacturers() {
                 <SelectItem value="founded">Founded (Newest)</SelectItem>
               </SelectContent>
             </Select>
+            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
+              <Filter className="w-4 h-4" />
+              Filters
+              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+            </Button>
+          </div>
+          
+          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+            <CollapsibleContent>
+              <Card className="mt-4">
+                <CardContent className="pt-6">
+                  <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
+                </CardContent>
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
         {/* Companies Grid */}

src/pages/Operators.tsx

@@ -7,10 +7,13 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Search, Filter, Building, Plus } from 'lucide-react';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
+import { Card, CardContent } from '@/components/ui/card';
+import { Search, Filter, Building, Plus, ChevronDown } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import OperatorCard from '@/components/operators/OperatorCard';
 import { OperatorForm } from '@/components/admin/OperatorForm';
+import { OperatorFilters, OperatorFilterState, defaultOperatorFilters } from '@/components/operators/OperatorFilters';
 import { Company } from '@/types/database';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -26,7 +29,8 @@ const Operators = () => {
   const { requireAuth } = useAuthModal();
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState('name');
-  const [filterBy, setFilterBy] = useState('all');
+  const [filters, setFilters] = useState<OperatorFilterState>(defaultOperatorFilters);
+  const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const { data: operators, isLoading } = useQuery({
@@ -170,7 +174,7 @@ const Operators = () => {
           
           <div className="flex gap-2">
             <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectTrigger className="flex-1 h-10">
+              <SelectTrigger className="w-[180px] h-10">
                 <SelectValue placeholder="Sort by" />
               </SelectTrigger>
               <SelectContent>
@@ -181,18 +185,22 @@ const Operators = () => {
               </SelectContent>
             </Select>
 
-            <Select value={filterBy} onValueChange={setFilterBy}>
-              <SelectTrigger className="flex-1 h-10">
-                <Filter className="h-4 w-4 mr-2" />
-                <SelectValue placeholder="Filter" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="with-rating">Rated</SelectItem>
-                <SelectItem value="established">Est.</SelectItem>
-              </SelectContent>
-            </Select>
+            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
+              <Filter className="w-4 h-4" />
+              Filters
+              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+            </Button>
           </div>
+          
+          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+            <CollapsibleContent>
+              <Card className="mt-4">
+                <CardContent className="pt-6">
+                  <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
+                </CardContent>
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
 

src/pages/Parks.tsx

@@ -38,10 +38,18 @@ export interface FilterState {
   parkType: string;
   status: string;
   country: string;
+  states?: string[];
+  cities?: string[];
+  operators?: string[];
+  propertyOwners?: string[];
   minRating: number;
   maxRating: number;
   minRides: number;
   maxRides: number;
+  minCoasters?: number;
+  maxCoasters?: number;
+  minReviews?: number;
+  maxReviews?: number;
   openingYearStart: number | null;
   openingYearEnd: number | null;
 }
@@ -56,10 +64,18 @@ const initialFilters: FilterState = {
   parkType: 'all',
   status: 'all',
   country: 'all',
+  states: [],
+  cities: [],
+  operators: [],
+  propertyOwners: [],
   minRating: 0,
   maxRating: 5,
   minRides: 0,
   maxRides: 1000,
+  minCoasters: 0,
+  maxCoasters: 100,
+  minReviews: 0,
+  maxReviews: 1000,
   openingYearStart: null,
   openingYearEnd: null,
 };
@@ -144,6 +160,34 @@ export default function Parks() {
         return false;
       }
 
+      // States filter
+      if (filters.states && filters.states.length > 0) {
+        if (!park.location?.state_province || !filters.states.includes(park.location.state_province)) {
+          return false;
+        }
+      }
+
+      // Cities filter
+      if (filters.cities && filters.cities.length > 0) {
+        if (!park.location?.city || !filters.cities.includes(park.location.city)) {
+          return false;
+        }
+      }
+
+      // Operators filter
+      if (filters.operators && filters.operators.length > 0) {
+        if (!park.operator?.id || !filters.operators.includes(park.operator.id)) {
+          return false;
+        }
+      }
+
+      // Property owners filter
+      if (filters.propertyOwners && filters.propertyOwners.length > 0) {
+        if (!park.property_owner?.id || !filters.propertyOwners.includes(park.property_owner.id)) {
+          return false;
+        }
+      }
+
       // Rating filter
       const rating = park.average_rating || 0;
       if (rating < filters.minRating || rating > filters.maxRating) {
@@ -156,6 +200,22 @@ export default function Parks() {
         return false;
       }
 
+      // Coaster count filter
+      if (filters.minCoasters !== undefined && filters.maxCoasters !== undefined) {
+        const coasterCount = park.coaster_count || 0;
+        if (coasterCount < filters.minCoasters || coasterCount > filters.maxCoasters) {
+          return false;
+        }
+      }
+
+      // Review count filter
+      if (filters.minReviews !== undefined && filters.maxReviews !== undefined) {
+        const reviewCount = park.review_count || 0;
+        if (reviewCount < filters.minReviews || reviewCount > filters.maxReviews) {
+          return false;
+        }
+      }
+
       // Opening year filter
       if (filters.openingYearStart || filters.openingYearEnd) {
         const openingYear = park.opening_date ? parseInt(park.opening_date.split('-')[0]) : null;

src/pages/Rides.tsx

@@ -5,10 +5,13 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Filter, SlidersHorizontal, FerrisWheel, Plus } from 'lucide-react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Card, CardContent } from '@/components/ui/card';
+import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown } from 'lucide-react';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { RideCard } from '@/components/rides/RideCard';
 import { RideForm } from '@/components/admin/RideForm';
+import { RideFilters, RideFilterState, defaultRideFilters } from '@/components/rides/RideFilters';
 import { Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
@@ -26,51 +29,25 @@ export default function Rides() {
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('name');
-  const [filterCategory, setFilterCategory] = useState('all');
-  const [filterStatus, setFilterStatus] = useState('all');
+  const [filters, setFilters] = useState<RideFilterState>(defaultRideFilters);
+  const [showFilters, setShowFilters] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   useEffect(() => {
     fetchRides();
-  }, [sortBy, filterCategory, filterStatus]);
+  }, []);
 
   const fetchRides = async () => {
     try {
-      let query = supabase
+      const { data } = await supabase
         .from('rides')
         .select(`
           *, 
           park:parks!inner(name, slug, location:locations(*)),
-          manufacturer:companies!rides_manufacturer_id_fkey(*)
-        `);
-
-      // Apply filters
-      if (filterCategory !== 'all') {
-        query = query.eq('category', filterCategory);
-      }
-      if (filterStatus !== 'all') {
-        query = query.eq('status', filterStatus);
-      }
-
-      // Apply sorting
-      switch (sortBy) {
-        case 'rating':
-          query = query.order('average_rating', { ascending: false });
-          break;
-        case 'speed':
-          query = query.order('max_speed_kmh', { ascending: false, nullsFirst: false });
-          break;
-        case 'height':
-          query = query.order('max_height_meters', { ascending: false, nullsFirst: false });
-          break;
-        case 'reviews':
-          query = query.order('review_count', { ascending: false });
-          break;
-        default:
-          query = query.order('name');
-      }
-
-      const { data } = await query;
+          manufacturer:companies!rides_manufacturer_id_fkey(*),
+          designer:companies!rides_designer_id_fkey(*)
+        `)
+        .order('name');
       setRides(data || []);
     } catch (error) {
       console.error('Error fetching rides:', error);
@@ -207,34 +184,27 @@ export default function Rides() {
                 </SelectContent>
               </Select>
               
-              <Select value={filterCategory} onValueChange={setFilterCategory}>
-                <SelectTrigger className="w-[160px]">
-                  <Filter className="w-4 h-4 mr-2" />
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {categories.map(category => (
-                    <SelectItem key={category.value} value={category.value}>
-                      {category.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <Button
+                variant="outline"
+                onClick={() => setShowFilters(!showFilters)}
+                className="gap-2"
+              >
+                <Filter className="w-4 h-4" />
+                Filters
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
+          </div>
 
-              <Select value={filterStatus} onValueChange={setFilterStatus}>
-                <SelectTrigger className="w-[140px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {statusOptions.map(status => (
-                    <SelectItem key={status.value} value={status.value}>
-                      {status.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
+          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+            <CollapsibleContent>
+              <Card>
+                <CardContent className="pt-6">
+                  <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
+                </CardContent>
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
         {/* Rides Grid */}