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,62 +131,142 @@ 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">
-              <div className="flex items-center gap-2 mb-1">
-                <Link 
-                  to={ridePath}
-                  className="font-semibold hover:underline truncate"
-                >
-                  {rideName}
-                </Link>
-                {isEditMode && maxPosition ? (
-                  <div className="flex items-center gap-1">
-                    <span className="text-xs text-muted-foreground">#</span>
-                    <Input
-                      type="number"
-                      value={editPosition}
-                      onChange={(e) => setEditPosition(parseInt(e.target.value) || 1)}
-                      onBlur={handlePositionChange}
-                      onKeyDown={(e) => e.key === 'Enter' && handlePositionChange()}
-                      className="w-14 h-6 text-xs p-1"
-                      min="1"
-                      max={maxPosition}
-                    />
+            <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 
+                      to={ridePath}
+                      className="font-semibold hover:underline truncate"
+                    >
+                      {rideName}
+                    </Link>
+                    {isEditMode && maxPosition ? (
+                      <div className="flex items-center gap-1">
+                        <span className="text-xs text-muted-foreground">#</span>
+                        <Input
+                          type="number"
+                          value={editPosition}
+                          onChange={(e) => setEditPosition(parseInt(e.target.value) || 1)}
+                          onBlur={handlePositionChange}
+                          onKeyDown={(e) => e.key === 'Enter' && handlePositionChange()}
+                          className="w-14 h-6 text-xs p-1"
+                          min="1"
+                          max={maxPosition}
+                        />
+                      </div>
+                    ) : (
+                      <Badge variant="secondary" className="text-xs font-semibold">
+                        #{position}
+                      </Badge>
+                    )}
+                    {getCategoryBadge(category)}
                   </div>
-                ) : (
-                  <Badge variant="secondary" className="text-xs font-semibold">
-                    #{position}
-                  </Badge>
-                )}
-                {getCategoryBadge(category)}
-              </div>
-              
-              <Link 
-                to={`/parks/${parkSlug}`}
-                className="text-sm text-muted-foreground hover:underline block truncate"
-              >
-                <MapPin className="w-3 h-3 inline mr-1" />
-                {parkName}
-              </Link>
-
-              {credit.first_ride_date && (
-                <div className="text-xs text-muted-foreground mt-1">
-                  <Calendar className="w-3 h-3 inline mr-1" />
-                  First ride: {format(new Date(credit.first_ride_date), 'MMM d, yyyy')}
+                  
+                  <Link 
+                    to={`/parks/${parkSlug}`}
+                    className="text-sm text-muted-foreground hover:underline block truncate"
+                  >
+                    <MapPin className="w-3 h-3 inline mr-1" />
+                    {parkName}
+                    {location?.city && `, ${location.city}`}
+                    {location?.state_province && `, ${location.state_province}`}
+                  </Link>
                 </div>
+              </div>
+
+              {/* Stats Grid - Enhanced */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
+                {manufacturer && (
+                  <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>
+
+              {/* 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">
+            <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)
-      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
+      // Build main query with enhanced data
       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,18 +326,32 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
       </div>
 
       {/* Credits Display */}
-      {credits.length === 0 ? (
+      {displayCredits.length === 0 ? (
         <Card>
           <CardContent className="py-12">
             <div className="text-center">
-              <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
-              </p>
-              <Button onClick={() => setIsAddDialogOpen(true)}>
-                <Plus className="w-4 h-4 mr-2" />
-                Add Your First Credit
-              </Button>
+              {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
+                  </p>
+                  <Button onClick={() => setIsAddDialogOpen(true)}>
+                    <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,29 +39,29 @@ 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={
-          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"
-        }
+        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"
       >
         <GripVertical className="w-4 h-4 text-muted-foreground" />
       </div>
       
-      <RideCreditCard
-        credit={credit}
-        position={position}
-        maxPosition={maxPosition}
-        viewMode={viewMode}
-        isEditMode={true}
-        onUpdate={onUpdate}
-        onDelete={onDelete}
-        onReorder={onReorder}
-      />
+      {/* Card takes remaining space */}
+      <div className="flex-1 min-w-0">
+        <RideCreditCard
+          credit={credit}
+          position={position}
+          maxPosition={maxPosition}
+          viewMode={viewMode}
+          isEditMode={true}
+          onUpdate={onUpdate}
+          onDelete={onDelete}
+          onReorder={onReorder}
+        />
+      </div>
     </div>
   );
 }