Implement the plan

src/components/history/FormerNamesSection.tsx

@@ -13,7 +13,7 @@ interface FormerName {
 interface FormerNamesSectionProps {
   currentName: string;
   formerNames: FormerName[];
-  entityType: 'ride' | 'park' | 'company';
+  entityType: 'ride' | 'park' | 'company' | 'ride_model';
 }
 
 export function FormerNamesSection({ currentName, formerNames, entityType }: FormerNamesSectionProps) {

src/lib/entitySubmissionHelpers.ts

@@ -548,6 +548,81 @@ export async function submitRideModelCreation(
   return { submitted: true, submissionId: submissionData.id };
 }
 
+/**
+ * ⚠️ CRITICAL SECURITY PATTERN ⚠️
+ * 
+ * Submits a ride model update through the moderation queue.
+ * This is the ONLY correct way to update ride models.
+ */
+export async function submitRideModelUpdate(
+  rideModelId: string,
+  data: RideModelFormData,
+  userId: string
+): Promise<{ submitted: boolean; submissionId: string }> {
+  // Fetch existing ride model
+  const { data: existingModel, error: fetchError } = await supabase
+    .from('ride_models')
+    .select('*')
+    .eq('id', rideModelId)
+    .single();
+
+  if (fetchError) throw new Error(`Failed to fetch ride model: ${fetchError.message}`);
+  if (!existingModel) throw new Error('Ride model not found');
+
+  // Upload any pending local images first
+  let processedImages = data.images;
+  if (data.images?.uploaded && data.images.uploaded.length > 0) {
+    try {
+      const uploadedImages = await uploadPendingImages(data.images.uploaded);
+      processedImages = {
+        ...data.images,
+        uploaded: uploadedImages
+      };
+    } catch (error) {
+      console.error('Failed to upload images for ride model update:', error);
+      throw new Error('Failed to upload images. Please check your connection and try again.');
+    }
+  }
+
+  // Create the main submission record
+  const { data: submissionData, error: submissionError } = await supabase
+    .from('content_submissions')
+    .insert({
+      user_id: userId,
+      submission_type: 'ride_model',
+      content: {
+        action: 'edit',
+        ride_model_id: rideModelId
+      },
+      status: 'pending'
+    })
+    .select()
+    .single();
+
+  if (submissionError) throw submissionError;
+
+  // Create the submission item with actual ride model data
+  const { error: itemError } = await supabase
+    .from('submission_items')
+    .insert({
+      submission_id: submissionData.id,
+      item_type: 'ride_model',
+      action_type: 'edit',
+      item_data: {
+        ...data,
+        ride_model_id: rideModelId,
+        images: processedImages as unknown as Json
+      },
+      original_data: JSON.parse(JSON.stringify(existingModel)),
+      status: 'pending',
+      order_index: 0
+    });
+
+  if (itemError) throw itemError;
+
+  return { submitted: true, submissionId: submissionData.id };
+}
+
 /**
  * ⚠️ CRITICAL SECURITY PATTERN ⚠️
  * 

src/pages/RideModelDetail.tsx

@@ -5,32 +5,30 @@ 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 { Dialog, DialogContent } from '@/components/ui/dialog';
-import { ArrowLeft, FerrisWheel, Building2, Filter, SlidersHorizontal } from 'lucide-react';
+import { ArrowLeft, FerrisWheel, Building2, Edit } 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';
-
+import { useAuthModal } from '@/hooks/useAuthModal';
-interface RideModelWithImages extends RideModel {
+import { useAuth } from '@/hooks/useAuth';
-  card_image_url?: string;
+import { toast } from '@/hooks/use-toast';
-  card_image_id?: string;
+import { RideModelForm } from '@/components/admin/RideModelForm';
-  banner_image_url?: string;
+import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
-  banner_image_id?: string;
+import { VersionIndicator } from '@/components/versioning/VersionIndicator';
-  technical_specs?: Record<string, any>;
+import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
-}
 
 export default function RideModelDetail() {
   const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
   const navigate = useNavigate();
-  const [model, setModel] = useState<RideModelWithImages | null>(null);
+  const { user } = useAuth();
+  const { requireAuth } = useAuthModal();
+  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 [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [sortBy, setSortBy] = useState('name');
+  const [statistics, setStatistics] = useState({ rideCount: 0, photoCount: 0 });
-  const [filterStatus, setFilterStatus] = useState('all');
 
   const fetchData = useCallback(async () => {
     try {
@@ -55,43 +53,35 @@ export default function RideModelDetail() {
           .maybeSingle();
 
         if (modelError) throw modelError;
-        setModel(modelData as RideModelWithImages);
+        setModel(modelData as RideModel);
 
         if (modelData) {
-          // Fetch rides using this model
+          // Fetch rides using this model with proper joins
-          let query = supabase
+          const { data: ridesData, error: ridesError } = await supabase
             .from('rides')
             .select(`
               *, 
               park:parks!inner(name, slug, location:locations(*)),
-              manufacturer:companies!rides_manufacturer_id_fkey(*)
+              manufacturer:companies!rides_manufacturer_id_fkey(*),
+              ride_model:ride_models(id, name, slug, manufacturer_id, category)
             `)
-            .eq('ride_model_id', modelData.id);
+            .eq('ride_model_id', modelData.id)
+            .order('name');
 
-          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 || []);
+          setRides(ridesData as Ride[] || []);
+
+          // Fetch statistics
+          const { count: photoCount } = await supabase
+            .from('photos')
+            .select('*', { count: 'exact', head: true })
+            .eq('entity_type', 'ride_model')
+            .eq('entity_id', modelData.id);
+
+          setStatistics({
+            rideCount: ridesData?.length || 0,
+            photoCount: photoCount || 0
+          });
         }
       }
     } catch (error) {
@@ -99,7 +89,7 @@ export default function RideModelDetail() {
     } finally {
       setLoading(false);
     }
-  }, [manufacturerSlug, modelSlug, sortBy, filterStatus]);
+  }, [manufacturerSlug, modelSlug]);
 
   useEffect(() => {
     if (manufacturerSlug && modelSlug) {
@@ -107,10 +97,33 @@ export default function RideModelDetail() {
     }
   }, [manufacturerSlug, modelSlug, fetchData]);
 
-  const filteredRides = rides.filter(ride =>
+  const handleEditSubmit = async (data: any) => {
-    ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    try {
-    ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
+      if (!user || !model) return;
-  );
+
+      const submissionData = {
+        ...data,
+        manufacturer_id: model.manufacturer_id,
+      };
+
+      const { submitRideModelUpdate } = await import('@/lib/entitySubmissionHelpers');
+      await submitRideModelUpdate(model.id, submissionData, user.id);
+      
+      toast({
+        title: "Ride Model Updated",
+        description: "Your changes have been submitted for review."
+      });
+      
+      setIsEditModalOpen(false);
+      fetchData();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to update ride model.",
+        variant: "destructive"
+      });
+    }
+  };
 
   const formatCategory = (category: string | null | undefined) => {
     if (!category) return 'Unknown';
@@ -126,14 +139,6 @@ export default function RideModelDetail() {
     ).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">
@@ -175,11 +180,19 @@ export default function RideModelDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8">
-        <div className="mb-6">
+        <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models`)}>
             <ArrowLeft className="w-4 h-4 mr-2" />
             Back to {manufacturer.name} Models
           </Button>
+          
+          <Button 
+            variant="outline"
+            onClick={() => requireAuth(() => setIsEditModalOpen(true), "Sign in to edit this ride model")}
+          >
+            <Edit className="w-4 h-4 mr-2" />
+            Edit Model
+          </Button>
         </div>
 
         {/* Hero Section */}
@@ -199,6 +212,12 @@ export default function RideModelDetail() {
               <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>
+                <VersionIndicator 
+                  entityType="ride_model"
+                  entityId={model.id}
+                  entityName={model.name}
+                  compact
+                />
               </div>
               
               <div className="flex items-center gap-2 mb-4">
@@ -218,11 +237,13 @@ export default function RideModelDetail() {
             <Badge variant="secondary" className="text-sm px-3 py-1">
               {formatCategory(model.category)}
             </Badge>
+            {model.ride_type && (
               <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'}
+              {statistics.rideCount} {statistics.rideCount === 1 ? 'ride' : 'rides'}
             </Badge>
           </div>
         </div>
@@ -230,7 +251,9 @@ export default function RideModelDetail() {
         <Tabs defaultValue="overview" className="w-full">
           <TabsList className="mb-6">
             <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
+            <TabsTrigger value="rides">Rides ({statistics.rideCount})</TabsTrigger>
+            <TabsTrigger value="photos">Photos ({statistics.photoCount})</TabsTrigger>
+            <TabsTrigger value="history">History</TabsTrigger>
           </TabsList>
 
           <TabsContent value="overview" className="space-y-6">
@@ -260,65 +283,66 @@ export default function RideModelDetail() {
             )}
           </TabsContent>
 
-          <TabsContent value="rides" className="space-y-6">
+          <TabsContent value="rides">
-            <div className="flex flex-col md:flex-row gap-4">
+            <Card>
-              <div className="flex-1">
+              <CardContent className="p-6">
-                <AutocompleteSearch
+                <div className="flex items-center justify-between mb-4">
-                  placeholder="Search rides by name or park..."
+                  <h2 className="text-2xl font-bold">Rides</h2>
-                  types={['ride']}
+                  <Button 
-                  limit={8}
+                    variant="outline" 
-                  onSearch={(query) => setSearchQuery(query)}
+                    onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${modelSlug}/rides`)}
-                  showRecentSearches={false}
+                  >
-                />
+                    View All Rides
+                  </Button>
                 </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
+                  View all {statistics.rideCount} rides using the {model.name} model
                 </p>
-              </div>
+              </CardContent>
-            )}
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="photos">
+            <ManufacturerPhotoGallery 
+              manufacturerId={model.id}
+              manufacturerName={model.name}
+            />
+          </TabsContent>
+
+          <TabsContent value="history">
+            <Card>
+              <CardContent className="pt-6">
+                <EntityVersionHistory
+                  entityType="ride_model"
+                  entityId={model.id}
+                  entityName={model.name}
+                />
+              </CardContent>
+            </Card>
           </TabsContent>
         </Tabs>
+
+        {/* Edit Modal */}
+        <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <RideModelForm
+              manufacturerName={manufacturer.name}
+              manufacturerId={manufacturer.id}
+              initialData={{
+                id: model.id,
+                name: model.name,
+                slug: model.slug,
+                category: model.category,
+                ride_type: model.ride_type,
+                description: model.description,
+                banner_image_url: model.banner_image_url,
+                card_image_url: model.card_image_url,
+              }}
+              onSubmit={handleEditSubmit}
+              onCancel={() => setIsEditModalOpen(false)}
+            />
+          </DialogContent>
+        </Dialog>
       </main>
     </div>
   );

src/pages/RideModelRides.tsx

@@ -1,35 +1,37 @@
 import { useParams, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { supabase } from "@/integrations/supabase/client";
 import { Header } from "@/components/layout/Header";
 import { RideCard } from "@/components/rides/RideCard";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { ArrowLeft, Filter, SlidersHorizontal, Plus, FerrisWheel } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { Ride, Company } from "@/types/database";
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
-
+import { RideForm } from '@/components/admin/RideForm';
-interface RideModel {
+import { useAuth } from '@/hooks/useAuth';
-  id: string;
+import { useAuthModal } from '@/hooks/useAuthModal';
-  name: string;
+import { toast } from '@/hooks/use-toast';
-  slug: string;
+import type { Ride, Company, RideModel } from "@/types/database";
-  manufacturer_id: string;
-}
 
 export default function RideModelRides() {
   const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
   const navigate = useNavigate();
+  const { user } = useAuth();
+  const { requireAuth } = useAuthModal();
   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 [filterCategory, setFilterCategory] = useState('all');
+  const [filterStatus, setFilterStatus] = useState('all');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  useEffect(() => {
+  const fetchData = useCallback(async () => {
-    if (manufacturerSlug && modelSlug) {
-      fetchData();
-    }
-  }, [manufacturerSlug, modelSlug]);
-
-  const fetchData = async () => {
     try {
       setLoading(true);
       
@@ -61,23 +63,92 @@ export default function RideModelRides() {
         return;
       }
 
-      // Fetch rides for this model
+      // Enhanced query with filters and sort
-      const { data: ridesData, error: ridesError } = await supabase
+      let query = supabase
         .from("rides")
-        .select("*")
+        .select(`
-        .eq("ride_model_id", modelData.id)
+          *, 
-        .order("name");
+          park:parks!inner(name, slug, location:locations(*)),
+          manufacturer:companies!rides_manufacturer_id_fkey(*),
+          ride_model:ride_models(id, name, slug, manufacturer_id, category)
+        `)
+        .eq("ride_model_id", modelData.id);
 
+      if (filterCategory !== 'all') {
+        query = query.eq('category', filterCategory);
+      }
+      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('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;
 
       setManufacturer(manufacturerData);
-      setModel(modelData);
+      setModel(modelData as RideModel);
-      setRides(ridesData || []);
+      setRides(ridesData as Ride[] || []);
     } catch (error) {
       console.error("Error fetching data:", error);
     } finally {
       setLoading(false);
     }
+  }, [manufacturerSlug, modelSlug, sortBy, filterCategory, 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 handleCreateSubmit = async (data: any) => {
+    try {
+      if (!user || !model) return;
+
+      const submissionData = {
+        ...data,
+        ride_model_id: model.id,
+        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"
+      });
+    }
   };
 
   if (loading) {
@@ -86,8 +157,8 @@ export default function RideModelRides() {
         <Header />
         <div className="container mx-auto px-4 py-8">
           <Skeleton className="h-8 w-64 mb-4" />
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
-            {[...Array(6)].map((_, i) => (
+            {[...Array(8)].map((_, i) => (
               <Skeleton key={i} className="h-64" />
             ))}
           </div>
@@ -121,25 +192,107 @@ export default function RideModelRides() {
         </Button>
 
         <div className="mb-8">
-          <h1 className="text-4xl font-bold mb-2">
+          <div className="flex items-center justify-between mb-4">
-            {model.name} Installations
+            <div className="flex items-center gap-3">
-          </h1>
+              <FerrisWheel className="w-8 h-8 text-primary" />
-          <p className="text-muted-foreground">
+              <h1 className="text-4xl font-bold">{model.name} Installations</h1>
-            All rides based on the {model.name} by {manufacturer.name}
+            </div>
+            <Button 
+              onClick={() => requireAuth(() => setIsCreateModalOpen(true), "Sign in to add a new ride")}
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              Add Ride
+            </Button>
+          </div>
+          <p className="text-lg text-muted-foreground mb-4">
+            All rides using the {model.name} by {manufacturer.name}
           </p>
+          <Badge variant="secondary">{filteredRides.length} rides</Badge>
         </div>
 
-        {rides.length === 0 ? (
+        <div className="mb-8 space-y-4">
-          <p className="text-muted-foreground">
+          <div className="flex flex-col md:flex-row gap-4">
-            No rides found for this model.
+            <div className="flex-1">
-          </p>
+              <AutocompleteSearch
-        ) : (
+                placeholder="Search rides by name or park..."
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                types={['ride']}
-            {rides.map((ride) => (
+                limit={8}
-              <RideCard key={ride.id} ride={ride} />
+                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={filterCategory} onValueChange={setFilterCategory}>
+                <SelectTrigger className="w-[160px]">
+                  <Filter className="w-4 h-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Categories</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>
+                  <SelectItem value="kiddie_ride">Kiddie Rides</SelectItem>
+                  <SelectItem value="transportation">Transportation</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={filterStatus} onValueChange={setFilterStatus}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Status</SelectItem>
+                  <SelectItem value="operating">Operating</SelectItem>
+                  <SelectItem value="seasonal">Seasonal</SelectItem>
+                  <SelectItem value="under_construction">Under Construction</SelectItem>
+                  <SelectItem value="closed">Closed</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </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 for the {model.name}
+            </p>
+          </div>
         )}
+
+        {/* Create Modal */}
+        <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/types/database.ts

@@ -113,11 +113,19 @@ export interface RideModel {
   id: string;
   name: string;
   slug: string;
+  manufacturer_id: string;
   manufacturer?: Company;
   category: 'roller_coaster' | 'flat_ride' | 'water_ride' | 'dark_ride' | 'kiddie_ride' | 'transportation';
-  ride_type: string;
+  ride_type?: string;
   description?: string;
+  technical_specs?: Record<string, any>;
   technical_specifications?: RideModelTechnicalSpec[];
+  banner_image_url?: string;
+  banner_image_id?: string;
+  card_image_url?: string;
+  card_image_id?: string;
+  created_at?: string;
+  updated_at?: string;
 }
 
 export interface Ride {

src/types/timeline.ts

@@ -20,7 +20,7 @@ export type TimelineEventType =
   | 'milestone'
   | 'other';
 
-export type EntityType = 'park' | 'ride' | 'company';
+export type EntityType = 'park' | 'ride' | 'company' | 'ride_model';
 
 export type DatePrecision = 'day' | 'month' | 'year';