Add advanced form editors

src/components/admin/RideForm.tsx

@@ -21,6 +21,9 @@ import { useManufacturers, useRideModels } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
 import { ManufacturerForm } from './ManufacturerForm';
 import { RideModelForm } from './RideModelForm';
+import { TechnicalSpecsEditor } from './editors/TechnicalSpecsEditor';
+import { CoasterStatsEditor } from './editors/CoasterStatsEditor';
+import { FormerNamesEditor } from './editors/FormerNamesEditor';
 import { 
   convertSpeed, 
   convertDistance, 
@@ -144,6 +147,11 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
   const [isManufacturerModalOpen, setIsManufacturerModalOpen] = useState(false);
   const [isModelModalOpen, setIsModelModalOpen] = useState(false);
 
+  // Advanced editor state
+  const [technicalSpecs, setTechnicalSpecs] = useState<any[]>([]);
+  const [coasterStats, setCoasterStats] = useState<any[]>([]);
+  const [formerNames, setFormerNames] = useState<any[]>([]);
+
   // Fetch data
   const { manufacturers, loading: manufacturersLoading } = useManufacturers();
   const { rideModels, loading: modelsLoading } = useRideModels(selectedManufacturerId);
@@ -221,12 +229,20 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
           : undefined,
         drop_height_meters: data.drop_height_meters 
           ? convertDistanceToMetric(data.drop_height_meters, measurementSystem) 
-          : undefined
+          : undefined,
+        // Add structured data from advanced editors
+        technical_specs: JSON.stringify(technicalSpecs),
+        coaster_stats: JSON.stringify(coasterStats),
+        former_names: JSON.stringify(formerNames)
       };
 
       // Build composite submission if new entities were created
       const submissionContent: any = {
         ride: metricData,
+        // Include structured data for relational tables
+        technical_specifications: technicalSpecs,
+        coaster_statistics: coasterStats,
+        name_history: formerNames
       };
       
       // Add new manufacturer if created
@@ -706,6 +722,30 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
             </div>
           </div>
 
+          {/* Advanced Editors */}
+          <div className="space-y-6 border-t pt-6">
+            <TechnicalSpecsEditor
+              specs={technicalSpecs}
+              onChange={setTechnicalSpecs}
+              commonSpecs={['Track Material', 'Manufacturer', 'Train Type', 'Restraint System', 'Block Sections']}
+            />
+
+            {selectedCategory === 'roller_coaster' && (
+              <>
+                <CoasterStatsEditor
+                  stats={coasterStats}
+                  onChange={setCoasterStats}
+                />
+
+                <FormerNamesEditor
+                  names={formerNames}
+                  onChange={setFormerNames}
+                  currentName={watch('name') || 'Unnamed Ride'}
+                />
+              </>
+            )}
+          </div>
+
           {/* Images */}
           <EntityMultiImageUploader
             mode={isEditing ? 'edit' : 'create'}

src/components/admin/RideModelForm.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
@@ -12,6 +13,7 @@ import { SlugField } from '@/components/ui/slug-field';
 import { Layers, Save, X } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
+import { TechnicalSpecsEditor } from './editors/TechnicalSpecsEditor';
 
 const rideModelSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -60,6 +62,7 @@ export function RideModelForm({
   initialData 
 }: RideModelFormProps) {
   const { isModerator } = useUserRole();
+  const [technicalSpecs, setTechnicalSpecs] = useState<any[]>([]);
   
   const {
     register,
@@ -166,15 +169,20 @@ export function RideModelForm({
           </div>
 
           {/* Technical Specs */}
-          <div className="space-y-2">
-            <Label htmlFor="technical_specs">Technical Specifications</Label>
-            <Textarea
-              id="technical_specs"
-              {...register('technical_specs')}
-              placeholder="Enter technical specifications (e.g., track length, inversions, typical speed range)..."
-              rows={3}
+          <div className="border-t pt-6">
+            <TechnicalSpecsEditor
+              specs={technicalSpecs}
+              onChange={setTechnicalSpecs}
+              commonSpecs={[
+                'Typical Track Length',
+                'Typical Height',
+                'Typical Speed',
+                'Standard Train Configuration',
+                'Typical Capacity',
+                'Typical Duration'
+              ]}
             />
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-muted-foreground mt-2">
               General specifications for this model that apply to all installations
             </p>
           </div>