Implement the plan

2025-12-22 09:11:13 -05:00 · 2025-10-16 13:26:05 +00:00
parent 866429aa40
commit 2106142150
6 changed files with 422 additions and 162 deletions
--- a/src/components/history/FormerNamesSection.tsx
+++ b/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) {
--- a/src/lib/entitySubmissionHelpers.ts
+++ b/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 ⚠️
 * 
--- a/src/pages/RideModelDetail.tsx
+++ b/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 { ArrowLeft, FerrisWheel, Building2, Filter, SlidersHorizontal } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+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';
-
-interface RideModelWithImages extends RideModel {
-  card_image_url?: string;
-  card_image_id?: string;
-  banner_image_url?: string;
-  banner_image_id?: string;
-  technical_specs?: Record<string, any>;
-}
+import { useAuthModal } from '@/hooks/useAuthModal';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from '@/hooks/use-toast';
+import { RideModelForm } from '@/components/admin/RideModelForm';
+import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
+import { VersionIndicator } from '@/components/versioning/VersionIndicator';
+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 [sortBy, setSortBy] = useState('name');
-  const [filterStatus, setFilterStatus] = useState('all');
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [statistics, setStatistics] = useState({ rideCount: 0, photoCount: 0 });

  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
-          let query = supabase
+          // Fetch rides using this model with proper joins
+          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 =>
-    ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const handleEditSubmit = async (data: any) => {
+    try {
+      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">
-              {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,66 +283,67 @@ export default function RideModelDetail() {
            )}
          </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>
+          <TabsContent value="rides">
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-2xl font-bold">Rides</h2>
+                  <Button 
+                    variant="outline" 
+                    onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${modelSlug}/rides`)}
+                  >
+                    View All Rides
+                  </Button>
+                </div>
                <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>
  );
-}
+}
--- a/src/pages/RideModelRides.tsx
+++ b/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";
-
-interface RideModel {
-  id: string;
-  name: string;
-  slug: string;
-  manufacturer_id: string;
-}
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+import { RideForm } from '@/components/admin/RideForm';
+import { useAuth } from '@/hooks/useAuth';
+import { useAuthModal } from '@/hooks/useAuthModal';
+import { toast } from '@/hooks/use-toast';
+import type { Ride, Company, RideModel } from "@/types/database";

 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(() => {
-    if (manufacturerSlug && modelSlug) {
-      fetchData();
-    }
-  }, [manufacturerSlug, modelSlug]);
-
-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      
@@ -61,23 +63,92 @@ export default function RideModelRides() {
        return;
      }

-      // Fetch rides for this model
-      const { data: ridesData, error: ridesError } = await supabase
+      // Enhanced query with filters and sort
+      let query = supabase
        .from("rides")
-        .select("*")
-        .eq("ride_model_id", modelData.id)
-        .order("name");
+        .select(`
+          *, 
+          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);
-      setRides(ridesData || []);
+      setModel(modelData as RideModel);
+      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">
-            {[...Array(6)].map((_, i) => (
+          <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(8)].map((_, i) => (
              <Skeleton key={i} className="h-64" />
            ))}
          </div>
@@ -121,26 +192,108 @@ export default function RideModelRides() {
        </Button>

        <div className="mb-8">
-          <h1 className="text-4xl font-bold mb-2">
-            {model.name} Installations
-          </h1>
-          <p className="text-muted-foreground">
-            All rides based on the {model.name} by {manufacturer.name}
+          <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">{model.name} Installations</h1>
+            </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 ? (
-          <p className="text-muted-foreground">
-            No rides found for this model.
-          </p>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {rides.map((ride) => (
-              <RideCard key={ride.id} ride={ride} />
+        <div className="mb-8 space-y-4">
+          <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={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>
    </>
  );
-}
+}
--- a/src/types/database.ts
+++ b/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 {
--- a/src/types/timeline.ts
+++ b/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';