Refactor: Add History Tab

src/pages/RideDetail.tsx

@@ -44,6 +44,9 @@ import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { VersionIndicator } from '@/components/versioning/VersionIndicator';
+import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
+import { FormerNamesSection } from '@/components/history/FormerNamesSection';
 
 export default function RideDetail() {
   const { parkSlug, rideSlug } = useParams<{ parkSlug: string; rideSlug: string }>();
@@ -379,11 +382,12 @@ export default function RideDetail() {
 
         {/* Main Content */}
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
+          <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="specs">Specifications</TabsTrigger>
             <TabsTrigger value="reviews">Reviews</TabsTrigger>
             <TabsTrigger value="photos">Photos</TabsTrigger>
+            <TabsTrigger value="history">History</TabsTrigger>
           </TabsList>
 
           <TabsContent value="overview" className="mt-6">
@@ -653,6 +657,51 @@ export default function RideDetail() {
               parentId={(ride as any).currentParkId}
             />
           </TabsContent>
+
+          <TabsContent value="history" className="mt-6">
+            <Tabs defaultValue="ride-history" className="w-full">
+              <TabsList className="w-full max-w-md">
+                <TabsTrigger value="ride-history">Ride History</TabsTrigger>
+                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="ride-history" className="mt-6 space-y-6">
+                {ride.name_history && ride.name_history.length > 0 && (
+                  <FormerNamesSection
+                    currentName={ride.name}
+                    formerNames={ride.name_history}
+                    entityType="ride"
+                  />
+                )}
+
+                <EntityHistoryTimeline
+                  events={[
+                    ...(ride.opening_date ? [{
+                      date: ride.opening_date,
+                      title: `${ride.name} Opened`,
+                      description: `${ride.name} opened to the public at ${ride.park.name}`,
+                      type: 'milestone' as const
+                    }] : []),
+                    ...(ride.closing_date ? [{
+                      date: ride.closing_date,
+                      title: `${ride.name} Closed`,
+                      description: `${ride.name} ceased operation`,
+                      type: 'status_change' as const
+                    }] : []),
+                  ]}
+                  entityName={ride.name}
+                />
+              </TabsContent>
+
+              <TabsContent value="version-history" className="mt-6">
+                <EntityVersionHistory
+                  entityType="ride"
+                  entityId={ride.id}
+                  entityName={ride.name}
+                />
+              </TabsContent>
+            </Tabs>
+          </TabsContent>
         </Tabs>
 
         {/* Edit Ride Modal */}