Refactor History component

src/components/history/EntityHistoryTabs.tsx

@@ -0,0 +1,81 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { EntityHistoryTimeline, HistoryEvent } from './EntityHistoryTimeline';
+import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { FormerNamesSection } from './FormerNamesSection';
+import { RideNameHistory } from '@/types/database';
+
+interface EntityHistoryTabsProps {
+  entityType: 'park' | 'ride' | 'company';
+  entityId: string;
+  entityName: string;
+  events: HistoryEvent[];
+  formerNames?: RideNameHistory[];
+  currentName?: string;
+}
+
+const getHistoryLabel = (entityType: string) => {
+  switch (entityType) {
+    case 'park':
+      return 'Park History';
+    case 'ride':
+      return 'Ride History';
+    case 'company':
+      return 'Company History';
+    default:
+      return 'History';
+  }
+};
+
+const getHistoryValue = (entityType: string) => {
+  switch (entityType) {
+    case 'park':
+      return 'park-history';
+    case 'ride':
+      return 'ride-history';
+    case 'company':
+      return 'company-history';
+    default:
+      return 'entity-history';
+  }
+};
+
+export function EntityHistoryTabs({
+  entityType,
+  entityId,
+  entityName,
+  events,
+  formerNames,
+  currentName,
+}: EntityHistoryTabsProps) {
+  const historyValue = getHistoryValue(entityType);
+  const historyLabel = getHistoryLabel(entityType);
+
+  return (
+    <Tabs defaultValue={historyValue} className="w-full">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value={historyValue}>{historyLabel}</TabsTrigger>
+        <TabsTrigger value="version-history">Version History</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value={historyValue} className="mt-6 space-y-6">
+        {formerNames && formerNames.length > 0 && currentName && (
+          <FormerNamesSection
+            currentName={currentName}
+            formerNames={formerNames}
+            entityType={entityType}
+          />
+        )}
+
+        <EntityHistoryTimeline events={events} entityName={entityName} />
+      </TabsContent>
+
+      <TabsContent value="version-history" className="mt-6">
+        <EntityVersionHistory
+          entityType={entityType}
+          entityId={entityId}
+          entityName={entityName}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}

src/pages/DesignerDetail.tsx

@@ -16,9 +16,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyUpdate } from '@/lib/companyHelpers';
 import { VersionIndicator } from '@/components/versioning/VersionIndicator';
-import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
-import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
-import { FormerNamesSection } from '@/components/history/FormerNamesSection';
 
 export default function DesignerDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -276,34 +274,19 @@ export default function DesignerDetail() {
           </TabsContent>
 
           <TabsContent value="history" className="mt-6">
-            <Tabs defaultValue="company-history" className="w-full">
+            <EntityHistoryTabs
-              <TabsList className="w-full max-w-md">
+              entityType="company"
-                <TabsTrigger value="company-history">Company History</TabsTrigger>
+              entityId={designer.id}
-                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              entityName={designer.name}
-              </TabsList>
+              events={[
-
+                ...(designer.founded_year ? [{
-              <TabsContent value="company-history" className="mt-6 space-y-6">
+                  date: `${designer.founded_year}`,
-                <EntityHistoryTimeline
+                  title: `${designer.name} Founded`,
-                  events={[
+                  description: `${designer.name} was established`,
-                    ...(designer.founded_year ? [{
+                  type: 'milestone' as const
-                      date: `${designer.founded_year}`,
+                }] : []),
-                      title: `${designer.name} Founded`,
+              ]}
-                      description: `${designer.name} was established`,
+            />
-                      type: 'milestone' as const
-                    }] : []),
-                  ]}
-                  entityName={designer.name}
-                />
-              </TabsContent>
-
-              <TabsContent value="version-history" className="mt-6">
-                <EntityVersionHistory
-                  entityType="company"
-                  entityId={designer.id}
-                  entityName={designer.name}
-                />
-              </TabsContent>
-            </Tabs>
           </TabsContent>
         </Tabs>
       </main>

src/pages/ManufacturerDetail.tsx

@@ -16,9 +16,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyUpdate } from '@/lib/companyHelpers';
 import { VersionIndicator } from '@/components/versioning/VersionIndicator';
-import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
-import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
-import { FormerNamesSection } from '@/components/history/FormerNamesSection';
 
 export default function ManufacturerDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -298,34 +296,19 @@ export default function ManufacturerDetail() {
           </TabsContent>
 
           <TabsContent value="history" className="mt-6">
-            <Tabs defaultValue="company-history" className="w-full">
+            <EntityHistoryTabs
-              <TabsList className="w-full max-w-md">
+              entityType="company"
-                <TabsTrigger value="company-history">Company History</TabsTrigger>
+              entityId={manufacturer.id}
-                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              entityName={manufacturer.name}
-              </TabsList>
+              events={[
-
+                ...(manufacturer.founded_year ? [{
-              <TabsContent value="company-history" className="mt-6 space-y-6">
+                  date: `${manufacturer.founded_year}`,
-                <EntityHistoryTimeline
+                  title: `${manufacturer.name} Founded`,
-                  events={[
+                  description: `${manufacturer.name} was established`,
-                    ...(manufacturer.founded_year ? [{
+                  type: 'milestone' as const
-                      date: `${manufacturer.founded_year}`,
+                }] : []),
-                      title: `${manufacturer.name} Founded`,
+              ]}
-                      description: `${manufacturer.name} was established`,
+            />
-                      type: 'milestone' as const
-                    }] : []),
-                  ]}
-                  entityName={manufacturer.name}
-                />
-              </TabsContent>
-
-              <TabsContent value="version-history" className="mt-6">
-                <EntityVersionHistory
-                  entityType="company"
-                  entityId={manufacturer.id}
-                  entityName={manufacturer.name}
-                />
-              </TabsContent>
-            </Tabs>
           </TabsContent>
         </Tabs>
       </main>

src/pages/OperatorDetail.tsx

@@ -17,9 +17,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyUpdate } from '@/lib/companyHelpers';
 import { VersionIndicator } from '@/components/versioning/VersionIndicator';
-import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
-import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
-import { FormerNamesSection } from '@/components/history/FormerNamesSection';
 
 export default function OperatorDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -321,34 +319,19 @@ export default function OperatorDetail() {
           </TabsContent>
 
           <TabsContent value="history" className="mt-6">
-            <Tabs defaultValue="company-history" className="w-full">
+            <EntityHistoryTabs
-              <TabsList className="w-full max-w-md">
+              entityType="company"
-                <TabsTrigger value="company-history">Company History</TabsTrigger>
+              entityId={operator.id}
-                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              entityName={operator.name}
-              </TabsList>
+              events={[
-
+                ...(operator.founded_year ? [{
-              <TabsContent value="company-history" className="mt-6 space-y-6">
+                  date: `${operator.founded_year}`,
-                <EntityHistoryTimeline
+                  title: `${operator.name} Founded`,
-                  events={[
+                  description: `${operator.name} was established`,
-                    ...(operator.founded_year ? [{
+                  type: 'milestone' as const
-                      date: `${operator.founded_year}`,
+                }] : []),
-                      title: `${operator.name} Founded`,
+              ]}
-                      description: `${operator.name} was established`,
+            />
-                      type: 'milestone' as const
-                    }] : []),
-                  ]}
-                  entityName={operator.name}
-                />
-              </TabsContent>
-
-              <TabsContent value="version-history" className="mt-6">
-                <EntityVersionHistory
-                  entityType="company"
-                  entityId={operator.id}
-                  entityName={operator.name}
-                />
-              </TabsContent>
-            </Tabs>
           </TabsContent>
         </Tabs>
       </main>

src/pages/ParkDetail.tsx

@@ -21,9 +21,7 @@ import { toast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
 import { Edit } from 'lucide-react';
 import { VersionIndicator } from '@/components/versioning/VersionIndicator';
-import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
-import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
-import { FormerNamesSection } from '@/components/history/FormerNamesSection';
 
 export default function ParkDetail() {
   const {
@@ -593,40 +591,25 @@ export default function ParkDetail() {
           </TabsContent>
 
           <TabsContent value="history" className="mt-6">
-            <Tabs defaultValue="park-history" className="w-full">
+            <EntityHistoryTabs
-              <TabsList className="w-full max-w-md">
+              entityType="park"
-                <TabsTrigger value="park-history">Park History</TabsTrigger>
+              entityId={park.id}
-                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              entityName={park.name}
-              </TabsList>
+              events={[
-
+                ...(park.opening_date ? [{
-              <TabsContent value="park-history" className="mt-6 space-y-6">
+                  date: park.opening_date,
-                <EntityHistoryTimeline
+                  title: `${park.name} Opened`,
-                  events={[
+                  description: `${park.name} opened to the public`,
-                    ...(park.opening_date ? [{
+                  type: 'milestone' as const
-                      date: park.opening_date,
+                }] : []),
-                      title: `${park.name} Opened`,
+                ...(park.closing_date ? [{
-                      description: `${park.name} opened to the public`,
+                  date: park.closing_date,
-                      type: 'milestone' as const
+                  title: `${park.name} Closed`,
-                    }] : []),
+                  description: `${park.name} ceased operation`,
-                    ...(park.closing_date ? [{
+                  type: 'status_change' as const
-                      date: park.closing_date,
+                }] : []),
-                      title: `${park.name} Closed`,
+              ]}
-                      description: `${park.name} ceased operation`,
+            />
-                      type: 'status_change' as const
-                    }] : []),
-                  ]}
-                  entityName={park.name}
-                />
-              </TabsContent>
-
-              <TabsContent value="version-history" className="mt-6">
-                <EntityVersionHistory
-                  entityType="park"
-                  entityId={park.id}
-                  entityName={park.name}
-                />
-              </TabsContent>
-            </Tabs>
           </TabsContent>
         </Tabs>
 

src/pages/PropertyOwnerDetail.tsx

@@ -17,9 +17,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyUpdate } from '@/lib/companyHelpers';
 import { VersionIndicator } from '@/components/versioning/VersionIndicator';
-import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
+import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
-import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
-import { FormerNamesSection } from '@/components/history/FormerNamesSection';
 
 export default function PropertyOwnerDetail() {
   const { slug } = useParams<{ slug: string }>();
@@ -321,34 +319,19 @@ export default function PropertyOwnerDetail() {
           </TabsContent>
 
           <TabsContent value="history" className="mt-6">
-            <Tabs defaultValue="company-history" className="w-full">
+            <EntityHistoryTabs
-              <TabsList className="w-full max-w-md">
+              entityType="company"
-                <TabsTrigger value="company-history">Company History</TabsTrigger>
+              entityId={owner.id}
-                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              entityName={owner.name}
-              </TabsList>
+              events={[
-
+                ...(owner.founded_year ? [{
-              <TabsContent value="company-history" className="mt-6 space-y-6">
+                  date: `${owner.founded_year}`,
-                <EntityHistoryTimeline
+                  title: `${owner.name} Founded`,
-                  events={[
+                  description: `${owner.name} was established`,
-                    ...(owner.founded_year ? [{
+                  type: 'milestone' as const
-                      date: `${owner.founded_year}`,
+                }] : []),
-                      title: `${owner.name} Founded`,
+              ]}
-                      description: `${owner.name} was established`,
+            />
-                      type: 'milestone' as const
-                    }] : []),
-                  ]}
-                  entityName={owner.name}
-                />
-              </TabsContent>
-
-              <TabsContent value="version-history" className="mt-6">
-                <EntityVersionHistory
-                  entityType="company"
-                  entityId={owner.id}
-                  entityName={owner.name}
-                />
-              </TabsContent>
-            </Tabs>
           </TabsContent>
         </Tabs>
       </main>

src/pages/RideDetail.tsx

@@ -44,9 +44,7 @@ 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 { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
-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 }>();
@@ -661,48 +659,27 @@ export default function RideDetail() {
           </TabsContent>
 
           <TabsContent value="history" className="mt-6">
-            <Tabs defaultValue="ride-history" className="w-full">
+            <EntityHistoryTabs
-              <TabsList className="grid w-full grid-cols-2">
+              entityType="ride"
-                <TabsTrigger value="ride-history">Ride History</TabsTrigger>
+              entityId={ride.id}
-                <TabsTrigger value="version-history">Version History</TabsTrigger>
+              entityName={ride.name}
-              </TabsList>
+              currentName={ride.name}
-
+              formerNames={ride.name_history}
-              <TabsContent value="ride-history" className="mt-6 space-y-6">
+              events={[
-                {ride.name_history && ride.name_history.length > 0 && (
+                ...(ride.opening_date ? [{
-                  <FormerNamesSection
+                  date: ride.opening_date,
-                    currentName={ride.name}
+                  title: `${ride.name} Opened`,
-                    formerNames={ride.name_history}
+                  description: `${ride.name} opened to the public at ${ride.park.name}`,
-                    entityType="ride"
+                  type: 'milestone' as const
-                  />
+                }] : []),
-                )}
+                ...(ride.closing_date ? [{
-
+                  date: ride.closing_date,
-                <EntityHistoryTimeline
+                  title: `${ride.name} Closed`,
-                  events={[
+                  description: `${ride.name} ceased operation`,
-                    ...(ride.opening_date ? [{
+                  type: 'status_change' as const
-                      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>