Fix: Add client-side validation

src/components/admin/ParkForm.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
-import { entitySchemas } from '@/lib/entityValidationSchemas';
+import { entitySchemas, validateRequiredFields } from '@/lib/entityValidationSchemas';
 import { validateSubmissionHandler } from '@/lib/entityFormValidation';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -17,7 +17,7 @@ import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-
 import { SlugField } from '@/components/ui/slug-field';
 import { toast } from '@/hooks/use-toast';
 import { handleError } from '@/lib/errorHandler';
-import { MapPin, Save, X, Plus } from 'lucide-react';
+import { MapPin, Save, X, Plus, AlertCircle } from 'lucide-react';
 import { toDateOnly, parseDateOnly, toDateWithPrecision } from '@/lib/dateUtils';
 import { Badge } from '@/components/ui/badge';
 import { Combobox } from '@/components/ui/combobox';
@@ -167,6 +167,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
     handleSubmit,
     setValue,
     watch,
+    trigger,
     formState: { errors }
   } = useForm<ParkFormData>({
     resolver: zodResolver(entitySchemas.park),
@@ -202,6 +203,20 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
   const handleFormSubmit = async (data: ParkFormData) => {
     setIsSubmitting(true);
     try {
+      // Pre-submission validation for required fields
+      const { valid, errors: validationErrors } = validateRequiredFields('park', data);
+      if (!valid) {
+        validationErrors.forEach(error => {
+          toast({
+            variant: 'destructive',
+            title: 'Missing Required Fields',
+            description: error
+          });
+        });
+        setIsSubmitting(false);
+        return;
+      }
+
       // CRITICAL: Block new photo uploads on edits
       if (isEditing && data.images?.uploaded) {
         const hasNewPhotos = data.images.uploaded.some(img => img.isLocal);
@@ -405,16 +420,29 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
 
           {/* Location */}
           <div className="space-y-2">
-            <Label>Location</Label>
+            <Label className="flex items-center gap-1">
+              Location
+              <span className="text-destructive">*</span>
+            </Label>
             <LocationSearch
               onLocationSelect={(location) => {
                 setValue('location', location);
+                // Manually trigger validation for the location field
+                trigger('location');
               }}
               initialLocationId={watch('location_id')}
             />
-            <p className="text-sm text-muted-foreground">
-              Search for the park's location using OpenStreetMap. Location will be created when submission is approved.
-            </p>
+            {errors.location && (
+              <p className="text-sm text-destructive flex items-center gap-1">
+                <AlertCircle className="w-4 h-4" />
+                {errors.location.message}
+              </p>
+            )}
+            {!errors.location && (
+              <p className="text-sm text-muted-foreground">
+                Search for the park's location using OpenStreetMap. Location will be created when submission is approved.
+              </p>
+            )}
           </div>
 
           {/* Operator & Property Owner Selection */}