feat: Implement complete plan for "coming soon" placeholders

src/components/admin/ParkForm.tsx

@@ -22,7 +22,11 @@ import { Combobox } from '@/components/ui/combobox';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useOperators, usePropertyOwners } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
+import type { TempCompanyData } from '@/types/company';
 import { LocationSearch } from './LocationSearch';
+import { OperatorForm } from './OperatorForm';
+import { PropertyOwnerForm } from './PropertyOwnerForm';
 
 const parkSchema = z.object({
   name: z.string().min(1, 'Park name is required'),
@@ -112,14 +116,16 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
     validateSubmissionHandler(onSubmit, 'park');
   }, [onSubmit]);
   
+  const { user } = useAuth();
+  
   // Operator state
   const [selectedOperatorId, setSelectedOperatorId] = useState<string>(initialData?.operator_id || '');
-  const [tempNewOperator, setTempNewOperator] = useState<{ name: string; slug: string; company_type: string } | null>(null);
+  const [tempNewOperator, setTempNewOperator] = useState<TempCompanyData | null>(null);
   const [isOperatorModalOpen, setIsOperatorModalOpen] = useState(false);
 
   // Property Owner state
   const [selectedPropertyOwnerId, setSelectedPropertyOwnerId] = useState<string>(initialData?.property_owner_id || '');
-  const [tempNewPropertyOwner, setTempNewPropertyOwner] = useState<{ name: string; slug: string; company_type: string } | null>(null);
+  const [tempNewPropertyOwner, setTempNewPropertyOwner] = useState<TempCompanyData | null>(null);
   const [isPropertyOwnerModalOpen, setIsPropertyOwnerModalOpen] = useState(false);
 
   // Fetch data
@@ -488,29 +494,33 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
           </div>
         </form>
 
-        {/* Operator Modal - Placeholder */}
+        {/* Operator Modal */}
         <Dialog open={isOperatorModalOpen} onOpenChange={setIsOperatorModalOpen}>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-            <DialogHeader>
-              <DialogTitle>Create New Operator</DialogTitle>
-              <DialogDescription>
-                Add a new park operator company
-              </DialogDescription>
-            </DialogHeader>
-            <p className="text-muted-foreground">Operator form coming soon...</p>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <OperatorForm
+              initialData={tempNewOperator}
+              onSubmit={(data) => {
+                setTempNewOperator(data);
+                setIsOperatorModalOpen(false);
+                setValue('operator_id', 'temp-operator');
+              }}
+              onCancel={() => setIsOperatorModalOpen(false)}
+            />
           </DialogContent>
         </Dialog>
 
-        {/* Property Owner Modal - Placeholder */}
+        {/* Property Owner Modal */}
         <Dialog open={isPropertyOwnerModalOpen} onOpenChange={setIsPropertyOwnerModalOpen}>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-            <DialogHeader>
-              <DialogTitle>Create New Property Owner</DialogTitle>
-              <DialogDescription>
-                Add a new park property owner company
-              </DialogDescription>
-            </DialogHeader>
-            <p className="text-muted-foreground">Property owner form coming soon...</p>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <PropertyOwnerForm
+              initialData={tempNewPropertyOwner}
+              onSubmit={(data) => {
+                setTempNewPropertyOwner(data);
+                setIsPropertyOwnerModalOpen(false);
+                setValue('property_owner_id', 'temp-property-owner');
+              }}
+              onCancel={() => setIsPropertyOwnerModalOpen(false)}
+            />
           </DialogContent>
         </Dialog>
       </CardContent>

src/components/profile/AddRideCreditDialog.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from 'sonner';
+import { getErrorMessage } from '@/lib/errorHandler';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { cn } from '@/lib/utils';
+
+interface AddRideCreditDialogProps {
+  userId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+}
+
+export function AddRideCreditDialog({ userId, open, onOpenChange, onSuccess }: AddRideCreditDialogProps) {
+  const [selectedRideId, setSelectedRideId] = useState<string>('');
+  const [firstRideDate, setFirstRideDate] = useState<Date | undefined>(undefined);
+  const [rideCount, setRideCount] = useState(1);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!selectedRideId) {
+      toast.error('Please select a ride');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+
+      // Check if credit already exists
+      const { data: existing } = await supabase
+        .from('user_ride_credits')
+        .select('id')
+        .eq('user_id', userId)
+        .eq('ride_id', selectedRideId)
+        .maybeSingle();
+
+      if (existing) {
+        toast.error('You already have a credit for this ride');
+        return;
+      }
+
+      const { error } = await supabase
+        .from('user_ride_credits')
+        .insert({
+          user_id: userId,
+          ride_id: selectedRideId,
+          first_ride_date: firstRideDate ? format(firstRideDate, 'yyyy-MM-dd') : null,
+          ride_count: rideCount
+        });
+
+      if (error) throw error;
+
+      toast.success('Ride credit added!');
+      onSuccess();
+      handleReset();
+    } catch (error) {
+      console.error('Error adding credit:', error);
+      toast.error(getErrorMessage(error));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleReset = () => {
+    setSelectedRideId('');
+    setFirstRideDate(undefined);
+    setRideCount(1);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add Ride Credit</DialogTitle>
+          <DialogDescription>
+            Log a ride you've experienced
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label>Search for a Ride</Label>
+            <AutocompleteSearch
+              onResultSelect={(result) => {
+                if (result.type === 'ride') {
+                  setSelectedRideId(result.id);
+                }
+              }}
+              types={['ride']}
+              placeholder="Search rides..."
+              className="w-full"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>First Ride Date (Optional)</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    'w-full justify-start text-left font-normal',
+                    !firstRideDate && 'text-muted-foreground'
+                  )}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {firstRideDate ? format(firstRideDate, 'PPP') : 'Pick a date'}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={firstRideDate}
+                  onSelect={setFirstRideDate}
+                  initialFocus
+                  disabled={(date) => date > new Date()}
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="ride-count">Number of Rides</Label>
+            <Input
+              id="ride-count"
+              type="number"
+              min="1"
+              value={rideCount}
+              onChange={(e) => setRideCount(parseInt(e.target.value) || 1)}
+            />
+          </div>
+
+          <div className="flex gap-2 justify-end">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={submitting || !selectedRideId}>
+              {submitting ? 'Adding...' : 'Add Credit'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/profile/RideCreditCard.tsx

@@ -0,0 +1,345 @@
+import { useState } from 'react';
+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 { 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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface RideCreditCardProps {
+  credit: UserRideCredit;
+  viewMode: 'grid' | 'list';
+  onUpdate: () => void;
+  onDelete: () => void;
+}
+
+export function RideCreditCard({ credit, viewMode, onUpdate, onDelete }: RideCreditCardProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editCount, setEditCount] = useState(credit.ride_count);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [updating, setUpdating] = useState(false);
+
+  const rideName = credit.rides?.name || 'Unknown Ride';
+  const parkName = credit.rides?.parks?.name || 'Unknown Park';
+  const parkSlug = credit.rides?.parks?.slug || '';
+  const rideSlug = credit.rides?.slug || '';
+  const imageUrl = credit.rides?.card_image_url;
+  const category = credit.rides?.category || '';
+
+  const handleUpdateCount = async () => {
+    try {
+      setUpdating(true);
+      const { error } = await supabase
+        .from('user_ride_credits')
+        .update({ ride_count: editCount })
+        .eq('id', credit.id);
+
+      if (error) throw error;
+
+      toast.success('Ride count updated');
+      setIsEditing(false);
+      onUpdate();
+    } catch (error) {
+      console.error('Error updating count:', error);
+      toast.error(getErrorMessage(error));
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const handleQuickIncrement = async () => {
+    try {
+      const newCount = credit.ride_count + 1;
+      const { error } = await supabase
+        .from('user_ride_credits')
+        .update({ ride_count: newCount })
+        .eq('id', credit.id);
+
+      if (error) throw error;
+
+      toast.success('Ride count increased');
+      onUpdate();
+    } catch (error) {
+      console.error('Error incrementing count:', error);
+      toast.error(getErrorMessage(error));
+    }
+  };
+
+  const getCategoryBadge = (category: string) => {
+    const categoryMap: Record<string, { label: string; variant: 'default' | 'secondary' | 'outline' }> = {
+      roller_coaster: { label: 'Coaster', variant: 'default' },
+      flat_ride: { label: 'Flat Ride', variant: 'secondary' },
+      water_ride: { label: 'Water Ride', variant: 'outline' },
+      dark_ride: { label: 'Dark Ride', variant: 'outline' },
+    };
+    const info = categoryMap[category] || { label: category, variant: 'outline' as const };
+    return <Badge variant={info.variant}>{info.label}</Badge>;
+  };
+
+  const ridePath = parkSlug && rideSlug 
+    ? `/parks/${parkSlug}/rides/${rideSlug}` 
+    : '#';
+
+  if (viewMode === 'list') {
+    return (
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center gap-4">
+            {imageUrl && (
+              <img
+                src={imageUrl}
+                alt={rideName}
+                className="w-20 h-20 object-cover rounded"
+              />
+            )}
+            
+            <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>
+                {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')}
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {isEditing ? (
+                <>
+                  <Input
+                    type="number"
+                    value={editCount}
+                    onChange={(e) => setEditCount(parseInt(e.target.value) || 1)}
+                    className="w-20"
+                    min="1"
+                  />
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleUpdateCount}
+                    disabled={updating}
+                  >
+                    <Check className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => {
+                      setIsEditing(false);
+                      setEditCount(credit.ride_count);
+                    }}
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold">{credit.ride_count}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {credit.ride_count === 1 ? 'ride' : 'rides'}
+                    </div>
+                  </div>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleQuickIncrement}
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => setIsEditing(true)}
+                  >
+                    <Edit className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => setShowDeleteDialog(true)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        </CardContent>
+
+        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete Ride Credit?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will remove {rideName} from your ride credits. This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={onDelete}>Delete</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </Card>
+    );
+  }
+
+  // Grid view
+  return (
+    <Card className="overflow-hidden">
+      {imageUrl && (
+        <div className="aspect-video relative">
+          <img
+            src={imageUrl}
+            alt={rideName}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+      
+      <CardContent className="p-4">
+        <div className="space-y-3">
+          <div>
+            <div className="flex items-start justify-between gap-2 mb-1">
+              <Link 
+                to={ridePath}
+                className="font-semibold hover:underline line-clamp-2"
+              >
+                {rideName}
+              </Link>
+              {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>
+          </div>
+
+          {credit.first_ride_date && (
+            <div className="text-xs text-muted-foreground">
+              <Calendar className="w-3 h-3 inline mr-1" />
+              {format(new Date(credit.first_ride_date), 'MMM d, yyyy')}
+            </div>
+          )}
+
+          <div className="flex items-center justify-between pt-2 border-t">
+            {isEditing ? (
+              <div className="flex items-center gap-2 flex-1">
+                <Input
+                  type="number"
+                  value={editCount}
+                  onChange={(e) => setEditCount(parseInt(e.target.value) || 1)}
+                  className="w-20"
+                  min="1"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleUpdateCount}
+                  disabled={updating}
+                >
+                  <Check className="w-4 h-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setIsEditing(false);
+                    setEditCount(credit.ride_count);
+                  }}
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+            ) : (
+              <>
+                <div className="text-sm">
+                  <span className="font-bold text-lg">{credit.ride_count}</span>
+                  <span className="text-muted-foreground ml-1">
+                    {credit.ride_count === 1 ? 'ride' : 'rides'}
+                  </span>
+                </div>
+                
+                <div className="flex gap-1">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={handleQuickIncrement}
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => setIsEditing(true)}
+                  >
+                    <Edit className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => setShowDeleteDialog(true)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </CardContent>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Ride Credit?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will remove {rideName} from your ride credits. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={onDelete}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Card>
+  );
+}

src/components/profile/RideCreditsManager.tsx

@@ -0,0 +1,249 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Plus, LayoutGrid, List } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from 'sonner';
+import { getErrorMessage } from '@/lib/errorHandler';
+import { AddRideCreditDialog } from './AddRideCreditDialog';
+import { RideCreditCard } from './RideCreditCard';
+import { UserRideCredit } from '@/types/database';
+
+interface RideCreditsManagerProps {
+  userId: string;
+}
+
+export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
+  const [credits, setCredits] = useState<UserRideCredit[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [sortBy, setSortBy] = useState<'date' | 'count' | 'name'>('date');
+  const [filterCategory, setFilterCategory] = useState<string>('all');
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+
+  useEffect(() => {
+    fetchCredits();
+  }, [userId, sortBy, filterCategory]);
+
+  const fetchCredits = async () => {
+    try {
+      setLoading(true);
+      let query = supabase
+        .from('user_ride_credits')
+        .select(`
+          *,
+          rides:ride_id (
+            id,
+            name,
+            slug,
+            category,
+            card_image_url,
+            parks:park_id (
+              id,
+              name,
+              slug
+            )
+          )
+        `)
+        .eq('user_id', userId);
+
+      if (filterCategory !== 'all') {
+        query = query.eq('rides.category', filterCategory);
+      }
+
+      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') {
+        query = query.order('rides(name)', { ascending: true });
+      }
+
+      const { data, error } = await query;
+      if (error) throw error;
+      
+      // Type assertion since the query returns properly structured data
+      setCredits((data || []) as UserRideCredit[]);
+    } catch (error) {
+      console.error('Error fetching ride credits:', error);
+      toast.error(getErrorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreditAdded = () => {
+    fetchCredits();
+    setIsAddDialogOpen(false);
+  };
+
+  const handleCreditUpdated = () => {
+    fetchCredits();
+  };
+
+  const handleCreditDeleted = async (creditId: string) => {
+    try {
+      const { error } = await supabase
+        .from('user_ride_credits')
+        .delete()
+        .eq('id', creditId)
+        .eq('user_id', userId);
+
+      if (error) throw error;
+      
+      toast.success('Ride credit removed');
+      fetchCredits();
+    } catch (error) {
+      console.error('Error deleting credit:', error);
+      toast.error(getErrorMessage(error));
+    }
+  };
+
+  const stats = {
+    totalRides: credits.reduce((sum, c) => sum + c.ride_count, 0),
+    uniqueCredits: credits.length,
+    parksVisited: new Set(credits.map(c => c.rides?.parks?.id).filter(Boolean)).size,
+    coasters: credits.filter(c => c.rides?.category === 'roller_coaster').length
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        {Array.from({ length: 6 }, (_, i) => (
+          <Card key={i} className="animate-pulse">
+            <CardContent className="p-6">
+              <div className="h-32 bg-muted rounded"></div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Statistics */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.totalRides}</div>
+            <div className="text-sm text-muted-foreground">Total Rides</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.uniqueCredits}</div>
+            <div className="text-sm text-muted-foreground">Unique Credits</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.parksVisited}</div>
+            <div className="text-sm text-muted-foreground">Parks Visited</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.coasters}</div>
+            <div className="text-sm text-muted-foreground">Coasters</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Controls */}
+      <div className="flex flex-wrap gap-4 items-center justify-between">
+        <div className="flex gap-2">
+          <Button onClick={() => setIsAddDialogOpen(true)}>
+            <Plus className="w-4 h-4 mr-2" />
+            Add Credit
+          </Button>
+        </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" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date">Most Recent</SelectItem>
+              <SelectItem value="count">Most Ridden</SelectItem>
+              <SelectItem value="name">Ride Name</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex border rounded-md">
+            <Button
+              variant={viewMode === 'grid' ? 'default' : 'ghost'}
+              size="icon"
+              onClick={() => setViewMode('grid')}
+            >
+              <LayoutGrid className="w-4 h-4" />
+            </Button>
+            <Button
+              variant={viewMode === 'list' ? 'default' : 'ghost'}
+              size="icon"
+              onClick={() => setViewMode('list')}
+            >
+              <List className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Credits Display */}
+      {credits.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>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className={viewMode === 'grid' 
+          ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
+          : 'space-y-4'
+        }>
+          {credits.map((credit) => (
+            <RideCreditCard
+              key={credit.id}
+              credit={credit}
+              viewMode={viewMode}
+              onUpdate={handleCreditUpdated}
+              onDelete={() => handleCreditDeleted(credit.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Add Credit Dialog */}
+      <AddRideCreditDialog
+        userId={userId}
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        onSuccess={handleCreditAdded}
+      />
+    </div>
+  );
+}

src/components/profile/UserReviewsList.tsx

@@ -0,0 +1,321 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Star, Calendar, MapPin, Edit, Trash2, ThumbsUp } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { StarRating } from '@/components/reviews/StarRating';
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router-dom';
+import { toast } from 'sonner';
+import { getErrorMessage } from '@/lib/errorHandler';
+
+interface ReviewWithEntity {
+  id: string;
+  rating: number;
+  title: string | null;
+  content: string | null;
+  visit_date: string | null;
+  wait_time_minutes: number | null;
+  helpful_votes: number;
+  moderation_status: string;
+  created_at: string;
+  parks?: {
+    id: string;
+    name: string;
+    slug: string;
+  } | null;
+  rides?: {
+    id: string;
+    name: string;
+    slug: string;
+    parks?: {
+      name: string;
+      slug: string;
+    } | null;
+  } | null;
+}
+
+interface UserReviewsListProps {
+  userId: string;
+  reviewCount: number;
+}
+
+export function UserReviewsList({ userId, reviewCount }: UserReviewsListProps) {
+  const [reviews, setReviews] = useState<ReviewWithEntity[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState<'all' | 'parks' | 'rides'>('all');
+  const [sortBy, setSortBy] = useState<'date' | 'rating'>('date');
+
+  useEffect(() => {
+    fetchReviews();
+  }, [userId, filter, sortBy]);
+
+  const fetchReviews = async () => {
+    try {
+      setLoading(true);
+      let query = supabase
+        .from('reviews')
+        .select(`
+          id,
+          rating,
+          title,
+          content,
+          visit_date,
+          wait_time_minutes,
+          helpful_votes,
+          moderation_status,
+          created_at,
+          parks:park_id (id, name, slug),
+          rides:ride_id (
+            id,
+            name,
+            slug,
+            parks:park_id (name, slug)
+          )
+        `)
+        .eq('user_id', userId);
+
+      if (filter === 'parks') {
+        query = query.not('park_id', 'is', null);
+      } else if (filter === 'rides') {
+        query = query.not('ride_id', 'is', null);
+      }
+
+      if (sortBy === 'date') {
+        query = query.order('created_at', { ascending: false });
+      } else {
+        query = query.order('rating', { ascending: false });
+      }
+
+      const { data, error } = await query;
+
+      if (error) throw error;
+      setReviews(data || []);
+    } catch (error) {
+      console.error('Error fetching reviews:', error);
+      toast.error(getErrorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <Badge variant="default">Approved</Badge>;
+      case 'pending':
+        return <Badge variant="secondary">Pending Review</Badge>;
+      case 'rejected':
+        return <Badge variant="destructive">Rejected</Badge>;
+      default:
+        return null;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        {Array.from({ length: 3 }, (_, i) => (
+          <Card key={i} className="animate-pulse">
+            <CardContent className="p-6">
+              <div className="space-y-3">
+                <div className="h-4 bg-muted rounded w-1/4"></div>
+                <div className="h-4 bg-muted rounded w-1/6"></div>
+                <div className="h-20 bg-muted rounded"></div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  if (reviewCount === 0) {
+    return (
+      <Card>
+        <CardContent className="py-12">
+          <div className="text-center">
+            <Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-xl font-semibold mb-2">No Reviews Yet</h3>
+            <p className="text-muted-foreground mb-4">
+              Start sharing your park and ride experiences
+            </p>
+            <div className="flex gap-2 justify-center">
+              <Button asChild>
+                <Link to="/parks">Browse Parks</Link>
+              </Button>
+              <Button variant="outline" asChild>
+                <Link to="/rides">Browse Rides</Link>
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const stats = {
+    total: reviews.length,
+    parks: reviews.filter(r => r.parks).length,
+    rides: reviews.filter(r => r.rides).length,
+    avgRating: reviews.length > 0 
+      ? (reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length).toFixed(1)
+      : '0'
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Statistics */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.total}</div>
+            <div className="text-sm text-muted-foreground">Total Reviews</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.parks}</div>
+            <div className="text-sm text-muted-foreground">Park Reviews</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold">{stats.rides}</div>
+            <div className="text-sm text-muted-foreground">Ride Reviews</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-2xl font-bold flex items-center gap-1">
+              <Star className="w-5 h-5 fill-primary text-primary" />
+              {stats.avgRating}
+            </div>
+            <div className="text-sm text-muted-foreground">Avg Rating</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-4">
+        <Select value={filter} onValueChange={(value) => setFilter(value as typeof filter)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Filter by type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Reviews</SelectItem>
+            <SelectItem value="parks">Parks Only</SelectItem>
+            <SelectItem value="rides">Rides Only</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={sortBy} onValueChange={(value) => setSortBy(value as typeof sortBy)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Sort by" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="date">Most Recent</SelectItem>
+            <SelectItem value="rating">Highest Rated</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Reviews List */}
+      <div className="space-y-4">
+        {reviews.map((review) => {
+          const entityName = review.parks?.name || review.rides?.name || 'Unknown';
+          const entitySlug = review.parks?.slug || review.rides?.slug || '';
+          const entityType = review.parks ? 'park' : 'ride';
+          const entityPath = review.parks 
+            ? `/parks/${entitySlug}` 
+            : review.rides 
+              ? `/parks/${review.rides.parks?.slug}/rides/${entitySlug}`
+              : '#';
+
+          return (
+            <Card key={review.id}>
+              <CardContent className="p-6">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <Link 
+                          to={entityPath}
+                          className="font-semibold hover:underline"
+                        >
+                          {entityName}
+                        </Link>
+                        <Badge variant="outline">
+                          {entityType === 'park' ? 'Park' : 'Ride'}
+                        </Badge>
+                        {getStatusBadge(review.moderation_status)}
+                      </div>
+                      {review.rides?.parks && (
+                        <Link 
+                          to={`/parks/${review.rides.parks.slug}`}
+                          className="text-sm text-muted-foreground hover:underline"
+                        >
+                          at {review.rides.parks.name}
+                        </Link>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <StarRating rating={review.rating} size="sm" />
+                      <span className="ml-1 text-sm font-medium">
+                        {review.rating}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Title */}
+                  {review.title && (
+                    <h4 className="font-medium">{review.title}</h4>
+                  )}
+
+                  {/* Content */}
+                  {review.content && (
+                    <p className="text-muted-foreground leading-relaxed">
+                      {review.content}
+                    </p>
+                  )}
+
+                  {/* Metadata */}
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                    <div className="flex items-center gap-1">
+                      <Calendar className="w-3 h-3" />
+                      {formatDate(review.created_at)}
+                    </div>
+                    {review.visit_date && (
+                      <div className="flex items-center gap-1">
+                        <MapPin className="w-3 h-3" />
+                        Visited {formatDate(review.visit_date)}
+                      </div>
+                    )}
+                    {review.wait_time_minutes && (
+                      <span>Wait: {review.wait_time_minutes} min</span>
+                    )}
+                    <div className="flex items-center gap-1">
+                      <ThumbsUp className="w-3 h-3" />
+                      {review.helpful_votes} helpful
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/pages/Profile.tsx

@@ -14,6 +14,9 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { useAuth } from '@/hooks/useAuth';
 import { useProfile } from '@/hooks/useProfile';
+import { UserReviewsList } from '@/components/profile/UserReviewsList';
+import { UserListManager } from '@/components/lists/UserListManager';
+import { RideCreditsManager } from '@/components/profile/RideCreditsManager';
 import { useUsernameValidation } from '@/hooks/useUsernameValidation';
 import { User, MapPin, Calendar, Star, Trophy, Settings, Camera, Edit3, Save, X, ArrowLeft, Check, AlertCircle, Loader2, UserX, FileText, Image } from 'lucide-react';
 import { Profile as ProfileType, ActivityEntry, ReviewActivity, SubmissionActivity, RankingActivity } from '@/types/database';
@@ -795,61 +798,15 @@ export default function Profile() {
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Reviews ({profile.review_count})</CardTitle>
-                <CardDescription>
-                  Parks and rides reviews
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="text-center py-12">
-                  <Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
-                  <h3 className="text-xl font-semibold mb-2">Reviews Coming Soon</h3>
-                  <p className="text-muted-foreground">
-                    User reviews and ratings will appear here
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
+            <UserReviewsList userId={profile.user_id} reviewCount={profile.review_count} />
           </TabsContent>
 
           <TabsContent value="lists" className="mt-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Rankings</CardTitle>
-                <CardDescription>Personal rankings of rides</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="text-center py-12">
-                  <Trophy className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
-                  <h3 className="text-xl font-semibold mb-2">Rankings Coming Soon</h3>
-                  <p className="text-muted-foreground">
-                    Create and share your favorite park and ride rankings
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
+            <UserListManager />
           </TabsContent>
 
           <TabsContent value="credits" className="mt-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Ride Credits</CardTitle>
-                <CardDescription>
-                  Track all the rides you've experienced
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="text-center py-12">
-                  <User className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
-                  <h3 className="text-xl font-semibold mb-2">Ride Credits Coming Soon</h3>
-                  <p className="text-muted-foreground">
-                    Log and track your ride experiences
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
+            <RideCreditsManager userId={profile.user_id} />
           </TabsContent>
         </Tabs>
       </main>

src/types/database.ts

@@ -281,6 +281,18 @@ export interface AuditLogEntry {
   created_at: string;
 }
 
+// User ride credit tracking
+export interface UserRideCredit {
+  id: string;
+  user_id: string;
+  ride_id: string;
+  first_ride_date?: string;
+  ride_count: number;
+  created_at: string;
+  updated_at: string;
+  rides?: Ride & { parks?: Park };
+}
+
 // Activity entry - discriminated union for different activity types
 export type ActivityEntry = 
   | ReviewActivity