Refactor code structure and remove redundant changes

src-old/components/parks/ParkCard.tsx

@@ -0,0 +1,137 @@
+import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Park } from '@/types/database';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
+
+interface ParkCardProps {
+  park: Park;
+}
+export function ParkCard({ park }: ParkCardProps) {
+  const navigate = useNavigate();
+  
+  const handleClick = () => {
+    navigate(`/parks/${park.slug}`);
+  };
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'operating':
+        return 'bg-green-500/50 text-green-200 border-green-500/50';
+      case 'seasonal':
+        return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50';
+      case 'under_construction':
+        return 'bg-blue-500/50 text-blue-200 border-blue-500/50';
+      default:
+        return 'bg-red-500/50 text-red-200 border-red-500/50';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'operating':
+        return <Clock className="w-3 h-3" />;
+      case 'seasonal':
+        return <Clock className="w-3 h-3" />;
+      case 'under_construction':
+        return <Clock className="w-3 h-3" />;
+      default:
+        return <Clock className="w-3 h-3" />;
+    }
+  };
+  const getParkTypeIcon = (type: string) => {
+    switch (type) {
+      case 'theme_park':
+        return <Castle className="w-5 h-5" />;
+      case 'amusement_park':
+        return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park':
+        return <Waves className="w-5 h-5" />;
+      case 'family_entertainment':
+        return <Tent className="w-5 h-5" />;
+      default:
+        return <FerrisWheel className="w-5 h-5" />;
+    }
+  };
+  const formatParkType = (type: string) => {
+    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+  };
+  return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300" onClick={handleClick}>
+      <div className="relative overflow-hidden">
+        {/* Image Placeholder with Gradient */}
+        <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+          {(park.card_image_url || park.card_image_id) ? (
+            <img 
+              src={park.card_image_url || getCloudflareImageUrl(park.card_image_id || '', 'card')}
+              srcSet={park.card_image_id ? `
+                ${getCloudflareImageUrl(park.card_image_id, 'cardthumb')} 600w,
+                ${getCloudflareImageUrl(park.card_image_id, 'card')} 1200w
+              ` : undefined}
+              sizes="(max-width: 640px) 600px, 1200px"
+              alt={park.name} 
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+              loading="lazy"
+            />
+          ) : (
+            <div className="relative flex items-center justify-center">
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+              <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                {getParkTypeIcon(park.park_type)}
+              </div>
+            </div>
+          )}
+          
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
+          
+          {/* Status Badge */}
+          <Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}>
+            {getStatusIcon(park.status)}
+            <span>{park.status.replace('_', ' ').toUpperCase()}</span>
+          </Badge>
+        </div>
+
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
+        {/* Header */}
+        <div className="space-y-0.5 min-w-0">
+          <h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
+            {park.name}
+          </h3>
+          
+        {park.location && (
+          <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
+            <MapPin className="w-3 h-3 flex-shrink-0" />
+            <span className="truncate">
+              {formatLocationShort(park.location)}
+            </span>
+          </div>
+        )}
+        </div>
+
+        {/* Stats & Rating */}
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center gap-3">
+            {(park.ride_count != null && park.ride_count > 0) && (
+              <div className="flex items-center gap-1">
+                <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
+                <span className="font-medium">{park.ride_count}</span>
+                <span className="text-muted-foreground">rides</span>
+              </div>
+            )}
+          </div>
+          
+          {(park.average_rating != null && park.average_rating > 0) && (
+            <div className="inline-flex items-center gap-1">
+              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
+              <span className="font-semibold">{park.average_rating.toFixed(1)}</span>
+              {(park.review_count != null && park.review_count > 0) && (
+                <span className="text-muted-foreground">({park.review_count})</span>
+              )}
+            </div>
+          )}
+        </div>
+        </CardContent>
+      </div>
+    </Card>;
+}

src-old/components/parks/ParkCardMemo.tsx

@@ -0,0 +1,16 @@
+/**
+ * Memoized Park Card Component
+ * Optimized for grid rendering performance
+ */
+
+import React from 'react';
+import { ParkCard } from './ParkCard';
+import type { Park } from '@/types/database';
+
+interface ParkCardMemoProps {
+  park: Park;
+}
+
+export const ParkCardMemo = React.memo<ParkCardMemoProps>(ParkCard);
+
+ParkCardMemo.displayName = 'ParkCardMemo';

src-old/components/parks/ParkFilters.tsx

@@ -0,0 +1,287 @@
+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 { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { RotateCcw } from 'lucide-react';
+import { supabase } from '@/lib/supabaseClient';
+import { Park } from '@/types/database';
+import { FilterState } from '@/pages/Parks';
+import { FilterRangeSlider } from '@/components/filters/FilterRangeSlider';
+import { FilterDateRangePicker } from '@/components/filters/FilterDateRangePicker';
+import { TimeZoneIndependentDateRangePicker } from '@/components/filters/TimeZoneIndependentDateRangePicker';
+import { FilterSection } from '@/components/filters/FilterSection';
+import { FilterMultiSelectCombobox } from '@/components/filters/FilterMultiSelectCombobox';
+import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
+
+interface ParkFiltersProps {
+  filters: FilterState;
+  onFiltersChange: (filters: FilterState) => void;
+  parks: Park[];
+}
+
+export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProps) {
+  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((s): s is string => s != null) || []);
+    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((c): c is string => c != null) || []);
+    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: MultiSelectOption[] = [
+    { value: 'theme_park', label: 'Theme Park' },
+    { value: 'amusement_park', label: 'Amusement Park' },
+    { value: 'water_park', label: 'Water Park' },
+    { value: 'family_entertainment', label: 'Family Entertainment' }
+  ];
+
+  const statusOptions: MultiSelectOption[] = [
+    { value: 'operating', label: 'Operating' },
+    { value: 'seasonal', label: 'Seasonal' },
+    { value: 'under_construction', label: 'Under Construction' },
+    { value: 'closed', label: 'Closed' }
+  ];
+
+  const maxRides = useMemo(() => {
+    return Math.max(...parks.map(p => p.ride_count || 0), 100);
+  }, [parks]);
+
+  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({
+      search: '',
+      parkType: [],
+      status: [],
+      country: [],
+      states: [],
+      cities: [],
+      operators: [],
+      propertyOwners: [],
+      minRating: 0,
+      maxRating: 5,
+      minRides: 0,
+      maxRides: maxRides,
+      minCoasters: 0,
+      maxCoasters: maxCoasters,
+      minReviews: 0,
+      maxReviews: maxReviews,
+      openingYearStart: null,
+      openingYearEnd: null,
+      openingDateFrom: null,
+      openingDateTo: null,
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Parks</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      <FilterSection title="Basic Filters">
+        <div className="grid grid-cols-1 gap-4">
+          <FilterMultiSelectCombobox
+            label="Park Type"
+            options={parkTypes}
+            value={filters.parkType}
+            onChange={(value) => onFiltersChange({ ...filters, parkType: value })}
+            placeholder="Select park types"
+          />
+
+          <FilterMultiSelectCombobox
+            label="Status"
+            options={statusOptions}
+            value={filters.status}
+            onChange={(value) => onFiltersChange({ ...filters, status: value })}
+            placeholder="Select status"
+          />
+
+          <FilterMultiSelectCombobox
+            label="Country"
+            options={countryOptions}
+            value={filters.country}
+            onChange={(value) => onFiltersChange({ ...filters, country: value })}
+            placeholder="Select countries"
+          />
+
+          <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>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Operators & Owners">
+        <div className="grid grid-cols-1 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 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"
+          />
+          
+          <TimeZoneIndependentDateRangePicker
+            label="Opening Date Range (Full Date)"
+            fromDate={filters.openingDateFrom || null}
+            toDate={filters.openingDateTo || null}
+            onFromChange={(date) => onFiltersChange({ ...filters, openingDateFrom: date })}
+            onToChange={(date) => onFiltersChange({ ...filters, openingDateTo: date })}
+            fromPlaceholder="From date"
+            toPlaceholder="To date"
+            fromYear={1800}
+            toYear={new Date().getFullYear()}
+          />
+        </div>
+      </FilterSection>
+
+      <Separator />
+
+      <FilterSection title="Statistics">
+        <div className="grid grid-cols-1 gap-4">
+          <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-old/components/parks/ParkGrid.tsx

@@ -0,0 +1,265 @@
+import { useState, useEffect } from 'react';
+import { Search, Filter, MapPin, SlidersHorizontal, FerrisWheel } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { ParkCard } from './ParkCard';
+import { Park } from '@/types/database';
+import { supabase } from '@/lib/supabaseClient';
+import { getErrorMessage } from '@/lib/errorHandler';
+
+export function ParkGrid() {
+  const [parks, setParks] = useState<Park[]>([]);
+  const [filteredParks, setFilteredParks] = useState<Park[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+  const [filterStatus, setFilterStatus] = useState('all');
+  const [filterType, setFilterType] = useState('all');
+
+  useEffect(() => {
+    fetchParks();
+  }, []);
+
+  useEffect(() => {
+    filterAndSortParks();
+  }, [parks, searchTerm, sortBy, filterStatus, filterType]);
+
+  const fetchParks = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*),
+          property_owner:companies!parks_property_owner_id_fkey(*)
+        `)
+        .order('name');
+
+      if (error) throw error;
+      setParks(data || []);
+    } catch (error: unknown) {
+      // Parks fetch failed - display empty grid
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterAndSortParks = () => {
+    let filtered = parks.filter(park => {
+      const matchesSearch = park.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          park.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          park.location?.city?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          park.location?.country?.toLowerCase().includes(searchTerm.toLowerCase());
+      
+      const matchesStatus = filterStatus === 'all' || park.status === filterStatus;
+      const matchesType = filterType === 'all' || park.park_type === filterType;
+
+      return matchesSearch && matchesStatus && matchesType;
+    });
+
+    // Sort parks
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'rating':
+          return (b.average_rating || 0) - (a.average_rating || 0);
+        case 'rides':
+          return (b.ride_count || 0) - (a.ride_count || 0);
+        case 'recent':
+          return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        default:
+          return 0;
+      }
+    });
+
+    setFilteredParks(filtered);
+  };
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setSortBy('name');
+    setFilterStatus('all');
+    setFilterType('all');
+  };
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="bg-muted rounded-lg h-64"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-3xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Discover Theme Parks
+          </h2>
+          <p className="text-muted-foreground mt-1">
+            Explore {parks.length} amazing theme parks around the world
+          </p>
+        </div>
+        <Button 
+          variant="outline" 
+          className="bg-gradient-to-r from-primary/10 to-accent/10 border-primary/20"
+        >
+          <MapPin className="w-4 h-4 mr-2" />
+          View Map
+        </Button>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="flex flex-col md:flex-row gap-4 items-center">
+        {/* Search */}
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+          <Input
+            placeholder="Search parks, locations, or descriptions..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10 bg-muted/50 border-border/50 focus:border-primary/50"
+          />
+        </div>
+
+        {/* Quick Sort */}
+        <Select value={sortBy} onValueChange={setSortBy}>
+          <SelectTrigger className="w-48 bg-muted/50 border-border/50">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="name">Sort by Name</SelectItem>
+            <SelectItem value="rating">Sort by Rating</SelectItem>
+            <SelectItem value="rides">Sort by Ride Count</SelectItem>
+            <SelectItem value="recent">Recently Added</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {/* Advanced Filters */}
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="outline" className="flex items-center gap-2">
+              <SlidersHorizontal className="w-4 h-4" />
+              Filters
+              {(filterStatus !== 'all' || filterType !== 'all') && (
+                <Badge variant="secondary" className="ml-1">
+                  {(filterStatus !== 'all' ? 1 : 0) + (filterType !== 'all' ? 1 : 0)}
+                </Badge>
+              )}
+            </Button>
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Filter Parks</SheetTitle>
+            </SheetHeader>
+            <div className="space-y-6 mt-6">
+              {/* Status Filter */}
+              <div>
+                <label className="text-sm font-medium mb-2 block">Park Status</label>
+                <Select value={filterStatus} onValueChange={setFilterStatus}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Statuses</SelectItem>
+                    <SelectItem value="operating">Operating</SelectItem>
+                    <SelectItem value="seasonal">Seasonal</SelectItem>
+                    <SelectItem value="under_construction">Under Construction</SelectItem>
+                    <SelectItem value="closed">Closed</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Type Filter */}
+              <div>
+                <label className="text-sm font-medium mb-2 block">Park Type</label>
+                <Select value={filterType} onValueChange={setFilterType}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Types</SelectItem>
+                    <SelectItem value="theme_park">Theme Park</SelectItem>
+                    <SelectItem value="amusement_park">Amusement Park</SelectItem>
+                    <SelectItem value="water_park">Water Park</SelectItem>
+                    <SelectItem value="family_entertainment">Family Entertainment</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <Button onClick={clearFilters} variant="outline" className="w-full">
+                Clear All Filters
+              </Button>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      {/* Active Filters */}
+      {(filterStatus !== 'all' || filterType !== 'all' || searchTerm) && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-sm text-muted-foreground">Active filters:</span>
+          {searchTerm && (
+            <Badge variant="secondary" onClick={() => setSearchTerm('')} className="cursor-pointer">
+              Search: {searchTerm} ✕
+            </Badge>
+          )}
+          {filterStatus !== 'all' && (
+            <Badge variant="secondary" onClick={() => setFilterStatus('all')} className="cursor-pointer">
+              Status: {filterStatus} ✕
+            </Badge>
+          )}
+          {filterType !== 'all' && (
+            <Badge variant="secondary" onClick={() => setFilterType('all')} className="cursor-pointer">
+              Type: {filterType.replace('_', ' ')} ✕
+            </Badge>
+          )}
+          <Button variant="ghost" size="sm" onClick={clearFilters}>
+            Clear all
+          </Button>
+        </div>
+      )}
+
+      {/* Results Count */}
+      <div className="text-sm text-muted-foreground">
+        Showing {filteredParks.length} of {parks.length} parks
+      </div>
+
+      {/* Parks Grid */}
+      {filteredParks.length === 0 ? (
+        <div className="text-center py-12">
+          <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
+          <h3 className="text-xl font-semibold mb-2">No parks found</h3>
+          <p className="text-muted-foreground mb-4">
+            Try adjusting your search terms or filters
+          </p>
+          <Button onClick={clearFilters} variant="outline">
+            Clear filters
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {filteredParks.map((park) => (
+            <ParkCard 
+              key={park.id} 
+              park={park}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src-old/components/parks/ParkGridView.tsx

@@ -0,0 +1,19 @@
+import { ParkCard } from './ParkCard';
+import { Park } from '@/types/database';
+
+interface ParkGridViewProps {
+  parks: Park[];
+}
+
+export function ParkGridView({ parks }: ParkGridViewProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+      {parks.map((park) => (
+        <ParkCard 
+          key={park.id} 
+          park={park} 
+        />
+      ))}
+    </div>
+  );
+}

src-old/components/parks/ParkListView.tsx

@@ -0,0 +1,176 @@
+import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent, Sparkles } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Park } from '@/types/database';
+import { cn } from '@/lib/utils';
+
+interface ParkListViewProps {
+  parks: Park[];
+  onParkClick: (park: Park) => void;
+}
+
+export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      default: return 'bg-red-500/20 text-red-400 border-red-500/30';
+    }
+  };
+
+  const getParkTypeIcon = (type: string) => {
+    switch (type) {
+      case 'theme_park': return <Castle className="w-5 h-5" />;
+      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
+      case 'water_park': return <Waves className="w-5 h-5" />;
+      case 'family_entertainment': return <Tent className="w-5 h-5" />;
+      default: return <FerrisWheel className="w-5 h-5" />;
+    }
+  };
+
+  const formatParkType = (type: string) => {
+    return type.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  return (
+    <div className="space-y-3">
+      {parks.map((park, index) => (
+        <Card 
+          key={park.id} 
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
+          onClick={() => onParkClick(park)}
+        >
+          <CardContent className="p-0">
+            <div className="flex flex-col sm:flex-row">
+              {/* Image */}
+              <div className="w-full h-40 sm:w-40 sm:h-auto md:w-48 flex-shrink-0 self-stretch relative overflow-hidden">
+                {park.card_image_url ? (
+                  <>
+                    <img 
+                      src={park.card_image_url} 
+                      alt={park.name}
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </>
+                ) : (
+                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative overflow-hidden">
+                    <span className="opacity-50 z-10 relative">
+                      {getParkTypeIcon(park.park_type)}
+                    </span>
+                    <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent group-hover:scale-110 transition-transform duration-700" />
+                  </div>
+                )}
+                
+                {/* Status Badge */}
+                <Badge 
+                  className={cn(
+                    "absolute top-2 left-2 text-xs border backdrop-blur-sm",
+                    getStatusColor(park.status)
+                  )}
+                >
+                  {park.status.replace('_', ' ').toUpperCase()}
+                </Badge>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[160px]">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
+                        {park.name}
+                      </h3>
+                      
+                      {park.location && (
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <MapPin className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
+                          <span className="line-clamp-1">
+                            {park.location.city && `${park.location.city}, `}
+                            {park.location.state_province && `${park.location.state_province}, `}
+                            {park.location.country}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {(park.average_rating != null && park.average_rating > 0) && (
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-semibold text-foreground">{park.average_rating.toFixed(1)}</span>
+                        <span className="text-xs text-muted-foreground">({park.review_count})</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Description */}
+                  {park.description && (
+                    <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 line-clamp-2">
+                      {park.description}
+                    </p>
+                  )}
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
+                      {formatParkType(park.park_type)}
+                    </Badge>
+                    {park.opening_date && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
+                        <Calendar className="w-3 h-3 mr-1" />
+                        Opened {park.opening_date.split('-')[0]}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Stats and Actions */}
+                <div className="flex items-center justify-between mt-4 pt-3 border-t border-border/50">
+                  <div className="flex items-center gap-4 md:gap-6 text-sm flex-wrap">
+                    <div className="flex items-center gap-1.5 group/stat">
+                      <Sparkles className="w-3.5 h-3.5 text-primary/60 group-hover/stat:text-primary transition-colors duration-300" />
+                      <span className="text-primary font-semibold">{park.ride_count || 0}</span>
+                      <span className="text-muted-foreground text-xs">rides</span>
+                    </div>
+                    <div className="flex items-center gap-1.5 group/stat">
+                      <FerrisWheel className="w-3.5 h-3.5 text-accent/60 group-hover/stat:text-accent transition-colors duration-300" />
+                      <span className="text-accent font-semibold">{park.coaster_count || 0}</span>
+                      <span className="text-muted-foreground text-xs">coasters</span>
+                    </div>
+                    {(park.review_count != null && park.review_count > 0) && (
+                      <div className="flex items-center gap-1.5 group/stat">
+                        <Users className="w-3.5 h-3.5 text-muted-foreground group-hover/stat:text-foreground transition-colors duration-300" />
+                        <span className="text-muted-foreground text-xs">{park.review_count} reviews</span>
+                      </div>
+                    )}
+                  </div>
+
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
+                  >
+                    <ExternalLink className="w-3.5 h-3.5 mr-1.5" />
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src-old/components/parks/ParkPhotoGallery.tsx

@@ -0,0 +1,20 @@
+import { EntityPhotoGallery } from '@/components/upload/EntityPhotoGallery';
+
+interface ParkPhotoGalleryProps {
+  parkId: string;
+  parkName: string;
+}
+
+/**
+ * Backwards-compatible wrapper for ParkPhotoGallery
+ * Uses the generic EntityPhotoGallery component internally
+ */
+export function ParkPhotoGallery({ parkId, parkName }: ParkPhotoGalleryProps) {
+  return (
+    <EntityPhotoGallery
+      entityId={parkId}
+      entityType="park"
+      entityName={parkName}
+    />
+  );
+}

src-old/components/parks/ParkSearch.tsx

@@ -0,0 +1,28 @@
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { SearchResult } from '@/hooks/useSearch';
+
+interface ParkSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  onResultSelect?: (result: SearchResult) => void;
+}
+
+export function ParkSearch({ 
+  value, 
+  onChange, 
+  placeholder = "Search parks, locations, descriptions...",
+  onResultSelect 
+}: ParkSearchProps) {
+  return (
+    <AutocompleteSearch
+      placeholder={placeholder}
+      types={['park']}
+      limit={8}
+      onSearch={(query) => onChange(query)}
+      onResultSelect={onResultSelect}
+      showRecentSearches={false}
+      className="w-full"
+    />
+  );
+}

src-old/components/parks/ParkSortOptions.tsx

@@ -0,0 +1,61 @@
+import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { SortState } from '@/pages/Parks';
+
+interface ParkSortOptionsProps {
+  sort: SortState;
+  onSortChange: (sort: SortState) => void;
+}
+
+export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
+  const sortOptions = [
+    { value: 'name', label: 'Name' },
+    { value: 'rating', label: 'Rating' },
+    { value: 'rides', label: 'Rides' },
+    { value: 'coasters', label: 'Coasters' },
+    { value: 'reviews', label: 'Reviews' },
+    { value: 'opening', label: 'Opening' },
+  ];
+
+  const toggleDirection = () => {
+    onSortChange({
+      ...sort,
+      direction: sort.direction === 'asc' ? 'desc' : 'asc'
+    });
+  };
+
+  return (
+    <div className="flex gap-2">
+      <Select 
+        value={sort.field} 
+        onValueChange={(field) => onSortChange({ ...sort, field })}
+      >
+        <SelectTrigger className="w-[160px] bg-muted/50 border-border/50">
+          <ArrowUpDown className="w-4 h-4 mr-2" />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {sortOptions.map(option => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={toggleDirection}
+        className="shrink-0 bg-muted/50 border-border/50"
+      >
+        {sort.direction === 'asc' ? (
+          <SortAsc className="w-4 h-4" />
+        ) : (
+          <SortDesc className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  );
+}