feat: Implement form, moderation, and testing phases

src/components/admin/RideModelForm.tsx

@@ -1,9 +1,11 @@
-import { useState } from 'react';
+import { useState, useReducer } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { Button } from '@/components/ui/button';
 import type { RideModelTechnicalSpec } from '@/types/database';
+import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
+import { getErrorMessage } from '@/lib/errorHandler';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
@@ -75,6 +77,10 @@ export function RideModelForm({
     unit?: string;
     display_order: number;
   }[]>([]);
+  const [submissionState, dispatch] = useReducer(submissionReducer, { 
+    status: 'draft' as const, 
+    data: initialData || {} 
+  });
   
   const {
     register,
@@ -96,11 +102,30 @@ export function RideModelForm({
 
 
   const handleFormSubmit = (data: RideModelFormData) => {
-    // Include relational technical specs with extended type
-    onSubmit({
-      ...data,
-      _technical_specifications: technicalSpecs
-    });
+    if (!canSubmit(submissionState)) {
+      return;
+    }
+    
+    dispatch({ type: 'VALIDATE', payload: data });
+    
+    try {
+      dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
+      
+      // Include relational technical specs with extended type
+      onSubmit({
+        ...data,
+        _technical_specifications: technicalSpecs
+      });
+      
+      dispatch({ type: 'SUBMISSION_COMPLETE' });
+    } catch (error: unknown) {
+      const errorMessage = getErrorMessage(error);
+      if (errorMessage.includes('validation')) {
+        dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
+      } else {
+        dispatch({ type: 'RESET' });
+      }
+    }
   };
 
   return (
@@ -219,13 +244,21 @@ export function RideModelForm({
 
           {/* Actions */}
           <div className="flex gap-3 justify-end">
-            <Button type="button" variant="outline" onClick={onCancel}>
+            <Button 
+              type="button" 
+              variant="outline" 
+              onClick={onCancel}
+              disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
+            >
               <X className="w-4 h-4 mr-2" />
               Cancel
             </Button>
-            <Button type="submit">
+            <Button 
+              type="submit"
+              disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
+            >
               <Save className="w-4 h-4 mr-2" />
-              Save Model
+              {(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : 'Save Model'}
             </Button>
           </div>
         </form>