feat: Implement type-safe company rides lists

src/App.tsx

@@ -18,6 +18,7 @@ import Manufacturers from "./pages/Manufacturers";
 import ManufacturerDetail from "./pages/ManufacturerDetail";
 import ManufacturerRides from "./pages/ManufacturerRides";
 import ManufacturerModels from "./pages/ManufacturerModels";
+import RideModelDetail from "./pages/RideModelDetail";
 import Designers from "./pages/Designers";
 import DesignerDetail from "./pages/DesignerDetail";
 import DesignerRides from "./pages/DesignerRides";
@@ -85,6 +86,7 @@ function AppContent() {
                 <Route path="/manufacturers/:slug" element={<ManufacturerDetail />} />
                 <Route path="/manufacturers/:manufacturerSlug/rides" element={<ManufacturerRides />} />
                 <Route path="/manufacturers/:manufacturerSlug/models" element={<ManufacturerModels />} />
+                <Route path="/manufacturers/:manufacturerSlug/models/:modelSlug" element={<RideModelDetail />} />
                 <Route path="/designers" element={<Designers />} />
                 <Route path="/designers/:slug" element={<DesignerDetail />} />
                 <Route path="/designers/:designerSlug/rides" element={<DesignerRides />} />

src/components/rides/RideModelCard.tsx

@@ -84,9 +84,9 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
           <Button 
             variant="ghost" 
             size="sm"
-            onClick={() => navigate(`/manufacturers/${manufacturerSlug}/rides?model=${model.slug}`)}
+            onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
           >
-            View Rides
+            View Details
           </Button>
         </div>
       </CardContent>

src/pages/DesignerRides.tsx

@@ -4,15 +4,21 @@ import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ArrowLeft, Filter, SlidersHorizontal, FerrisWheel } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { ArrowLeft, Filter, SlidersHorizontal, FerrisWheel, Plus } from 'lucide-react';
 import { Ride, Company } from '@/types/database';
+import { RideSubmissionData } from '@/types/submission-data';
 import { supabase } from '@/integrations/supabase/client';
 import { RideCard } from '@/components/rides/RideCard';
+import { RideForm } from '@/components/admin/RideForm';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from '@/hooks/use-toast';
 
 export default function DesignerRides() {
   const { designerSlug } = useParams<{ designerSlug: string }>();
   const navigate = useNavigate();
+  const { user } = useAuth();
   const [designer, setDesigner] = useState<Company | null>(null);
   const [rides, setRides] = useState<Ride[]>([]);
   const [loading, setLoading] = useState(true);
@@ -20,6 +26,7 @@ export default function DesignerRides() {
   const [sortBy, setSortBy] = useState('name');
   const [filterCategory, setFilterCategory] = useState('all');
   const [filterStatus, setFilterStatus] = useState('all');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   useEffect(() => {
     if (designerSlug) {
@@ -91,6 +98,37 @@ export default function DesignerRides() {
     ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const handleCreateSubmit = async (data: any) => {
+    try {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+
+      const submissionData = {
+        ...data,
+        designer_id: designer.id,
+      };
+
+      const { submitRideCreation } = await import('@/lib/entitySubmissionHelpers');
+      await submitRideCreation(submissionData, user.id);
+      
+      toast({
+        title: "Ride Submitted",
+        description: "Your ride submission has been sent for review."
+      });
+      
+      setIsCreateModalOpen(false);
+      fetchData();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to submit ride.",
+        variant: "destructive"
+      });
+    }
+  };
+
   const categories = [
     { value: 'all', label: 'All Categories' },
     { value: 'roller_coaster', label: 'Roller Coasters' },
@@ -157,10 +195,16 @@ export default function DesignerRides() {
         </div>
 
         <div className="mb-8">
-          <div className="flex items-center gap-3 mb-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
               <FerrisWheel className="w-8 h-8 text-primary" />
               <h1 className="text-4xl font-bold">Rides by {designer.name}</h1>
             </div>
+            <Button onClick={() => setIsCreateModalOpen(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Ride
+            </Button>
+          </div>
           <p className="text-lg text-muted-foreground mb-4">
             Explore all rides designed by {designer.name}
           </p>
@@ -232,7 +276,7 @@ export default function DesignerRides() {
         </div>
 
         {filteredRides.length > 0 ? (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
             {filteredRides.map((ride) => (
               <RideCard key={ride.id} ride={ride} showParkName={true} />
             ))}
@@ -247,6 +291,15 @@ export default function DesignerRides() {
           </div>
         )}
       </main>
+
+      <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <RideForm
+            onSubmit={handleCreateSubmit}
+            onCancel={() => setIsCreateModalOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/pages/ManufacturerModels.tsx

@@ -4,21 +4,28 @@ import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ArrowLeft, Filter, SlidersHorizontal, FerrisWheel } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { ArrowLeft, Filter, SlidersHorizontal, FerrisWheel, Plus } from 'lucide-react';
 import { RideModel, Company } from '@/types/database';
+import { RideModelSubmissionData } from '@/types/submission-data';
 import { supabase } from '@/integrations/supabase/client';
 import { RideModelCard } from '@/components/rides/RideModelCard';
+import { RideModelForm } from '@/components/admin/RideModelForm';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from '@/hooks/use-toast';
 
 export default function ManufacturerModels() {
   const { manufacturerSlug } = useParams<{ manufacturerSlug: string }>();
   const navigate = useNavigate();
+  const { user } = useAuth();
   const [manufacturer, setManufacturer] = useState<Company | null>(null);
   const [models, setModels] = useState<RideModel[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('name');
   const [filterCategory, setFilterCategory] = useState('all');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const fetchData = useCallback(async () => {
     try {
@@ -84,6 +91,36 @@ export default function ManufacturerModels() {
     model.description?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const handleCreateSubmit = async (data: any) => {
+    try {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+
+      // For now, just show a toast since ride model submission isn't implemented yet
+      toast({
+        title: "Coming Soon",
+        description: "Ride model submission is not yet available.",
+      });
+      return;
+      
+      toast({
+        title: "Ride Model Submitted",
+        description: "Your ride model submission has been sent for review."
+      });
+      
+      setIsCreateModalOpen(false);
+      fetchData();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to submit ride model.",
+        variant: "destructive"
+      });
+    }
+  };
+
   const categories = [
     { value: 'all', label: 'All Categories' },
     { value: 'roller_coaster', label: 'Roller Coasters' },
@@ -142,10 +179,16 @@ export default function ManufacturerModels() {
         </div>
 
         <div className="mb-8">
-          <div className="flex items-center gap-3 mb-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
               <FerrisWheel className="w-8 h-8 text-primary" />
               <h1 className="text-4xl font-bold">Models by {manufacturer.name}</h1>
             </div>
+            <Button onClick={() => setIsCreateModalOpen(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Ride Model
+            </Button>
+          </div>
           <p className="text-lg text-muted-foreground mb-4">
             Explore all ride models manufactured by {manufacturer.name}
           </p>
@@ -214,6 +257,16 @@ export default function ManufacturerModels() {
           </div>
         )}
       </main>
+
+      <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <RideModelForm
+            manufacturerName={manufacturer.name}
+            onSubmit={handleCreateSubmit}
+            onCancel={() => setIsCreateModalOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/pages/ManufacturerRides.tsx

@@ -4,15 +4,21 @@ import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ArrowLeft, Filter, SlidersHorizontal, FerrisWheel } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { ArrowLeft, Filter, SlidersHorizontal, FerrisWheel, Plus } from 'lucide-react';
 import { Ride, Company } from '@/types/database';
+import { RideSubmissionData } from '@/types/submission-data';
 import { supabase } from '@/integrations/supabase/client';
 import { RideCard } from '@/components/rides/RideCard';
+import { RideForm } from '@/components/admin/RideForm';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from '@/hooks/use-toast';
 
 export default function ManufacturerRides() {
   const { manufacturerSlug } = useParams<{ manufacturerSlug: string }>();
   const navigate = useNavigate();
+  const { user } = useAuth();
   const [manufacturer, setManufacturer] = useState<Company | null>(null);
   const [rides, setRides] = useState<Ride[]>([]);
   const [loading, setLoading] = useState(true);
@@ -20,6 +26,7 @@ export default function ManufacturerRides() {
   const [sortBy, setSortBy] = useState('name');
   const [filterCategory, setFilterCategory] = useState('all');
   const [filterStatus, setFilterStatus] = useState('all');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const fetchData = useCallback(async () => {
     try {
@@ -91,6 +98,37 @@ export default function ManufacturerRides() {
     ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const handleCreateSubmit = async (data: any) => {
+    try {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+
+      const submissionData = {
+        ...data,
+        manufacturer_id: manufacturer.id,
+      };
+
+      const { submitRideCreation } = await import('@/lib/entitySubmissionHelpers');
+      await submitRideCreation(submissionData, user.id);
+      
+      toast({
+        title: "Ride Submitted",
+        description: "Your ride submission has been sent for review."
+      });
+      
+      setIsCreateModalOpen(false);
+      fetchData();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to submit ride.",
+        variant: "destructive"
+      });
+    }
+  };
+
   const categories = [
     { value: 'all', label: 'All Categories' },
     { value: 'roller_coaster', label: 'Roller Coasters' },
@@ -157,10 +195,16 @@ export default function ManufacturerRides() {
         </div>
 
         <div className="mb-8">
-          <div className="flex items-center gap-3 mb-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
               <FerrisWheel className="w-8 h-8 text-primary" />
               <h1 className="text-4xl font-bold">Rides by {manufacturer.name}</h1>
             </div>
+            <Button onClick={() => setIsCreateModalOpen(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Ride
+            </Button>
+          </div>
           <p className="text-lg text-muted-foreground mb-4">
             Explore all rides manufactured by {manufacturer.name}
           </p>
@@ -232,7 +276,7 @@ export default function ManufacturerRides() {
         </div>
 
         {filteredRides.length > 0 ? (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
             {filteredRides.map((ride) => (
               <RideCard key={ride.id} ride={ride} showParkName={true} />
             ))}
@@ -247,6 +291,15 @@ export default function ManufacturerRides() {
           </div>
         )}
       </main>
+
+      <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <RideForm
+            onSubmit={handleCreateSubmit}
+            onCancel={() => setIsCreateModalOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/pages/RideModelDetail.tsx

@@ -0,0 +1,324 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Header } from '@/components/layout/Header';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ArrowLeft, FerrisWheel, Building2, Filter, SlidersHorizontal } from 'lucide-react';
+import { RideModel, Ride, Company } from '@/types/database';
+import { supabase } from '@/integrations/supabase/client';
+import { RideCard } from '@/components/rides/RideCard';
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
+
+export default function RideModelDetail() {
+  const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
+  const navigate = useNavigate();
+  const [model, setModel] = useState<RideModel | null>(null);
+  const [manufacturer, setManufacturer] = useState<Company | null>(null);
+  const [rides, setRides] = useState<Ride[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+  const [filterStatus, setFilterStatus] = useState('all');
+
+  const fetchData = useCallback(async () => {
+    try {
+      // Fetch manufacturer
+      const { data: manufacturerData, error: manufacturerError } = await supabase
+        .from('companies')
+        .select('*')
+        .eq('slug', manufacturerSlug)
+        .eq('company_type', 'manufacturer')
+        .maybeSingle();
+
+      if (manufacturerError) throw manufacturerError;
+      setManufacturer(manufacturerData);
+
+      if (manufacturerData) {
+        // Fetch ride model
+        const { data: modelData, error: modelError } = await supabase
+          .from('ride_models')
+          .select('*')
+          .eq('slug', modelSlug)
+          .eq('manufacturer_id', manufacturerData.id)
+          .maybeSingle();
+
+        if (modelError) throw modelError;
+        setModel(modelData as RideModel);
+
+        if (modelData) {
+          // Fetch rides using this model
+          let query = supabase
+            .from('rides')
+            .select(`
+              *, 
+              park:parks!inner(name, slug, location:locations(*)),
+              manufacturer:companies!rides_manufacturer_id_fkey(*)
+            `)
+            .eq('ride_model_id', modelData.id);
+
+          if (filterStatus !== 'all') {
+            query = query.eq('status', filterStatus);
+          }
+
+          switch (sortBy) {
+            case 'rating':
+              query = query.order('average_rating', { ascending: false });
+              break;
+            case 'speed':
+              query = query.order('max_speed_kmh', { ascending: false, nullsFirst: false });
+              break;
+            case 'height':
+              query = query.order('max_height_meters', { ascending: false, nullsFirst: false });
+              break;
+            case 'reviews':
+              query = query.order('review_count', { ascending: false });
+              break;
+            default:
+              query = query.order('name');
+          }
+
+          const { data: ridesData, error: ridesError } = await query;
+          if (ridesError) throw ridesError;
+          setRides(ridesData || []);
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [manufacturerSlug, modelSlug, sortBy, filterStatus]);
+
+  useEffect(() => {
+    if (manufacturerSlug && modelSlug) {
+      fetchData();
+    }
+  }, [manufacturerSlug, modelSlug, fetchData]);
+
+  const filteredRides = rides.filter(ride =>
+    ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const formatCategory = (category: string | null | undefined) => {
+    if (!category) return 'Unknown';
+    return category.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  const formatRideType = (type: string | null | undefined) => {
+    if (!type) return 'Unknown';
+    return type.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  const statusOptions = [
+    { value: 'all', label: 'All Status' },
+    { value: 'operating', label: 'Operating' },
+    { value: 'seasonal', label: 'Seasonal' },
+    { value: 'under_construction', label: 'Under Construction' },
+    { value: 'closed', label: 'Closed' }
+  ];
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="animate-pulse space-y-6">
+            <div className="h-12 bg-muted rounded w-1/3"></div>
+            <div className="h-64 bg-muted rounded"></div>
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[...Array(6)].map((_, i) => (
+                <div key={i} className="h-48 bg-muted rounded-lg"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!model || !manufacturer) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="text-center py-12">
+            <h1 className="text-2xl font-bold mb-4">Ride Model Not Found</h1>
+            <Button onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models`)}>
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back to Models
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const extendedModel = model as RideModel & { 
+    card_image_url?: string;
+    card_image_id?: string;
+    banner_image_url?: string;
+    banner_image_id?: string;
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main className="container mx-auto px-4 py-8">
+        <div className="mb-6">
+          <Button variant="ghost" onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models`)}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to {manufacturer.name} Models
+          </Button>
+        </div>
+
+        {/* Hero Section */}
+        <div className="mb-8">
+          {(extendedModel.banner_image_url || extendedModel.banner_image_id) && (
+            <div className="relative w-full h-64 mb-6 rounded-lg overflow-hidden">
+              <img 
+                src={extendedModel.banner_image_url || getCloudflareImageUrl(extendedModel.banner_image_id, 'banner')}
+                alt={model.name}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          )}
+
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <FerrisWheel className="w-8 h-8 text-primary" />
+                <h1 className="text-4xl font-bold">{model.name}</h1>
+              </div>
+              
+              <div className="flex items-center gap-2 mb-4">
+                <Building2 className="w-4 h-4 text-muted-foreground" />
+                <Button
+                  variant="link"
+                  className="p-0 h-auto text-lg"
+                  onClick={() => navigate(`/manufacturers/${manufacturerSlug}`)}
+                >
+                  {manufacturer.name}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2 mb-6">
+            <Badge variant="secondary" className="text-sm px-3 py-1">
+              {formatCategory(model.category)}
+            </Badge>
+            <Badge variant="outline" className="text-sm px-3 py-1">
+              {formatRideType(model.ride_type)}
+            </Badge>
+            <Badge variant="outline" className="text-sm px-3 py-1">
+              {rides.length} {rides.length === 1 ? 'ride' : 'rides'}
+            </Badge>
+          </div>
+        </div>
+
+        <Tabs defaultValue="overview" className="w-full">
+          <TabsList className="mb-6">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="space-y-6">
+            {model.description && (
+              <Card>
+                <CardContent className="pt-6">
+                  <h2 className="text-2xl font-semibold mb-4">About</h2>
+                  <p className="text-muted-foreground whitespace-pre-wrap">{model.description}</p>
+                </CardContent>
+              </Card>
+            )}
+
+            {(model as any).technical_specs && Object.keys((model as any).technical_specs).length > 0 && (
+              <Card>
+                <CardContent className="pt-6">
+                  <h2 className="text-2xl font-semibold mb-4">Technical Specifications</h2>
+                  <div className="grid md:grid-cols-2 gap-4">
+                    {Object.entries((model as any).technical_specs as Record<string, any>).map(([key, value]) => (
+                      <div key={key} className="flex justify-between py-2 border-b">
+                        <span className="font-medium capitalize">{key.replace(/_/g, ' ')}</span>
+                        <span className="text-muted-foreground">{String(value)}</span>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+
+          <TabsContent value="rides" className="space-y-6">
+            <div className="flex flex-col md:flex-row gap-4">
+              <div className="flex-1">
+                <AutocompleteSearch
+                  placeholder="Search rides by name or park..."
+                  types={['ride']}
+                  limit={8}
+                  onSearch={(query) => setSearchQuery(query)}
+                  showRecentSearches={false}
+                />
+              </div>
+              <div className="flex gap-2">
+                <Select value={sortBy} onValueChange={setSortBy}>
+                  <SelectTrigger className="w-[180px]">
+                    <SlidersHorizontal className="w-4 h-4 mr-2" />
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="name">Name A-Z</SelectItem>
+                    <SelectItem value="rating">Highest Rated</SelectItem>
+                    <SelectItem value="speed">Fastest</SelectItem>
+                    <SelectItem value="height">Tallest</SelectItem>
+                    <SelectItem value="reviews">Most Reviews</SelectItem>
+                  </SelectContent>
+                </Select>
+                
+                <Select value={filterStatus} onValueChange={setFilterStatus}>
+                  <SelectTrigger className="w-[140px]">
+                    <Filter className="w-4 h-4 mr-2" />
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {statusOptions.map(status => (
+                      <SelectItem key={status.value} value={status.value}>
+                        {status.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {filteredRides.length > 0 ? (
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                {filteredRides.map((ride) => (
+                  <RideCard key={ride.id} ride={ride} showParkName={true} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No rides found</h3>
+                <p className="text-muted-foreground">
+                  No rides match your search criteria
+                </p>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </main>
+    </div>
+  );
+}