Approve database migration

src/components/profile/RideCreditCard.tsx

@@ -3,13 +3,14 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
-import { Calendar, MapPin, Edit, Trash2, Plus, Minus, Check, X } from 'lucide-react';
+import { Calendar, MapPin, Edit, Trash2, Plus, Minus, Check, X, Star, Factory, Gauge, Ruler, Zap } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { format } from 'date-fns';
 import { supabase } from '@/integrations/supabase/client';
 import { toast } from 'sonner';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { UserRideCredit } from '@/types/database';
+import { convertValueFromMetric, getDisplayUnit } from '@/lib/units';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -45,6 +46,13 @@ export function RideCreditCard({ credit, position, maxPosition, viewMode, isEdit
   const rideSlug = credit.rides?.slug || '';
   const imageUrl = credit.rides?.card_image_url;
   const category = credit.rides?.category || '';
+  const location = credit.rides?.parks?.locations;
+  const manufacturer = credit.rides?.manufacturer;
+  const coasterType = credit.rides?.coaster_type;
+  const maxSpeed = credit.rides?.max_speed_kmh;
+  const maxHeight = credit.rides?.max_height_meters;
+  const inversions = credit.rides?.inversions || 0;
+  const intensityLevel = credit.rides?.intensity_level;
 
   const handleUpdateCount = async () => {
     try {
@@ -123,15 +131,18 @@ export function RideCreditCard({ credit, position, maxPosition, viewMode, isEdit
     return (
       <Card>
         <CardContent className="p-4">
-          <div className="flex items-center gap-4">
+          <div className="flex items-start gap-4">
             {imageUrl && (
               <img
                 src={imageUrl}
                 alt={rideName}
-                className="w-20 h-20 object-cover rounded"
+                className="w-24 h-24 object-cover rounded flex-shrink-0"
               />
             )}
             
+            <div className="flex-1 min-w-0 space-y-2">
+              {/* Header Row */}
+              <div className="flex items-start justify-between gap-2">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
                     <Link 
@@ -168,17 +179,94 @@ export function RideCreditCard({ credit, position, maxPosition, viewMode, isEdit
                   >
                     <MapPin className="w-3 h-3 inline mr-1" />
                     {parkName}
+                    {location?.city && `, ${location.city}`}
+                    {location?.state_province && `, ${location.state_province}`}
                   </Link>
+                </div>
+              </div>
 
-              {credit.first_ride_date && (
+              {/* Stats Grid - Enhanced */}
-                <div className="text-xs text-muted-foreground mt-1">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
-                  <Calendar className="w-3 h-3 inline mr-1" />
+                {manufacturer && (
-                  First ride: {format(new Date(credit.first_ride_date), 'MMM d, yyyy')}
+                  <div className="flex items-center gap-1">
+                    <Factory className="w-3 h-3 text-muted-foreground" />
+                    <span className="truncate">{manufacturer.name}</span>
+                  </div>
+                )}
+                {coasterType && (
+                  <div className="flex items-center gap-1">
+                    <span className="text-muted-foreground">Type:</span>
+                    <span className="truncate capitalize">{coasterType.replace('_', ' ')}</span>
+                  </div>
+                )}
+                {maxSpeed && (
+                  <div className="flex items-center gap-1">
+                    <Gauge className="w-3 h-3 text-muted-foreground" />
+                    <span>{Math.round(maxSpeed)} km/h</span>
+                  </div>
+                )}
+                {maxHeight && (
+                  <div className="flex items-center gap-1">
+                    <Ruler className="w-3 h-3 text-muted-foreground" />
+                    <span>{Math.round(maxHeight)} m</span>
+                  </div>
+                )}
+                {inversions > 0 && (
+                  <div className="flex items-center gap-1">
+                    <Zap className="w-3 h-3 text-muted-foreground" />
+                    <span>{inversions} inversions</span>
+                  </div>
+                )}
+                {intensityLevel && (
+                  <div className="flex items-center gap-1">
+                    <span className="text-muted-foreground">Intensity:</span>
+                    <Badge variant="outline" className="text-xs capitalize">{intensityLevel}</Badge>
                   </div>
                 )}
               </div>
 
-            <div className="flex items-center gap-2">
+              {/* Dates */}
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                {credit.first_ride_date && (
+                  <div className="flex items-center gap-1">
+                    <Calendar className="w-3 h-3" />
+                    <span>First: {format(new Date(credit.first_ride_date), 'MMM d, yyyy')}</span>
+                  </div>
+                )}
+                {credit.last_ride_date && (
+                  <div className="flex items-center gap-1">
+                    <Calendar className="w-3 h-3" />
+                    <span>Last: {format(new Date(credit.last_ride_date), 'MMM d, yyyy')}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Personal Rating */}
+              {credit.personal_rating && (
+                <div className="flex items-center gap-1">
+                  {Array.from({ length: 5 }, (_, i) => (
+                    <Star
+                      key={i}
+                      className={`w-3 h-3 ${
+                        i < credit.personal_rating!
+                          ? 'fill-yellow-400 text-yellow-400'
+                          : 'text-muted-foreground/30'
+                      }`}
+                    />
+                  ))}
+                  <span className="text-xs text-muted-foreground ml-1">Your Rating</span>
+                </div>
+              )}
+
+              {/* Personal Notes Preview */}
+              {credit.personal_notes && (
+                <p className="text-xs italic text-muted-foreground line-clamp-2 bg-muted/30 p-2 rounded">
+                  "{credit.personal_notes}"
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2 flex-shrink-0">
               {isEditing ? (
                 <>
                   <Input

src/components/profile/RideCreditFilters.tsx

@@ -0,0 +1,419 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { RideCreditFilters as FilterTypes } from '@/types/ride-credits';
+import { UserRideCredit } from '@/types/database';
+import { Search, X, ChevronDown, MapPin, Building2, Factory, Calendar, Star, MessageSquare, Image } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface RideCreditFiltersProps {
+  filters: FilterTypes;
+  onFilterChange: (key: keyof FilterTypes, value: any) => void;
+  onClearFilters: () => void;
+  credits: UserRideCredit[];
+  activeFilterCount: number;
+  resultCount: number;
+  totalCount: number;
+}
+
+export function RideCreditFilters({
+  filters,
+  onFilterChange,
+  onClearFilters,
+  credits,
+  activeFilterCount,
+  resultCount,
+  totalCount,
+}: RideCreditFiltersProps) {
+  // Extract unique values from credits for filter options
+  const filterOptions = useMemo(() => {
+    const countries = new Set<string>();
+    const states = new Set<string>();
+    const cities = new Set<string>();
+    const parks = new Map<string, string>();
+    const manufacturers = new Map<string, string>();
+    
+    credits.forEach(credit => {
+      const location = credit.rides?.parks?.locations;
+      if (location?.country) countries.add(location.country);
+      if (location?.state_province) states.add(location.state_province);
+      if (location?.city) cities.add(location.city);
+      
+      if (credit.rides?.parks?.id && credit.rides?.parks?.name) {
+        parks.set(credit.rides.parks.id, credit.rides.parks.name);
+      }
+      
+      if (credit.rides?.manufacturer?.id && credit.rides?.manufacturer?.name) {
+        manufacturers.set(credit.rides.manufacturer.id, credit.rides.manufacturer.name);
+      }
+    });
+
+    return {
+      countries: Array.from(countries).sort(),
+      states: Array.from(states).sort(),
+      cities: Array.from(cities).sort(),
+      parks: Array.from(parks.entries()).map(([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name)),
+      manufacturers: Array.from(manufacturers.entries()).map(([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name)),
+    };
+  }, [credits]);
+
+  const maxRideCount = useMemo(() => {
+    return Math.max(...credits.map(c => c.ride_count), 1);
+  }, [credits]);
+
+  const categoryOptions = [
+    { value: 'roller_coaster', label: '🎢 Coasters', icon: '🎢' },
+    { value: 'flat_ride', label: '🎪 Flat Rides', icon: '🎪' },
+    { value: 'water_ride', label: '🌊 Water Rides', icon: '🌊' },
+    { value: 'dark_ride', label: '🌑 Dark Rides', icon: '🌑' },
+    { value: 'transport_ride', label: '🚂 Transport', icon: '🚂' },
+  ];
+
+  const toggleCategory = (category: string) => {
+    const current = filters.categories || [];
+    const updated = current.includes(category)
+      ? current.filter(c => c !== category)
+      : [...current, category];
+    onFilterChange('categories', updated.length > 0 ? updated : undefined);
+  };
+
+  const toggleArrayFilter = (key: keyof FilterTypes, value: string) => {
+    const current = (filters[key] as string[]) || [];
+    const updated = current.includes(value)
+      ? current.filter(v => v !== value)
+      : [...current, value];
+    onFilterChange(key, updated.length > 0 ? updated : undefined);
+  };
+
+  const removeFilter = (key: keyof FilterTypes, value?: string) => {
+    if (value && Array.isArray(filters[key])) {
+      const updated = (filters[key] as string[]).filter(v => v !== value);
+      onFilterChange(key, updated.length > 0 ? updated : undefined);
+    } else {
+      onFilterChange(key, undefined);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Search Bar - Always Visible */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Input
+          placeholder="Search rides, parks, manufacturers..."
+          value={filters.searchQuery || ''}
+          onChange={(e) => onFilterChange('searchQuery', e.target.value || undefined)}
+          className="pl-10 pr-10"
+        />
+        {filters.searchQuery && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
+            onClick={() => onFilterChange('searchQuery', undefined)}
+          >
+            <X className="w-3 h-3" />
+          </Button>
+        )}
+      </div>
+
+      {/* Quick Category Chips */}
+      <div className="flex flex-wrap gap-2">
+        {categoryOptions.map(cat => (
+          <Badge
+            key={cat.value}
+            variant={(filters.categories || []).includes(cat.value) ? 'default' : 'outline'}
+            className="cursor-pointer hover:bg-accent transition-colors px-3 py-1.5"
+            onClick={() => toggleCategory(cat.value)}
+          >
+            {cat.label}
+          </Badge>
+        ))}
+      </div>
+
+      {/* Collapsible Filter Sections */}
+      <div className="space-y-2">
+        {/* Geographic Filters */}
+        <Collapsible>
+          <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <MapPin className="w-4 h-4" />
+              <span className="font-medium">Location Filters</span>
+              {((filters.countries?.length || 0) + (filters.statesProvinces?.length || 0) + (filters.cities?.length || 0)) > 0 && (
+                <Badge variant="secondary" className="ml-2">
+                  {(filters.countries?.length || 0) + (filters.statesProvinces?.length || 0) + (filters.cities?.length || 0)}
+                </Badge>
+              )}
+            </div>
+            <ChevronDown className="w-4 h-4" />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="p-4 space-y-3 bg-card border rounded-lg mt-1">
+            {filterOptions.countries.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Countries</Label>
+                <div className="flex flex-wrap gap-2">
+                  {filterOptions.countries.map(country => (
+                    <Badge
+                      key={country}
+                      variant={(filters.countries || []).includes(country) ? 'default' : 'outline'}
+                      className="cursor-pointer"
+                      onClick={() => toggleArrayFilter('countries', country)}
+                    >
+                      {country}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {filterOptions.states.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">States/Provinces</Label>
+                <div className="flex flex-wrap gap-2">
+                  {filterOptions.states.map(state => (
+                    <Badge
+                      key={state}
+                      variant={(filters.statesProvinces || []).includes(state) ? 'default' : 'outline'}
+                      className="cursor-pointer"
+                      onClick={() => toggleArrayFilter('statesProvinces', state)}
+                    >
+                      {state}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+
+        {/* Park Filters */}
+        <Collapsible>
+          <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <Building2 className="w-4 h-4" />
+              <span className="font-medium">Park Filters</span>
+              {(filters.parks?.length || 0) > 0 && (
+                <Badge variant="secondary" className="ml-2">{filters.parks?.length}</Badge>
+              )}
+            </div>
+            <ChevronDown className="w-4 h-4" />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="p-4 space-y-3 bg-card border rounded-lg mt-1">
+            {filterOptions.parks.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Specific Parks</Label>
+                <div className="flex flex-wrap gap-2">
+                  {filterOptions.parks.map(park => (
+                    <Badge
+                      key={park.id}
+                      variant={(filters.parks || []).includes(park.id) ? 'default' : 'outline'}
+                      className="cursor-pointer"
+                      onClick={() => toggleArrayFilter('parks', park.id)}
+                    >
+                      {park.name}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+
+        {/* Ride Detail Filters */}
+        <Collapsible>
+          <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <Factory className="w-4 h-4" />
+              <span className="font-medium">Ride Details</span>
+              {(filters.manufacturers?.length || 0) > 0 && (
+                <Badge variant="secondary" className="ml-2">{filters.manufacturers?.length}</Badge>
+              )}
+            </div>
+            <ChevronDown className="w-4 h-4" />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="p-4 space-y-3 bg-card border rounded-lg mt-1">
+            {filterOptions.manufacturers.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Manufacturers</Label>
+                <div className="flex flex-wrap gap-2">
+                  {filterOptions.manufacturers.map(mfr => (
+                    <Badge
+                      key={mfr.id}
+                      variant={(filters.manufacturers || []).includes(mfr.id) ? 'default' : 'outline'}
+                      className="cursor-pointer"
+                      onClick={() => toggleArrayFilter('manufacturers', mfr.id)}
+                    >
+                      {mfr.name}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label>Inversions</Label>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  checked={filters.hasInversions === true}
+                  onCheckedChange={(checked) => onFilterChange('hasInversions', checked ? true : undefined)}
+                />
+                <span className="text-sm">Has inversions</span>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        {/* Statistics Filters */}
+        <Collapsible>
+          <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <Calendar className="w-4 h-4" />
+              <span className="font-medium">Statistics</span>
+              {((filters.minRideCount !== undefined) || (filters.minSpeed !== undefined) || (filters.minHeight !== undefined)) && (
+                <Badge variant="secondary" className="ml-2">Active</Badge>
+              )}
+            </div>
+            <ChevronDown className="w-4 h-4" />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="p-4 space-y-4 bg-card border rounded-lg mt-1">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>Ride Count</Label>
+                <span className="text-sm text-muted-foreground">
+                  {filters.minRideCount || 1} - {filters.maxRideCount || maxRideCount}
+                </span>
+              </div>
+              <Slider
+                value={[filters.minRideCount || 1, filters.maxRideCount || maxRideCount]}
+                min={1}
+                max={maxRideCount}
+                step={1}
+                onValueChange={([min, max]) => {
+                  onFilterChange('minRideCount', min > 1 ? min : undefined);
+                  onFilterChange('maxRideCount', max < maxRideCount ? max : undefined);
+                }}
+                className="w-full"
+              />
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        {/* Experience Filters */}
+        <Collapsible>
+          <CollapsibleTrigger className="flex items-center justify-between w-full p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
+            <div className="flex items-center gap-2">
+              <Star className="w-4 h-4" />
+              <span className="font-medium">My Experience</span>
+              {(filters.hasNotes !== undefined || filters.hasPhotos !== undefined || filters.hasRating !== undefined) && (
+                <Badge variant="secondary" className="ml-2">Active</Badge>
+              )}
+            </div>
+            <ChevronDown className="w-4 h-4" />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="p-4 space-y-3 bg-card border rounded-lg mt-1">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  checked={filters.hasNotes === true}
+                  onCheckedChange={(checked) => onFilterChange('hasNotes', checked ? true : undefined)}
+                />
+                <MessageSquare className="w-4 h-4" />
+                <span className="text-sm">Has notes</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  checked={filters.hasPhotos === true}
+                  onCheckedChange={(checked) => onFilterChange('hasPhotos', checked ? true : undefined)}
+                />
+                <Image className="w-4 h-4" />
+                <span className="text-sm">Has photos</span>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Personal Rating</Label>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  checked={filters.hasRating === true}
+                  onCheckedChange={(checked) => onFilterChange('hasRating', checked ? true : undefined)}
+                />
+                <span className="text-sm">Has rating</span>
+              </div>
+              {filters.hasRating && (
+                <Slider
+                  value={[filters.minUserRating || 1]}
+                  min={1}
+                  max={5}
+                  step={1}
+                  onValueChange={([min]) => onFilterChange('minUserRating', min > 1 ? min : undefined)}
+                  className="w-full"
+                />
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+
+      {/* Active Filters Display */}
+      {activeFilterCount > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">
+              Showing <strong>{resultCount}</strong> of <strong>{totalCount}</strong> credits
+              {activeFilterCount > 0 && ` (${activeFilterCount} ${activeFilterCount === 1 ? 'filter' : 'filters'} active)`}
+            </span>
+            <Button variant="ghost" size="sm" onClick={onClearFilters}>
+              Clear All
+            </Button>
+          </div>
+          
+          <div className="flex flex-wrap gap-2">
+            {filters.searchQuery && (
+              <Badge variant="secondary" className="gap-1">
+                Search: {filters.searchQuery}
+                <X className="w-3 h-3 cursor-pointer" onClick={() => removeFilter('searchQuery')} />
+              </Badge>
+            )}
+            {filters.categories?.map(cat => (
+              <Badge key={cat} variant="secondary" className="gap-1">
+                {categoryOptions.find(c => c.value === cat)?.icon} {cat}
+                <X className="w-3 h-3 cursor-pointer" onClick={() => removeFilter('categories', cat)} />
+              </Badge>
+            ))}
+            {filters.countries?.map(country => (
+              <Badge key={country} variant="secondary" className="gap-1">
+                📍 {country}
+                <X className="w-3 h-3 cursor-pointer" onClick={() => removeFilter('countries', country)} />
+              </Badge>
+            ))}
+            {filters.manufacturers?.map(mfrId => {
+              const mfr = filterOptions.manufacturers.find(m => m.id === mfrId);
+              return mfr && (
+                <Badge key={mfrId} variant="secondary" className="gap-1">
+                  🏭 {mfr.name}
+                  <X className="w-3 h-3 cursor-pointer" onClick={() => removeFilter('manufacturers', mfrId)} />
+                </Badge>
+              );
+            })}
+            {filters.minRideCount && filters.minRideCount > 1 && (
+              <Badge variant="secondary" className="gap-1">
+                {filters.minRideCount}+ rides
+                <X className="w-3 h-3 cursor-pointer" onClick={() => removeFilter('minRideCount')} />
+              </Badge>
+            )}
+            {filters.hasInversions && (
+              <Badge variant="secondary" className="gap-1">
+                Has inversions
+                <X className="w-3 h-3 cursor-pointer" onClick={() => removeFilter('hasInversions')} />
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/profile/RideCreditsManager.tsx

@@ -9,7 +9,9 @@ import { getErrorMessage } from '@/lib/errorHandler';
 import { AddRideCreditDialog } from './AddRideCreditDialog';
 import { RideCreditCard } from './RideCreditCard';
 import { SortableRideCreditCard } from './SortableRideCreditCard';
+import { RideCreditFilters } from './RideCreditFilters';
 import { UserRideCredit } from '@/types/database';
+import { useRideCreditFilters } from '@/hooks/useRideCreditFilters';
 import {
   DndContext,
   DragEndEvent,
@@ -33,10 +35,18 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
   const [loading, setLoading] = useState(true);
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [sortBy, setSortBy] = useState<'date' | 'count' | 'name' | 'custom'>('custom');
-  const [filterCategory, setFilterCategory] = useState<string>('all');
   const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
 
+  // Use the filter hook
+  const {
+    filters,
+    updateFilter,
+    clearFilters,
+    filteredCredits,
+    activeFilterCount,
+  } = useRideCreditFilters(credits);
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -47,25 +57,13 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
 
   useEffect(() => {
     fetchCredits();
-  }, [userId, sortBy, filterCategory]);
+  }, [userId, sortBy]);
 
   const fetchCredits = async () => {
     try {
       setLoading(true);
       
-      // First, get ride IDs that match the category filter (if any)
+      // Build main query with enhanced data
-      let rideIdsToFilter: string[] | null = null;
-      if (filterCategory !== 'all') {
-        const { data: filteredRides, error: rideError } = await supabase
-          .from('rides')
-          .select('id')
-          .eq('category', filterCategory);
-        
-        if (rideError) throw rideError;
-        rideIdsToFilter = filteredRides.map(r => r.id);
-      }
-      
-      // Build main query
       let query = supabase
         .from('user_ride_credits')
         .select(`
@@ -75,36 +73,46 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
             name,
             slug,
             category,
+            status,
+            coaster_type,
+            seating_type,
+            intensity_level,
+            max_speed_kmh,
+            max_height_meters,
+            length_meters,
+            inversions,
             card_image_url,
             parks:park_id (
               id,
               name,
-              slug
+              slug,
+              park_type,
+              locations:location_id (
+                country,
+                state_province,
+                city
+              )
+            ),
+            manufacturer:manufacturer_id (
+              id,
+              name
+            ),
+            designer:designer_id (
+              id,
+              name
             )
           )
         `)
         .eq('user_id', userId);
       
-      // Apply ride ID filter if category filter is active
-      if (rideIdsToFilter && rideIdsToFilter.length > 0) {
-        query = query.in('ride_id', rideIdsToFilter);
-      } else if (rideIdsToFilter && rideIdsToFilter.length === 0) {
-        // No rides match the category - return empty
-        setCredits([]);
-        setLoading(false);
-        return;
-      }
-      
       // Apply sorting - default to sort_order when available
       if (sortBy === 'date') {
         query = query.order('first_ride_date', { ascending: false, nullsFirst: false });
       } else if (sortBy === 'count') {
         query = query.order('ride_count', { ascending: false });
       } else if (sortBy === 'name') {
-        // Note: Can't order by joined table - we'll sort client-side
         query = query.order('created_at', { ascending: false });
       } else {
-        // Default to custom sort order
         query = query.order('sort_order', { ascending: true, nullsFirst: false });
       }
       
@@ -206,6 +214,9 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
     coasters: credits.filter(c => c.rides?.category === 'roller_coaster').length
   };
 
+  // Use filtered credits for display
+  const displayCredits = filteredCredits;
+
   if (loading) {
     return (
       <div className="space-y-4">
@@ -250,6 +261,21 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
         </Card>
       </div>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="pt-6">
+          <RideCreditFilters
+            filters={filters}
+            onFilterChange={updateFilter}
+            onClearFilters={clearFilters}
+            credits={credits}
+            activeFilterCount={activeFilterCount}
+            resultCount={displayCredits.length}
+            totalCount={credits.length}
+          />
+        </CardContent>
+      </Card>
+
       {/* Controls */}
       <div className="flex flex-wrap gap-4 items-center justify-between">
         <div className="flex gap-2">
@@ -268,19 +294,6 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
         </div>
 
         <div className="flex gap-2">
-          <Select value={filterCategory} onValueChange={setFilterCategory}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Filter by type" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Rides</SelectItem>
-              <SelectItem value="roller_coaster">Roller Coasters</SelectItem>
-              <SelectItem value="flat_ride">Flat Rides</SelectItem>
-              <SelectItem value="water_ride">Water Rides</SelectItem>
-              <SelectItem value="dark_ride">Dark Rides</SelectItem>
-            </SelectContent>
-          </Select>
-
           <Select value={sortBy} onValueChange={(value) => setSortBy(value as typeof sortBy)}>
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder="Sort by" />
@@ -313,10 +326,12 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
       </div>
 
       {/* Credits Display */}
-      {credits.length === 0 ? (
+      {displayCredits.length === 0 ? (
         <Card>
           <CardContent className="py-12">
             <div className="text-center">
+              {credits.length === 0 ? (
+                <>
                   <h3 className="text-xl font-semibold mb-2">No Ride Credits Yet</h3>
                   <p className="text-muted-foreground mb-4">
                     Start tracking your ride experiences
@@ -325,6 +340,18 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
                     <Plus className="w-4 h-4 mr-2" />
                     Add Your First Credit
                   </Button>
+                </>
+              ) : (
+                <>
+                  <h3 className="text-xl font-semibold mb-2">No Results Found</h3>
+                  <p className="text-muted-foreground mb-4">
+                    Try adjusting your filters
+                  </p>
+                  <Button onClick={clearFilters} variant="outline">
+                    Clear Filters
+                  </Button>
+                </>
+              )}
             </div>
           </CardContent>
         </Card>
@@ -335,19 +362,19 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
           onDragEnd={handleDragEnd}
         >
           <SortableContext
-            items={credits.map(c => c.id)}
+            items={displayCredits.map(c => c.id)}
             strategy={verticalListSortingStrategy}
           >
             <div className={viewMode === 'grid' 
               ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
               : 'space-y-4'
             }>
-              {credits.map((credit, index) => (
+              {displayCredits.map((credit, index) => (
                 <SortableRideCreditCard
                   key={credit.id}
                   credit={credit}
                   position={index + 1}
-                  maxPosition={credits.length}
+                  maxPosition={displayCredits.length}
                   viewMode={viewMode}
                   onUpdate={handleCreditUpdated}
                   onDelete={() => handleCreditDeleted(credit.id)}
@@ -362,7 +389,7 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
           ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
           : 'space-y-4'
         }>
-          {credits.map((credit, index) => (
+          {displayCredits.map((credit, index) => (
             <RideCreditCard
               key={credit.id}
               credit={credit}

src/components/profile/SortableRideCreditCard.tsx

@@ -39,19 +39,18 @@ export function SortableRideCreditCard({
   };
 
   return (
-    <div ref={setNodeRef} style={style} className="relative">
+    <div ref={setNodeRef} style={style} className="flex gap-2 items-start">
+      {/* Drag handle - external to card */}
       <div
         {...attributes}
         {...listeners}
-        className={
+        className="flex-shrink-0 cursor-grab active:cursor-grabbing p-2 rounded-md bg-background border hover:bg-accent transition-colors self-stretch flex items-center"
-          viewMode === 'grid'
-            ? "absolute top-2 right-2 z-10 cursor-grab active:cursor-grabbing p-2 rounded-full bg-background/90 backdrop-blur-sm hover:bg-accent transition-colors shadow-md"
-            : "absolute left-0 top-1/2 -translate-y-1/2 z-10 cursor-grab active:cursor-grabbing p-2 rounded-r-md bg-background/90 backdrop-blur-sm hover:bg-accent transition-colors"
-        }
       >
         <GripVertical className="w-4 h-4 text-muted-foreground" />
       </div>
       
+      {/* Card takes remaining space */}
+      <div className="flex-1 min-w-0">
         <RideCreditCard
           credit={credit}
           position={position}
@@ -63,5 +62,6 @@ export function SortableRideCreditCard({
           onReorder={onReorder}
         />
       </div>
+    </div>
   );
 }

src/hooks/useRideCreditFilters.ts

@@ -0,0 +1,234 @@
+import { useState, useMemo, useCallback } from 'react';
+import { useDebounce } from '@/hooks/useDebounce';
+import { RideCreditFilters, FilterPreset } from '@/types/ride-credits';
+import { UserRideCredit } from '@/types/database';
+
+export function useRideCreditFilters(credits: UserRideCredit[]) {
+  const [filters, setFilters] = useState<RideCreditFilters>({});
+  const debouncedSearchQuery = useDebounce(filters.searchQuery || '', 300);
+
+  const updateFilter = useCallback((key: keyof RideCreditFilters, value: any) => {
+    setFilters(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    setFilters({});
+  }, []);
+
+  const applyPreset = useCallback((preset: FilterPreset) => {
+    switch (preset) {
+      case 'mostRidden':
+        setFilters({ minRideCount: 10 });
+        break;
+      case 'recentlyAdded':
+        // Will be sorted by date
+        setFilters({});
+        break;
+      case 'singleRides':
+        setFilters({ minRideCount: 1, maxRideCount: 1 });
+        break;
+      case 'needRating':
+        setFilters({ hasRating: false });
+        break;
+      case 'highlyRated':
+        setFilters({ hasRating: true, minUserRating: 4 });
+        break;
+      case 'all':
+      default:
+        clearFilters();
+        break;
+    }
+  }, [clearFilters]);
+
+  const filteredCredits = useMemo(() => {
+    let result = [...credits];
+
+    // Search filter
+    if (debouncedSearchQuery) {
+      const search = debouncedSearchQuery.toLowerCase();
+      result = result.filter(credit => 
+        credit.rides?.name?.toLowerCase().includes(search) ||
+        credit.rides?.parks?.name?.toLowerCase().includes(search)
+      );
+    }
+
+    // Categories
+    if (filters.categories && filters.categories.length > 0) {
+      result = result.filter(credit =>
+        filters.categories!.includes(credit.rides?.category || '')
+      );
+    }
+
+    // Geographic filters
+    if (filters.countries && filters.countries.length > 0) {
+      result = result.filter(credit =>
+        filters.countries!.includes(credit.rides?.parks?.locations?.country || '')
+      );
+    }
+
+    if (filters.statesProvinces && filters.statesProvinces.length > 0) {
+      result = result.filter(credit =>
+        filters.statesProvinces!.includes(credit.rides?.parks?.locations?.state_province || '')
+      );
+    }
+
+    if (filters.cities && filters.cities.length > 0) {
+      result = result.filter(credit =>
+        filters.cities!.includes(credit.rides?.parks?.locations?.city || '')
+      );
+    }
+
+    // Park filters
+    if (filters.parks && filters.parks.length > 0) {
+      result = result.filter(credit =>
+        filters.parks!.includes(credit.rides?.parks?.id || '')
+      );
+    }
+
+    if (filters.parkTypes && filters.parkTypes.length > 0) {
+      result = result.filter(credit =>
+        filters.parkTypes!.includes(credit.rides?.parks?.park_type || '')
+      );
+    }
+
+    // Manufacturers
+    if (filters.manufacturers && filters.manufacturers.length > 0) {
+      result = result.filter(credit =>
+        credit.rides?.manufacturer?.id &&
+        filters.manufacturers!.includes(credit.rides.manufacturer.id)
+      );
+    }
+
+    // Ride count range
+    if (filters.minRideCount !== undefined) {
+      result = result.filter(credit => credit.ride_count >= filters.minRideCount!);
+    }
+
+    if (filters.maxRideCount !== undefined) {
+      result = result.filter(credit => credit.ride_count <= filters.maxRideCount!);
+    }
+
+    // Speed range
+    if (filters.minSpeed !== undefined || filters.maxSpeed !== undefined) {
+      result = result.filter(credit => {
+        const speed = credit.rides?.max_speed_kmh;
+        if (!speed) return false;
+        if (filters.minSpeed && speed < filters.minSpeed) return false;
+        if (filters.maxSpeed && speed > filters.maxSpeed) return false;
+        return true;
+      });
+    }
+
+    // Height range
+    if (filters.minHeight !== undefined || filters.maxHeight !== undefined) {
+      result = result.filter(credit => {
+        const height = credit.rides?.max_height_meters;
+        if (!height) return false;
+        if (filters.minHeight && height < filters.minHeight) return false;
+        if (filters.maxHeight && height > filters.maxHeight) return false;
+        return true;
+      });
+    }
+
+    // Inversions
+    if (filters.hasInversions !== undefined) {
+      result = result.filter(credit => {
+        const inversions = credit.rides?.inversions || 0;
+        return filters.hasInversions ? inversions > 0 : inversions === 0;
+      });
+    }
+
+    if (filters.minInversions !== undefined) {
+      result = result.filter(credit => {
+        const inversions = credit.rides?.inversions || 0;
+        return inversions >= filters.minInversions!;
+      });
+    }
+
+    // User rating
+    if (filters.hasRating === true) {
+      result = result.filter(credit => credit.personal_rating !== null);
+    } else if (filters.hasRating === false) {
+      result = result.filter(credit => credit.personal_rating === null);
+    }
+
+    if (filters.minUserRating !== undefined) {
+      result = result.filter(credit =>
+        (credit.personal_rating || 0) >= filters.minUserRating!
+      );
+    }
+
+    // Notes
+    if (filters.hasNotes === true) {
+      result = result.filter(credit => 
+        credit.personal_notes && credit.personal_notes.trim().length > 0
+      );
+    } else if (filters.hasNotes === false) {
+      result = result.filter(credit => 
+        !credit.personal_notes || credit.personal_notes.trim().length === 0
+      );
+    }
+
+    // Photos
+    if (filters.hasPhotos === true) {
+      result = result.filter(credit => credit.personal_photo_id !== null);
+    } else if (filters.hasPhotos === false) {
+      result = result.filter(credit => credit.personal_photo_id === null);
+    }
+
+    // Date ranges
+    if (filters.firstRideDateFrom) {
+      result = result.filter(credit =>
+        credit.first_ride_date &&
+        new Date(credit.first_ride_date) >= filters.firstRideDateFrom!
+      );
+    }
+
+    if (filters.firstRideDateTo) {
+      result = result.filter(credit =>
+        credit.first_ride_date &&
+        new Date(credit.first_ride_date) <= filters.firstRideDateTo!
+      );
+    }
+
+    if (filters.lastRideDateFrom) {
+      result = result.filter(credit =>
+        credit.last_ride_date &&
+        new Date(credit.last_ride_date) >= filters.lastRideDateFrom!
+      );
+    }
+
+    if (filters.lastRideDateTo) {
+      result = result.filter(credit =>
+        credit.last_ride_date &&
+        new Date(credit.last_ride_date) <= filters.lastRideDateTo!
+      );
+    }
+
+    // Ride status
+    if (filters.rideStatuses && filters.rideStatuses.length > 0) {
+      result = result.filter(credit =>
+        filters.rideStatuses!.includes(credit.rides?.status || '')
+      );
+    }
+
+    return result;
+  }, [credits, filters, debouncedSearchQuery]);
+
+  const activeFilterCount = useMemo(() => {
+    return Object.entries(filters).filter(([_, value]) => {
+      if (Array.isArray(value)) return value.length > 0;
+      if (typeof value === 'boolean') return true;
+      return value !== undefined && value !== null && value !== '';
+    }).length;
+  }, [filters]);
+
+  return {
+    filters,
+    updateFilter,
+    clearFilters,
+    applyPreset,
+    filteredCredits,
+    activeFilterCount,
+  };
+}

src/integrations/supabase/types.ts

@@ -3182,6 +3182,10 @@ export type Database = {
           created_at: string
           first_ride_date: string | null
           id: string
+          last_ride_date: string | null
+          personal_notes: string | null
+          personal_photo_id: string | null
+          personal_rating: number | null
           ride_count: number | null
           ride_id: string
           sort_order: number | null
@@ -3192,6 +3196,10 @@ export type Database = {
           created_at?: string
           first_ride_date?: string | null
           id?: string
+          last_ride_date?: string | null
+          personal_notes?: string | null
+          personal_photo_id?: string | null
+          personal_rating?: number | null
           ride_count?: number | null
           ride_id: string
           sort_order?: number | null
@@ -3202,6 +3210,10 @@ export type Database = {
           created_at?: string
           first_ride_date?: string | null
           id?: string
+          last_ride_date?: string | null
+          personal_notes?: string | null
+          personal_photo_id?: string | null
+          personal_rating?: number | null
           ride_count?: number | null
           ride_id?: string
           sort_order?: number | null

src/types/database.ts

@@ -287,10 +287,20 @@ export interface UserRideCredit {
   user_id: string;
   ride_id: string;
   first_ride_date?: string;
+  last_ride_date?: string;
   ride_count: number;
+  sort_order?: number;
+  personal_notes?: string;
+  personal_rating?: number;
+  personal_photo_id?: string;
   created_at: string;
   updated_at: string;
-  rides?: Ride & { parks?: Park };
+  rides?: Ride & { 
+    parks?: Park & { locations?: Location };
+    manufacturers?: Company;
+    designers?: Company;
+    ride_models?: any;
+  };
 }
 
 // Activity entry - discriminated union for different activity types

src/types/ride-credits.ts

@@ -0,0 +1,64 @@
+export interface RideCreditFilters {
+  // Search
+  searchQuery?: string;
+  
+  // Category (Multi-select)
+  categories?: string[];
+  
+  // Geographic
+  countries?: string[];
+  statesProvinces?: string[];
+  cities?: string[];
+  
+  // Park
+  parks?: string[];
+  parkTypes?: string[];
+  operators?: string[];
+  propertyOwners?: string[];
+  
+  // Ride Details
+  manufacturers?: string[];
+  designers?: string[];
+  rideModels?: string[];
+  coasterTypes?: string[];
+  seatingTypes?: string[];
+  intensityLevels?: string[];
+  trackMaterial?: string[];
+  
+  // Statistics
+  minRideCount?: number;
+  maxRideCount?: number;
+  minSpeed?: number;
+  maxSpeed?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  minLength?: number;
+  maxLength?: number;
+  minInversions?: number;
+  hasInversions?: boolean;
+  
+  // Dates
+  firstRideDateFrom?: Date;
+  firstRideDateTo?: Date;
+  lastRideDateFrom?: Date;
+  lastRideDateTo?: Date;
+  rideOpeningYearFrom?: number;
+  rideOpeningYearTo?: number;
+  
+  // User Experience
+  hasNotes?: boolean;
+  hasPhotos?: boolean;
+  hasRating?: boolean;
+  minUserRating?: number;
+  
+  // Ride Status
+  rideStatuses?: string[];
+}
+
+export type FilterPreset = 
+  | 'mostRidden'
+  | 'recentlyAdded'
+  | 'singleRides'
+  | 'needRating'
+  | 'highlyRated'
+  | 'all';

supabase/migrations/20251016153321_bde00850-3566-4b1a-9b16-d403561257c8.sql

@@ -0,0 +1,57 @@
+-- Add enhanced user experience columns to user_ride_credits
+ALTER TABLE user_ride_credits
+ADD COLUMN IF NOT EXISTS last_ride_date DATE,
+ADD COLUMN IF NOT EXISTS personal_notes TEXT,
+ADD COLUMN IF NOT EXISTS personal_rating INTEGER CHECK (personal_rating BETWEEN 1 AND 5),
+ADD COLUMN IF NOT EXISTS personal_photo_id TEXT;
+
+-- Add indexes for faster filtering
+CREATE INDEX IF NOT EXISTS idx_user_ride_credits_rating 
+ON user_ride_credits(user_id, personal_rating) WHERE personal_rating IS NOT NULL;
+
+CREATE INDEX IF NOT EXISTS idx_user_ride_credits_dates 
+ON user_ride_credits(user_id, first_ride_date, last_ride_date);
+
+CREATE INDEX IF NOT EXISTS idx_user_ride_credits_notes 
+ON user_ride_credits(user_id) WHERE personal_notes IS NOT NULL;
+
+-- Update the auto_add_ride_credit_on_review trigger to set last_ride_date
+CREATE OR REPLACE FUNCTION public.auto_add_ride_credit_on_review()
+RETURNS TRIGGER
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+BEGIN
+  -- Only proceed if ride_id is set
+  IF NEW.ride_id IS NULL THEN
+    RETURN NEW;
+  END IF;
+
+  -- Check if credit exists
+  IF EXISTS (
+    SELECT 1 FROM user_ride_credits
+    WHERE user_id = NEW.user_id AND ride_id = NEW.ride_id
+  ) THEN
+    -- Update existing credit: increment count and update last_ride_date if visit_date is provided
+    UPDATE user_ride_credits
+    SET 
+      ride_count = ride_count + 1,
+      last_ride_date = COALESCE(NEW.visit_date, CURRENT_DATE),
+      updated_at = NOW()
+    WHERE user_id = NEW.user_id AND ride_id = NEW.ride_id;
+  ELSE
+    -- Insert new credit with visit_date as both first and last
+    INSERT INTO user_ride_credits (user_id, ride_id, first_ride_date, last_ride_date, ride_count)
+    VALUES (
+      NEW.user_id,
+      NEW.ride_id,
+      COALESCE(NEW.visit_date, CURRENT_DATE),
+      COALESCE(NEW.visit_date, CURRENT_DATE),
+      1
+    );
+  END IF;
+
+  RETURN NEW;
+END;
+$$;