Fix: Correct route names in App.tsx

src/App.tsx

@@ -17,6 +17,8 @@ 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 RideModelRides from "./pages/RideModelRides";
 import Designers from "./pages/Designers";
 import DesignerDetail from "./pages/DesignerDetail";
 import DesignerRides from "./pages/DesignerRides";

src/pages/RideModelRides.tsx

@@ -0,0 +1,146 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useEffect, useState } 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 { Skeleton } from "@/components/ui/skeleton";
+import type { Ride, Company } from "@/types/database";
+
+interface RideModel {
+  id: string;
+  name: string;
+  slug: string;
+  manufacturer_id: string;
+}
+
+export default function RideModelRides() {
+  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);
+
+  useEffect(() => {
+    if (manufacturerSlug && modelSlug) {
+      fetchData();
+    }
+  }, [manufacturerSlug, modelSlug]);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      
+      // Fetch manufacturer from companies table
+      const { data: manufacturerData, error: mfgError } = await supabase
+        .from("companies")
+        .select("*")
+        .eq("slug", manufacturerSlug)
+        .eq("company_type", "manufacturer")
+        .maybeSingle();
+
+      if (mfgError) throw mfgError;
+      if (!manufacturerData) {
+        setLoading(false);
+        return;
+      }
+
+      // 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;
+      if (!modelData) {
+        setLoading(false);
+        return;
+      }
+
+      // Fetch rides for this model
+      const { data: ridesData, error: ridesError } = await supabase
+        .from("rides")
+        .select("*")
+        .eq("ride_model_id", modelData.id)
+        .order("name");
+
+      if (ridesError) throw ridesError;
+
+      setManufacturer(manufacturerData);
+      setModel(modelData);
+      setRides(ridesData || []);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <>
+        <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) => (
+              <Skeleton key={i} className="h-64" />
+            ))}
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  if (!model || !manufacturer) {
+    return (
+      <>
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <p className="text-muted-foreground">Model not found</p>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <Button
+          variant="ghost"
+          onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${modelSlug}`)}
+          className="mb-6"
+        >
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back to {model.name}
+        </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}
+          </p>
+        </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>
+        )}
+      </div>
+    </>
+  );
+}